@salt-ds/lab 1.0.0-alpha.95 → 1.0.0-alpha.97

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.97
+
+### Minor Changes
+
+- 2516755: Removed `ToolbarNext`, `ToolbarContentNext`, and `TooltrayNext` from lab and promoted to core. As part of the promotion the components were renamed e.g., `ToolbarNext` is now `Toolbar`.
+
+  The legacy `Toolbar` and `Tooltray` exports in lab are unchanged.
+
+### Patch Changes
+
+- Updated dependencies [906c94e]
+- Updated dependencies [2516755]
+- Updated dependencies [027f8c4]
+- Updated dependencies [027f8c4]
+  - @salt-ds/core@1.65.0
+
+## 1.0.0-alpha.96
+
+### Minor Changes
+
+- 248982a: Reworked `MegaMenu` for more semantic, accessible markup and more predictable
+  keyboard navigation.
+
+  - **Renamed `MegaMenuHeader` to `MegaMenuGroupHeading`.** It now renders a real heading (`<h3>` by default; set the level with `as`, e.g. `as="h2"`) instead of a `<div>`, so each group appears in the document outline for assistive technology.
+  - **Renamed `MegaMenuItem` to `MegaMenuListItem`.** It renders an `<a>` by default — pass a `render` element such as `react-router`'s `Link` — and accepts a `current` prop that sets `aria-current="page"` for the active page.
+  - **Added `MegaMenuList`.** Wrap a group's items in it so they are announced as a list; `MegaMenuListItem` can no longer be placed directly inside `MegaMenuGroup`.
+  - **Renamed `MegaMenuSupportingContent` to `MegaMenuAside`.** It now renders an `<aside>` landmark, making the supporting region discoverable to screen-reader users.
+  - **Renamed `MegaMenuSupportingActions` to `MegaMenuActions`.**
+  - **Added `MegaMenuContent`.** It is the center navigation region holding the groups and an optional `MegaMenuActions` band; `MegaMenuAside` sits beside it, positioned by source order.
+  - **Narrowed `MegaMenu`'s `placement` prop** to `"bottom" | "bottom-start" | "bottom-end"` (the new `MegaMenuPlacement` type).
+  - **Menu columns now adapt to the available width** instead of overflowing, keeping panels usable on narrower viewports.
+  - **Keyboard navigation is more predictable** between the columns, the actions row, and the trigger;
+
+  ```diff
+    <MegaMenuPanel aria-label="Solutions menu">
+  +   <MegaMenuContent>
+        <MegaMenuGroups>
+          <MegaMenuGroup>
+  -         <MegaMenuHeader>Financial services</MegaMenuHeader>
+  -         <MegaMenuItem render={<Link to="/digital-banking" />}>Digital banking</MegaMenuItem>
+  +         <MegaMenuGroupHeading>Financial services</MegaMenuGroupHeading>
+  +         <MegaMenuList>
+  +           <MegaMenuListItem render={<Link to="/digital-banking" />}>Digital banking</MegaMenuListItem>
+  +         </MegaMenuList>
+          </MegaMenuGroup>
+        </MegaMenuGroups>
+  -     <MegaMenuSupportingActions>
+  +     <MegaMenuActions>
+          <Link href="#demo">Book a demo</Link>
+  -     </MegaMenuSupportingActions>
+  +     </MegaMenuActions>
+  +   </MegaMenuContent>
+  -   <MegaMenuSupportingContent>...</MegaMenuSupportingContent>
+  +   <MegaMenuAside>...</MegaMenuAside>
+    </MegaMenuPanel>
+  ```
+
+### Patch Changes
+
+- bab3b6c: Fixed `ToolbarNext` overflow calculations to preserve fractional browser measurements and avoid false overflow caused by subpixel rounding.
+- Updated dependencies [1a48c1a]
+  - @salt-ds/core@1.64.1
+
 ## 1.0.0-alpha.95
 
 ### Minor Changes

package/css/salt-lab.css

@@ -1893,51 +1893,81 @@
   border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
 }
 
