@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.12

package/dist-es/index.js

@@ -20,11 +20,10 @@ export { useLayoutEffectOnce } from './utils/useLayoutEffectOnce.js';
 export { useLayoutEffectSkipFirst } from './utils/useLayoutEffectSkipFirst.js';
 export { useOverflowDetection } from './utils/useOverflowDetection.js';
 export { useSlideSelection } from './utils/useSlideSelection.js';
-export { AccordionSection } from './accordion/AccordionSection.js';
-export { AccordionSectionContext, useAccordionSectionContext } from './accordion/AccordionSectionContext.js';
+export { AccordionGroup } from './accordion/AccordionGroup.js';
+export { AccordionPanel } from './accordion/AccordionPanel.js';
 export { Accordion } from './accordion/Accordion.js';
-export { AccordionSummary } from './accordion/AccordionSummary.js';
-export { AccordionDetails } from './accordion/AccordionDetails.js';
+export { AccordionHeader } from './accordion/AccordionHeader.js';
 export { AppHeader } from './app-header/AppHeader.js';
 export { Badge } from './badge/Badge.js';
 export { Breadcrumb } from './breadcrumbs/Breadcrumb.js';
@@ -91,11 +90,16 @@ export { ListItemHeader } from './list/ListItemHeader.js';
 export { ListItemGroup } from './list/ListItemGroup.js';
 export { useList } from './list/useList.js';
 export { VirtualizedList } from './list/VirtualizedList.js';
+export { ListNext } from './list-next/ListNext.js';
+export { ListItemNext } from './list-next/ListItemNext.js';
 export { Logo } from './logo/Logo.js';
+export { LogoImage } from './logo/LogoImage.js';
+export { LogoSeparator } from './logo/LogoSeparator.js';
 export { MenuButton } from './menu-button/MenuButton.js';
 export { Metric } from './metric/Metric.js';
 export { MetricHeader } from './metric/MetricHeader.js';
 export { MetricContent } from './metric/MetricContent.js';
+export { MultilineInput } from './multiline-input/MultilineInput.js';
 export { NavItem } from './nav-item/NavItem.js';
 export { Overlay } from './overlay/Overlay.js';
 export { useOverlay } from './overlay/useOverlay.js';
@@ -136,8 +140,11 @@ export { Tabstrip } from './tabs/Tabstrip.js';
 export { Tab } from './tabs/Tab.js';
 export { TabPanel } from './tabs/TabPanel.js';
 export { Tabs } from './tabs/Tabs.js';
+export { TabNext } from './tabs-next/TabNext.js';
+export { TabstripNext } from './tabs-next/TabstripNext.js';
 export { ToggleButton } from './toggle-button/ToggleButton.js';
-export { ToggleButtonGroup } from './toggle-button/ToggleButtonGroup.js';
+export { ToggleButtonGroup } from './toggle-button-group/ToggleButtonGroup.js';
+export { useToggleButtonGroup } from './toggle-button-group/ToggleButtonGroupContext.js';
 export { TokenizedInput } from './tokenized-input/TokenizedInput.js';
 export { TokenizedInputBase } from './tokenized-input/TokenizedInputBase.js';
 export { useTokenizedInput } from './tokenized-input/useTokenizedInput.js';

package/dist-es/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-es/list/useList.js

