@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.30

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

@@ -0,0 +1,432 @@
+import { useId, useIsFocusVisible, useControlled, ownerDocument, useForkRef } from '@salt-ds/core';
+import { useRef, useCallback, useState, useEffect } from 'react';
+
+function useList(props = {}) {
+  validateProps(props);
+  const generatedId = useId(props.id);
+  const {
+    id = generatedId,
+    source = [],
+    itemCount = source.length,
+    getItemId = (index) => `${id}-item-${index}`,
+    getItemAtIndex: getItemAtIndexProp,
+    getItemIndex: getItemIndexProp,
+    displayedItemCount = 10,
+    initialSelectedItem,
+    selectionVariant,
+    disabled = false,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onMouseDown,
+    onMouseLeave,
+    onSelect,
+    disableMouseDown,
+    restoreLastFocus,
+    highlightedIndex: highlightedIndexProp,
+    selectedItem: selectedItemProp,
+    tabToSelect,
+    ...restProps
+  } = props;
+  const {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref: focusVisibleRef
+  } = useIsFocusVisible();
+  const { current: isDeselectable } = useRef(
+    selectionVariant === "deselectable"
+  );
+  const { current: isMultiSelect } = useRef(
+    selectionVariant === "multiple" || selectionVariant === "extended" || Array.isArray(initialSelectedItem) || Array.isArray(selectedItemProp)
+  );
+  const { current: isExtendedSelect } = useRef(selectionVariant === "extended");
+  let getItemIndex = useCallback(
+    (item) => source.indexOf(item),
+    [source]
+  );
+  let getItemAtIndex = useCallback((index) => source[index], [source]);
+  const indexComparator = useCallback(
+    (a, b) => getItemIndex(a) - getItemIndex(b),
+    [getItemIndex]
+  );
+  if (typeof getItemIndexProp === "function" && typeof getItemAtIndexProp === "function") {
+    getItemIndex = getItemIndexProp;
+    getItemAtIndex = getItemAtIndexProp;
+  }
+  const rootRef = useRef();
+  const [focusVisible, setFocusVisible] = useState(false);
+  const [lastFocusedIndex, setLastFocusedIndex] = useState(-1);
+  const [selectedItem, setSelectedItem] = useControlled({
+    controlled: selectedItemProp,
+    default: initialSelectedItem != null ? initialSelectedItem : isMultiSelect ? [] : null,
+    name: "useList",
+    state: "selectedItem"
+  });
+  const [highlightedIndex, setHighlightedIndex] = useControlled({
+    controlled: highlightedIndexProp,
+    default: void 0,
+    name: "useList",
+    state: "highlightedIndex"
+  });
+  const handleSingleSelect = useCallback(
+    (event, index, item) => {
+      const isSelected = item === selectedItem;
+      let nextItem;
+      if (isSelected && !isDeselectable) {
+        return;
+      }
+      if (!isSelected) {
+        nextItem = item;
+        setHighlightedIndex(index);
+      } else {
+        nextItem = null;
+      }
+      setSelectedItem(
+        nextItem
+      );
+      if (onChange) {
+        onChange(
+          event,
+          nextItem
+        );
+      }
+    },
+    [
+      isDeselectable,
+      onChange,
+      selectedItem,
+      setHighlightedIndex,
+      setSelectedItem
+    ]
+  );
+  const handleMultiSelect = useCallback(
+    (event, index, item) => {
+      const isSelected = selectedItem.indexOf(item) !== -1;
+      let nextItems = selectedItem;
+      if (!isSelected) {
+        nextItems = nextItems.concat([item]).sort(indexComparator);
+        setHighlightedIndex(index);
+      } else {
+        nextItems = nextItems.filter((selected) => selected !== item);
+      }
+      setSelectedItem(
+        nextItems
+      );
+      if (onChange) {
+        onChange(
+          event,
+          nextItems
+        );
+      }
+    },
+    [
+      indexComparator,
+      onChange,
+      selectedItem,
+      setHighlightedIndex,
+      setSelectedItem
+    ]
+  );
+  const handleRangeSelect = useCallback(
+    (event, index) => {
+      var _a;
+      const currentSelection = event.ctrlKey || event.metaKey ? selectedItem : [];
+      const lastSelectedItemIndex = selectedItem.length > 0 ? getItemIndex(
+        selectedItem[selectedItem.length - 1]
+      ) : 0;
+      const startRegion = Math.min(
+        index != null ? index : lastSelectedItemIndex,
+        lastSelectedItemIndex
+      );
+      const endRegion = Math.max(
+        index != null ? index : lastSelectedItemIndex,
+        lastSelectedItemIndex
+      );
+      const rangeSelection = source.slice(startRegion, endRegion + 1);
+      const nextItems = [
+        .../* @__PURE__ */ new Set([...currentSelection, ...rangeSelection])
+      ];
+      (_a = ownerDocument(event.currentTarget).getSelection()) == null ? void 0 : _a.removeAllRanges();
+      setSelectedItem(
+        nextItems
+      );
+      if (onChange) {
+        onChange(
+          event,
+          nextItems
+        );
+      }
+    },
+    [getItemIndex, onChange, selectedItem, setSelectedItem, source]
+  );
+  const handleExtendedSelect = useCallback(
+    (event, index, item) => {
+      let nextItems = selectedItem;
+      if (event.shiftKey) {
+        handleRangeSelect(event, index);
+      } else if (selectedItem.length === 0 || event.ctrlKey || event.metaKey) {
+        console.log("handleMulti");
+        handleMultiSelect(event, index, item);
+      } else {
+        nextItems = [item];
+        setSelectedItem(
+          nextItems
+        );
+        if (onChange) {
+          onChange(
+            event,
+            nextItems
+          );
+        }
+      }
+    },
+    [
+      handleMultiSelect,
+      handleRangeSelect,
+      onChange,
+      selectedItem,
+      setSelectedItem
+    ]
+  );
+  const handleSelect = useCallback(
+    (event, index, item) => {
+      if (item == null || item.disabled) {
+        return;
+      }
+      if (onSelect) {
+        console.log("onSelect");
+        onSelect(event, item);
+      }
+      if (isExtendedSelect) {
+        handleExtendedSelect(event, index, item);
+      } else if (isMultiSelect) {
+        handleMultiSelect(event, index, item);
+      } else {
+        handleSingleSelect(event, index, item);
+      }
+    },
+    [
+      handleExtendedSelect,
+      handleMultiSelect,
+      handleSingleSelect,
+      isExtendedSelect,
+      isMultiSelect,
+      onSelect
+    ]
+  );
+  const saveFocusedIndex = (index) => {
+    setLastFocusedIndex(index);
+    return index;
+  };
+  const keyDownHandlers = {
+    ArrowUp: (event) => {
+      event.preventDefault();
+      setHighlightedIndex(
+        (prevHighlightedIndex) => saveFocusedIndex(Math.max(0, (prevHighlightedIndex != null ? prevHighlightedIndex : itemCount) - 1))
+      );
+    },
+    ArrowDown: (event) => {
+      event.preventDefault();
+      setHighlightedIndex(
+        (prevHighlightedIndex) => saveFocusedIndex(
+          Math.min(itemCount - 1, (prevHighlightedIndex != null ? prevHighlightedIndex : -1) + 1)
+        )
+      );
+    },
+    PageUp: (event) => {
+      event.preventDefault();
+      setHighlightedIndex(
+        (prevHighlightedIndex) => saveFocusedIndex(
+          Math.max(
+            0,
+            (prevHighlightedIndex != null ? prevHighlightedIndex : displayedItemCount) - displayedItemCount
+          )
+        )
+      );
+    },
+    PageDown: (event) => {
+      event.preventDefault();
+      setHighlightedIndex(
+        (prevHighlightedIndex) => saveFocusedIndex(
+          Math.min(
+            itemCount - 1,
+            (prevHighlightedIndex != null ? prevHighlightedIndex : 0) + displayedItemCount
+          )
+        )
+      );
+    },
+    Home: (event) => {
+      event.preventDefault();
+      setHighlightedIndex(saveFocusedIndex(0));
+    },
+    End: (event) => {
+      event.preventDefault();
+      setHighlightedIndex(saveFocusedIndex(itemCount - 1));
+    },
+    Enter: (event) => {
+      event.preventDefault();
+      handleSelect(
+        event,
+        highlightedIndex,
+        highlightedIndex != null && highlightedIndex > -1 ? getItemAtIndex(highlightedIndex) : null
+      );
+    },
+    " ": (event) => {
+      event.preventDefault();
+      handleSelect(
+        event,
+        highlightedIndex,
+        highlightedIndex != null && highlightedIndex > -1 ? getItemAtIndex(highlightedIndex) : null
+      );
+    },
+    Tab: (event) => {
+      if (tabToSelect) {
+        handleSelect(
+          event,
+          highlightedIndex,
+          highlightedIndex != null && highlightedIndex > -1 ? getItemAtIndex(highlightedIndex) : null
+        );
+      } else {
+        setHighlightedIndex(void 0);
+      }
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (isFocusVisibleRef.current) {
+      setFocusVisible(true);
+    }
+    const handler = keyDownHandlers[event.key];
+    if (handler) {
+      handler(event);
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  const handleFocus = (event) => {
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current) {
+      setFocusVisible(true);
+    }
+    if (highlightedIndex === void 0) {
+      const firstSelectedItem = isMultiSelect ? selectedItem[0] : selectedItem;
+      setHighlightedIndex(
+        Math.max(
+          restoreLastFocus ? lastFocusedIndex : firstSelectedItem ? getItemIndex(firstSelectedItem) : -1,
+          0
+        )
+      );
+    }
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleBlur = (event) => {
+    setHighlightedIndex(void 0);
+    handleBlurVisible();
+    if (!isFocusVisibleRef.current) {
+      setFocusVisible(false);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleMouseDown = (event) => {
+    if (disableMouseDown) {
+      event.preventDefault();
+    } else if (onMouseDown) {
+      onMouseDown(event);
+    }
+  };
+  const handleMouseLeave = (event) => {
+    if (focusVisible && id) {
+      const rootNode = (rootRef.current || ownerDocument(event.currentTarget)).getRootNode();
+      const listNode = rootNode.getElementById(id);
+      if (listNode == null ? void 0 : listNode.contains(event.target)) {
+        setHighlightedIndex(void 0);
+      }
+    } else {
+      setHighlightedIndex(void 0);
+    }
+    if (onMouseLeave) {
+      onMouseLeave(event);
+    }
+  };
+  const eventHandlers = {
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onMouseDown: handleMouseDown,
+    onMouseLeave: handleMouseLeave
+  };
+  const ariaProps = {
+    role: "listbox",
+    "aria-activedescendant": highlightedIndex !== void 0 && highlightedIndex >= 0 ? getItemId(highlightedIndex) : void 0
+  };
+  if (isMultiSelect) {
+    ariaProps["aria-multiselectable"] = true;
+  }
+  return {
+    focusedRef: useForkRef(rootRef, focusVisibleRef),
+    state: {
+      id,
+      focusVisible,
+      selectedItem,
+      highlightedIndex,
+      isDeselectable,
+      isMultiSelect,
+      isDisabled: disabled
+    },
+    helpers: {
+      setFocusVisible,
+      setSelectedItem,
+      setHighlightedIndex,
+      keyDownHandlers,
+      handleSelect
+    },
+    listProps: {
+      id,
+      source,
+      itemCount,
+      disableMouseDown,
+      displayedItemCount,
+      getItemAtIndex,
+      getItemIndex,
+      getItemId,
+      disabled,
+      ...ariaProps,
+      ...restProps,
+      ...disabled ? {} : eventHandlers
+    }
+  };
+}
+const validateProps = (props) => {
+  if (process.env.NODE_ENV !== "production") {
+    const { source, itemCount, getItemIndex, getItemAtIndex } = props;
+    const hasIndexer = typeof getItemIndex === "function" && typeof getItemAtIndex === "function";
+    const hasNoIndexer = getItemIndex === void 0 && getItemAtIndex === void 0;
+    const sourceNotArray = !Array.isArray(source);
+    useEffect(() => {
+      if (sourceNotArray) {
+        console.error("`source` for useList must be an array.");
+      }
+    }, [sourceNotArray]);
+    useEffect(() => {
+      if (!hasNoIndexer && !hasIndexer) {
+        console.error(
+          "useList needs to have both `getItemIndex` and `getItemAtIndex`."
+        );
+      }
+      if (!hasNoIndexer && itemCount === void 0) {
+        console.error(
+          "useList needs to have `itemCount` if an indexer is used."
+        );
+      }
+    }, [hasIndexer, hasNoIndexer, itemCount]);
+  }
+};
+
+export { useList };
+//# sourceMappingURL=useList.js.map

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

@@ -0,0 +1,82 @@
+import { useCallback, useRef } from 'react';
+import { escapeRegExp } from '../utils/escapeRegExp.js';
+import '@salt-ds/core';
+import { itemToString } from './itemToString.js';
+
+const TYPE_SELECT_TIMEOUT = 1500;
+function useTypeSelect(options) {
+  const {
+    getItemAtIndex,
+    highlightedIndex,
+    itemCount,
+    itemToString: itemToString$1 = itemToString,
+    onTypeSelect,
+    setFocusVisible,
+    setHighlightedIndex
+  } = options;
+  const getItemIndexForSearch = useCallback(
+    (searchTerm, fromIndex) => {
+      if (itemCount === 0) {
+        return null;
+      }
+      let index = fromIndex || 0;
+      while (index < itemCount) {
+        const item = getItemAtIndex(index);
+        const textValue = itemToString$1 ? itemToString$1(item) : item;
+        if (textValue && textValue.match(new RegExp(`^${escapeRegExp(searchTerm)}`, "i"))) {
+          return index;
+        }
+        index = index + 1;
+      }
+      return null;
+    },
+    [itemCount, itemToString$1, getItemAtIndex]
+  );
+  const state = useRef({
+    search: "",
+    timeout: null
+  }).current;
+  const onKeyDownCapture = (event) => {
+    const character = getStringForKey(event.key);
+    if (!character || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    if (character !== " " || state.search.trim().length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (character !== state.search) {
+      state.search += character;
+    }
+    let index = getItemIndexForSearch(
+      state.search,
+      state.search.length > 1 ? highlightedIndex : highlightedIndex + 1
+    );
+    if (index == null) {
+      index = getItemIndexForSearch(state.search);
+    }
+    if (index != null) {
+      setFocusVisible(true);
+      setHighlightedIndex(index);
+      if (onTypeSelect) {
+        onTypeSelect(index);
+      }
+    }
+    clearTimeout(state.timeout);
+    state.timeout = setTimeout(() => {
+      state.search = "";
+    }, TYPE_SELECT_TIMEOUT);
+  };
+  return {
+    onKeyDownCapture
+  };
+}
+function getStringForKey(key) {
+  if (key.length === 1 || !/^[A-Z]/i.test(key)) {
+    return key;
+  }
+  return "";
+}
+
+export { useTypeSelect };
+//# sourceMappingURL=useTypeSelect.js.map

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

@@ -0,0 +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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"}

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-border);\n  margin-bottom: var(--salt-size-border);\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-selectable-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  outline: 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-content-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  outline: 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,81 @@
+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,
+    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 { forwardRef, HTMLAttributes, MouseEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, 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  /**\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":";;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAiB7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,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,MACA,SAAA;AAAA,MACA,aAAA;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,WAAW,KAAK,CAAA,CAAA;AACjC,IAAM,MAAA,OAAA,GAAU,UAAU,KAAK,CAAA,CAAA;AAC/B,IAAM,MAAA,WAAA,GAAc,cAAc,KAAK,CAAA,CAAA;AAEvC,IAAM,MAAA,WAAA,GAAc,CAAC,KAAqC,KAAA;AACxD,MAAA,IAAI,CAAC,QAAU,EAAA;AACb,QAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,QAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACZ;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,eAAA,GAAkB,CAAC,KAAqC,KAAA;AAC5D,MAAA,IAAI,CAAC,WAAa,EAAA;AAChB,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,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,aAAa,CAAI,GAAA,WAAA;AAAA,UAC/B,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,MACT,WAAa,EAAA,eAAA;AAAA,MACZ,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  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":";;;;"}