diff --git a/.changeset/ds-menu-sub-item-class.md b/.changeset/ds-menu-sub-item-class.md new file mode 100644 index 00000000000..cdd919d392e --- /dev/null +++ b/.changeset/ds-menu-sub-item-class.md @@ -0,0 +1,5 @@ +--- +"@hashintel/ds-components": patch +--- + +Allow `Menu` and `SelectableList` items that carry `subItems` to accept a `menuClassName` diff --git a/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts b/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts index 578e302ef3d..9eaabe0caf2 100644 --- a/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts +++ b/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts @@ -39,6 +39,11 @@ type StandardItem = ItemBase & } | { subItems: Array>; + /** + * Applied to this item's submenu content, composed with the list's + * own class, for styling that only that submenu should carry. + */ + menuClassName?: string; } >; diff --git a/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx b/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx index 42ab78aaf41..a302c79bedb 100644 --- a/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx +++ b/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx @@ -46,6 +46,7 @@ const NestedMenu = ({ subItems, body, className, + menuClassName, isSelected, ctx, }: { @@ -53,6 +54,7 @@ const NestedMenu = ({ subItems: Array>; body: React.ReactNode; className: string | undefined; + menuClassName: string | undefined; isSelected: boolean; ctx: RenderCtx; }) => { @@ -90,7 +92,7 @@ const NestedMenu = ({ onKeyDownCapture={(event) => handleLoopKeyDown(event, menu)} > handleCustomRowKeyDown(event, menu) } @@ -196,6 +198,7 @@ const ItemRow = ({ item, ctx }: { item: Item; ctx: RenderCtx }) => { subItems={item.subItems} body={body} className={classes.item} + menuClassName={item.menuClassName} isSelected={isSelected} ctx={ctx} /> diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx index 5552eb3a813..ec2992edf28 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx @@ -112,6 +112,17 @@ const canvasContainerStyle = css({ flexGrow: 1, }); +// `white-space` inherits down to the item text, whose `overflow: hidden; +// text-overflow: ellipsis` only elides on a non-wrapping line. `&&` outranks +// the menu's own max-height class, which ties on specificity. +const openSubmenuStyle = css({ + whiteSpace: "nowrap", + "&&": { + maxWidth: "[min(600px, 70vw)]", + maxHeight: "[min(800px, 80vh, var(--available-height, 100vh))]", + }, +}); + const isEmptySDCPN = (sdcpn: SDCPN) => sdcpn.places.length === 0 && sdcpn.transitions.length === 0 && @@ -323,6 +334,7 @@ export const EditorView = ({ { id: "open", text: "Open", + menuClassName: openSubmenuStyle, subItems: existingNets.map((net) => ({ id: `open-${net.netId}`, text: net.title,