@@ -115,7 +115,6 @@ const useList = ({
   const handleKeyDown = useCallback(
     (evt) => {
       var _a, _b, _c;
-      console.log(`useList handleKeyDown`);
       if (!evt.defaultPrevented) {
         typeaheadOnKeyDown == null ? void 0 : typeaheadOnKeyDown(evt);
       }

package/dist-es/list/useList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useList.js","sources":["../src/list/useList.ts"],"sourcesContent":["import {\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  closestListItemIndex,\n  CollectionItem,\n  ListHandlers,\n  selectedType,\n  SelectHandler,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useTypeahead,\n  useViewportTracking,\n} from \"../common-hooks\";\n\nimport { ListHookProps, ListHookResult, ListControlProps } 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  type selectedItem = selectedType<Item, Selection>;\n\n  const lastSelection = useRef<typeof selected>(selected || defaultSelected);\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIndex: number) => {\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 any);\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) =>\n                isValidElement(s.value) ? s.label : s.value\n              ) as selectedItem)\n            : selected &&\n                ((isValidElement(selected.value)\n                  ? selected.label\n                  : selected.value) as any)\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) => {\n      console.log(`useList handleKeyDown`);\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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"}
+{"version":3,"file":"useList.js","sources":["../src/list/useList.ts"],"sourcesContent":["import {\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  closestListItemIndex,\n  CollectionItem,\n  ListHandlers,\n  selectedType,\n  SelectHandler,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useTypeahead,\n  useViewportTracking,\n} from \"../common-hooks\";\n\nimport { ListHookProps, ListHookResult, ListControlProps } 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  type selectedItem = selectedType<Item, Selection>;\n\n  const lastSelection = useRef<typeof selected>(selected || defaultSelected);\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIndex: number) => {\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 any);\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) =>\n                isValidElement(s.value) ? s.label : s.value\n              ) as selectedItem)\n            : selected &&\n                ((isValidElement(selected.value)\n                  ? selected.label\n                  : selected.value) as any)\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) => {\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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"}

package/dist-es/list-deprecated/ListItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltListItemDeprecated {\n  /* Color */\n  --list-item-text-color: var(--salt-selectable-foreground);\n  --list-item-background: var(--salt-selectable-background);\n  --list-item-background-hover: var(--salt-selectable-background-hover);\n  --list-item-selected-focus-outlineColor: var(--salt-accent-foreground); /* TODO: Check token with design */\n\n  --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n\n  /* Text, Font */\n  --list-item-textAlign: var(--salt-text-textAlign);\n  --list-item-fontSize: var(--salt-text-fontSize);\n  --list-item-lineHeight: var(--salt-text-lineHeight);\n\n  /* Spacing */\n  --list-item-padding: 0 var(--salt-size-unit);\n\n  /* Misc. */\n  --list-item-gap: 0px;\n  --list-item-alignItems: center;\n  --list-item-selectable-cursor: pointer;\n  --list-item-cursor: default;\n\n  --list-item-disabled-cursor: var(--salt-selectable-cursor-disabled);\n  --list-item-disabled-regular-opacity: var(--salt-palette-opacity-foreground);\n}\n\n.saltListItemDeprecated {\n  color: var(--list-item-text-color);\n  background: var(--list-item-background);\n  text-align: var(--list-item-textAlign);\n  line-height: var(--list-item-lineHeight);\n  font-size: var(--list-item-fontSize);\n  padding: var(--list-item-padding);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItemDeprecated {\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) {\n  background: var(--list-item-background-hover);\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-deselectable {\n  cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItemDeprecated-selected {\n  color: var(--list-item-text-color-active);\n  background: var(--list-item-background-active);\n  cursor: var(--list-item-cursor);\n}\n\n.saltListItemDeprecated-disabled {\n  cursor: var(--list-item-disabled-cursor);\n  opacity: var(--list-item-disabled-regular-opacity);\n}\n\n.saltListItemDeprecated-focusVisible:after {\n  top: 2px;\n  left: 2px;\n  right: 2px;\n  bottom: 2px;\n  content: \"\";\n  position: absolute;\n\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n";
+var css_248z = ".saltListItemDeprecated {\n  /* Color */\n  --list-item-text-color: var(--salt-selectable-foreground);\n  --list-item-background: var(--salt-selectable-background);\n  --list-item-background-hover: var(--salt-selectable-background-hover);\n  --list-item-selected-focus-outlineColor: var(--salt-accent-foreground); /* TODO: Check token with design */\n\n  --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n\n  /* Text, Font */\n  --list-item-textAlign: var(--salt-text-textAlign);\n  --list-item-fontSize: var(--salt-text-fontSize);\n  --list-item-lineHeight: var(--salt-text-lineHeight);\n\n  /* Spacing */\n  --list-item-padding: 0 var(--salt-size-unit);\n\n  /* Misc. */\n  --list-item-gap: 0px;\n  --list-item-alignItems: center;\n  --list-item-selectable-cursor: pointer;\n  --list-item-cursor: default;\n\n  --list-item-disabled-cursor: var(--salt-selectable-cursor-disabled);\n  --list-item-disabled-regular-opacity: var(--salt-palette-opacity-disabled);\n}\n\n.saltListItemDeprecated {\n  color: var(--list-item-text-color);\n  background: var(--list-item-background);\n  text-align: var(--list-item-textAlign);\n  line-height: var(--list-item-lineHeight);\n  font-size: var(--list-item-fontSize);\n  padding: var(--list-item-padding);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItemDeprecated {\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) {\n  background: var(--list-item-background-hover);\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-deselectable {\n  cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItemDeprecated-selected {\n  color: var(--list-item-text-color-active);\n  background: var(--list-item-background-active);\n  cursor: var(--list-item-cursor);\n}\n\n.saltListItemDeprecated-disabled {\n  cursor: var(--list-item-disabled-cursor);\n  opacity: var(--list-item-disabled-regular-opacity);\n}\n\n.saltListItemDeprecated-focusVisible:after {\n  top: 2px;\n  left: 2px;\n  right: 2px;\n  bottom: 2px;\n  content: \"\";\n  position: absolute;\n\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ListItem.css.js.map

package/dist-es/list-next/ListItemNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n  --listNext-item-text-color: var(--salt-text-primary-foreground);\n  --listNext-item-background: none;\n}\n\n.saltListItemNext {\n  color: var(--listNext-item-text-color);\n  background: var(--listNext-item-background);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-inline: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-size-unit);\n  position: relative;\n  align-items: center;\n  white-space: nowrap;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n}\n\n/* Active list item on hover using mouse */\n.saltListItemNext:hover:not([aria-disabled=\"true\"]),\n/* Active list item on focus using keyboard navigation  */\n.saltListItemNext-focused {\n  --listNext-item-background: var(--salt-selectable-background-hover);\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  border-block: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);\n  --listNext-item-background: var(--salt-selectable-background-selected);\n  --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n  --listNext-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n  color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n  border-block: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);\n  --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ListItemNext.css.js.map

package/dist-es/list-next/ListItemNext.css.js.map

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

package/dist-es/list-next/ListItemNext.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer, useIdMemo } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ListItemNext.css.js';
+import { useListItem } from './ListNextContext.js';
+
+const withBaseName = makePrefixer("saltListItemNext");
+const ListItemNext = forwardRef(
+  function ListItemNext2({
+    children,
+    className,
+    disabled: disabledProp,
+    selected: selectedProp,
+    id: idProp,
+    value,
+    onClick,
+    ...props
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-list-item-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const id = useIdMemo(idProp);
+    const listContext = useListItem();
+    if (!listContext)
+      return null;
+    const {
+      id: contextId,
+      disabled: contextDisabled,
+      select,
+      isSelected,
+      isFocused
+    } = listContext;
+    const itemId = `${contextId || "listNext"}--${id}`;
+    const disabled = disabledProp || contextDisabled;
+    const selected = selectedProp || isSelected(value);
+    const focused = isFocused(itemId);
+    const handleClick = (event) => {
+      select(event);
+      onClick == null ? void 0 : onClick(event);
+    };
+    return /* @__PURE__ */ jsx("li", {
+      ref,
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("focused")]: focused
+        },
+        className
+      ),
+      role: "option",
+      "aria-disabled": disabled || void 0,
+      "aria-selected": selected || void 0,
+      id: itemId,
+      "data-value": value,
+      onClick: handleClick,
+      ...props,
+      children
+    });
+  }
+);
+
+export { ListItemNext };
+//# sourceMappingURL=ListItemNext.js.map

package/dist-es/list-next/ListItemNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemNext.js","sources":["../src/list-next/ListItemNext.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, MouseEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, useId, useIdMemo } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport listItemNextCss from \"./ListItemNext.css\";\nimport { useListItem } from \"./ListNextContext\";\n\nconst withBaseName = makePrefixer(\"saltListItemNext\");\n\nexport interface ListItemNextProps extends HTMLAttributes<HTMLLIElement> {\n  /**\n   * If true, the particular list item in list will be disabled.\n   */\n  disabled?: boolean;\n  selected?: boolean;\n  id?: string;\n  value: string;\n}\n\nexport const ListItemNext = forwardRef<HTMLLIElement, ListItemNextProps>(\n  function ListItemNext(\n    {\n      children,\n      className,\n      disabled: disabledProp,\n      selected: selectedProp,\n      id: idProp,\n      value,\n      onClick,\n      ...props\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-list-item-next\",\n      css: listItemNextCss,\n      window: targetWindow,\n    });\n    const id = useIdMemo(idProp);\n\n    const listContext = useListItem();\n    if (!listContext) return null;\n\n    const {\n      id: contextId,\n      disabled: contextDisabled,\n      select,\n      isSelected,\n      isFocused,\n    } = listContext;\n\n    const itemId = `${contextId || \"listNext\"}--${id}`;\n    const disabled = disabledProp || contextDisabled;\n    const selected = selectedProp || isSelected(value);\n    const focused = isFocused(itemId);\n\n    const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n      select(event);\n      onClick?.(event);\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"focused\")]: focused,\n          },\n          className\n        )}\n        role=\"option\"\n        aria-disabled={disabled || undefined}\n        aria-selected={selected || undefined}\n        id={itemId}\n        data-value={value}\n        onClick={handleClick}\n        {...props}\n      >\n        {children}\n      </li>\n    );\n  }\n);\n"],"names":["ListItemNext","listItemNextCss"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAY7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,QAAU,EAAA,YAAA;AAAA,IACV,EAAI,EAAA,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAM,MAAA,EAAA,GAAK,UAAU,MAAM,CAAA,CAAA;AAE3B,IAAA,MAAM,cAAc,WAAY,EAAA,CAAA;AAChC,IAAA,IAAI,CAAC,WAAA;AAAa,MAAO,OAAA,IAAA,CAAA;AAEzB,IAAM,MAAA;AAAA,MACJ,EAAI,EAAA,SAAA;AAAA,MACJ,QAAU,EAAA,eAAA;AAAA,MACV,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,KACE,GAAA,WAAA,CAAA;AAEJ,IAAM,MAAA,MAAA,GAAS,CAAG,EAAA,SAAA,IAAa,UAAe,CAAA,EAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAC9C,IAAA,MAAM,WAAW,YAAgB,IAAA,eAAA,CAAA;AACjC,IAAM,MAAA,QAAA,GAAW,YAAgB,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AACjD,IAAM,MAAA,OAAA,GAAU,UAAU,MAAM,CAAA,CAAA;AAEhC,IAAM,MAAA,WAAA,GAAc,CAAC,KAAqC,KAAA;AACxD,MAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,MAC3B,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,MAC3B,EAAI,EAAA,MAAA;AAAA,MACJ,YAAY,EAAA,KAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACR,GAAG,KAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/list-next/ListNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Style applied to the root element */\n.saltListNext {\n  margin: 0;\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--salt-container-borderStyle);\n  border-width: var(--salt-size-border);\n  height: 100%;\n  outline: none;\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  padding-inline-start: 0;\n  box-sizing: content-box;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ListNext.css.js.map

package/dist-es/list-next/ListNext.css.js.map

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

package/dist-es/list-next/ListNext.js

@@ -0,0 +1,88 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
+import { forwardRef, useRef } from 'react';
+import { clsx } from 'clsx';
+import { useList } from './useList.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ListNext.css.js';
+import { ListNextContext } from './ListNextContext.js';
+
+const withBaseName = makePrefixer("saltListNext");
+const ListNext = forwardRef(
+  function ListNext2({
+    children,
+    className,
+    disabled,
+    id,
+    onSelect,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onMouseDown,
+    selected,
+    defaultSelected,
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-list-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const listId = useId(id);
+    const listRef = useRef(null);
+    const handleRef = useForkRef(listRef, ref);
+    const {
+      focusHandler,
+      keyDownHandler,
+      blurHandler,
+      mouseDownHandler,
+      activeDescendant,
+      contextValue
+    } = useList({
+      disabled,
+      selected,
+      defaultSelected,
+      id: listId,
+      ref: listRef
+    });
+    const handleFocus = (event) => {
+      focusHandler();
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const handleKeyDown = (event) => {
+      keyDownHandler(event);
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleBlur = (event) => {
+      blurHandler();
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleMouseDown = (event) => {
+      mouseDownHandler();
+      onMouseDown == null ? void 0 : onMouseDown(event);
+    };
+    return /* @__PURE__ */ jsx(ListNextContext.Provider, {
+      value: contextValue,
+      children: /* @__PURE__ */ jsx("ul", {
+        ref: handleRef,
+        id: listId,
+        className: clsx(withBaseName(), className),
+        role: "listbox",
+        tabIndex: disabled ? -1 : 0,
+        "aria-activedescendant": disabled ? void 0 : activeDescendant,
+        "aria-disabled": disabled,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        onMouseDown: handleMouseDown,
+        ...rest,
+        children
+      })
+    });
+  }
+);
+
+export { ListNext };
+//# sourceMappingURL=ListNext.js.map

package/dist-es/list-next/ListNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListNext.js","sources":["../src/list-next/ListNext.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport {\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useList } from \"./useList\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport listNextCss from \"./ListNext.css\";\nimport { ListNextContext } from \"./ListNextContext\";\n\nconst withBaseName = makePrefixer(\"saltListNext\");\n\nexport interface ListNextProps extends HTMLAttributes<HTMLUListElement> {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* Value for the uncontrolled version. */\n  selected?: string;\n  /* Initial value for the uncontrolled version. */\n  defaultSelected?: string;\n}\n\nexport const ListNext = forwardRef<HTMLUListElement, ListNextProps>(\n  function ListNext(\n    {\n      children,\n      className,\n      disabled,\n      id,\n      onSelect,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      onMouseDown,\n      selected,\n      defaultSelected,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-list-next\",\n      css: listNextCss,\n      window: targetWindow,\n    });\n\n    const listId = useId(id);\n    const listRef = useRef<HTMLUListElement>(null);\n    const handleRef = useForkRef(listRef, ref);\n\n    const {\n      focusHandler,\n      keyDownHandler,\n      blurHandler,\n      mouseDownHandler,\n      activeDescendant,\n      contextValue,\n    } = useList({\n      disabled,\n      selected,\n      defaultSelected,\n      id: listId,\n      ref: listRef,\n    });\n\n    const handleFocus = (event: FocusEvent<HTMLUListElement>) => {\n      focusHandler();\n      onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n      keyDownHandler(event);\n      onKeyDown?.(event);\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n      blurHandler();\n      onBlur?.(event);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLUListElement>) => {\n      mouseDownHandler();\n      onMouseDown?.(event);\n    };\n\n    return (\n      <ListNextContext.Provider value={contextValue}>\n        <ul\n          ref={handleRef}\n          id={listId}\n          className={clsx(withBaseName(), className)}\n          role=\"listbox\"\n          tabIndex={disabled ? -1 : 0}\n          aria-activedescendant={disabled ? undefined : activeDescendant}\n          aria-disabled={disabled}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          onMouseDown={handleMouseDown}\n          {...rest}\n        >\n          {children}\n        </ul>\n      </ListNextContext.Provider>\n    );\n  }\n);\n"],"names":["ListNext","listNextCss"],"mappings":";;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAazC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,MAAM,EAAE,CAAA,CAAA;AACvB,IAAM,MAAA,OAAA,GAAU,OAAyB,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,OAAA,EAAS,GAAG,CAAA,CAAA;AAEzC,IAAM,MAAA;AAAA,MACJ,YAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,QACE,OAAQ,CAAA;AAAA,MACV,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,GAAK,EAAA,OAAA;AAAA,KACN,CAAA,CAAA;AAED,IAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,MAAa,YAAA,EAAA,CAAA;AACb,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAM,MAAA,aAAA,GAAgB,CAAC,KAA2C,KAAA;AAChE,MAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AACpB,MAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACd,CAAA;AAEA,IAAM,MAAA,UAAA,GAAa,CAAC,KAAwC,KAAA;AAC1D,MAAY,WAAA,EAAA,CAAA;AACZ,MAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACX,CAAA;AAEA,IAAM,MAAA,eAAA,GAAkB,CAAC,KAAwC,KAAA;AAC/D,MAAiB,gBAAA,EAAA,CAAA;AACjB,MAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KAChB,CAAA;AAEA,IACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,MAAyB,KAAO,EAAA,YAAA;AAAA,MAC/B,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,GAAK,EAAA,SAAA;AAAA,QACL,EAAI,EAAA,MAAA;AAAA,QACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAK,EAAA,SAAA;AAAA,QACL,QAAA,EAAU,WAAW,CAAK,CAAA,GAAA,CAAA;AAAA,QAC1B,uBAAA,EAAuB,WAAW,KAAY,CAAA,GAAA,gBAAA;AAAA,QAC9C,eAAe,EAAA,QAAA;AAAA,QACf,OAAS,EAAA,WAAA;AAAA,QACT,SAAW,EAAA,aAAA;AAAA,QACX,MAAQ,EAAA,UAAA;AAAA,QACR,WAAa,EAAA,eAAA;AAAA,QACZ,GAAG,IAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/list-next/ListNextContext.js

@@ -0,0 +1,13 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const ListNextContext = createContext(
+  "ListNextContext",
+  void 0
+);
+function useListItem() {
+  return useContext(ListNextContext);
+}
+
+export { ListNextContext, useListItem };
+//# sourceMappingURL=ListNextContext.js.map

package/dist-es/list-next/ListNextContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListNextContext.js","sources":["../src/list-next/ListNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface ListNextContextValue {\n  disabled?: boolean;\n  id?: string;\n  select: (event: SyntheticEvent<HTMLLIElement>) => void;\n  isSelected: (id: string) => boolean;\n  isFocused: (id: string) => boolean;\n}\n\nexport const ListNextContext = createContext<ListNextContextValue | undefined>(\n  \"ListNextContext\",\n  undefined\n);\n\nexport function useListItem() {\n  return useContext(ListNextContext);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,eAAkB,GAAA,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA,KAAA,CAAA;AACF,EAAA;AAEO,SAAS,WAAc,GAAA;AAC5B,EAAA,OAAO,WAAW,eAAe,CAAA,CAAA;AACnC;;;;"}

package/dist-es/list-next/useList.js

@@ -0,0 +1,184 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useControlled } from '@salt-ds/core';
+
+const useList = ({
+  disabled = false,
+  selected: selectedProp,
+  defaultSelected,
+  onChange,
+  id,
+  ref
+}) => {
+  const [activeDescendant, setActiveDescendant] = useState(
+    void 0
+  );
+  const [showFocusRing, setShowFocusRing] = useState(false);
+  const [selectedItem, setSelectedItem] = useControlled({
+    controlled: selectedProp,
+    default: defaultSelected,
+    name: "ListNext",
+    state: "selected"
+  });
+  const getOptions = useCallback(() => {
+    var _a, _b;
+    return Array.from(
+      (_b = (_a = ref.current) == null ? void 0 : _a.querySelectorAll('[role="option"]:not([aria-disabled])')) != null ? _b : []
+    );
+  }, [ref]);
+  const updateScroll = useCallback(
+    (currentTarget) => {
+      const list = ref.current;
+      if (!list || !currentTarget)
+        return;
+      const { offsetTop, offsetHeight } = currentTarget;
+      const listHeight = list == null ? void 0 : list.clientHeight;
+      const listScrollTop = list == null ? void 0 : list.scrollTop;
+      if (offsetTop < listScrollTop) {
+        list.scrollTop = offsetTop;
+      } else if (offsetTop + offsetHeight > listScrollTop + listHeight) {
+        list.scrollTop = offsetTop + offsetHeight - listHeight;
+      }
+    },
+    [ref]
+  );
+  const updateActiveDescendant = useCallback(
+    (element) => {
+      setActiveDescendant(element.id);
+      updateScroll(element);
+    },
+    [setActiveDescendant, updateScroll]
+  );
+  const selectItem = useCallback(
+    (element) => {
+      const newValue = element == null ? void 0 : element.dataset.value;
+      if (newValue) {
+        setSelectedItem(newValue);
+        updateActiveDescendant(element);
+      }
+    },
+    [setSelectedItem, updateActiveDescendant]
+  );
+  const focusAndMoveActive = (element) => {
+    setShowFocusRing(true);
+    updateActiveDescendant(element);
+  };
+  const focusFirstItem = () => {
+    const activeOptions = getOptions();
+    const firstItem = activeOptions[0];
+    if (firstItem) {
+      focusAndMoveActive(firstItem);
+    }
+  };
+  const focusLastItem = () => {
+    const activeOptions = getOptions();
+    const lastItem = activeOptions[activeOptions.length - 1];
+    if (lastItem) {
+      focusAndMoveActive(lastItem);
+      updateScroll(lastItem);
+    }
+  };
+  const findNextOption = (currentOption, moves) => {
+    const activeOptions = getOptions();
+    const nextOptionIndex = currentOption ? activeOptions.indexOf(currentOption) + moves : 0;
+    return activeOptions[nextOptionIndex] || activeOptions[activeOptions.length - 1];
+  };
+  const findPreviousOption = (currentOption, moves) => {
+    const activeOptions = getOptions();
+    const currentOptionIndex = activeOptions.findIndex(
+      (i) => i.id === currentOption.id
+    );
+    return activeOptions[currentOptionIndex - moves] || activeOptions[0];
+  };
+  const select = useCallback(
+    (event) => {
+      const newValue = event.currentTarget.dataset.value;
+      if (event.type === "click") {
+        setShowFocusRing(false);
+      }
+      const activeOptions = getOptions();
+      const isActiveOption = activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;
+      if (newValue && selectedItem !== newValue && isActiveOption) {
+        selectItem(event.currentTarget);
+        onChange == null ? void 0 : onChange(event, { value: newValue });
+      }
+    },
+    [selectItem, selectedItem, onChange, getOptions]
+  );
+  const isSelected = useCallback(
+    (id2) => selectedItem === id2,
+    [selectedItem]
+  );
+  const isFocused = useCallback(
+    (id2) => activeDescendant === id2 && showFocusRing,
+    [activeDescendant, showFocusRing]
+  );
+  const getActiveItem = () => {
+    const activeOptions = getOptions();
+    const activeIndex = activeOptions.findIndex(
+      (i) => i.id === activeDescendant
+    );
+    return activeOptions[activeIndex !== -1 ? activeIndex : 0];
+  };
+  const blurHandler = () => {
+    setShowFocusRing(false);
+  };
+  const mouseDownHandler = () => {
+    setShowFocusRing(false);
+  };
+  const focusHandler = () => {
+    const activeElement = getActiveItem();
+    focusAndMoveActive(activeElement);
+  };
+  const keyDownHandler = (event) => {
+    const { key } = event;
+    const currentItem = getActiveItem();
+    let nextItem = currentItem;
+    if (!currentItem) {
+      return;
+    }
+    switch (key) {
+      case "ArrowUp":
+      case "ArrowDown":
+        nextItem = key === "ArrowUp" ? findPreviousOption(currentItem, 1) : findNextOption(currentItem, 1);
+        if (nextItem && nextItem !== currentItem) {
+          event.preventDefault();
+          focusAndMoveActive(nextItem);
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        focusFirstItem();
+        break;
+      case "End":
+        event.preventDefault();
+        focusLastItem();
+        break;
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        nextItem && selectItem(nextItem);
+        break;
+    }
+  };
+  const contextValue = useMemo(
+    () => ({
+      disabled,
+      id,
+      select,
+      isSelected,
+      isFocused
+    }),
+    [disabled, id, select, isSelected, isFocused]
+  );
+  return {
+    focusHandler,
+    keyDownHandler,
+    blurHandler,
+    mouseDownHandler,
+    activeDescendant,
+    contextValue
+  };
+};
+
+export { useList };
+//# sourceMappingURL=useList.js.map

package/dist-es/list-next/useList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useList.js","sources":["../src/list-next/useList.ts"],"sourcesContent":["import {\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\n\ninterface UseListProps {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* Value for the uncontrolled version. */\n  selected?: string;\n  /* Initial value for the uncontrolled version. */\n  defaultSelected?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  id?: string;\n  ref: RefObject<HTMLUListElement>;\n}\n\nexport const useList = ({\n  disabled = false,\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n  id,\n  ref,\n}: UseListProps) => {\n  const [activeDescendant, setActiveDescendant] = useState<string | undefined>(\n    undefined\n  );\n\n  const [showFocusRing, setShowFocusRing] = useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected,\n    name: \"ListNext\",\n    state: \"selected\",\n  });\n\n  const getOptions: () => HTMLElement[] = useCallback(() => {\n    return Array.from(\n      ref.current?.querySelectorAll('[role=\"option\"]:not([aria-disabled])') ??\n        []\n    );\n  }, [ref]);\n\n  const updateScroll = useCallback(\n    (currentTarget: Element) => {\n      const list = ref.current;\n      if (!list || !currentTarget) return;\n      const { offsetTop, offsetHeight } = currentTarget as HTMLLIElement;\n      const listHeight = list?.clientHeight;\n      const listScrollTop = list?.scrollTop;\n      if (offsetTop < listScrollTop) {\n        list.scrollTop = offsetTop;\n      } else if (offsetTop + offsetHeight > listScrollTop + listHeight) {\n        list.scrollTop = offsetTop + offsetHeight - listHeight;\n      }\n    },\n    [ref]\n  );\n\n  const updateActiveDescendant = useCallback(\n    (element: HTMLElement) => {\n      setActiveDescendant(element.id);\n      updateScroll(element);\n    },\n    [setActiveDescendant, updateScroll]\n  );\n  const selectItem = useCallback(\n    (element: HTMLElement) => {\n      const newValue = element?.dataset.value;\n      if (newValue) {\n        setSelectedItem(newValue);\n        updateActiveDescendant(element);\n      }\n    },\n    [setSelectedItem, updateActiveDescendant]\n  );\n\n  const focusAndMoveActive = (element: HTMLElement) => {\n    setShowFocusRing(true);\n    updateActiveDescendant(element);\n  };\n\n  const focusFirstItem = () => {\n    // Find first active item\n    const activeOptions = getOptions();\n    const firstItem = activeOptions[0];\n    if (firstItem) {\n      focusAndMoveActive(firstItem);\n    }\n  };\n  const focusLastItem = () => {\n    // Find last active item\n    const activeOptions = getOptions();\n    const lastItem = activeOptions[activeOptions.length - 1];\n    if (lastItem) {\n      focusAndMoveActive(lastItem);\n      updateScroll(lastItem);\n    }\n  };\n\n  const findNextOption = (\n    currentOption: HTMLElement | null,\n    moves: number\n  ): HTMLElement => {\n    const activeOptions = getOptions();\n    // Returns next item, if no current option it will return 0\n    const nextOptionIndex = currentOption\n      ? activeOptions.indexOf(currentOption) + moves\n      : 0;\n    return (\n      activeOptions[nextOptionIndex] || activeOptions[activeOptions.length - 1]\n    );\n  };\n\n  const findPreviousOption = (\n    currentOption: HTMLElement,\n    moves: number\n  ): HTMLElement => {\n    // Return the previous option if it exists; otherwise, returns first option\n    const activeOptions = getOptions();\n    const currentOptionIndex = activeOptions.findIndex(\n      (i) => i.id === currentOption.id\n    );\n    return activeOptions[currentOptionIndex - moves] || activeOptions[0];\n  };\n\n  // CONTEXT CALLBACKS\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLLIElement>) => {\n      const newValue = event.currentTarget.dataset.value;\n      if (event.type === \"click\") {\n        setShowFocusRing(false);\n      }\n      const activeOptions = getOptions();\n      const isActiveOption =\n        activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;\n      if (newValue && selectedItem !== newValue && isActiveOption) {\n        selectItem(event.currentTarget);\n        onChange?.(event, { value: newValue });\n      }\n    },\n    [selectItem, selectedItem, onChange, getOptions]\n  );\n\n  const isSelected = useCallback(\n    (id: string) => selectedItem === id,\n    [selectedItem]\n  );\n\n  const isFocused = useCallback(\n    (id: string | undefined) => activeDescendant === id && showFocusRing,\n    [activeDescendant, showFocusRing]\n  );\n\n  const getActiveItem = () => {\n    const activeOptions = getOptions();\n    const activeIndex = activeOptions.findIndex(\n      (i) => i.id === activeDescendant\n    );\n    return activeOptions[activeIndex !== -1 ? activeIndex : 0];\n  };\n\n  // HANDLERS\n  const blurHandler = () => {\n    setShowFocusRing(false);\n  };\n\n  const mouseDownHandler = () => {\n    // When list gets focused, we can't guarantee that focus happens after click event.\n    // If first focus (where !activeDescendant) happens from a click, list shouldn't render focus ring in the first element.\n    setShowFocusRing(false);\n  };\n\n  // takes care of focus when using keyboard navigation\n  const focusHandler = () => {\n    const activeElement = getActiveItem();\n    focusAndMoveActive(activeElement);\n  };\n\n  // takes care of keydown when using keyboard navigation\n  const keyDownHandler = (event: KeyboardEvent<HTMLUListElement>) => {\n    const { key } = event;\n    const currentItem = getActiveItem();\n    let nextItem = currentItem;\n    if (!currentItem) {\n      return;\n    }\n    switch (key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        nextItem =\n          key === \"ArrowUp\"\n            ? findPreviousOption(currentItem, 1)\n            : findNextOption(currentItem, 1);\n\n        if (nextItem && nextItem !== currentItem) {\n          event.preventDefault();\n          focusAndMoveActive(nextItem);\n        }\n        break;\n      case \"Home\":\n        event.preventDefault();\n        focusFirstItem();\n        break;\n      case \"End\":\n        event.preventDefault();\n        focusLastItem();\n        break;\n      case \" \":\n      case \"Enter\":\n        event.preventDefault();\n        nextItem && selectItem(nextItem);\n        break;\n      default:\n        break;\n    }\n  };\n\n  // CONTEXT\n  const contextValue = useMemo(\n    () => ({\n      disabled,\n      id,\n      select,\n      isSelected,\n      isFocused,\n    }),\n    [disabled, id, select, isSelected, isFocused]\n  );\n\n  return {\n    focusHandler,\n    keyDownHandler,\n    blurHandler,\n    mouseDownHandler,\n    activeDescendant,\n    contextValue,\n  };\n};\n"],"names":["id"],"mappings":"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"}

package/dist-es/logo/Logo.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-high {\n  --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n  --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n  --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n  --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n  --logo-color: var(--saltLogo-color, var(--salt-text-secondary-foreground));\n  --logo-divider-color: var(--saltLogo-pipe-color, var(--salt-separable-secondary-borderColor));\n  --logo-divider-height: var(--saltLogo-title-height, var(--salt-size-separator-height));\n  --logo-divider-margin: 0 calc(var(--salt-size-unit) * 2);\n  --logo-fontSize: var(--salt-text-fontSize);\n  --logo-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltLogo-compact {\n  --logo-pipe-margin: 0 calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--logo-height);\n}\n\n.saltLogo img {\n  max-height: 100%;\n}\n\n.saltLogo-wrapper {\n  display: inline-flex;\n  position: relative;\n  height: var(--logo-height);\n}\n\n.saltLogo-logo {\n  fill: var(--logo-color);\n  margin: auto;\n  stroke: none !important;\n  text-align: center;\n  font-size: var(--logo-fontSize);\n  line-height: var(--logo-lineHeight);\n}\n\n.saltLogo-appTitle {\n  align-self: center;\n  color: var(--logo-color);\n  position: relative;\n}\n\n.saltLogo-titlePipe {\n  border-right: 1px solid var(--logo-divider-color);\n  margin: var(--logo-divider-margin);\n  height: var(--logo-divider-height);\n}\n";
+var css_248z = "/* Styles for Logo */\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--salt-size-base);\n}\n\n.saltLogo svg {\n  fill: var(--salt-text-secondary-foreground);\n  stroke: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Logo.css.js.map