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

package/dist-es/list-deprecated/useListItem.js

@@ -1,6 +1,6 @@
 import { useMemo, useCallback, useEffect } from 'react';
-import { useListStateContext } from './ListStateContext.js';
 import { useListItemContext } from './ListItemContext.js';
+import { useListStateContext } from './ListStateContext.js';
 
 function useListItem(props) {
   var _a;
@@ -26,6 +26,11 @@ function useListItem(props) {
     itemHeight = (_a = context.getItemHeight) == null ? void 0 : _a.call(context, index),
     itemToString = context.itemToString,
     itemTextHighlightPattern = context.itemTextHighlightPattern,
+    // An item can be disabled by
+    // 1. Setting disabled attribute on the item object, or
+    // 2. Passing a disabled prop directly or
+    // 3. Using the disabled state in list context
+    //TODO Not sure where disabled needs to be defined
     disabled = item.disabled || isDisabled,
     ariaProps: ariaPropsProp,
     style: styleProp,
@@ -92,7 +97,7 @@ function useListItem(props) {
       highlighted,
       itemTextHighlightPattern,
       focusVisible: focusVisible && highlighted,
-      tooltipText: itemToString(item),
+      tooltipText: item ? itemToString(item) : void 0,
       ...ariaProps,
       ...restProps,
       ...disabled ? {} : eventHandlers

package/dist-es/list-deprecated/useListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListItem.js","sources":["../src/list-deprecated/useListItem.ts"],"sourcesContent":["import { useEffect, useMemo, useCallback, MouseEvent } from \"react\";\nimport { ListChildComponentProps } from \"react-window\";\n\nimport { ListItemProps } from \"./ListItem\";\nimport { ListItemBaseProps } from \"./ListItemBase\";\n\nimport { useListStateContext } from \"./ListStateContext\";\nimport { useListItemContext } from \"./ListItemContext\";\n\ntype UseItemHookReturnType<Item> = {\n  /**\n   * Item data\n   */\n  item: Item;\n  /**\n   * Utility function for converting item data to a string\n   */\n  itemToString: (item: Item) => string;\n  /**\n   * Properties applied to a basic list item component\n   */\n  itemProps: ListItemBaseProps;\n};\n\nexport interface IndexedListItemProps<Item> extends ListItemProps<Item> {\n  ariaProps?: {\n    role?: string;\n    \"aria-disabled\"?: string;\n    \"aria-checked\"?: string;\n    \"aria-posinset\"?: number;\n    \"aria-setsize\"?: number;\n  };\n\n  index: number;\n  itemHeight?: number | string;\n}\n\nexport function useListItem<Item>(\n  props: IndexedListItemProps<Item>\n): UseItemHookReturnType<Item> {\n  validateProps(props);\n\n  const context = useListItemContext<Item>();\n  const { state, helpers } = useListStateContext();\n  const { setHighlightedIndex, setFocusVisible, handleSelect } = helpers;\n  const {\n    focusVisible,\n    highlightedIndex,\n    selectedItem,\n    isDeselectable,\n    isDisabled,\n    isMultiSelect,\n  } = state;\n  const {\n    index,\n    item,\n    onClick,\n    onMouseDown,\n    onMouseMove,\n    id = context.getItemId(index),\n    itemHeight = context.getItemHeight?.(index),\n    itemToString = context.itemToString,\n    itemTextHighlightPattern = context.itemTextHighlightPattern,\n    // An item can be disabled by\n    // 1. Setting disabled attribute on the item object, or\n    // 2. Passing a disabled prop directly or\n    // 3. Using the disabled state in list context\n    //TODO Not sure where disabled needs to be defined\n    disabled = (item as any).disabled || isDisabled,\n    ariaProps: ariaPropsProp,\n    style: styleProp,\n    ...restProps\n  } = props;\n\n  const style = useMemo(\n    () => ({\n      height: itemHeight,\n      ...styleProp,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [itemHeight, JSON.stringify(styleProp)]\n  );\n\n  const highlighted = index === highlightedIndex;\n  const selected = isMultiSelect\n    ? selectedItem.indexOf(item) !== -1\n    : item === selectedItem;\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      handleSelect(event, index, item);\n\n      if (onClick) {\n        onClick(event);\n      }\n    },\n    [handleSelect, index, item, onClick]\n  );\n\n  const handleMouseMove = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      setHighlightedIndex(index);\n      setFocusVisible(false);\n\n      if (onMouseMove) {\n        onMouseMove(event);\n      }\n    },\n    [index, setFocusVisible, setHighlightedIndex, onMouseMove]\n  );\n\n  const handleMouseDown = (\n    event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>\n  ) => {\n    if (context.disableMouseDown) {\n      event.preventDefault();\n    } else if (onMouseDown) {\n      onMouseDown(event);\n    }\n  };\n\n  const eventHandlers = {\n    onClick: handleClick,\n    onMouseMove: handleMouseMove,\n    onMouseDown: handleMouseDown,\n  };\n\n  const ariaProps = {\n    role: \"option\",\n    ...(disabled && { \"aria-disabled\": true }),\n    ...ariaPropsProp,\n  };\n\n  if (selected) {\n    ariaProps[`${isMultiSelect ? \"aria-selected\" : \"aria-checked\"}`] = true;\n  }\n\n  return {\n    item: item!,\n    itemToString,\n    itemProps: {\n      \"data-option-index\": index,\n      id,\n      style,\n      deselectable: isDeselectable || isMultiSelect,\n      disabled,\n      selected,\n      highlighted,\n      itemTextHighlightPattern,\n      focusVisible: focusVisible && highlighted,\n      tooltipText: itemToString(item!),\n      ...ariaProps,\n      ...restProps,\n      ...(disabled ? {} : eventHandlers),\n    },\n  };\n}\n\ntype VirtualizedListItemProps = Pick<\n  ListChildComponentProps,\n  \"index\" | \"style\" | \"data\"\n>;\n\nexport const useVirtualizedListItem = (props: VirtualizedListItemProps) => {\n  const { index, data, style = {} } = props;\n  // Filter out inline width added by `react-window` so that it can only be defined using css.\n  const { width: _unusedWidth, height: itemHeight, ...restStyle } = style;\n\n  return useListItem({\n    index,\n    itemHeight,\n    style: restStyle,\n    item: data[index],\n    ariaProps: {\n      \"aria-posinset\": index + 1,\n      \"aria-setsize\": data.length,\n    },\n  });\n};\n\nconst validateProps = <Item>(props: IndexedListItemProps<Item>) => {\n  const { index, item } = props;\n\n  /* eslint-disable react-hooks/rules-of-hooks */\n  useEffect(() => {\n    if (item === undefined) {\n      console.warn(\"useListItem needs `item`.\");\n    }\n    if (index === undefined) {\n      console.warn(\"useListItem needs to know item's index.\");\n    }\n  }, [index, item]);\n  /* eslint-enable react-hooks/rules-of-hooks */\n};\n"],"names":[],"mappings":";;;;AAqCO,SAAS,YACd,KAC6B,EAAA;AAvC/B,EAAA,IAAA,EAAA,CAAA;AAwCE,EAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAEnB,EAAA,MAAM,UAAU,kBAAyB,EAAA,CAAA;AACzC,EAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAC/C,EAAA,MAAM,EAAE,mBAAA,EAAqB,eAAiB,EAAA,YAAA,EAAiB,GAAA,OAAA,CAAA;AAC/D,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,EAAA,GAAK,OAAQ,CAAA,SAAA,CAAU,KAAK,CAAA;AAAA,IAC5B,UAAA,GAAA,CAAa,EAAQ,GAAA,OAAA,CAAA,aAAA,KAAR,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,OAAA,EAAA,KAAA,CAAA;AAAA,IACrC,eAAe,OAAQ,CAAA,YAAA;AAAA,IACvB,2BAA2B,OAAQ,CAAA,wBAAA;AAAA,IAMnC,QAAA,GAAY,KAAa,QAAY,IAAA,UAAA;AAAA,IACrC,SAAW,EAAA,aAAA;AAAA,IACX,KAAO,EAAA,SAAA;AAAA,IACJ,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,MAAQ,EAAA,UAAA;AAAA,MACR,GAAG,SAAA;AAAA,KACL,CAAA;AAAA,IAEA,CAAC,UAAA,EAAY,IAAK,CAAA,SAAA,CAAU,SAAS,CAAC,CAAA;AAAA,GACxC,CAAA;AAEA,EAAA,MAAM,cAAc,KAAU,KAAA,gBAAA,CAAA;AAC9B,EAAA,MAAM,WAAW,aACb,GAAA,YAAA,CAAa,QAAQ,IAAI,CAAA,KAAM,KAC/B,IAAS,KAAA,YAAA,CAAA;AAEb,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KAAsC,KAAA;AACrC,MAAa,YAAA,CAAA,KAAA,EAAO,OAAO,IAAI,CAAA,CAAA;AAE/B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,CAAC,YAAA,EAAc,KAAO,EAAA,IAAA,EAAM,OAAO,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,KAAsC,KAAA;AACrC,MAAA,mBAAA,CAAoB,KAAK,CAAA,CAAA;AACzB,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAErB,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,KAAA,EAAO,eAAiB,EAAA,mBAAA,EAAqB,WAAW,CAAA;AAAA,GAC3D,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CACtB,KACG,KAAA;AACH,IAAA,IAAI,QAAQ,gBAAkB,EAAA;AAC5B,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAAA,eACZ,WAAa,EAAA;AACtB,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,OAAS,EAAA,WAAA;AAAA,IACT,WAAa,EAAA,eAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,IAAM,EAAA,QAAA;AAAA,IACN,GAAI,QAAA,IAAY,EAAE,eAAA,EAAiB,IAAK,EAAA;AAAA,IACxC,GAAG,aAAA;AAAA,GACL,CAAA;AAEA,EAAA,IAAI,QAAU,EAAA;AACZ,IAAU,SAAA,CAAA,CAAA,EAAG,aAAgB,GAAA,eAAA,GAAkB,cAAoB,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GACrE;AAEA,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAW,EAAA;AAAA,MACT,mBAAqB,EAAA,KAAA;AAAA,MACrB,EAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAc,cAAkB,IAAA,aAAA;AAAA,MAChC,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,wBAAA;AAAA,MACA,cAAc,YAAgB,IAAA,WAAA;AAAA,MAC9B,WAAA,EAAa,aAAa,IAAK,CAAA;AAAA,MAC/B,GAAG,SAAA;AAAA,MACH,GAAG,SAAA;AAAA,MACH,GAAI,QAAW,GAAA,EAAK,GAAA,aAAA;AAAA,KACtB;AAAA,GACF,CAAA;AACF,CAAA;AAOa,MAAA,sBAAA,GAAyB,CAAC,KAAoC,KAAA;AACzE,EAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,KAAQ,GAAA,IAAO,GAAA,KAAA,CAAA;AAEpC,EAAA,MAAM,EAAE,KAAO,EAAA,YAAA,EAAc,MAAQ,EAAA,UAAA,EAAA,GAAe,WAAc,GAAA,KAAA,CAAA;AAElE,EAAA,OAAO,WAAY,CAAA;AAAA,IACjB,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,MAAM,IAAK,CAAA,KAAA,CAAA;AAAA,IACX,SAAW,EAAA;AAAA,MACT,iBAAiB,KAAQ,GAAA,CAAA;AAAA,MACzB,gBAAgB,IAAK,CAAA,MAAA;AAAA,KACvB;AAAA,GACD,CAAA,CAAA;AACH,EAAA;AAEA,MAAM,aAAA,GAAgB,CAAO,KAAsC,KAAA;AACjE,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAGxB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,KAAW,CAAA,EAAA;AACtB,MAAA,OAAA,CAAQ,KAAK,2BAA2B,CAAA,CAAA;AAAA,KAC1C;AACA,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,OAAA,CAAQ,KAAK,yCAAyC,CAAA,CAAA;AAAA,KACxD;AAAA,GACC,EAAA,CAAC,KAAO,EAAA,IAAI,CAAC,CAAA,CAAA;AAElB,CAAA;;;;"}
+{"version":3,"file":"useListItem.js","sources":["../src/list-deprecated/useListItem.ts"],"sourcesContent":["import { type MouseEvent, useCallback, useEffect, useMemo } from \"react\";\nimport type { ListChildComponentProps } from \"react-window\";\n\nimport type { ListItemProps } from \"./ListItem\";\nimport type { ListItemBaseProps } from \"./ListItemBase\";\n\nimport { useListItemContext } from \"./ListItemContext\";\nimport { useListStateContext } from \"./ListStateContext\";\n\ntype UseItemHookReturnType<Item> = {\n  /**\n   * Item data\n   */\n  item: Item;\n  /**\n   * Utility function for converting item data to a string\n   */\n  itemToString: (item: Item) => string;\n  /**\n   * Properties applied to a basic list item component\n   */\n  itemProps: ListItemBaseProps;\n};\n\nexport interface IndexedListItemProps<Item> extends ListItemProps<Item> {\n  ariaProps?: {\n    role?: string;\n    \"aria-disabled\"?: string;\n    \"aria-checked\"?: string;\n    \"aria-posinset\"?: number;\n    \"aria-setsize\"?: number;\n  };\n\n  index: number;\n  itemHeight?: number | string;\n}\n\nexport function useListItem<Item>(\n  props: IndexedListItemProps<Item>,\n): UseItemHookReturnType<Item> {\n  validateProps(props);\n\n  const context = useListItemContext<Item>();\n  const { state, helpers } = useListStateContext();\n  const { setHighlightedIndex, setFocusVisible, handleSelect } = helpers;\n  const {\n    focusVisible,\n    highlightedIndex,\n    selectedItem,\n    isDeselectable,\n    isDisabled,\n    isMultiSelect,\n  } = state;\n  const {\n    index,\n    item,\n    onClick,\n    onMouseDown,\n    onMouseMove,\n    id = context.getItemId(index),\n    itemHeight = context.getItemHeight?.(index),\n    itemToString = context.itemToString,\n    itemTextHighlightPattern = context.itemTextHighlightPattern,\n    // An item can be disabled by\n    // 1. Setting disabled attribute on the item object, or\n    // 2. Passing a disabled prop directly or\n    // 3. Using the disabled state in list context\n    //TODO Not sure where disabled needs to be defined\n    disabled = (item as Record<string, unknown>).disabled || isDisabled,\n    ariaProps: ariaPropsProp,\n    style: styleProp,\n    ...restProps\n  } = props;\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: JSON.stringify is used to compare objects\n  const style = useMemo(\n    () => ({\n      height: itemHeight,\n      ...styleProp,\n    }),\n    [itemHeight, JSON.stringify(styleProp)],\n  );\n\n  const highlighted = index === highlightedIndex;\n  const selected = isMultiSelect\n    ? selectedItem.indexOf(item) !== -1\n    : item === selectedItem;\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      handleSelect(event, index, item);\n\n      if (onClick) {\n        onClick(event);\n      }\n    },\n    [handleSelect, index, item, onClick],\n  );\n\n  const handleMouseMove = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      setHighlightedIndex(index);\n      setFocusVisible(false);\n\n      if (onMouseMove) {\n        onMouseMove(event);\n      }\n    },\n    [index, setFocusVisible, setHighlightedIndex, onMouseMove],\n  );\n\n  const handleMouseDown = (\n    event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,\n  ) => {\n    if (context.disableMouseDown) {\n      event.preventDefault();\n    } else if (onMouseDown) {\n      onMouseDown(event);\n    }\n  };\n\n  const eventHandlers = {\n    onClick: handleClick,\n    onMouseMove: handleMouseMove,\n    onMouseDown: handleMouseDown,\n  };\n\n  const ariaProps = {\n    role: \"option\",\n    ...(disabled && { \"aria-disabled\": true }),\n    ...ariaPropsProp,\n  };\n\n  if (selected) {\n    ariaProps[`${isMultiSelect ? \"aria-selected\" : \"aria-checked\"}`] = true;\n  }\n\n  return {\n    item: item as Item,\n    itemToString,\n    itemProps: {\n      \"data-option-index\": index,\n      id,\n      style,\n      deselectable: isDeselectable || isMultiSelect,\n      disabled,\n      selected,\n      highlighted,\n      itemTextHighlightPattern,\n      focusVisible: focusVisible && highlighted,\n      tooltipText: item ? itemToString(item) : undefined,\n      ...ariaProps,\n      ...restProps,\n      ...(disabled ? {} : eventHandlers),\n    },\n  };\n}\n\ntype VirtualizedListItemProps = Pick<\n  ListChildComponentProps,\n  \"index\" | \"style\" | \"data\"\n>;\n\nexport const useVirtualizedListItem = (props: VirtualizedListItemProps) => {\n  const { index, data, style = {} } = props;\n  // Filter out inline width added by `react-window` so that it can only be defined using css.\n  const { width: _unusedWidth, height: itemHeight, ...restStyle } = style;\n\n  return useListItem({\n    index,\n    itemHeight,\n    style: restStyle,\n    item: data[index],\n    ariaProps: {\n      \"aria-posinset\": index + 1,\n      \"aria-setsize\": data.length,\n    },\n  });\n};\n\nconst validateProps = <Item>(props: IndexedListItemProps<Item>) => {\n  const { index, item } = props;\n\n  /* eslint-disable react-hooks/rules-of-hooks */\n  useEffect(() => {\n    if (item === undefined) {\n      console.warn(\"useListItem needs `item`.\");\n    }\n    if (index === undefined) {\n      console.warn(\"useListItem needs to know item's index.\");\n    }\n  }, [index, item]);\n  /* eslint-enable react-hooks/rules-of-hooks */\n};\n"],"names":[],"mappings":"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"}

package/dist-es/list-deprecated/useTypeSelect.js

@@ -1,7 +1,6 @@
 import { useCallback, useRef } from 'react';
 import { escapeRegExp } from '../utils/escapeRegExp.js';
 import '@salt-ds/core';
-import '../utils/useFloatingUI.js';
 import { itemToString } from './itemToString.js';
 
 const TYPE_SELECT_TIMEOUT = 1500;
@@ -24,7 +23,7 @@ function useTypeSelect(options) {
       while (index < itemCount) {
         const item = getItemAtIndex(index);
         const textValue = itemToString$1 ? itemToString$1(item) : item;
-        if (textValue && textValue.match(new RegExp(`^${escapeRegExp(searchTerm)}`, "i"))) {
+        if (textValue == null ? void 0 : textValue.match(new RegExp(`^${escapeRegExp(searchTerm)}`, "i"))) {
           return index;
         }
         index = index + 1;
@@ -69,6 +68,8 @@ function useTypeSelect(options) {
     }, TYPE_SELECT_TIMEOUT);
   };
   return {
+    // Using a capturing listener to catch the keydown event before
+    // other hooks in order to handle the Spacebar event.
     onKeyDownCapture
   };
 }

package/dist-es/list-deprecated/useTypeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTypeSelect.js","sources":["../src/list-deprecated/useTypeSelect.js"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { itemToString as defaultItemToString } from \"./itemToString\";\n\nconst TYPE_SELECT_TIMEOUT = 1500;\n\nexport function useTypeSelect(options) {\n  const {\n    getItemAtIndex,\n    highlightedIndex,\n    itemCount,\n    itemToString = defaultItemToString,\n    onTypeSelect,\n    setFocusVisible,\n    setHighlightedIndex,\n  } = options;\n\n  const getItemIndexForSearch = useCallback(\n    (searchTerm, fromIndex) => {\n      if (itemCount === 0) {\n        return null;\n      }\n\n      let index = fromIndex || 0;\n      while (index < itemCount) {\n        const item = getItemAtIndex(index);\n        const textValue = itemToString ? itemToString(item) : item;\n        if (\n          textValue &&\n          textValue.match(new RegExp(`^${escapeRegExp(searchTerm)}`, \"i\"))\n        ) {\n          return index;\n        }\n\n        index = index + 1;\n      }\n\n      return null;\n    },\n    [itemCount, itemToString, getItemAtIndex]\n  );\n\n  const state = useRef({\n    search: \"\",\n    timeout: null,\n  }).current;\n\n  // eslint-disable-next-line complexity\n  const onKeyDownCapture = (event) => {\n    const character = getStringForKey(event.key);\n    if (!character || event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    // Do not propagate the Spacebar event if it's meant to be part of the search.\n    // When we time out, the search term becomes empty, hence the check on length.\n    // Trimming is to account for the case of pressing the Spacebar more than once,\n    // which should cycle through the selection/deselection of the focused item.\n    if (character !== \" \" || state.search.trim().length > 0) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // When typing same character sebsequently and *quickly*, we treat it as cyling through items\n    // starting with that char instead of seaching for double character, because in most cases\n    // there won't be any option having same characters at the beginning. This should be only\n    // impacting beginning of the words because length of `character` would be 1.\n    if (character !== state.search) {\n      state.search += character;\n    }\n\n    // Prioritize items after the currently focused item, falling back to searching the whole list.\n    // We want to cycle through choices when keep typing the same first character, hence the +1\n    // condition. All subsequent characters should stay at the current item otherwise it will\n    // always jumping around.\n    let index = getItemIndexForSearch(\n      state.search,\n      state.search.length > 1 ? highlightedIndex : highlightedIndex + 1\n    );\n\n    // If no key found, search from the top.\n    if (index == null) {\n      index = getItemIndexForSearch(state.search);\n    }\n\n    if (index != null) {\n      setFocusVisible(true);\n      // TODO: Maybe we can repurpose this setHighlightedIndex so that the user controls it's meant to set\n      // hightlighted index when expanded v.s. selected item when collapsed\n      setHighlightedIndex(index);\n      if (onTypeSelect) {\n        onTypeSelect(index);\n      }\n    }\n\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = \"\";\n    }, TYPE_SELECT_TIMEOUT);\n  };\n\n  return {\n    // Using a capturing listener to catch the keydown event before\n    // other hooks in order to handle the Spacebar event.\n    onKeyDownCapture,\n  };\n}\n\nfunction getStringForKey(key) {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n\n  return \"\";\n}\n"],"names":["itemToString","defaultItemToString"],"mappings":"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"}
+{"version":3,"file":"useTypeSelect.js","sources":["../src/list-deprecated/useTypeSelect.js"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { itemToString as defaultItemToString } from \"./itemToString\";\n\nconst TYPE_SELECT_TIMEOUT = 1500;\n\nexport function useTypeSelect(options) {\n  const {\n    getItemAtIndex,\n    highlightedIndex,\n    itemCount,\n    itemToString = defaultItemToString,\n    onTypeSelect,\n    setFocusVisible,\n    setHighlightedIndex,\n  } = options;\n\n  const getItemIndexForSearch = useCallback(\n    (searchTerm, fromIndex) => {\n      if (itemCount === 0) {\n        return null;\n      }\n\n      let index = fromIndex || 0;\n      while (index < itemCount) {\n        const item = getItemAtIndex(index);\n        const textValue = itemToString ? itemToString(item) : item;\n        if (textValue?.match(new RegExp(`^${escapeRegExp(searchTerm)}`, \"i\"))) {\n          return index;\n        }\n\n        index = index + 1;\n      }\n\n      return null;\n    },\n    [itemCount, itemToString, getItemAtIndex],\n  );\n\n  const state = useRef({\n    search: \"\",\n    timeout: null,\n  }).current;\n\n  const onKeyDownCapture = (event) => {\n    const character = getStringForKey(event.key);\n    if (!character || event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    // Do not propagate the Spacebar event if it's meant to be part of the search.\n    // When we time out, the search term becomes empty, hence the check on length.\n    // Trimming is to account for the case of pressing the Spacebar more than once,\n    // which should cycle through the selection/deselection of the focused item.\n    if (character !== \" \" || state.search.trim().length > 0) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // When typing same character sebsequently and *quickly*, we treat it as cyling through items\n    // starting with that char instead of seaching for double character, because in most cases\n    // there won't be any option having same characters at the beginning. This should be only\n    // impacting beginning of the words because length of `character` would be 1.\n    if (character !== state.search) {\n      state.search += character;\n    }\n\n    // Prioritize items after the currently focused item, falling back to searching the whole list.\n    // We want to cycle through choices when keep typing the same first character, hence the +1\n    // condition. All subsequent characters should stay at the current item otherwise it will\n    // always jumping around.\n    let index = getItemIndexForSearch(\n      state.search,\n      state.search.length > 1 ? highlightedIndex : highlightedIndex + 1,\n    );\n\n    // If no key found, search from the top.\n    if (index == null) {\n      index = getItemIndexForSearch(state.search);\n    }\n\n    if (index != null) {\n      setFocusVisible(true);\n      // TODO: Maybe we can repurpose this setHighlightedIndex so that the user controls it's meant to set\n      // hightlighted index when expanded v.s. selected item when collapsed\n      setHighlightedIndex(index);\n      if (onTypeSelect) {\n        onTypeSelect(index);\n      }\n    }\n\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = \"\";\n    }, TYPE_SELECT_TIMEOUT);\n  };\n\n  return {\n    // Using a capturing listener to catch the keydown event before\n    // other hooks in order to handle the Spacebar event.\n    onKeyDownCapture,\n  };\n}\n\nfunction getStringForKey(key) {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n\n  return \"\";\n}\n"],"names":["itemToString","defaultItemToString"],"mappings":"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"}

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-content-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-left: var(--salt-spacing-100);\n  padding-right: 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  margin-top: var(--salt-size-fixed-100);\n  margin-bottom: var(--salt-size-fixed-100);\n  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n  border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation  */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n  --listNext-item-background: var(--salt-selectable-background-hover);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) 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-content-primary-foreground-disabled);\n  cursor: var(--salt-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  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) 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,83 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIdMemo } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+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,
+    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,
+      highlight,
+      isHighlighted
+    } = listContext;
+    const itemId = `${contextId || "listNext"}--${id}`;
+    const disabled = disabledProp || contextDisabled;
+    const selected = isSelected(value);
+    const focused = isFocused(value);
+    const highlighted = isHighlighted(value);
+    const handleClick = (event) => {
+      if (!disabled) {
+        select(event);
+        onClick == null ? void 0 : onClick(event);
+      }
+    };
+    const handleMouseMove = (event) => {
+      if (!highlighted) {
+        highlight(event);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("highlighted")]: highlighted,
+            [withBaseName("focused")]: focused
+          },
+          className
+        ),
+        role: "option",
+        "aria-disabled": disabled || void 0,
+        "aria-selected": selected || void 0,
+        id: itemId,
+        "data-value": value,
+        onClick: handleClick,
+        onMouseMove: handleMouseMove,
+        ...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 { makePrefixer, useIdMemo } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type MouseEvent } from \"react\";\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  /**\n   * List item id.\n   */\n  id?: string;\n  /**\n   * List item value.\n   */\n  value: string;\n}\n\nexport const ListItemNext = forwardRef<HTMLLIElement, ListItemNextProps>(\n  function ListItemNext(\n    {\n      children,\n      className,\n      disabled: disabledProp,\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      highlight,\n      isHighlighted,\n    } = listContext;\n\n    const itemId = `${contextId || \"listNext\"}--${id}`;\n    const disabled = disabledProp || contextDisabled;\n    const selected = isSelected(value);\n    const focused = isFocused(value);\n    const highlighted = isHighlighted(value);\n\n    const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n      if (!disabled) {\n        select(event);\n        onClick?.(event);\n      }\n    };\n\n    const handleMouseMove = (event: MouseEvent<HTMLLIElement>) => {\n      if (!highlighted) {\n        highlight(event);\n      }\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"highlighted\")]: highlighted,\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        onMouseMove={handleMouseMove}\n        {...props}\n      >\n        {children}\n      </li>\n    );\n  },\n);\n"],"names":["ListItemNext","listItemNextCss"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAiB7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,EAAU,YAAA;AAAA,IACV,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAA,GAAK,UAAU,MAAM,CAAA;AAE3B,IAAA,MAAM,cAAc,WAAA,EAAY;AAChC,IAAA,IAAI,CAAC,aAAa,OAAO,IAAA;AAEzB,IAAA,MAAM;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,QAAA,EAAU,eAAA;AAAA,MACV,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF,GAAI,WAAA;AAEJ,IAAA,MAAM,MAAA,GAAS,CAAA,EAAG,SAAA,IAAa,UAAU,KAAK,EAAE,CAAA,CAAA;AAChD,IAAA,MAAM,WAAW,YAAA,IAAgB,eAAA;AACjC,IAAA,MAAM,QAAA,GAAW,WAAW,KAAK,CAAA;AACjC,IAAA,MAAM,OAAA,GAAU,UAAU,KAAK,CAAA;AAC/B,IAAA,MAAM,WAAA,GAAc,cAAc,KAAK,CAAA;AAEvC,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAqC;AACxD,MAAA,IAAI,CAAC,QAAA,EAAU;AACb,QAAA,MAAA,CAAO,KAAK,CAAA;AACZ,QAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,MACZ;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAqC;AAC5D,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MACjB;AAAA,IACF,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,WAAA;AAAA,YAC/B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,EAAA,EAAI,MAAA;AAAA,QACJ,YAAA,EAAY,KAAA;AAAA,QACZ,OAAA,EAAS,WAAA;AAAA,QACT,WAAA,EAAa,eAAA;AAAA,QACZ,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;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-borderStyle-solid);\n  border-width: var(--salt-size-fixed-100);\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  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\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,100 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import css_248z from './ListNext.css.js';
+import { ListNextContext } from './ListNextContext.js';
+import { useList } from './useList.js';
+
+const withBaseName = makePrefixer("saltListNext");
+const ListNext = forwardRef(
+  function ListNext2({
+    children,
+    className,
+    disabled,
+    disableFocus,
+    id,
+    onSelect,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onMouseOver,
+    highlightedItem,
+    selected,
+    defaultSelected,
+    onChange,
+    ...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,
+      mouseOverHandler,
+      activeDescendant,
+      contextValue,
+      focusVisibleRef
+    } = useList({
+      disabled,
+      highlightedItem,
+      selected,
+      defaultSelected,
+      onChange,
+      onSelect,
+      id: listId,
+      ref: listRef
+    });
+    const setListRef = useForkRef(focusVisibleRef, handleRef);
+    const handleFocus = (event) => {
+      focusHandler(event);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const handleKeyDown = (event) => {
+      if (disableFocus) {
+        event.preventDefault();
+        return;
+      }
+      keyDownHandler(event);
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleBlur = (event) => {
+      blurHandler();
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleMouseOver = (event) => {
+      mouseOverHandler();
+      onMouseOver == null ? void 0 : onMouseOver(event);
+    };
+    return /* @__PURE__ */ jsx(ListNextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: setListRef,
+        id: listId,
+        className: clsx(withBaseName(), className),
+        role: "listbox",
+        tabIndex: disabled || disableFocus ? -1 : 0,
+        "aria-activedescendant": disabled ? void 0 : activeDescendant,
+        "aria-disabled": disabled,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        onMouseOver: handleMouseOver,
+        ...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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport listNextCss from \"./ListNext.css\";\nimport { ListNextContext } from \"./ListNextContext\";\nimport { useList } from \"./useList\";\n\nconst withBaseName = makePrefixer(\"saltListNext\");\n\nexport interface ListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"ul\">, \"onChange\" | \"onSelect\"> {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* If `true`, the component will not receive focus. */\n  disableFocus?: boolean;\n  /* Value for the controlled version. */\n  highlightedItem?: string;\n  /* Value for the controlled version. */\n  selected?: string;\n  /* Callback for change event. Returns current selection.*/\n  onChange?: (\n    event: SyntheticEvent,\n    data: { value: string | undefined },\n  ) => void;\n  /* Callback for select event. Returns new selected item.*/\n  onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n  /* Initial selection. */\n  defaultSelected?: string;\n}\n\nexport const ListNext = forwardRef<HTMLUListElement, ListNextProps>(\n  function ListNext(\n    {\n      children,\n      className,\n      disabled,\n      disableFocus,\n      id,\n      onSelect,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      onMouseOver,\n      highlightedItem,\n      selected,\n      defaultSelected,\n      onChange,\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    const {\n      focusHandler,\n      keyDownHandler,\n      blurHandler,\n      mouseOverHandler,\n      activeDescendant,\n      contextValue,\n      focusVisibleRef,\n    } = useList({\n      disabled,\n      highlightedItem,\n      selected,\n      defaultSelected,\n      onChange,\n      onSelect,\n      id: listId,\n      ref: listRef,\n    });\n\n    const setListRef = useForkRef(focusVisibleRef, handleRef);\n\n    const handleFocus = (event: FocusEvent<HTMLUListElement>) => {\n      focusHandler(event);\n      onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n      if (disableFocus) {\n        event.preventDefault();\n        return;\n      }\n      keyDownHandler(event);\n      onKeyDown?.(event);\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n      blurHandler();\n      onBlur?.(event);\n    };\n\n    const handleMouseOver = (event: MouseEvent<HTMLUListElement>) => {\n      mouseOverHandler();\n      onMouseOver?.(event);\n    };\n\n    return (\n      <ListNextContext.Provider value={contextValue}>\n        <ul\n          // TODO: fix type from useIsFocusVisible\n          // @ts-expect-error\n          ref={setListRef}\n          id={listId}\n          className={clsx(withBaseName(), className)}\n          role=\"listbox\"\n          tabIndex={disabled || disableFocus ? -1 : 0}\n          aria-activedescendant={disabled ? undefined : activeDescendant}\n          aria-disabled={disabled}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          onMouseOver={handleMouseOver}\n          {...rest}\n        >\n          {children}\n        </ul>\n      </ListNextContext.Provider>\n    );\n  },\n);\n"],"names":["ListNext","listNextCss"],"mappings":"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"}

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 { type SyntheticEvent, useContext } from \"react\";\n\nexport interface ListNextContextValue {\n  disabled?: boolean;\n  id?: string;\n  select: (event: SyntheticEvent<HTMLLIElement>) => void;\n  isSelected: (value: string) => boolean;\n  isFocused: (value: string) => boolean;\n  highlight: (event: SyntheticEvent<HTMLLIElement>) => void;\n  isHighlighted: (value: 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":";;;AAaO,MAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}

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

@@ -0,0 +1,243 @@
+import { useControlled, useIsFocusVisible } from '@salt-ds/core';
+import { useCallback, useState, useEffect, useMemo } from 'react';
+
+const useList = ({
+  disabled = false,
+  highlightedItem: highlightedItemProp,
+  selected: selectedProp,
+  defaultSelected,
+  onChange,
+  onSelect,
+  id,
+  ref
+}) => {
+  const getOptions = useCallback(() => {
+    var _a;
+    return Array.from(
+      ((_a = ref.current) == null ? void 0 : _a.querySelectorAll('[role="option"]:not([aria-disabled])')) ?? []
+    );
+  }, [ref]);
+  const [focusVisible, setFocusVisible] = useState(false);
+  const [activeDescendant, setActiveDescendant] = useState(
+    void 0
+  );
+  const [highlightedItem, setHighlightedItem] = useControlled({
+    controlled: highlightedItemProp,
+    default: void 0,
+    name: "ListNext",
+    state: "highlighted"
+  });
+  const [selectedItem, setSelectedItem] = useControlled({
+    controlled: selectedProp,
+    default: defaultSelected,
+    name: "ListNext",
+    state: "selected"
+  });
+  const {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref: focusVisibleRef
+  } = useIsFocusVisible();
+  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 updateHighlighted = useCallback(
+    (element) => {
+      setHighlightedItem(element.dataset.value);
+      setActiveDescendant(element.id);
+      updateScroll(element);
+    },
+    [updateScroll]
+  );
+  const selectItem = useCallback(
+    (element) => {
+      const newValue = element == null ? void 0 : element.dataset.value;
+      if (newValue) {
+        setSelectedItem(newValue);
+        updateHighlighted(element);
+      }
+    },
+    [updateHighlighted]
+  );
+  useEffect(() => {
+    var _a;
+    const activeOptions = getOptions();
+    const highlightedIndex = activeOptions.findIndex(
+      (i) => i.dataset.value === highlightedItem
+    );
+    if (highlightedIndex) {
+      setActiveDescendant((_a = activeOptions[highlightedIndex]) == null ? void 0 : _a.id);
+      highlightedItem && updateScroll(activeOptions[highlightedIndex]);
+    }
+  }, [highlightedItem, getOptions, updateScroll]);
+  const focusFirstItem = () => {
+    const activeOptions = getOptions();
+    const firstItem = activeOptions[0];
+    if (firstItem) {
+      updateHighlighted(firstItem);
+    }
+  };
+  const focusLastItem = () => {
+    const activeOptions = getOptions();
+    const lastItem = activeOptions[activeOptions.length - 1];
+    if (lastItem) {
+      updateHighlighted(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;
+      const activeOptions = getOptions();
+      const isActiveOption = activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;
+      if (newValue && isActiveOption) {
+        onSelect == null ? void 0 : onSelect(event, { value: newValue });
+        if (selectedItem !== newValue) {
+          selectItem(event.currentTarget);
+          onChange == null ? void 0 : onChange(event, { value: selectedItem });
+        }
+      }
+    },
+    [selectItem, selectedItem, onChange, onSelect, getOptions]
+  );
+  const isSelected = useCallback(
+    (value) => selectedItem === value,
+    [selectedItem]
+  );
+  const highlight = useCallback((event) => {
+    setHighlightedItem(event.currentTarget.dataset.value);
+  }, []);
+  const isHighlighted = useCallback(
+    (value) => highlightedItem === value,
+    [highlightedItem]
+  );
+  const isFocused = useCallback(
+    (value) => isHighlighted(value) && focusVisible,
+    [focusVisible, isHighlighted]
+  );
+  const getActiveItem = () => {
+    const activeOptions = getOptions();
+    const activeIndex = activeOptions.findIndex(
+      (i) => i.id === activeDescendant
+    );
+    return activeOptions[activeIndex];
+  };
+  const blurHandler = () => {
+    handleBlurVisible();
+    if (!isFocusVisibleRef.current) {
+      setFocusVisible(false);
+    }
+  };
+  const mouseOverHandler = () => {
+    if (focusVisible) {
+      setFocusVisible(false);
+    }
+  };
+  const focusHandler = (event) => {
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current) {
+      setFocusVisible(true);
+    }
+    const activeElement = getActiveItem();
+    if (activeElement) {
+      updateHighlighted(activeElement);
+    } else {
+      focusFirstItem();
+    }
+  };
+  const keyDownHandler = (event) => {
+    const { key } = event;
+    const currentItem = getActiveItem();
+    let nextItem = currentItem;
+    if (isFocusVisibleRef.current || !focusVisible) {
+      setFocusVisible(true);
+    }
+    switch (key) {
+      case "ArrowUp":
+      case "ArrowDown":
+        if (!currentItem) {
+          focusFirstItem();
+          break;
+        }
+        nextItem = key === "ArrowUp" ? findPreviousOption(currentItem, 1) : findNextOption(currentItem, 1);
+        if (nextItem && nextItem !== currentItem) {
+          event.preventDefault();
+          updateHighlighted(nextItem);
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        focusFirstItem();
+        break;
+      case "End":
+        event.preventDefault();
+        focusLastItem();
+        break;
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        if (nextItem) {
+          selectItem(nextItem);
+          onChange == null ? void 0 : onChange(event, { value: nextItem.dataset.value || "" });
+        }
+        break;
+      case "PageDown":
+      case "PageUp":
+        event.preventDefault();
+        break;
+    }
+  };
+  const contextValue = useMemo(
+    () => ({
+      disabled,
+      id,
+      select,
+      isSelected,
+      isFocused,
+      highlight,
+      isHighlighted
+    }),
+    [disabled, id, select, isSelected, isFocused, highlight, isHighlighted]
+  );
+  return {
+    focusHandler,
+    keyDownHandler,
+    blurHandler,
+    mouseOverHandler,
+    activeDescendant,
+    selectedItem,
+    highlightedItem,
+    setSelectedItem,
+    setHighlightedItem,
+    contextValue,
+    focusVisibleRef
+  };
+};
+
+export { useList };
+//# sourceMappingURL=useList.js.map