@salt-ds/lab 1.0.0-alpha.96 → 1.0.0-alpha.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/css/salt-lab.css +1 -343
- package/dist-cjs/common-hooks/useSelection.js +6 -3
- package/dist-cjs/common-hooks/useSelection.js.map +1 -1
- package/dist-cjs/index.js +0 -28
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list/useList.js +7 -1
- package/dist-cjs/list/useList.js.map +1 -1
- package/dist-es/common-hooks/useSelection.js +6 -3
- package/dist-es/common-hooks/useSelection.js.map +1 -1
- package/dist-es/index.js +0 -14
- package/dist-es/index.js.map +1 -1
- package/dist-es/list/useList.js +7 -1
- package/dist-es/list/useList.js.map +1 -1
- package/dist-types/index.d.ts +0 -2
- package/package.json +2 -2
- package/dist-cjs/mega-menu/MegaMenu.js +0 -76
- package/dist-cjs/mega-menu/MegaMenu.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuActions.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuActions.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuActions.js +0 -33
- package/dist-cjs/mega-menu/MegaMenuActions.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuAside.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuAside.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuAside.js +0 -33
- package/dist-cjs/mega-menu/MegaMenuAside.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuContent.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuContent.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuContent.js +0 -25
- package/dist-cjs/mega-menu/MegaMenuContent.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuContext.js +0 -11
- package/dist-cjs/mega-menu/MegaMenuContext.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuGroup.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuGroup.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuGroup.js +0 -40
- package/dist-cjs/mega-menu/MegaMenuGroup.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuGroupContext.js +0 -17
- package/dist-cjs/mega-menu/MegaMenuGroupContext.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuGroupHeading.js +0 -39
- package/dist-cjs/mega-menu/MegaMenuGroupHeading.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuGroups.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuGroups.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuGroups.js +0 -25
- package/dist-cjs/mega-menu/MegaMenuGroups.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuList.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuList.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuList.js +0 -43
- package/dist-cjs/mega-menu/MegaMenuList.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuListItem.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuListItem.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuListItem.js +0 -45
- package/dist-cjs/mega-menu/MegaMenuListItem.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuPanel.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuPanel.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuPanel.js +0 -88
- package/dist-cjs/mega-menu/MegaMenuPanel.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuTrigger.js +0 -90
- package/dist-cjs/mega-menu/MegaMenuTrigger.js.map +0 -1
- package/dist-cjs/mega-menu/useMegaMenu.js +0 -15
- package/dist-cjs/mega-menu/useMegaMenu.js.map +0 -1
- package/dist-cjs/mega-menu/useMegaMenuNavigation.js +0 -282
- package/dist-cjs/mega-menu/useMegaMenuNavigation.js.map +0 -1
- package/dist-cjs/mega-menu/usePageMargin.js +0 -22
- package/dist-cjs/mega-menu/usePageMargin.js.map +0 -1
- package/dist-cjs/toolbar-next/ToolbarContentNext.css.js +0 -6
- package/dist-cjs/toolbar-next/ToolbarContentNext.css.js.map +0 -1
- package/dist-cjs/toolbar-next/ToolbarContentNext.js +0 -32
- package/dist-cjs/toolbar-next/ToolbarContentNext.js.map +0 -1
- package/dist-cjs/toolbar-next/ToolbarNext.css.js +0 -6
- package/dist-cjs/toolbar-next/ToolbarNext.css.js.map +0 -1
- package/dist-cjs/toolbar-next/ToolbarNext.js +0 -394
- package/dist-cjs/toolbar-next/ToolbarNext.js.map +0 -1
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js +0 -6
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js.map +0 -1
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.js +0 -706
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.js.map +0 -1
- package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +0 -165
- package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +0 -1
- package/dist-cjs/toolbar-next/TooltrayNext.css.js +0 -6
- package/dist-cjs/toolbar-next/TooltrayNext.css.js.map +0 -1
- package/dist-cjs/toolbar-next/TooltrayNext.js +0 -55
- package/dist-cjs/toolbar-next/TooltrayNext.js.map +0 -1
- package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js +0 -409
- package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js.map +0 -1
- package/dist-cjs/toolbar-next/toolbarNextUtils.js +0 -215
- package/dist-cjs/toolbar-next/toolbarNextUtils.js.map +0 -1
- package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js +0 -312
- package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js.map +0 -1
- package/dist-cjs/toolbar-next/useToolbarNextOverflow.js +0 -745
- package/dist-cjs/toolbar-next/useToolbarNextOverflow.js.map +0 -1
- package/dist-es/mega-menu/MegaMenu.js +0 -74
- package/dist-es/mega-menu/MegaMenu.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuActions.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuActions.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuActions.js +0 -31
- package/dist-es/mega-menu/MegaMenuActions.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuAside.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuAside.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuAside.js +0 -31
- package/dist-es/mega-menu/MegaMenuAside.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuContent.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuContent.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuContent.js +0 -23
- package/dist-es/mega-menu/MegaMenuContent.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuContext.js +0 -9
- package/dist-es/mega-menu/MegaMenuContext.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuGroup.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuGroup.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuGroup.js +0 -38
- package/dist-es/mega-menu/MegaMenuGroup.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuGroupContext.js +0 -14
- package/dist-es/mega-menu/MegaMenuGroupContext.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuGroupHeading.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuGroupHeading.js +0 -37
- package/dist-es/mega-menu/MegaMenuGroupHeading.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuGroups.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuGroups.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuGroups.js +0 -23
- package/dist-es/mega-menu/MegaMenuGroups.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuList.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuList.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuList.js +0 -41
- package/dist-es/mega-menu/MegaMenuList.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuListItem.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuListItem.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuListItem.js +0 -43
- package/dist-es/mega-menu/MegaMenuListItem.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuPanel.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuPanel.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuPanel.js +0 -86
- package/dist-es/mega-menu/MegaMenuPanel.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuTrigger.js +0 -88
- package/dist-es/mega-menu/MegaMenuTrigger.js.map +0 -1
- package/dist-es/mega-menu/useMegaMenu.js +0 -13
- package/dist-es/mega-menu/useMegaMenu.js.map +0 -1
- package/dist-es/mega-menu/useMegaMenuNavigation.js +0 -278
- package/dist-es/mega-menu/useMegaMenuNavigation.js.map +0 -1
- package/dist-es/mega-menu/usePageMargin.js +0 -20
- package/dist-es/mega-menu/usePageMargin.js.map +0 -1
- package/dist-es/toolbar-next/ToolbarContentNext.css.js +0 -4
- package/dist-es/toolbar-next/ToolbarContentNext.css.js.map +0 -1
- package/dist-es/toolbar-next/ToolbarContentNext.js +0 -30
- package/dist-es/toolbar-next/ToolbarContentNext.js.map +0 -1
- package/dist-es/toolbar-next/ToolbarNext.css.js +0 -4
- package/dist-es/toolbar-next/ToolbarNext.css.js.map +0 -1
- package/dist-es/toolbar-next/ToolbarNext.js +0 -392
- package/dist-es/toolbar-next/ToolbarNext.js.map +0 -1
- package/dist-es/toolbar-next/ToolbarNextOverflow.css.js +0 -4
- package/dist-es/toolbar-next/ToolbarNextOverflow.css.js.map +0 -1
- package/dist-es/toolbar-next/ToolbarNextOverflow.js +0 -701
- package/dist-es/toolbar-next/ToolbarNextOverflow.js.map +0 -1
- package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +0 -159
- package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +0 -1
- package/dist-es/toolbar-next/TooltrayNext.css.js +0 -4
- package/dist-es/toolbar-next/TooltrayNext.css.js.map +0 -1
- package/dist-es/toolbar-next/TooltrayNext.js +0 -53
- package/dist-es/toolbar-next/TooltrayNext.js.map +0 -1
- package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js +0 -390
- package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js.map +0 -1
- package/dist-es/toolbar-next/toolbarNextUtils.js +0 -211
- package/dist-es/toolbar-next/toolbarNextUtils.js.map +0 -1
- package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js +0 -310
- package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js.map +0 -1
- package/dist-es/toolbar-next/useToolbarNextOverflow.js +0 -743
- package/dist-es/toolbar-next/useToolbarNextOverflow.js.map +0 -1
- package/dist-types/mega-menu/MegaMenu.d.ts +0 -36
- package/dist-types/mega-menu/MegaMenuActions.d.ts +0 -10
- package/dist-types/mega-menu/MegaMenuAside.d.ts +0 -9
- package/dist-types/mega-menu/MegaMenuContent.d.ts +0 -9
- package/dist-types/mega-menu/MegaMenuContext.d.ts +0 -28
- package/dist-types/mega-menu/MegaMenuGroup.d.ts +0 -9
- package/dist-types/mega-menu/MegaMenuGroupContext.d.ts +0 -12
- package/dist-types/mega-menu/MegaMenuGroupHeading.d.ts +0 -13
- package/dist-types/mega-menu/MegaMenuGroups.d.ts +0 -8
- package/dist-types/mega-menu/MegaMenuList.d.ts +0 -16
- package/dist-types/mega-menu/MegaMenuListItem.d.ts +0 -25
- package/dist-types/mega-menu/MegaMenuPanel.d.ts +0 -8
- package/dist-types/mega-menu/MegaMenuTrigger.d.ts +0 -9
- package/dist-types/mega-menu/index.d.ts +0 -11
- package/dist-types/mega-menu/useMegaMenu.d.ts +0 -6
- package/dist-types/mega-menu/useMegaMenuNavigation.d.ts +0 -16
- package/dist-types/mega-menu/usePageMargin.d.ts +0 -6
- package/dist-types/toolbar-next/ToolbarContentNext.d.ts +0 -11
- package/dist-types/toolbar-next/ToolbarNext.d.ts +0 -12
- package/dist-types/toolbar-next/ToolbarNextOverflow.d.ts +0 -34
- package/dist-types/toolbar-next/ToolbarNextOverflowFloatingBoundary.d.ts +0 -16
- package/dist-types/toolbar-next/TooltrayNext.d.ts +0 -37
- package/dist-types/toolbar-next/index.d.ts +0 -3
- package/dist-types/toolbar-next/toolbarNextKeyboardUtils.d.ts +0 -39
- package/dist-types/toolbar-next/toolbarNextUtils.d.ts +0 -42
- package/dist-types/toolbar-next/useToolbarNextKeyboardNavigation.d.ts +0 -42
- package/dist-types/toolbar-next/useToolbarNextOverflow.d.ts +0 -37
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelection.js","sources":["../src/common-hooks/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type KeyboardEvent,\n type MouseEvent,\n type SyntheticEvent,\n useCallback,\n useRef,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport type {\n SelectionHookProps,\n SelectionHookResult,\n SelectionStrategy,\n SingleSelectionStrategy,\n} from \"./selectionTypes\";\n\nexport const CHECKBOX = \"checkbox\";\n\nexport const GROUP_SELECTION_NONE = \"none\";\nexport const GROUP_SELECTION_SINGLE = \"single\";\nexport const GROUP_SELECTION_CASCADE = \"cascade\";\n\nexport type GroupSelectionMode = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst isSelectable = (item?: CollectionItem<unknown>) =>\n item && item.disabled !== true && item.selectable !== false;\n\nconst byItemIndex = (\n i1: CollectionItem<unknown>,\n i2: CollectionItem<unknown>,\n) => (i1.index ?? 0) - (i2.index ?? 0);\n\nexport const groupSelectionEnabled = (\n groupSelection: GroupSelectionMode,\n): boolean => groupSelection && groupSelection !== GROUP_SELECTION_NONE;\n\nexport const useSelection = <\n Item,\n Selection extends SelectionStrategy = \"default\",\n>({\n defaultSelected,\n disableSelection = false,\n // groupSelection = GROUP_SELECTION_NONE,\n highlightedIdx,\n indexPositions,\n label: _label = \"\",\n onSelect,\n onSelectionChange,\n selected: selectedProp,\n selectionStrategy,\n selectionKeys = defaultSelectionKeys,\n tabToSelect,\n}: SelectionHookProps<Item, Selection>): SelectionHookResult<\n Item,\n Selection\n> => {\n type collectionItem = CollectionItem<Item>;\n\n const isDeselectable = selectionStrategy === \"deselectable\";\n const isMultipleSelect = selectionStrategy === \"multiple\";\n const isExtendedSelect = selectionStrategy === \"extended\";\n\n const lastActive = useRef(-1);\n\n const isSelectionEvent = useCallback(\n (evt: KeyboardEvent) => selectionKeys.includes(evt.key),\n [selectionKeys],\n );\n\n const emptyValue = useCallback(<\n Item,\n >(): Selection extends SingleSelectionStrategy\n ? null\n : CollectionItem<Item>[] => {\n type returnType = Selection extends SingleSelectionStrategy\n ? null\n : CollectionItem<Item>[];\n return isMultipleSelect || isExtendedSelect\n ? ([] as unknown as returnType)\n : (null as returnType);\n }, [isMultipleSelect, isExtendedSelect]);\n\n const [selected, setSelected] = useControlled<\n Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[]\n >({\n controlled: selectedProp,\n default: defaultSelected ?? emptyValue(),\n name: \"UseSelection\",\n state: \"selected\",\n });\n\n const isItemSelected = useCallback(\n (item: collectionItem) => {\n return Array.isArray(selected)\n ? selected.includes(item)\n : selected === item;\n },\n [selected],\n );\n\n const selectDefault = useCallback((item: collectionItem) => item, []);\n const selectDeselectable = useCallback(\n (item: collectionItem) => (isItemSelected(item) ? null : item),\n [isItemSelected],\n );\n const selectMultiple = useCallback(\n (item: collectionItem) => {\n const nextItems = isItemSelected(item)\n ? (selected as collectionItem[]).filter((i) => i !== item)\n : (selected as collectionItem[]).concat(item);\n nextItems.sort(byItemIndex);\n return nextItems;\n },\n [isItemSelected, selected],\n );\n const selectRange = useCallback(\n (idx: number, preserveExistingSelection?: boolean) => {\n const currentSelection = preserveExistingSelection\n ? (selected as collectionItem[])\n : ([] as collectionItem[]);\n\n const [lastSelectedItem] = (selected as collectionItem[]).slice(-1);\n const lastSelectedItemIndex = lastSelectedItem\n ? indexPositions.indexOf(lastSelectedItem)\n : 0;\n\n const startRegion = Math.min(idx, lastSelectedItemIndex);\n const endRegion = Math.max(idx, lastSelectedItemIndex);\n const rangeSelection = indexPositions.slice(startRegion, endRegion + 1);\n // concat the current selection with a new selection and remove duplicates for overlaps\n const nextItems = [...new Set([...currentSelection, ...rangeSelection])];\n nextItems.sort(byItemIndex);\n return nextItems;\n },\n [indexPositions, selected],\n );\n\n const selectItemAtIndex = useCallback(\n (\n evt: SyntheticEvent,\n idx: number,\n item: collectionItem,\n rangeSelect: boolean,\n preserveExistingSelection?: boolean,\n ) => {\n type returnType = Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[];\n let newSelected: returnType;\n if (isMultipleSelect) {\n newSelected = selectMultiple(item) as returnType;\n } else if (isExtendedSelect) {\n if (preserveExistingSelection && !rangeSelect) {\n newSelected = selectMultiple(item) as returnType;\n } else if (rangeSelect) {\n newSelected = selectRange(\n idx,\n preserveExistingSelection,\n ) as returnType;\n } else {\n newSelected = [item] as returnType;\n }\n } else if (isDeselectable) {\n newSelected = selectDeselectable(item) as returnType;\n } else {\n newSelected = selectDefault(item) as returnType;\n }\n\n if (newSelected !== selected) {\n setSelected(newSelected);\n }\n\n // We fire onSelect irrespective of whether selection changes\n onSelect?.(evt, item);\n\n if (newSelected !== selected) {\n if (onSelectionChange) {\n onSelectionChange(evt, newSelected);\n }\n }\n },\n [\n isMultipleSelect,\n isExtendedSelect,\n isDeselectable,\n selected,\n onSelect,\n selectMultiple,\n selectRange,\n selectDeselectable,\n selectDefault,\n onSelectionChange,\n ],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n const item = indexPositions[highlightedIdx];\n if (isSelectable(item)) {\n if (isSelectionEvent(evt) || (tabToSelect && evt.key === \"Tab\")) {\n // We do not inhibit Tab behaviour, if we are selecting on Tab then we apply\n // selection as a side effect of the Tab, not as a replacement for Tabbing.\n if (evt.key !== \"Tab\") {\n evt.preventDefault();\n }\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item,\n false,\n evt.ctrlKey || evt.metaKey,\n );\n if (isExtendedSelect) {\n lastActive.current = highlightedIdx;\n }\n }\n }\n },\n [\n indexPositions,\n highlightedIdx,\n isSelectionEvent,\n tabToSelect,\n selectItemAtIndex,\n isExtendedSelect,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(\n (evt: KeyboardEvent, currentIndex: number) => {\n if (isExtendedSelect && evt.shiftKey) {\n const item = indexPositions[currentIndex];\n if (isSelectable(item)) {\n selectItemAtIndex(evt, currentIndex, item, true);\n }\n }\n },\n [isExtendedSelect, indexPositions, selectItemAtIndex],\n );\n\n const handleClick = useCallback(\n (evt: MouseEvent) => {\n const item = indexPositions[highlightedIdx];\n if (!disableSelection && isSelectable(item)) {\n // if (!isCollapsibleItem(item)) {\n evt.preventDefault();\n evt.stopPropagation();\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item,\n evt.shiftKey,\n evt.ctrlKey || evt.metaKey,\n );\n if (isExtendedSelect) {\n lastActive.current = highlightedIdx;\n }\n // }\n }\n },\n [\n disableSelection,\n isExtendedSelect,\n highlightedIdx,\n indexPositions,\n selectItemAtIndex,\n ],\n );\n\n const listHandlers = {\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyboardNavigation: handleKeyboardNavigation,\n };\n\n return {\n listHandlers,\n selected,\n setSelected,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSelection.js","sources":["../src/common-hooks/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type KeyboardEvent,\n type MouseEvent,\n type SyntheticEvent,\n useCallback,\n useRef,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport { closestListItemIndex } from \"./list-dom-utils\";\nimport type {\n SelectionHookProps,\n SelectionHookResult,\n SelectionStrategy,\n SingleSelectionStrategy,\n} from \"./selectionTypes\";\n\nexport const CHECKBOX = \"checkbox\";\n\nexport const GROUP_SELECTION_NONE = \"none\";\nexport const GROUP_SELECTION_SINGLE = \"single\";\nexport const GROUP_SELECTION_CASCADE = \"cascade\";\n\nexport type GroupSelectionMode = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst isSelectable = (item?: CollectionItem<unknown>) =>\n item && item.disabled !== true && item.selectable !== false;\n\nconst byItemIndex = (\n i1: CollectionItem<unknown>,\n i2: CollectionItem<unknown>,\n) => (i1.index ?? 0) - (i2.index ?? 0);\n\nexport const groupSelectionEnabled = (\n groupSelection: GroupSelectionMode,\n): boolean => groupSelection && groupSelection !== GROUP_SELECTION_NONE;\n\nexport const useSelection = <\n Item,\n Selection extends SelectionStrategy = \"default\",\n>({\n defaultSelected,\n disableSelection = false,\n // groupSelection = GROUP_SELECTION_NONE,\n highlightedIdx,\n indexPositions,\n label: _label = \"\",\n onSelect,\n onSelectionChange,\n selected: selectedProp,\n selectionStrategy,\n selectionKeys = defaultSelectionKeys,\n tabToSelect,\n}: SelectionHookProps<Item, Selection>): SelectionHookResult<\n Item,\n Selection\n> => {\n type collectionItem = CollectionItem<Item>;\n\n const isDeselectable = selectionStrategy === \"deselectable\";\n const isMultipleSelect = selectionStrategy === \"multiple\";\n const isExtendedSelect = selectionStrategy === \"extended\";\n\n const lastActive = useRef(-1);\n\n const isSelectionEvent = useCallback(\n (evt: KeyboardEvent) => selectionKeys.includes(evt.key),\n [selectionKeys],\n );\n\n const emptyValue = useCallback(<\n Item,\n >(): Selection extends SingleSelectionStrategy\n ? null\n : CollectionItem<Item>[] => {\n type returnType = Selection extends SingleSelectionStrategy\n ? null\n : CollectionItem<Item>[];\n return isMultipleSelect || isExtendedSelect\n ? ([] as unknown as returnType)\n : (null as returnType);\n }, [isMultipleSelect, isExtendedSelect]);\n\n const [selected, setSelected] = useControlled<\n Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[]\n >({\n controlled: selectedProp,\n default: defaultSelected ?? emptyValue(),\n name: \"UseSelection\",\n state: \"selected\",\n });\n\n const isItemSelected = useCallback(\n (item: collectionItem) => {\n return Array.isArray(selected)\n ? selected.includes(item)\n : selected === item;\n },\n [selected],\n );\n\n const selectDefault = useCallback((item: collectionItem) => item, []);\n const selectDeselectable = useCallback(\n (item: collectionItem) => (isItemSelected(item) ? null : item),\n [isItemSelected],\n );\n const selectMultiple = useCallback(\n (item: collectionItem) => {\n const nextItems = isItemSelected(item)\n ? (selected as collectionItem[]).filter((i) => i !== item)\n : (selected as collectionItem[]).concat(item);\n nextItems.sort(byItemIndex);\n return nextItems;\n },\n [isItemSelected, selected],\n );\n const selectRange = useCallback(\n (idx: number, preserveExistingSelection?: boolean) => {\n const currentSelection = preserveExistingSelection\n ? (selected as collectionItem[])\n : ([] as collectionItem[]);\n\n const [lastSelectedItem] = (selected as collectionItem[]).slice(-1);\n const lastSelectedItemIndex = lastSelectedItem\n ? indexPositions.indexOf(lastSelectedItem)\n : 0;\n\n const startRegion = Math.min(idx, lastSelectedItemIndex);\n const endRegion = Math.max(idx, lastSelectedItemIndex);\n const rangeSelection = indexPositions.slice(startRegion, endRegion + 1);\n // concat the current selection with a new selection and remove duplicates for overlaps\n const nextItems = [...new Set([...currentSelection, ...rangeSelection])];\n nextItems.sort(byItemIndex);\n return nextItems;\n },\n [indexPositions, selected],\n );\n\n const selectItemAtIndex = useCallback(\n (\n evt: SyntheticEvent,\n idx: number,\n item: collectionItem,\n rangeSelect: boolean,\n preserveExistingSelection?: boolean,\n ) => {\n type returnType = Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[];\n let newSelected: returnType;\n if (isMultipleSelect) {\n newSelected = selectMultiple(item) as returnType;\n } else if (isExtendedSelect) {\n if (preserveExistingSelection && !rangeSelect) {\n newSelected = selectMultiple(item) as returnType;\n } else if (rangeSelect) {\n newSelected = selectRange(\n idx,\n preserveExistingSelection,\n ) as returnType;\n } else {\n newSelected = [item] as returnType;\n }\n } else if (isDeselectable) {\n newSelected = selectDeselectable(item) as returnType;\n } else {\n newSelected = selectDefault(item) as returnType;\n }\n\n if (newSelected !== selected) {\n setSelected(newSelected);\n }\n\n // We fire onSelect irrespective of whether selection changes\n onSelect?.(evt, item);\n\n if (newSelected !== selected) {\n if (onSelectionChange) {\n onSelectionChange(evt, newSelected);\n }\n }\n },\n [\n isMultipleSelect,\n isExtendedSelect,\n isDeselectable,\n selected,\n onSelect,\n selectMultiple,\n selectRange,\n selectDeselectable,\n selectDefault,\n onSelectionChange,\n ],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n const item = indexPositions[highlightedIdx];\n if (isSelectable(item)) {\n if (isSelectionEvent(evt) || (tabToSelect && evt.key === \"Tab\")) {\n // We do not inhibit Tab behaviour, if we are selecting on Tab then we apply\n // selection as a side effect of the Tab, not as a replacement for Tabbing.\n if (evt.key !== \"Tab\") {\n evt.preventDefault();\n }\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item,\n false,\n evt.ctrlKey || evt.metaKey,\n );\n if (isExtendedSelect) {\n lastActive.current = highlightedIdx;\n }\n }\n }\n },\n [\n indexPositions,\n highlightedIdx,\n isSelectionEvent,\n tabToSelect,\n selectItemAtIndex,\n isExtendedSelect,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(\n (evt: KeyboardEvent, currentIndex: number) => {\n if (isExtendedSelect && evt.shiftKey) {\n const item = indexPositions[currentIndex];\n if (isSelectable(item)) {\n selectItemAtIndex(evt, currentIndex, item, true);\n }\n }\n },\n [isExtendedSelect, indexPositions, selectItemAtIndex],\n );\n\n const handleClick = useCallback(\n (evt: MouseEvent) => {\n // Resolve the clicked item from the event target rather than relying on\n // `highlightedIdx`. The highlighted index is updated asynchronously from\n // a `mousemove` handler on the list; in fast/synthetic interactions\n // (notably Cypress `realClick`) the click can fire before React has\n // re-rendered with the updated highlight, which previously caused the\n // click to be silently ignored (root cause of flaky selection tests).\n const targetIdx = closestListItemIndex(evt.target as HTMLElement);\n const idx = targetIdx >= 0 ? targetIdx : highlightedIdx;\n const item = indexPositions[idx];\n if (!disableSelection && isSelectable(item)) {\n // if (!isCollapsibleItem(item)) {\n evt.preventDefault();\n evt.stopPropagation();\n selectItemAtIndex(\n evt,\n idx,\n item,\n evt.shiftKey,\n evt.ctrlKey || evt.metaKey,\n );\n if (isExtendedSelect) {\n lastActive.current = idx;\n }\n // }\n }\n },\n [\n disableSelection,\n isExtendedSelect,\n highlightedIdx,\n indexPositions,\n selectItemAtIndex,\n ],\n );\n\n const listHandlers = {\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyboardNavigation: handleKeyboardNavigation,\n };\n\n return {\n listHandlers,\n selected,\n setSelected,\n };\n};\n"],"names":[],"mappings":"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"}
|
package/dist-es/index.js
CHANGED
|
@@ -76,17 +76,6 @@ export { ListNext } from './list-next/ListNext.js';
|
|
|
76
76
|
export { Logo } from './logo/Logo.js';
|
|
77
77
|
export { LogoImage } from './logo/LogoImage.js';
|
|
78
78
|
export { LogoSeparator } from './logo/LogoSeparator.js';
|
|
79
|
-
export { MegaMenu } from './mega-menu/MegaMenu.js';
|
|
80
|
-
export { MegaMenuActions } from './mega-menu/MegaMenuActions.js';
|
|
81
|
-
export { MegaMenuAside } from './mega-menu/MegaMenuAside.js';
|
|
82
|
-
export { MegaMenuContent } from './mega-menu/MegaMenuContent.js';
|
|
83
|
-
export { MegaMenuGroup } from './mega-menu/MegaMenuGroup.js';
|
|
84
|
-
export { MegaMenuGroupHeading } from './mega-menu/MegaMenuGroupHeading.js';
|
|
85
|
-
export { MegaMenuGroups } from './mega-menu/MegaMenuGroups.js';
|
|
86
|
-
export { MegaMenuList } from './mega-menu/MegaMenuList.js';
|
|
87
|
-
export { MegaMenuListItem } from './mega-menu/MegaMenuListItem.js';
|
|
88
|
-
export { MegaMenuPanel } from './mega-menu/MegaMenuPanel.js';
|
|
89
|
-
export { MegaMenuTrigger } from './mega-menu/MegaMenuTrigger.js';
|
|
90
79
|
export { MenuButton } from './menu-button/MenuButton.js';
|
|
91
80
|
export { Metric } from './metric/Metric.js';
|
|
92
81
|
export { MetricContent } from './metric/MetricContent.js';
|
|
@@ -126,9 +115,6 @@ export { Toolbar } from './toolbar/Toolbar.js';
|
|
|
126
115
|
export { ToolbarButton } from './toolbar/ToolbarButton.js';
|
|
127
116
|
export { Tooltray } from './toolbar/Tooltray.js';
|
|
128
117
|
export { ToolbarField } from './toolbar/toolbar-field/ToolbarField.js';
|
|
129
|
-
export { ToolbarContentNext } from './toolbar-next/ToolbarContentNext.js';
|
|
130
|
-
export { ToolbarNext } from './toolbar-next/ToolbarNext.js';
|
|
131
|
-
export { TooltrayNext } from './toolbar-next/TooltrayNext.js';
|
|
132
118
|
export { ElectronWindow } from './window/ElectronWindow.js';
|
|
133
119
|
export { Window, WindowContext, isDesktop, useWindow } from './window/WindowContext.js';
|
|
134
120
|
//# sourceMappingURL=index.js.map
|
package/dist-es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist-es/list/useList.js
CHANGED
|
@@ -178,7 +178,13 @@ const useList = ({
|
|
|
178
178
|
onMouseLeave: navigationControlProps.onMouseLeave
|
|
179
179
|
};
|
|
180
180
|
const listHandlers = listHandlersProp || {
|
|
181
|
-
|
|
181
|
+
// Don't expose a click handler when the list is disabled. Previously,
|
|
182
|
+
// selection on disabled lists was prevented only as a side-effect of
|
|
183
|
+
// `handleMouseMove` gating on `disabled` (which kept `highlightedIdx` at
|
|
184
|
+
// -1, so `useSelection.handleClick` no-op'd). Now that `handleClick`
|
|
185
|
+
// resolves the clicked item directly from the event target, we must
|
|
186
|
+
// explicitly suppress the handler here.
|
|
187
|
+
onClick: disabled ? void 0 : selectionHook.listHandlers.onClick,
|
|
182
188
|
// MouseEnter would be much better for this. There is a bug in Cypress
|
|
183
189
|
// wheby it emits spurious MouseEnter (and MouseOver) events around
|
|
184
190
|
// keypress events, which break many tests.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useList.js","sources":["../src/list/useList.ts"],"sourcesContent":["import {\n isValidElement,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useRef,\n} from \"react\";\nimport {\n type CollectionItem,\n closestListItemIndex,\n type ListHandlers,\n type SelectHandler,\n type SelectionChangeHandler,\n type SelectionStrategy,\n type SingleSelectionStrategy,\n useCollapsibleGroups,\n useKeyboardNavigation,\n useSelection,\n useTypeahead,\n useViewportTracking,\n} from \"../common-hooks\";\n\nimport type {\n ListControlProps,\n ListHookProps,\n ListHookResult,\n} from \"./listTypes\";\n\nexport const useList = <Item, Selection extends SelectionStrategy = \"default\">({\n collapsibleHeaders,\n collectionHook: dataHook,\n containerRef,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected,\n disabled,\n disableAriaActiveDescendant,\n disableHighlightOnFocus,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n label = \"\",\n listHandlers: listHandlersProp,\n onSelect,\n onSelectionChange,\n onHighlight,\n onKeyboardNavigation,\n onKeyDown,\n restoreLastFocus,\n selected,\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n}: ListHookProps<Item, Selection>): ListHookResult<Item, Selection> => {\n const lastSelection = useRef<typeof selected>(selected || defaultSelected);\n const handleKeyboardNavigation = (\n evt: KeyboardEvent<HTMLElement>,\n nextIndex: number,\n ) => {\n selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIndex);\n onKeyboardNavigation?.(evt, nextIndex);\n };\n\n // TODO where do these belong ?\n const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n (evt, selectedItem) => {\n if (onSelect) {\n if (isValidElement(selectedItem.value)) {\n onSelect(evt, selectedItem.label as Item);\n } else if (selectedItem.value !== null) {\n onSelect(evt, selectedItem.value);\n }\n }\n },\n [onSelect],\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<CollectionItem<Item>, Selection>\n >(\n (evt, selected) => {\n if (onSelectionChange) {\n onSelectionChange(\n evt,\n (Array.isArray(selected)\n ? selected.map((s) => (isValidElement(s.value) ? s.label : s.value))\n : selected &&\n (isValidElement(selected.value)\n ? selected.label\n : selected.value)) as Selection extends SingleSelectionStrategy\n ? Item\n : Item[],\n );\n }\n },\n [onSelectionChange],\n );\n\n const {\n highlightedIndex,\n listProps: {\n onKeyDown: navigationKeyDown,\n onMouseMove: navigationMouseMove,\n ...navigationControlProps\n },\n setHighlightedIndex,\n ...keyboardHook\n } = useKeyboardNavigation<Item, Selection>({\n containerRef,\n defaultHighlightedIndex,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n indexPositions: dataHook.data,\n label,\n onHighlight,\n onKeyboardNavigation: handleKeyboardNavigation,\n restoreLastFocus,\n selected: lastSelection.current,\n });\n\n const collapsibleHook = useCollapsibleGroups({\n collapsibleHeaders,\n highlightedIdx: highlightedIndex,\n collectionHook: dataHook,\n });\n\n const selectionHook = useSelection<Item, Selection>({\n defaultSelected,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n label,\n onSelect: handleSelect,\n onSelectionChange: handleSelectionChange,\n selected,\n selectionStrategy,\n selectionKeys,\n tabToSelect,\n });\n\n const { onKeyDown: typeaheadOnKeyDown } = useTypeahead<Item>({\n disableTypeToSelect,\n highlightedIdx: highlightedIndex,\n highlightItemAtIndex: setHighlightedIndex,\n typeToNavigate: true,\n items: dataHook.data,\n });\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if (!evt.defaultPrevented) {\n typeaheadOnKeyDown?.(evt);\n }\n // We still let the keyboard navigation hook process the event even\n // if it has been handled by the typeahead hook. That is so it can\n // correctly manage the focusVisible state.\n navigationKeyDown(evt);\n if (!evt.defaultPrevented) {\n selectionHook.listHandlers.onKeyDown?.(evt);\n }\n if (!evt.defaultPrevented) {\n collapsibleHook?.onKeyDown?.(evt);\n }\n\n if (!evt.defaultPrevented) {\n onKeyDown?.(evt);\n }\n },\n [\n collapsibleHook,\n navigationKeyDown,\n onKeyDown,\n selectionHook.listHandlers,\n typeaheadOnKeyDown,\n ],\n );\n\n // This is only appropriate when we are directly controlling a List,\n // not when a control is manipulating the list\n const { isScrolling, scrollIntoView } = useViewportTracking({\n containerRef,\n contentRef,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n stickyHeaders,\n });\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n if (!isScrolling.current && !disabled) {\n navigationMouseMove();\n const idx = closestListItemIndex(evt.target as HTMLElement);\n if (idx !== highlightedIndex) {\n const item = dataHook.data[idx];\n if (!item || item.disabled) {\n setHighlightedIndex(-1);\n } else {\n setHighlightedIndex(idx);\n }\n }\n }\n },\n [\n isScrolling,\n disabled,\n setHighlightedIndex,\n navigationMouseMove,\n highlightedIndex,\n dataHook.data,\n ],\n );\n\n const getActiveDescendant = () =>\n highlightedIndex === undefined ||\n highlightedIndex === -1 ||\n disableAriaActiveDescendant\n ? undefined\n : dataHook.data[highlightedIndex]?.id;\n\n // We need this on reEntry for navigation hook to handle focus\n lastSelection.current = selectionHook.selected;\n\n // controlProps ?\n const listControlProps: ListControlProps = {\n \"aria-activedescendant\": getActiveDescendant(),\n onBlur: navigationControlProps.onBlur,\n onFocus: navigationControlProps.onFocus,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: navigationControlProps.onMouseDownCapture,\n onMouseLeave: navigationControlProps.onMouseLeave,\n };\n\n const listHandlers: ListHandlers = listHandlersProp || {\n onClick: selectionHook.listHandlers.onClick,\n // MouseEnter would be much better for this. There is a bug in Cypress\n // wheby it emits spurious MouseEnter (and MouseOver) events around\n // keypress events, which break many tests.\n onMouseMove: handleMouseMove,\n };\n\n return {\n focusVisible: keyboardHook.focusVisible,\n controlledHighlighting: keyboardHook.controlledHighlighting,\n highlightedIndex,\n keyboardNavigation: keyboardHook.keyboardNavigation,\n listHandlers,\n listItemHeaderHandlers: collapsibleHook,\n listControlProps,\n scrollIntoView,\n selected: selectionHook.selected,\n setHighlightedIndex,\n setIgnoreFocus: keyboardHook.setIgnoreFocus,\n setSelected: selectionHook.setSelected,\n };\n};\n"],"names":["selected"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useList.js","sources":["../src/list/useList.ts"],"sourcesContent":["import {\n isValidElement,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useRef,\n} from \"react\";\nimport {\n type CollectionItem,\n closestListItemIndex,\n type ListHandlers,\n type SelectHandler,\n type SelectionChangeHandler,\n type SelectionStrategy,\n type SingleSelectionStrategy,\n useCollapsibleGroups,\n useKeyboardNavigation,\n useSelection,\n useTypeahead,\n useViewportTracking,\n} from \"../common-hooks\";\n\nimport type {\n ListControlProps,\n ListHookProps,\n ListHookResult,\n} from \"./listTypes\";\n\nexport const useList = <Item, Selection extends SelectionStrategy = \"default\">({\n collapsibleHeaders,\n collectionHook: dataHook,\n containerRef,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected,\n disabled,\n disableAriaActiveDescendant,\n disableHighlightOnFocus,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n label = \"\",\n listHandlers: listHandlersProp,\n onSelect,\n onSelectionChange,\n onHighlight,\n onKeyboardNavigation,\n onKeyDown,\n restoreLastFocus,\n selected,\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n}: ListHookProps<Item, Selection>): ListHookResult<Item, Selection> => {\n const lastSelection = useRef<typeof selected>(selected || defaultSelected);\n const handleKeyboardNavigation = (\n evt: KeyboardEvent<HTMLElement>,\n nextIndex: number,\n ) => {\n selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIndex);\n onKeyboardNavigation?.(evt, nextIndex);\n };\n\n // TODO where do these belong ?\n const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n (evt, selectedItem) => {\n if (onSelect) {\n if (isValidElement(selectedItem.value)) {\n onSelect(evt, selectedItem.label as Item);\n } else if (selectedItem.value !== null) {\n onSelect(evt, selectedItem.value);\n }\n }\n },\n [onSelect],\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<CollectionItem<Item>, Selection>\n >(\n (evt, selected) => {\n if (onSelectionChange) {\n onSelectionChange(\n evt,\n (Array.isArray(selected)\n ? selected.map((s) => (isValidElement(s.value) ? s.label : s.value))\n : selected &&\n (isValidElement(selected.value)\n ? selected.label\n : selected.value)) as Selection extends SingleSelectionStrategy\n ? Item\n : Item[],\n );\n }\n },\n [onSelectionChange],\n );\n\n const {\n highlightedIndex,\n listProps: {\n onKeyDown: navigationKeyDown,\n onMouseMove: navigationMouseMove,\n ...navigationControlProps\n },\n setHighlightedIndex,\n ...keyboardHook\n } = useKeyboardNavigation<Item, Selection>({\n containerRef,\n defaultHighlightedIndex,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n indexPositions: dataHook.data,\n label,\n onHighlight,\n onKeyboardNavigation: handleKeyboardNavigation,\n restoreLastFocus,\n selected: lastSelection.current,\n });\n\n const collapsibleHook = useCollapsibleGroups({\n collapsibleHeaders,\n highlightedIdx: highlightedIndex,\n collectionHook: dataHook,\n });\n\n const selectionHook = useSelection<Item, Selection>({\n defaultSelected,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n label,\n onSelect: handleSelect,\n onSelectionChange: handleSelectionChange,\n selected,\n selectionStrategy,\n selectionKeys,\n tabToSelect,\n });\n\n const { onKeyDown: typeaheadOnKeyDown } = useTypeahead<Item>({\n disableTypeToSelect,\n highlightedIdx: highlightedIndex,\n highlightItemAtIndex: setHighlightedIndex,\n typeToNavigate: true,\n items: dataHook.data,\n });\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if (!evt.defaultPrevented) {\n typeaheadOnKeyDown?.(evt);\n }\n // We still let the keyboard navigation hook process the event even\n // if it has been handled by the typeahead hook. That is so it can\n // correctly manage the focusVisible state.\n navigationKeyDown(evt);\n if (!evt.defaultPrevented) {\n selectionHook.listHandlers.onKeyDown?.(evt);\n }\n if (!evt.defaultPrevented) {\n collapsibleHook?.onKeyDown?.(evt);\n }\n\n if (!evt.defaultPrevented) {\n onKeyDown?.(evt);\n }\n },\n [\n collapsibleHook,\n navigationKeyDown,\n onKeyDown,\n selectionHook.listHandlers,\n typeaheadOnKeyDown,\n ],\n );\n\n // This is only appropriate when we are directly controlling a List,\n // not when a control is manipulating the list\n const { isScrolling, scrollIntoView } = useViewportTracking({\n containerRef,\n contentRef,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n stickyHeaders,\n });\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n if (!isScrolling.current && !disabled) {\n navigationMouseMove();\n const idx = closestListItemIndex(evt.target as HTMLElement);\n if (idx !== highlightedIndex) {\n const item = dataHook.data[idx];\n if (!item || item.disabled) {\n setHighlightedIndex(-1);\n } else {\n setHighlightedIndex(idx);\n }\n }\n }\n },\n [\n isScrolling,\n disabled,\n setHighlightedIndex,\n navigationMouseMove,\n highlightedIndex,\n dataHook.data,\n ],\n );\n\n const getActiveDescendant = () =>\n highlightedIndex === undefined ||\n highlightedIndex === -1 ||\n disableAriaActiveDescendant\n ? undefined\n : dataHook.data[highlightedIndex]?.id;\n\n // We need this on reEntry for navigation hook to handle focus\n lastSelection.current = selectionHook.selected;\n\n // controlProps ?\n const listControlProps: ListControlProps = {\n \"aria-activedescendant\": getActiveDescendant(),\n onBlur: navigationControlProps.onBlur,\n onFocus: navigationControlProps.onFocus,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: navigationControlProps.onMouseDownCapture,\n onMouseLeave: navigationControlProps.onMouseLeave,\n };\n\n const listHandlers: ListHandlers = listHandlersProp || {\n // Don't expose a click handler when the list is disabled. Previously,\n // selection on disabled lists was prevented only as a side-effect of\n // `handleMouseMove` gating on `disabled` (which kept `highlightedIdx` at\n // -1, so `useSelection.handleClick` no-op'd). Now that `handleClick`\n // resolves the clicked item directly from the event target, we must\n // explicitly suppress the handler here.\n onClick: disabled ? undefined : selectionHook.listHandlers.onClick,\n // MouseEnter would be much better for this. There is a bug in Cypress\n // wheby it emits spurious MouseEnter (and MouseOver) events around\n // keypress events, which break many tests.\n onMouseMove: handleMouseMove,\n };\n\n return {\n focusVisible: keyboardHook.focusVisible,\n controlledHighlighting: keyboardHook.controlledHighlighting,\n highlightedIndex,\n keyboardNavigation: keyboardHook.keyboardNavigation,\n listHandlers,\n listItemHeaderHandlers: collapsibleHook,\n listControlProps,\n scrollIntoView,\n selected: selectionHook.selected,\n setHighlightedIndex,\n setIgnoreFocus: keyboardHook.setIgnoreFocus,\n setSelected: selectionHook.setSelected,\n };\n};\n"],"names":["selected"],"mappings":"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"}
|
package/dist-types/index.d.ts
CHANGED
|
@@ -23,7 +23,6 @@ export type { ListChangeHandler as ListChangeHandlerDeprecated, ListSelectHandle
|
|
|
23
23
|
export { ListItemBase as ListItemBaseDeprecated, useListItem as useListItemDeprecated, } from "./list-deprecated";
|
|
24
24
|
export * from "./list-next";
|
|
25
25
|
export * from "./logo";
|
|
26
|
-
export * from "./mega-menu";
|
|
27
26
|
export * from "./menu-button";
|
|
28
27
|
export * from "./metric";
|
|
29
28
|
export * from "./portal";
|
|
@@ -37,6 +36,5 @@ export * from "./toast-group";
|
|
|
37
36
|
export * from "./tokenized-input";
|
|
38
37
|
export * from "./tokenized-input-next";
|
|
39
38
|
export * from "./toolbar";
|
|
40
|
-
export * from "./toolbar-next";
|
|
41
39
|
export * from "./utils";
|
|
42
40
|
export * from "./window";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.98",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@floating-ui/react": "^0.26.28",
|
|
24
|
-
"@salt-ds/core": "^1.
|
|
24
|
+
"@salt-ds/core": "^1.66.0",
|
|
25
25
|
"@salt-ds/icons": "^1.18.0",
|
|
26
26
|
"@salt-ds/styles": "0.3.0",
|
|
27
27
|
"@salt-ds/window": "0.1.1",
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react$1 = require('@floating-ui/react');
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
var MegaMenuContext = require('./MegaMenuContext.js');
|
|
8
|
-
var useMegaMenuNavigation = require('./useMegaMenuNavigation.js');
|
|
9
|
-
|
|
10
|
-
function MegaMenu({
|
|
11
|
-
children,
|
|
12
|
-
open,
|
|
13
|
-
defaultOpen = false,
|
|
14
|
-
onOpenChange,
|
|
15
|
-
placement = "bottom"
|
|
16
|
-
}) {
|
|
17
|
-
const [openState, setOpenState] = core.useControlled({
|
|
18
|
-
controlled: open,
|
|
19
|
-
default: defaultOpen,
|
|
20
|
-
name: "MegaMenu",
|
|
21
|
-
state: "open"
|
|
22
|
-
});
|
|
23
|
-
const [reference, setReference] = react.useState(null);
|
|
24
|
-
const [floating, setFloating] = react.useState(null);
|
|
25
|
-
const focusFirstItemOnOpenRef = react.useRef(false);
|
|
26
|
-
const [panelId, setPanelId] = react.useState();
|
|
27
|
-
const setOpen = react.useCallback(
|
|
28
|
-
(newOpen) => {
|
|
29
|
-
if (!newOpen) {
|
|
30
|
-
focusFirstItemOnOpenRef.current = false;
|
|
31
|
-
}
|
|
32
|
-
setOpenState(newOpen);
|
|
33
|
-
onOpenChange == null ? void 0 : onOpenChange(newOpen);
|
|
34
|
-
},
|
|
35
|
-
[onOpenChange]
|
|
36
|
-
);
|
|
37
|
-
const floatingRootContext = react$1.useFloatingRootContext({
|
|
38
|
-
open: openState,
|
|
39
|
-
onOpenChange: setOpen,
|
|
40
|
-
elements: { reference, floating }
|
|
41
|
-
});
|
|
42
|
-
const megaMenuNavigation = useMegaMenuNavigation.useMegaMenuNavigation(floatingRootContext);
|
|
43
|
-
const { getReferenceProps, getFloatingProps } = react$1.useInteractions([
|
|
44
|
-
react$1.useClick(floatingRootContext),
|
|
45
|
-
react$1.useDismiss(floatingRootContext),
|
|
46
|
-
megaMenuNavigation
|
|
47
|
-
]);
|
|
48
|
-
const contextValue = react.useMemo(
|
|
49
|
-
() => ({
|
|
50
|
-
openState,
|
|
51
|
-
floatingRootContext,
|
|
52
|
-
placement,
|
|
53
|
-
getFloatingProps,
|
|
54
|
-
getReferenceProps,
|
|
55
|
-
setFloating,
|
|
56
|
-
setReference,
|
|
57
|
-
setOpen,
|
|
58
|
-
focusFirstItemOnOpenRef,
|
|
59
|
-
panelId,
|
|
60
|
-
setPanelId
|
|
61
|
-
}),
|
|
62
|
-
[
|
|
63
|
-
openState,
|
|
64
|
-
floatingRootContext,
|
|
65
|
-
placement,
|
|
66
|
-
getFloatingProps,
|
|
67
|
-
getReferenceProps,
|
|
68
|
-
setOpen,
|
|
69
|
-
panelId
|
|
70
|
-
]
|
|
71
|
-
);
|
|
72
|
-
return /* @__PURE__ */ jsxRuntime.jsx(MegaMenuContext.MegaMenuContext.Provider, { value: contextValue, children });
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
exports.MegaMenu = MegaMenu;
|
|
76
|
-
//# sourceMappingURL=MegaMenu.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenu.js","sources":["../src/mega-menu/MegaMenu.tsx"],"sourcesContent":["import {\n useClick,\n useDismiss,\n useFloatingRootContext,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { type ReactNode, useCallback, useMemo, useRef, useState } from \"react\";\nimport { MegaMenuContext } from \"./MegaMenuContext\";\nimport { useMegaMenuNavigation } from \"./useMegaMenuNavigation\";\n\n/**\n * Supported placements for the mega menu panel.\n */\nexport type MegaMenuPlacement = \"bottom\" | \"bottom-start\" | \"bottom-end\";\n\nexport interface MegaMenuProps {\n /**\n * The content of the mega menu, typically `MegaMenuTrigger` and `MegaMenuPanel`.\n */\n children?: ReactNode;\n /**\n * Whether the mega menu is open. Use for controlled mode.\n */\n open?: boolean;\n /**\n * Whether the mega menu is initially open. Use for uncontrolled mode.\n * @default false\n */\n defaultOpen?: boolean;\n /**\n * Callback fired when the open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The placement of the mega menu panel relative to the trigger.\n * @default \"bottom\"\n */\n placement?: MegaMenuPlacement;\n}\n\n/**\n * Root of a mega menu, coordinating its trigger and panel.\n *\n * Not intended to be nested inside another floating overlay (e.g. a dialog or\n * popover): the mega menu does not participate in floating-ui's `FloatingTree`\n */\nexport function MegaMenu({\n children,\n open,\n defaultOpen = false,\n onOpenChange,\n placement = \"bottom\",\n}: MegaMenuProps) {\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: defaultOpen,\n name: \"MegaMenu\",\n state: \"open\",\n });\n\n const [reference, setReference] = useState<HTMLElement | null>(null);\n const [floating, setFloating] = useState<HTMLElement | null>(null);\n const focusFirstItemOnOpenRef = useRef(false);\n const [panelId, setPanelId] = useState<string>();\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n if (!newOpen) {\n focusFirstItemOnOpenRef.current = false;\n }\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const floatingRootContext = useFloatingRootContext({\n open: openState,\n onOpenChange: setOpen,\n elements: { reference, floating },\n });\n\n const megaMenuNavigation = useMegaMenuNavigation(floatingRootContext);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useClick(floatingRootContext),\n useDismiss(floatingRootContext),\n megaMenuNavigation,\n ]);\n\n const contextValue = useMemo(\n () => ({\n openState,\n floatingRootContext,\n placement,\n getFloatingProps,\n getReferenceProps,\n setFloating,\n setReference,\n setOpen,\n focusFirstItemOnOpenRef,\n panelId,\n setPanelId,\n }),\n [\n openState,\n floatingRootContext,\n placement,\n getFloatingProps,\n getReferenceProps,\n setOpen,\n panelId,\n ],\n );\n\n return (\n <MegaMenuContext.Provider value={contextValue}>\n {children}\n </MegaMenuContext.Provider>\n );\n}\n"],"names":["useControlled","useState","useRef","useCallback","useFloatingRootContext","useMegaMenuNavigation","useInteractions","useClick","useDismiss","useMemo","MegaMenuContext"],"mappings":";;;;;;;;;AA+CO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAkB;AAChB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,kBAAA,CAAc;AAAA,IAC9C,UAAA,EAAY,IAAA;AAAA,IACZ,OAAA,EAAS,WAAA;AAAA,IACT,IAAA,EAAM,UAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,uBAAA,GAA0BC,aAAO,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAID,cAAA,EAAiB;AAE/C,EAAA,MAAM,OAAA,GAAUE,iBAAA;AAAA,IACd,CAAC,OAAA,KAAqB;AACpB,MAAA,IAAI,CAAC,OAAA,EAAS;AACZ,QAAA,uBAAA,CAAwB,OAAA,GAAU,KAAA;AAAA,MACpC;AACA,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAA,CAAA;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,sBAAsBC,8BAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,OAAA;AAAA,IACd,QAAA,EAAU,EAAE,SAAA,EAAW,QAAA;AAAS,GACjC,CAAA;AAED,EAAA,MAAM,kBAAA,GAAqBC,4CAAsB,mBAAmB,CAAA;AAEpE,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAA,EAAiB,GAAIC,uBAAA,CAAgB;AAAA,IAC9DC,iBAAS,mBAAmB,CAAA;AAAA,IAC5BC,mBAAW,mBAAmB,CAAA;AAAA,IAC9B;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO;AAAA,MACL,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,uBAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,sCACGC,+BAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,cAC9B,QAAA,EACH,CAAA;AAEJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuActions.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var MegaMenuActions$1 = require('./MegaMenuActions.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltMegaMenuActions");
|
|
12
|
-
const MegaMenuActions = react.forwardRef(
|
|
13
|
-
function MegaMenuActions2({ className, ...rest }, ref) {
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "salt-mega-menu-actions",
|
|
17
|
-
css: MegaMenuActions$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
|
-
"div",
|
|
22
|
-
{
|
|
23
|
-
"data-mega-menu-actions": "",
|
|
24
|
-
className: clsx.clsx(withBaseName(), className),
|
|
25
|
-
ref,
|
|
26
|
-
...rest
|
|
27
|
-
}
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
exports.MegaMenuActions = MegaMenuActions;
|
|
33
|
-
//# sourceMappingURL=MegaMenuActions.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuActions.js","sources":["../src/mega-menu/MegaMenuActions.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport megaMenuActionsCss from \"./MegaMenuActions.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuActions\");\n\nexport interface MegaMenuActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the actions. Place `MegaMenuActions` inside\n * `MegaMenuContent`, after `MegaMenuGroups`; it renders as a band beneath the\n * groups, spanning their width.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuActions = forwardRef<HTMLDivElement, MegaMenuActionsProps>(\n function MegaMenuActions({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-actions\",\n css: megaMenuActionsCss,\n window: targetWindow,\n });\n\n return (\n <div\n data-mega-menu-actions=\"\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuActions","useWindow","useComponentCssInjection","megaMenuActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAWhD,MAAM,eAAA,GAAkBC,gBAAA;AAAA,EAC7B,SAASC,gBAAAA,CAAgB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACpD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,iBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,wBAAA,EAAuB,EAAA;AAAA,QACvB,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuAside.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var MegaMenuAside$1 = require('./MegaMenuAside.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltMegaMenuAside");
|
|
12
|
-
const MegaMenuAside = react.forwardRef(
|
|
13
|
-
function MegaMenuAside2({ className, ...rest }, ref) {
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "salt-mega-menu-aside",
|
|
17
|
-
css: MegaMenuAside$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
|
-
"aside",
|
|
22
|
-
{
|
|
23
|
-
"data-mega-menu-column": "",
|
|
24
|
-
className: clsx.clsx(withBaseName(), className),
|
|
25
|
-
ref,
|
|
26
|
-
...rest
|
|
27
|
-
}
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
exports.MegaMenuAside = MegaMenuAside;
|
|
33
|
-
//# sourceMappingURL=MegaMenuAside.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuAside.js","sources":["../src/mega-menu/MegaMenuAside.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport megaMenuAsideCss from \"./MegaMenuAside.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuAside\");\n\nexport interface MegaMenuAsideProps extends ComponentPropsWithoutRef<\"aside\"> {\n /**\n * The content. Renders to the left of `MegaMenuContent` when placed before\n * it, and to the right when placed after.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuAside = forwardRef<HTMLElement, MegaMenuAsideProps>(\n function MegaMenuAside({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-aside\",\n css: megaMenuAsideCss,\n window: targetWindow,\n });\n\n // Side content is also a navigation column (`data-mega-menu-column`).\n return (\n <aside\n data-mega-menu-column=\"\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuAside","useWindow","useComponentCssInjection","megaMenuAsideCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAU9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAClD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAGD,IAAA,uBACEC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,uBAAA,EAAsB,EAAA;AAAA,QACtB,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltMegaMenuContent {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-300);\n padding: var(--salt-spacing-300);\n min-width: 0;\n flex: 0 1 auto;\n max-inline-size: var(--saltMegaMenuPanel-availableWidth);\n box-sizing: border-box;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=MegaMenuContent.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var MegaMenuContent$1 = require('./MegaMenuContent.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltMegaMenuContent");
|
|
12
|
-
const MegaMenuContent = react.forwardRef(
|
|
13
|
-
function MegaMenuContent2({ children, className, ...rest }, ref) {
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "salt-mega-menu-content",
|
|
17
|
-
css: MegaMenuContent$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children });
|
|
21
|
-
}
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
exports.MegaMenuContent = MegaMenuContent;
|
|
25
|
-
//# sourceMappingURL=MegaMenuContent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuContent.js","sources":["../src/mega-menu/MegaMenuContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport megaMenuContentCss from \"./MegaMenuContent.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuContent\");\n\nexport interface MegaMenuContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the mega menu navigation area, typically a `MegaMenuGroups`\n * and an optional `MegaMenuActions`.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuContent = forwardRef<HTMLDivElement, MegaMenuContentProps>(\n function MegaMenuContent({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-content\",\n css: megaMenuContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuContent","useWindow","useComponentCssInjection","megaMenuContentCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAUhD,MAAM,eAAA,GAAkBC,gBAAA;AAAA,EAC7B,SAASC,iBAAgB,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC9D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,iBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuContext.js","sources":["../src/mega-menu/MegaMenuContext.ts"],"sourcesContent":["import type { FloatingRootContext } from \"@floating-ui/react\";\nimport { createContext } from \"@salt-ds/core\";\nimport type {\n Dispatch,\n HTMLProps,\n MutableRefObject,\n SetStateAction,\n} from \"react\";\nimport type { MegaMenuPlacement } from \"./MegaMenu\";\n\nexport interface MegaMenuContextValue {\n /** Whether the mega menu is currently open. */\n openState: boolean;\n /** Toggle or set the open state of the mega menu. */\n setOpen: (open: boolean) => void;\n /** The floating-ui root context for coordinating interactions. */\n floatingRootContext: FloatingRootContext;\n /** The placement of the mega menu panel relative to the trigger. */\n placement: MegaMenuPlacement;\n /** Props getter for the trigger (reference) element. Merges floating-ui interaction props with user props. */\n getReferenceProps: (\n userProps?: HTMLProps<Element> | undefined,\n ) => Record<string, unknown>;\n /** Props getter for the floating panel element. Merges floating-ui interaction props with user props. */\n getFloatingProps: (\n userProps?: HTMLProps<HTMLElement> | undefined,\n ) => Record<string, unknown>;\n /** Ref setter for the floating panel element. */\n setFloating: Dispatch<SetStateAction<HTMLElement | null>>;\n /** Ref setter for the trigger (reference) element. */\n setReference: Dispatch<SetStateAction<HTMLElement | null>>;\n /** Whether the first item should receive focus when the panel opens. */\n focusFirstItemOnOpenRef: MutableRefObject<boolean>;\n /** The id of the mega menu panel, used for aria-controls on the trigger. */\n panelId: string | undefined;\n /** Registers the panel's id so the trigger's aria-controls stays in sync. */\n setPanelId: Dispatch<SetStateAction<string | undefined>>;\n}\n\nexport const MegaMenuContext = createContext<MegaMenuContextValue | undefined>(\n \"MegaMenuContext\",\n undefined,\n);\n"],"names":["createContext"],"mappings":";;;;AAuCO,MAAM,eAAA,GAAkBA,kBAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var MegaMenuGroup$1 = require('./MegaMenuGroup.css.js');
|
|
10
|
-
var MegaMenuGroupContext = require('./MegaMenuGroupContext.js');
|
|
11
|
-
|
|
12
|
-
const withBaseName = core.makePrefixer("saltMegaMenuGroup");
|
|
13
|
-
const MegaMenuGroup = react.forwardRef(
|
|
14
|
-
function MegaMenuGroup2({ children, className, ...rest }, ref) {
|
|
15
|
-
const targetWindow = window.useWindow();
|
|
16
|
-
styles.useComponentCssInjection({
|
|
17
|
-
testId: "salt-mega-menu-group",
|
|
18
|
-
css: MegaMenuGroup$1,
|
|
19
|
-
window: targetWindow
|
|
20
|
-
});
|
|
21
|
-
const [headingId, setHeadingId] = react.useState(void 0);
|
|
22
|
-
const contextValue = react.useMemo(
|
|
23
|
-
() => ({ headingId, setHeadingId }),
|
|
24
|
-
[headingId]
|
|
25
|
-
);
|
|
26
|
-
return /* @__PURE__ */ jsxRuntime.jsx(MegaMenuGroupContext.MegaMenuGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
-
"div",
|
|
28
|
-
{
|
|
29
|
-
"data-mega-menu-column": "",
|
|
30
|
-
className: clsx.clsx(withBaseName(), className),
|
|
31
|
-
ref,
|
|
32
|
-
...rest,
|
|
33
|
-
children
|
|
34
|
-
}
|
|
35
|
-
) });
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
exports.MegaMenuGroup = MegaMenuGroup;
|
|
40
|
-
//# sourceMappingURL=MegaMenuGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuGroup.js","sources":["../src/mega-menu/MegaMenuGroup.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useMemo,\n useState,\n} from \"react\";\nimport megaMenuGroupCss from \"./MegaMenuGroup.css\";\nimport { MegaMenuGroupContext } from \"./MegaMenuGroupContext\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroup\");\n\nexport interface MegaMenuGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the mega menu group: a `MegaMenuGroupHeading` and a\n * `MegaMenuList` of `MegaMenuListItem`s.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuGroup = forwardRef<HTMLDivElement, MegaMenuGroupProps>(\n function MegaMenuGroup({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-group\",\n css: megaMenuGroupCss,\n window: targetWindow,\n });\n\n // The heading registers its id so the list can label itself; `undefined`\n // with no heading. The group is also a navigation column.\n const [headingId, setHeadingId] = useState<string | undefined>(undefined);\n const contextValue = useMemo(\n () => ({ headingId, setHeadingId }),\n [headingId],\n );\n\n return (\n <MegaMenuGroupContext.Provider value={contextValue}>\n <div\n data-mega-menu-column=\"\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n </MegaMenuGroupContext.Provider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuGroup","useWindow","useComponentCssInjection","megaMenuGroupCss","useState","useMemo","jsx","MegaMenuGroupContext","clsx"],"mappings":";;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAU9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,eAAc,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC5D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAID,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAA6B,MAAS,CAAA;AACxE,IAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,MACnB,OAAO,EAAE,SAAA,EAAW,YAAA,EAAa,CAAA;AAAA,MACjC,CAAC,SAAS;AAAA,KACZ;AAEA,IAAA,uBACEC,cAAA,CAACC,yCAAA,CAAqB,QAAA,EAArB,EAA8B,OAAO,YAAA,EACpC,QAAA,kBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,uBAAA,EAAsB,EAAA;AAAA,QACtB,SAAA,EAAWE,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var core = require('@salt-ds/core');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const MegaMenuGroupContext = core.createContext(
|
|
7
|
-
"MegaMenuGroupContext",
|
|
8
|
-
{ headingId: void 0, setHeadingId: () => {
|
|
9
|
-
} }
|
|
10
|
-
);
|
|
11
|
-
function useMegaMenuGroup() {
|
|
12
|
-
return react.useContext(MegaMenuGroupContext);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
exports.MegaMenuGroupContext = MegaMenuGroupContext;
|
|
16
|
-
exports.useMegaMenuGroup = useMegaMenuGroup;
|
|
17
|
-
//# sourceMappingURL=MegaMenuGroupContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuGroupContext.js","sources":["../src/mega-menu/MegaMenuGroupContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\nexport interface MegaMenuGroupContextValue {\n /**\n * The rendered heading's id, used to label the item list via `aria-labelledby`.\n * `undefined` when the group has no `MegaMenuGroupHeading`.\n */\n headingId: string | undefined;\n /** Register (or clear, with `undefined`) the heading's id. */\n setHeadingId: (id: string | undefined) => void;\n}\n\nexport const MegaMenuGroupContext = createContext<MegaMenuGroupContextValue>(\n \"MegaMenuGroupContext\",\n { headingId: undefined, setHeadingId: () => {} },\n);\n\n/** Access the nearest `MegaMenuGroup` context. */\nexport function useMegaMenuGroup(): MegaMenuGroupContextValue {\n return useContext(MegaMenuGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAaO,MAAM,oBAAA,GAAuBA,kBAAA;AAAA,EAClC,sBAAA;AAAA,EACA,EAAE,SAAA,EAAW,MAAA,EAAW,YAAA,EAAc,MAAM;AAAA,EAAC,CAAA;AAC/C;AAGO,SAAS,gBAAA,GAA8C;AAC5D,EAAA,OAAOC,iBAAW,oBAAoB,CAAA;AACxC;;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltMegaMenuGroupHeading {\n display: flex;\n align-items: center;\n margin: 0 0 var(--salt-spacing-50);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n min-height: var(--salt-size-base);\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n line-height: var(--salt-text-label-lineHeight);\n color: var(--salt-content-secondary-foreground);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=MegaMenuGroupHeading.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuGroupHeading.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var MegaMenuGroupContext = require('./MegaMenuGroupContext.js');
|
|
10
|
-
var MegaMenuGroupHeading$1 = require('./MegaMenuGroupHeading.css.js');
|
|
11
|
-
|
|
12
|
-
const withBaseName = core.makePrefixer("saltMegaMenuGroupHeading");
|
|
13
|
-
const MegaMenuGroupHeading = react.forwardRef(function MegaMenuGroupHeading2({ children, className, id: idProp, as: Heading = "h3", ...rest }, ref) {
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "salt-mega-menu-group-heading",
|
|
17
|
-
css: MegaMenuGroupHeading$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
const id = core.useId(idProp);
|
|
21
|
-
const { setHeadingId } = MegaMenuGroupContext.useMegaMenuGroup();
|
|
22
|
-
core.useIsomorphicLayoutEffect(() => {
|
|
23
|
-
setHeadingId(id);
|
|
24
|
-
return () => setHeadingId(void 0);
|
|
25
|
-
}, [id, setHeadingId]);
|
|
26
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
-
Heading,
|
|
28
|
-
{
|
|
29
|
-
className: clsx.clsx(withBaseName(), className),
|
|
30
|
-
ref,
|
|
31
|
-
...rest,
|
|
32
|
-
id,
|
|
33
|
-
children
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
exports.MegaMenuGroupHeading = MegaMenuGroupHeading;
|
|
39
|
-
//# sourceMappingURL=MegaMenuGroupHeading.js.map
|