-/* src/mega-menu/MegaMenuGroup.css */
-.saltMegaMenuGroup {
+/* src/mega-menu/MegaMenuActions.css */
+.saltMegaMenuActions {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  margin-block-start: auto;
 }
-.saltMegaMenuGroup-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+
+/* src/mega-menu/MegaMenuAside.css */
+.saltMegaMenuAside {
+  flex: 0 0 auto;
   display: flex;
-  gap: var(--salt-spacing-fixed-100);
   flex-direction: column;
+  padding: var(--salt-spacing-300);
 }
 
-/* src/mega-menu/MegaMenuGroups.css */
-.saltMegaMenuGroups {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuGroups-columnWidth, 12rem));
+/* src/mega-menu/MegaMenuContent.css */
+.saltMegaMenuContent {
+  display: flex;
+  flex-direction: column;
   gap: var(--salt-spacing-300);
   padding: var(--salt-spacing-300);
-  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));
+  min-width: 0;
+  flex: 0 1 auto;
+  max-inline-size: var(--saltMegaMenuPanel-availableWidth);
+  box-sizing: border-box;
 }
 
-/* src/mega-menu/MegaMenuHeader.css */
-.saltMegaMenuHeader-content {
+/* src/mega-menu/MegaMenuGroup.css */
+.saltMegaMenuGroup {
+  display: flex;
+  flex-direction: column;
+}
+
+/* src/mega-menu/MegaMenuGroupHeading.css */
+.saltMegaMenuGroupHeading {
   display: flex;
   align-items: center;
+  margin: 0 0 var(--salt-spacing-50);
   padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+  min-height: var(--salt-size-base);
   font-family: var(--salt-text-label-fontFamily);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-fontWeight-strong);
   line-height: var(--salt-text-label-lineHeight);
-  min-height: var(--salt-size-base);
   color: var(--salt-content-secondary-foreground);
 }
-.saltMegaMenuHeader {
-  margin-bottom: var(--salt-spacing-50);
-  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+
+/* src/mega-menu/MegaMenuGroups.css */
+.saltMegaMenuGroups {
+  align-self: start;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, var(--saltMegaMenuGroups-columnWidth, 12rem)));
+  gap: var(--salt-spacing-300);
+  min-width: 0;
+  max-inline-size: var(--saltMegaMenuPanel-availableWidth);
 }
 
-/* src/mega-menu/MegaMenuItem.css */
-.saltMegaMenuItem {
+/* src/mega-menu/MegaMenuList.css */
+.saltMegaMenuList {
   list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--salt-spacing-fixed-100);
+  flex-direction: column;
 }
-.saltMegaMenuItem > a {
+
+/* src/mega-menu/MegaMenuListItem.css */
+.saltMegaMenuListItem {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+.saltMegaMenuListItem-wrapper {
   display: flex;
   padding: var(--salt-spacing-50) var(--salt-spacing-100);
   align-items: flex-start;
@@ -1948,15 +1978,18 @@
   box-sizing: border-box;
   gap: var(--salt-spacing-100);
   position: relative;
-  border-radius: var(--salt-palette-corner-weak);
+  border-radius: var(--salt-palette-corner-weak, 0);
   text-decoration: none;
+  border: none;
+  font: inherit;
+  text-align: start;
 }
-.saltMegaMenuItem > a > .saltIcon {
+.saltMegaMenuListItem-wrapper > .saltIcon {
   display: flex;
   height: var(--salt-size-base);
   align-items: center;
 }
-.saltMegaMenuItem-content {
+.saltMegaMenuListItem-content {
   flex: 1 0;
   margin: var(--salt-spacing-75) 0;
   font-family: var(--salt-text-fontFamily);
@@ -1964,18 +1997,18 @@
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
 }
-.saltMegaMenuItem > a:focus-visible {
+.saltMegaMenuListItem-wrapper:focus-visible {
   outline: var(--salt-focused-outline);
   outline-offset: calc(var(--salt-size-fixed-100) * -2);
 }
-.saltMegaMenuItem > a:hover {
+.saltMegaMenuListItem-wrapper:hover:not(:focus-visible) {
   outline: none;
-  background: var(--salt-navigable-background-hover);
+  background: var(--salt-overlayable-background-hover);
 }
-.saltMegaMenuItem > a:active {
+.saltMegaMenuListItem-wrapper:active {
   background: var(--salt-navigable-accent-background-active);
 }
-.saltMegaMenuItem > a:active::before {
+.saltMegaMenuListItem-wrapper:active::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -1987,31 +2020,19 @@
 
 /* src/mega-menu/MegaMenuPanel.css */
 .saltMegaMenuPanel {
+  --saltMegaMenuPanel-availableWidth: calc(100vw - var(--salt-spacing-600));
   display: flex;
-  flex-wrap: wrap;
+  align-items: stretch;
   inline-size: var(--saltMegaMenuPanel-inlineSize, fit-content);
-  max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600))));
-  max-height: 90%;
+  max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth));
+  max-block-size: 90vh;
   overflow-x: hidden;
   overflow-y: auto;
   box-sizing: border-box;
-  border-radius: var(--salt-palette-corner);
+  border-radius: var(--salt-palette-corner, 0);
   border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
   background: var(--salt-container-primary-background);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-}
-
-/* src/mega-menu/MegaMenuSupportingActions.css */
-.saltMegaMenuSupportingActions {
-  display: flex;
-  flex-wrap: wrap;
-  width: fit-content;
-  padding-bottom: var(--salt-spacing-300);
-}
-
-/* src/mega-menu/MegaMenuSupportingContent.css */
-.saltMegaMenuSupportingContent {
-  padding: var(--salt-spacing-300);
+  box-shadow: var(--salt-overlayable-shadow-modal);
 }
 
 /* src/menu-button/MenuButton.css */
@@ -3127,206 +3148,6 @@
   flex-basis: 0;
 }
 
-/* src/toolbar-next/ToolbarContentNext.css */
-.saltToolbarContentNext {
-  display: flex;
-  align-items: center;
-  gap: var(--salt-spacing-100);
-  min-width: 0;
-  flex-shrink: 0;
-}
-.saltToolbarContentNext[data-position=start] {
-  justify-content: flex-start;
-}
-.saltToolbarContentNext[data-position=center] {
-  justify-content: center;
-}
-.saltToolbarContentNext[data-position=end] {
-  justify-content: flex-end;
-}
-.saltToolbarContentNext[data-implicit] > .saltTooltrayNext[data-align=center],
-.saltToolbarContentNext[data-implicit] > .saltTooltrayNext[data-align=end] {
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-
-/* src/toolbar-next/ToolbarNext.css */
-.saltToolbarNext {
-  box-sizing: border-box;
-  inline-size: 100%;
-  min-width: 0;
-  position: relative;
-}
-.saltToolbarNext-layout {
-  align-items: center;
-  --saltToolbarNext-band-gap: var(--salt-spacing-100);
-}
-.saltToolbarNext-layout:not([data-centered]) {
-  display: flex;
-  column-gap: var(--saltToolbarNext-band-gap);
-}
-.saltToolbarNext-layout[data-centered] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-}
-.saltToolbarNext-band {
-  display: flex;
-  align-items: center;
-  gap: var(--saltToolbarNext-band-gap);
-  min-width: 0;
-}
-.saltToolbarNext-layout:not([data-centered]) > .saltToolbarNext-band[data-band-position=end] {
-  justify-content: flex-end;
-  margin-inline-start: auto;
-}
-.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=start] {
-  grid-column: 1;
-}
-.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=center] {
-  grid-column: 2;
-  justify-content: center;
-}
-.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=end] {
-  grid-column: 3;
-  justify-content: flex-end;
-}
-.saltToolbarNext-fallback {
-  display: flex;
-  align-items: center;
-  gap: var(--salt-spacing-100);
-}
-.saltToolbarNext-layout > * {
-  min-width: 0;
-}
-.saltToolbarNext-primary {
-  --toolbarNext-background: var(--salt-container-primary-background);
-  --toolbarNext-borderColor: var(--salt-container-primary-borderColor);
-}
-.saltToolbarNext-secondary {
-  --toolbarNext-background: var(--salt-container-secondary-background);
-  --toolbarNext-borderColor: var(--salt-container-secondary-borderColor);
-}
-.saltToolbarNext-tertiary {
-  --toolbarNext-background: var(--salt-container-tertiary-background);
-  --toolbarNext-borderColor: var(--salt-container-tertiary-borderColor);
-}
-.saltToolbarNext-bordered {
-  background: var(--saltToolbarNext-background, var(--toolbarNext-background));
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbarNext-borderColor, var(--toolbarNext-borderColor));
-  border-radius: var(--salt-palette-corner, 0);
-  padding: var(--salt-spacing-100);
-}
-.saltToolbarNext-transparent {
-  background: transparent;
-  border: none;
-  padding: 0;
-}
-.saltToolbarNext-measurements {
-  display: flex;
-  gap: var(--salt-spacing-100);
-  position: absolute;
-  visibility: hidden;
-  pointer-events: none;
-  inset: 0 auto auto 0;
-  block-size: 0;
-  overflow: hidden;
-}
-.saltToolbarNext-measureTrigger {
-  white-space: nowrap;
-}
-
-/* src/toolbar-next/ToolbarNextOverflow.css */
-.saltToolbarNextOverflow-content {
-  position: relative;
-}
-.saltToolbarNextOverflow-slot,
-.saltToolbarNextOverflow-panelItem {
-  align-items: center;
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--salt-spacing-100);
-  min-width: 0;
-}
-.saltToolbarNextOverflow-slot[data-align=end] {
-  margin-inline-start: auto;
-}
-.saltToolbarNextOverflow-slot[data-align=center] {
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-}
-.saltToolbarNextOverflow-item {
-  align-items: center;
-  display: flex;
-  flex-shrink: 0;
-  min-width: 0;
-}
-.saltToolbarNextOverflow-menu {
-  display: flex;
-  flex-shrink: 0;
-}
-.saltToolbarNextOverflow-itemHost,
-.saltToolbarNextOverflow-contentHost {
-  display: contents;
-}
-.saltToolbarNextOverflow-trigger {
-  white-space: nowrap;
-}
-.saltToolbarNextOverflow-panel {
-  background: var(--salt-container-primary-background);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
-  border-radius: var(--salt-palette-corner, 0);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  box-sizing: border-box;
-  max-width: min(32rem, calc(100vw - var(--salt-spacing-300)));
-  overflow: auto;
-  position: absolute;
-  z-index: var(--salt-zIndex-flyover);
-}
-.saltToolbarNextOverflow-floatingDescendant.saltToolbarNextOverflow-floatingDescendant {
-  z-index: calc(var(--salt-zIndex-flyover) + var(--salt-zIndex-default));
-}
-.saltToolbarNextOverflow-panelContent {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--salt-spacing-100);
-  max-width: inherit;
-  min-width: max-content;
-  padding: var(--salt-spacing-100);
-}
-.saltToolbarNextOverflow-panel .saltTooltrayNext[data-align=center],
-.saltToolbarNextOverflow-panel .saltTooltrayNext[data-align=end] {
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-.saltToolbarNextOverflow-panel .saltTooltrayNext > * {
-  inline-size: auto;
-}
-.saltToolbarNextOverflow-content > .saltToolbarNextOverflow-slot .saltTooltrayNext[data-align=center],
-.saltToolbarNextOverflow-content > .saltToolbarNextOverflow-slot .saltTooltrayNext[data-align=end] {
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-
-/* src/toolbar-next/TooltrayNext.css */
-.saltTooltrayNext {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  gap: var(--salt-spacing-100);
-  min-width: 0;
-}
-.saltTooltrayNext > * {
-  flex-shrink: 0;
-}
-.saltTooltrayNext[data-align=end] {
-  margin-inline-start: auto;
-}
-.saltTooltrayNext[data-align=center] {
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-}
-
 /* src/window/ElectronWindow.css */
 .saltWindow {
   --saltDialog-boxShadow: none;
@@ -3437,4 +3258,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/0af170c9-7e3f-4fb8-8504-21af9780540e.css */
+/* src/8f16bdce-6a2c-43c5-bef1-c547bffcc9de.css */

package/dist-cjs/common-hooks/useSelection.js

@@ -2,6 +2,7 @@
 
 var core = require('@salt-ds/core');
 var react = require('react');
+var listDomUtils = require('./list-dom-utils.js');
 
 const defaultSelectionKeys = ["Enter", " "];
 const isSelectable = (item) => item && item.disabled !== true && item.selectable !== false;
@@ -157,19 +158,21 @@ const useSelection = ({
   );
   const handleClick = react.useCallback(
     (evt) => {
-      const item = indexPositions[highlightedIdx];
+      const targetIdx = listDomUtils.closestListItemIndex(evt.target);
+      const idx = targetIdx >= 0 ? targetIdx : highlightedIdx;
+      const item = indexPositions[idx];
       if (!disableSelection && isSelectable(item)) {
         evt.preventDefault();
         evt.stopPropagation();
         selectItemAtIndex(
           evt,
-          highlightedIdx,
+          idx,
           item,
           evt.shiftKey,
           evt.ctrlKey || evt.metaKey
         );
         if (isExtendedSelect) {
-          lastActive.current = highlightedIdx;
+          lastActive.current = idx;
         }
       }
     },

package/dist-cjs/common-hooks/useSelection.js.map

@@ -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":["useRef","useCallback","useControlled"],"mappings":"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"}
+{"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":["useRef","useCallback","useControlled","closestListItemIndex"],"mappings":";;;;;;AAyBA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAE1C,MAAM,YAAA,GAAe,CAAC,IAAA,KACpB,IAAA,IAAQ,KAAK,QAAA,KAAa,IAAA,IAAQ,KAAK,UAAA,KAAe,KAAA;AAExD,MAAM,WAAA,GAAc,CAClB,EAAA,EACA,EAAA,KAAA,CACI,GAAG,KAAA,IAAS,CAAA,KAAM,GAAG,KAAA,IAAS,CAAA,CAAA;AAM7B,MAAM,eAAe,CAG1B;AAAA,EACA,eAAA;AAAA,EACA,gBAAA,GAAmB,KAAA;AAAA;AAAA,EAEnB,cAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAO,MAAA,GAAS,EAAA;AAAA,EAChB,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,iBAAA;AAAA,EACA,aAAA,GAAgB,oBAAA;AAAA,EAChB;AACF,CAAA,KAGK;AAGH,EAAA,MAAM,iBAAiB,iBAAA,KAAsB,cAAA;AAC7C,EAAA,MAAM,mBAAmB,iBAAA,KAAsB,UAAA;AAC/C,EAAA,MAAM,mBAAmB,iBAAA,KAAsB,UAAA;AAE/C,EAAA,MAAM,UAAA,GAAaA,aAAO,EAAE,CAAA;AAE5B,EAAA,MAAM,gBAAA,GAAmBC,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,aAAA,CAAc,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IACtD,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,UAAA,GAAaA,kBAAY,MAID;AAI5B,IAAA,OAAO,gBAAA,IAAoB,gBAAA,GACtB,EAAC,GACD,IAAA;AAAA,EACP,CAAA,EAAG,CAAC,gBAAA,EAAkB,gBAAgB,CAAC,CAAA;AAEvC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,kBAAA,CAI9B;AAAA,IACA,UAAA,EAAY,YAAA;AAAA,IACZ,OAAA,EAAS,mBAAmB,UAAA,EAAW;AAAA,IACvC,IAAA,EAAM,cAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,cAAA,GAAiBD,iBAAA;AAAA,IACrB,CAAC,IAAA,KAAyB;AACxB,MAAA,OAAO,KAAA,CAAM,QAAQ,QAAQ,CAAA,GACzB,SAAS,QAAA,CAAS,IAAI,IACtB,QAAA,KAAa,IAAA;AAAA,IACnB,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAAgBA,iBAAA,CAAY,CAAC,IAAA,KAAyB,IAAA,EAAM,EAAE,CAAA;AACpE,EAAA,MAAM,kBAAA,GAAqBA,iBAAA;AAAA,IACzB,CAAC,IAAA,KAA0B,cAAA,CAAe,IAAI,IAAI,IAAA,GAAO,IAAA;AAAA,IACzD,CAAC,cAAc;AAAA,GACjB;AACA,EAAA,MAAM,cAAA,GAAiBA,iBAAA;AAAA,IACrB,CAAC,IAAA,KAAyB;AACxB,MAAA,MAAM,SAAA,GAAY,cAAA,CAAe,IAAI,CAAA,GAChC,QAAA,CAA8B,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,KAAM,IAAI,CAAA,GACtD,QAAA,CAA8B,OAAO,IAAI,CAAA;AAC9C,MAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAC1B,MAAA,OAAO,SAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,gBAAgB,QAAQ;AAAA,GAC3B;AACA,EAAA,MAAM,WAAA,GAAcA,iBAAA;AAAA,IAClB,CAAC,KAAa,yBAAA,KAAwC;AACpD,MAAA,MAAM,gBAAA,GAAmB,yBAAA,GACpB,QAAA,GACA,EAAC;AAEN,MAAA,MAAM,CAAC,gBAAgB,CAAA,GAAK,QAAA,CAA8B,MAAM,EAAE,CAAA;AAClE,MAAA,MAAM,qBAAA,GAAwB,gBAAA,GAC1B,cAAA,CAAe,OAAA,CAAQ,gBAAgB,CAAA,GACvC,CAAA;AAEJ,MAAA,MAAM,WAAA,GAAc,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,qBAAqB,CAAA;AACvD,MAAA,MAAM,SAAA,GAAY,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,qBAAqB,CAAA;AACrD,MAAA,MAAM,cAAA,GAAiB,cAAA,CAAe,KAAA,CAAM,WAAA,EAAa,YAAY,CAAC,CAAA;AAEtE,MAAA,MAAM,SAAA,GAAY,CAAC,mBAAG,IAAI,GAAA,CAAI,CAAC,GAAG,gBAAA,EAAkB,GAAG,cAAc,CAAC,CAAC,CAAA;AACvE,MAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAC1B,MAAA,OAAO,SAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,gBAAgB,QAAQ;AAAA,GAC3B;AAEA,EAAA,MAAM,iBAAA,GAAoBA,iBAAA;AAAA,IACxB,CACE,GAAA,EACA,GAAA,EACA,IAAA,EACA,aACA,yBAAA,KACG;AAIH,MAAA,IAAI,WAAA;AACJ,MAAA,IAAI,gBAAA,EAAkB;AACpB,QAAA,WAAA,GAAc,eAAe,IAAI,CAAA;AAAA,MACnC,WAAW,gBAAA,EAAkB;AAC3B,QAAA,IAAI,yBAAA,IAA6B,CAAC,WAAA,EAAa;AAC7C,UAAA,WAAA,GAAc,eAAe,IAAI,CAAA;AAAA,QACnC,WAAW,WAAA,EAAa;AACtB,UAAA,WAAA,GAAc,WAAA;AAAA,YACZ,GAAA;AAAA,YACA;AAAA,WACF;AAAA,QACF,CAAA,MAAO;AACL,UAAA,WAAA,GAAc,CAAC,IAAI,CAAA;AAAA,QACrB;AAAA,MACF,WAAW,cAAA,EAAgB;AACzB,QAAA,WAAA,GAAc,mBAAmB,IAAI,CAAA;AAAA,MACvC,CAAA,MAAO;AACL,QAAA,WAAA,GAAc,cAAc,IAAI,CAAA;AAAA,MAClC;AAEA,MAAA,IAAI,gBAAgB,QAAA,EAAU;AAC5B,QAAA,WAAA,CAAY,WAAW,CAAA;AAAA,MACzB;AAGA,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,GAAA,EAAK,IAAA,CAAA;AAEhB,MAAA,IAAI,gBAAgB,QAAA,EAAU;AAC5B,QAAA,IAAI,iBAAA,EAAmB;AACrB,UAAA,iBAAA,CAAkB,KAAK,WAAW,CAAA;AAAA,QACpC;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,aAAA,GAAgBA,iBAAA;AAAA,IACpB,CAAC,GAAA,KAAuB;AACtB,MAAA,MAAM,IAAA,GAAO,eAAe,cAAc,CAAA;AAC1C,MAAA,IAAI,YAAA,CAAa,IAAI,CAAA,EAAG;AACtB,QAAA,IAAI,iBAAiB,GAAG,CAAA,IAAM,WAAA,IAAe,GAAA,CAAI,QAAQ,KAAA,EAAQ;AAG/D,UAAA,IAAI,GAAA,CAAI,QAAQ,KAAA,EAAO;AACrB,YAAA,GAAA,CAAI,cAAA,EAAe;AAAA,UACrB;AACA,UAAA,iBAAA;AAAA,YACE,GAAA;AAAA,YACA,cAAA;AAAA,YACA,IAAA;AAAA,YACA,KAAA;AAAA,YACA,GAAA,CAAI,WAAW,GAAA,CAAI;AAAA,WACrB;AACA,UAAA,IAAI,gBAAA,EAAkB;AACpB,YAAA,UAAA,CAAW,OAAA,GAAU,cAAA;AAAA,UACvB;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,wBAAA,GAA2BA,iBAAA;AAAA,IAC/B,CAAC,KAAoB,YAAA,KAAyB;AAC5C,MAAA,IAAI,gBAAA,IAAoB,IAAI,QAAA,EAAU;AACpC,QAAA,MAAM,IAAA,GAAO,eAAe,YAAY,CAAA;AACxC,QAAA,IAAI,YAAA,CAAa,IAAI,CAAA,EAAG;AACtB,UAAA,iBAAA,CAAkB,GAAA,EAAK,YAAA,EAAc,IAAA,EAAM,IAAI,CAAA;AAAA,QACjD;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAA,EAAkB,cAAA,EAAgB,iBAAiB;AAAA,GACtD;AAEA,EAAA,MAAM,WAAA,GAAcA,iBAAA;AAAA,IAClB,CAAC,GAAA,KAAoB;AAOnB,MAAA,MAAM,SAAA,GAAYE,iCAAA,CAAqB,GAAA,CAAI,MAAqB,CAAA;AAChE,MAAA,MAAM,GAAA,GAAM,SAAA,IAAa,CAAA,GAAI,SAAA,GAAY,cAAA;AACzC,MAAA,MAAM,IAAA,GAAO,eAAe,GAAG,CAAA;AAC/B,MAAA,IAAI,CAAC,gBAAA,IAAoB,YAAA,CAAa,IAAI,CAAA,EAAG;AAE3C,QAAA,GAAA,CAAI,cAAA,EAAe;AACnB,QAAA,GAAA,CAAI,eAAA,EAAgB;AACpB,QAAA,iBAAA;AAAA,UACE,GAAA;AAAA,UACA,GAAA;AAAA,UACA,IAAA;AAAA,UACA,GAAA,CAAI,QAAA;AAAA,UACJ,GAAA,CAAI,WAAW,GAAA,CAAI;AAAA,SACrB;AACA,QAAA,IAAI,gBAAA,EAAkB;AACpB,UAAA,UAAA,CAAW,OAAA,GAAU,GAAA;AAAA,QACvB;AAAA,MAEF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,OAAA,EAAS,WAAA;AAAA,IACT,SAAA,EAAW,aAAA;AAAA,IACX,oBAAA,EAAsB;AAAA,GACxB;AAEA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/index.js

@@ -79,13 +79,15 @@ var Logo = require('./logo/Logo.js');
 var LogoImage = require('./logo/LogoImage.js');
 var LogoSeparator = require('./logo/LogoSeparator.js');
 var MegaMenu = require('./mega-menu/MegaMenu.js');
+var MegaMenuActions = require('./mega-menu/MegaMenuActions.js');
+var MegaMenuAside = require('./mega-menu/MegaMenuAside.js');
+var MegaMenuContent = require('./mega-menu/MegaMenuContent.js');
 var MegaMenuGroup = require('./mega-menu/MegaMenuGroup.js');
+var MegaMenuGroupHeading = require('./mega-menu/MegaMenuGroupHeading.js');
 var MegaMenuGroups = require('./mega-menu/MegaMenuGroups.js');
-var MegaMenuHeader = require('./mega-menu/MegaMenuHeader.js');
-var MegaMenuItem = require('./mega-menu/MegaMenuItem.js');
+var MegaMenuList = require('./mega-menu/MegaMenuList.js');
+var MegaMenuListItem = require('./mega-menu/MegaMenuListItem.js');
 var MegaMenuPanel = require('./mega-menu/MegaMenuPanel.js');
-var MegaMenuSupportingActions = require('./mega-menu/MegaMenuSupportingActions.js');
-var MegaMenuSupportingContent = require('./mega-menu/MegaMenuSupportingContent.js');
 var MegaMenuTrigger = require('./mega-menu/MegaMenuTrigger.js');
 var MenuButton = require('./menu-button/MenuButton.js');
 var Metric = require('./metric/Metric.js');
@@ -126,9 +128,6 @@ var Toolbar = require('./toolbar/Toolbar.js');
 var ToolbarButton = require('./toolbar/ToolbarButton.js');
 var Tooltray = require('./toolbar/Tooltray.js');
 var ToolbarField = require('./toolbar/toolbar-field/ToolbarField.js');
-var ToolbarContentNext = require('./toolbar-next/ToolbarContentNext.js');
-var ToolbarNext = require('./toolbar-next/ToolbarNext.js');
-var TooltrayNext = require('./toolbar-next/TooltrayNext.js');
 var ElectronWindow = require('./window/ElectronWindow.js');
 var WindowContext = require('./window/WindowContext.js');
 
@@ -216,13 +215,15 @@ exports.Logo = Logo.Logo;
 exports.LogoImage = LogoImage.LogoImage;
 exports.LogoSeparator = LogoSeparator.LogoSeparator;
 exports.MegaMenu = MegaMenu.MegaMenu;
+exports.MegaMenuActions = MegaMenuActions.MegaMenuActions;
+exports.MegaMenuAside = MegaMenuAside.MegaMenuAside;
+exports.MegaMenuContent = MegaMenuContent.MegaMenuContent;
 exports.MegaMenuGroup = MegaMenuGroup.MegaMenuGroup;
+exports.MegaMenuGroupHeading = MegaMenuGroupHeading.MegaMenuGroupHeading;
 exports.MegaMenuGroups = MegaMenuGroups.MegaMenuGroups;
-exports.MegaMenuHeader = MegaMenuHeader.MegaMenuHeader;
-exports.MegaMenuItem = MegaMenuItem.MegaMenuItem;
+exports.MegaMenuList = MegaMenuList.MegaMenuList;
+exports.MegaMenuListItem = MegaMenuListItem.MegaMenuListItem;
 exports.MegaMenuPanel = MegaMenuPanel.MegaMenuPanel;
-exports.MegaMenuSupportingActions = MegaMenuSupportingActions.MegaMenuSupportingActions;
-exports.MegaMenuSupportingContent = MegaMenuSupportingContent.MegaMenuSupportingContent;
 exports.MegaMenuTrigger = MegaMenuTrigger.MegaMenuTrigger;
 exports.MenuButton = MenuButton.MenuButton;
 exports.Metric = Metric.Metric;
@@ -288,9 +289,6 @@ exports.Toolbar = Toolbar.Toolbar;
 exports.ToolbarButton = ToolbarButton.ToolbarButton;
 exports.Tooltray = Tooltray.Tooltray;
 exports.ToolbarField = ToolbarField.ToolbarField;
-exports.ToolbarContentNext = ToolbarContentNext.ToolbarContentNext;
-exports.ToolbarNext = ToolbarNext.ToolbarNext;
-exports.TooltrayNext = TooltrayNext.TooltrayNext;
 exports.ElectronWindow = ElectronWindow.ElectronWindow;
 exports.Window = WindowContext.Window;
 exports.WindowContext = WindowContext.WindowContext;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/list/useList.js

@@ -180,7 +180,13 @@ const useList = ({
     onMouseLeave: navigationControlProps.onMouseLeave
   };
   const listHandlers = listHandlersProp || {
-    onClick: selectionHook.listHandlers.onClick,
+    // Don't expose a click handler when the list is disabled. Previously,
+    // selection on disabled lists was prevented only as a side-effect of
+    // `handleMouseMove` gating on `disabled` (which kept `highlightedIdx` at
+    // -1, so `useSelection.handleClick` no-op'd). Now that `handleClick`
+    // resolves the clicked item directly from the event target, we must
+    // explicitly suppress the handler here.
+    onClick: disabled ? void 0 : selectionHook.listHandlers.onClick,
     // MouseEnter would be much better for this. There is a bug in Cypress
     // wheby it emits spurious MouseEnter (and MouseOver) events around
     // keypress events, which break many tests.