@salt-ds/lab 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist-es/list/useList.js

@@ -0,0 +1,205 @@
+import { useRef, useCallback, isValidElement } from 'react';
+import '@salt-ds/core';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/keyUtils.js';
+import { useCollapsibleGroups } from '../common-hooks/useCollapsibleGroups.js';
+import { closestListItemIndex } from '../common-hooks/list-dom-utils.js';
+import '../utils/useFloatingUI.js';
+import { useKeyboardNavigation } from '../common-hooks/useKeyboardNavigation.js';
+import { useSelection } from '../common-hooks/useSelection.js';
+import { useTypeahead } from '../common-hooks/useTypeahead.js';
+import { useViewportTracking } from '../common-hooks/useViewportTracking.js';
+
+const useList = ({
+  collapsibleHeaders,
+  collectionHook: dataHook,
+  containerRef,
+  contentRef,
+  defaultHighlightedIndex,
+  defaultSelected,
+  disabled,
+  disableAriaActiveDescendant,
+  disableHighlightOnFocus,
+  disableTypeToSelect,
+  highlightedIndex: highlightedIndexProp,
+  label = "",
+  listHandlers: listHandlersProp,
+  onSelect,
+  onSelectionChange,
+  onHighlight,
+  onKeyboardNavigation,
+  onKeyDown,
+  restoreLastFocus,
+  selected,
+  selectionStrategy,
+  selectionKeys,
+  stickyHeaders,
+  tabToSelect
+}) => {
+  const lastSelection = useRef(selected || defaultSelected);
+  const handleKeyboardNavigation = (evt, nextIndex) => {
+    var _a, _b;
+    (_b = (_a = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a, evt, nextIndex);
+    onKeyboardNavigation == null ? void 0 : onKeyboardNavigation(evt, nextIndex);
+  };
+  const handleSelect = useCallback(
+    (evt, selectedItem) => {
+      if (onSelect) {
+        if (isValidElement(selectedItem.value)) {
+          onSelect(evt, selectedItem.label);
+        } else if (selectedItem.value !== null) {
+          onSelect(evt, selectedItem.value);
+        }
+      }
+    },
+    [onSelect]
+  );
+  const handleSelectionChange = useCallback(
+    (evt, selected2) => {
+      if (onSelectionChange) {
+        onSelectionChange(
+          evt,
+          Array.isArray(selected2) ? selected2.map(
+            (s) => isValidElement(s.value) ? s.label : s.value
+          ) : selected2 && (isValidElement(selected2.value) ? selected2.label : selected2.value)
+        );
+      }
+    },
+    [onSelectionChange]
+  );
+  const {
+    highlightedIndex,
+    listProps: {
+      onKeyDown: navigationKeyDown,
+      onMouseMove: navigationMouseMove,
+      ...navigationControlProps
+    },
+    setHighlightedIndex,
+    ...keyboardHook
+  } = useKeyboardNavigation({
+    containerRef,
+    defaultHighlightedIndex,
+    disableHighlightOnFocus,
+    highlightedIndex: highlightedIndexProp,
+    indexPositions: dataHook.data,
+    label,
+    onHighlight,
+    onKeyboardNavigation: handleKeyboardNavigation,
+    restoreLastFocus,
+    selected: lastSelection.current
+  });
+  const collapsibleHook = useCollapsibleGroups({
+    collapsibleHeaders,
+    highlightedIdx: highlightedIndex,
+    collectionHook: dataHook
+  });
+  const selectionHook = useSelection({
+    defaultSelected,
+    highlightedIdx: highlightedIndex,
+    indexPositions: dataHook.data,
+    label,
+    onSelect: handleSelect,
+    onSelectionChange: handleSelectionChange,
+    selected,
+    selectionStrategy,
+    selectionKeys,
+    tabToSelect
+  });
+  const { onKeyDown: typeaheadOnKeyDown } = useTypeahead({
+    disableTypeToSelect,
+    highlightedIdx: highlightedIndex,
+    highlightItemAtIndex: setHighlightedIndex,
+    typeToNavigate: true,
+    items: dataHook.data
+  });
+  const handleKeyDown = useCallback(
+    (evt) => {
+      var _a, _b, _c;
+      if (!evt.defaultPrevented) {
+        typeaheadOnKeyDown == null ? void 0 : typeaheadOnKeyDown(evt);
+      }
+      navigationKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        (_b = (_a = selectionHook.listHandlers).onKeyDown) == null ? void 0 : _b.call(_a, evt);
+      }
+      if (!evt.defaultPrevented) {
+        (_c = collapsibleHook == null ? void 0 : collapsibleHook.onKeyDown) == null ? void 0 : _c.call(collapsibleHook, evt);
+      }
+      if (!evt.defaultPrevented) {
+        onKeyDown == null ? void 0 : onKeyDown(evt);
+      }
+    },
+    [
+      collapsibleHook,
+      navigationKeyDown,
+      onKeyDown,
+      selectionHook.listHandlers,
+      typeaheadOnKeyDown
+    ]
+  );
+  const { isScrolling, scrollIntoView } = useViewportTracking({
+    containerRef,
+    contentRef,
+    highlightedIdx: highlightedIndex,
+    indexPositions: dataHook.data,
+    stickyHeaders
+  });
+  const handleMouseMove = useCallback(
+    (evt) => {
+      if (!isScrolling.current && !disabled) {
+        navigationMouseMove();
+        const idx = closestListItemIndex(evt.target);
+        if (idx !== highlightedIndex) {
+          const item = dataHook.data[idx];
+          if (!item || item.disabled) {
+            setHighlightedIndex(-1);
+          } else {
+            setHighlightedIndex(idx);
+          }
+        }
+      }
+    },
+    [
+      isScrolling,
+      disabled,
+      setHighlightedIndex,
+      navigationMouseMove,
+      highlightedIndex,
+      dataHook.data
+    ]
+  );
+  const getActiveDescendant = () => {
+    var _a;
+    return highlightedIndex === void 0 || highlightedIndex === -1 || disableAriaActiveDescendant ? void 0 : (_a = dataHook.data[highlightedIndex]) == null ? void 0 : _a.id;
+  };
+  lastSelection.current = selectionHook.selected;
+  const listControlProps = {
+    "aria-activedescendant": getActiveDescendant(),
+    onBlur: navigationControlProps.onBlur,
+    onFocus: navigationControlProps.onFocus,
+    onKeyDown: handleKeyDown,
+    onMouseDownCapture: navigationControlProps.onMouseDownCapture,
+    onMouseLeave: navigationControlProps.onMouseLeave
+  };
+  const listHandlers = listHandlersProp || {
+    onClick: selectionHook.listHandlers.onClick,
+    onMouseMove: handleMouseMove
+  };
+  return {
+    focusVisible: keyboardHook.focusVisible,
+    controlledHighlighting: keyboardHook.controlledHighlighting,
+    highlightedIndex,
+    keyboardNavigation: keyboardHook.keyboardNavigation,
+    listHandlers,
+    listItemHeaderHandlers: collapsibleHook,
+    listControlProps,
+    scrollIntoView,
+    selected: selectionHook.selected,
+    setHighlightedIndex,
+    setIgnoreFocus: keyboardHook.setIgnoreFocus,
+    setSelected: selectionHook.setSelected
+  };
+};
+
+export { useList };
+//# sourceMappingURL=useList.js.map

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

@@ -0,0 +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      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/useListHeight.js

@@ -0,0 +1,50 @@
+import { useState, useMemo, useCallback } from 'react';
+import '@salt-ds/core';
+import 'react/jsx-runtime';
+import { useResizeObserver, HeightOnly } from '../responsive/useResizeObserver.js';
+import '../utils/useFloatingUI.js';
+
+const useListHeight = ({
+  borderless,
+  displayedItemCount,
+  getItemHeight,
+  height,
+  itemCount,
+  itemGapSize,
+  itemHeight: itemHeightProp,
+  rowHeightRef
+}) => {
+  const [measuredItemHeight, setMeasuredItemHeight] = useState(36);
+  const preferredHeight = useMemo(() => {
+    let result = borderless ? 0 : 2;
+    const itemHeight = itemHeightProp != null ? itemHeightProp : measuredItemHeight;
+    const preferredItemCount = Math.min(displayedItemCount, itemCount) || displayedItemCount;
+    if (typeof getItemHeight === "function") {
+      result += Array(preferredItemCount).fill(0).reduce(
+        (total, _, index) => total + getItemHeight(index) + itemGapSize,
+        0
+      ) - itemGapSize;
+    } else {
+      result += preferredItemCount * Number(itemHeight) + (preferredItemCount - 1) * itemGapSize;
+    }
+    return isNaN(result) ? void 0 : result;
+  }, [
+    borderless,
+    displayedItemCount,
+    getItemHeight,
+    itemCount,
+    itemGapSize,
+    itemHeightProp,
+    measuredItemHeight
+  ]);
+  const handleRowHeight = useCallback(({ height: height2 }) => {
+    setMeasuredItemHeight(height2);
+  }, []);
+  useResizeObserver(rowHeightRef, HeightOnly, handleRowHeight, true);
+  return {
+    preferredHeight
+  };
+};
+
+export { useListHeight };
+//# sourceMappingURL=useListHeight.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListHeight.js","sources":["../src/list/useListHeight.ts"],"sourcesContent":["import { useMemo, useState, useCallback, RefObject } from \"react\";\nimport { useResizeObserver, HeightOnly, ResizeHandler } from \"../responsive\";\n\nexport interface ListHeightHookProps {\n  borderless?: boolean;\n  displayedItemCount: number;\n  getItemHeight?: (index: number) => number;\n  height?: number | string;\n  itemCount: number;\n  itemGapSize: number;\n  itemHeight?: number | string;\n  rowHeightRef: RefObject<HTMLElement | null>;\n}\n\nexport interface HeightHookResult {\n  preferredHeight: number | undefined;\n}\n\nexport const useListHeight = ({\n  borderless,\n  displayedItemCount,\n  getItemHeight,\n  // TODO no need to incur the cost of a resizeObserver if height is explicit\n  height,\n  itemCount,\n  itemGapSize,\n  itemHeight: itemHeightProp,\n  rowHeightRef,\n}: ListHeightHookProps): HeightHookResult => {\n  // TODO default by density\n  const [measuredItemHeight, setMeasuredItemHeight] = useState<\n    number | undefined\n  >(36);\n\n  const preferredHeight = useMemo(() => {\n    let result = borderless ? 0 : 2;\n    const itemHeight = itemHeightProp ?? measuredItemHeight;\n\n    // if there are 0 items we render with the preferred count\n    const preferredItemCount =\n      Math.min(displayedItemCount, itemCount) || displayedItemCount;\n\n    if (typeof getItemHeight === \"function\") {\n      result +=\n        Array(preferredItemCount)\n          .fill(0)\n          .reduce<number>(\n            (total, _, index) => total + getItemHeight(index) + itemGapSize,\n            0\n          ) -\n        // We don't want gap after the last item\n        itemGapSize;\n    } else {\n      result +=\n        preferredItemCount * Number(itemHeight) +\n        (preferredItemCount - 1) * itemGapSize;\n    }\n\n    // list height will be undefined if the item height can not be\n    // converted to a number, for example rem or a percentage string\n    return isNaN(result) ? undefined : result;\n  }, [\n    borderless,\n    displayedItemCount,\n    getItemHeight,\n    itemCount,\n    itemGapSize,\n    itemHeightProp,\n    measuredItemHeight,\n  ]);\n\n  const handleRowHeight: ResizeHandler = useCallback(({ height }) => {\n    setMeasuredItemHeight(height);\n  }, []);\n\n  useResizeObserver(rowHeightRef, HeightOnly, handleRowHeight, true);\n\n  return {\n    preferredHeight,\n  };\n};\n"],"names":["height"],"mappings":";;;;;;AAkBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,UAAA;AAAA,EACA,kBAAA;AAAA,EACA,aAAA;AAAA,EAEA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,YAAA;AACF,CAA6C,KAAA;AAE3C,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAElD,EAAE,CAAA,CAAA;AAEJ,EAAM,MAAA,eAAA,GAAkB,QAAQ,MAAM;AACpC,IAAI,IAAA,MAAA,GAAS,aAAa,CAAI,GAAA,CAAA,CAAA;AAC9B,IAAA,MAAM,aAAa,cAAkB,IAAA,IAAA,GAAA,cAAA,GAAA,kBAAA,CAAA;AAGrC,IAAA,MAAM,kBACJ,GAAA,IAAA,CAAK,GAAI,CAAA,kBAAA,EAAoB,SAAS,CAAK,IAAA,kBAAA,CAAA;AAE7C,IAAI,IAAA,OAAO,kBAAkB,UAAY,EAAA;AACvC,MAAA,MAAA,IACE,KAAM,CAAA,kBAAkB,CACrB,CAAA,IAAA,CAAK,CAAC,CACN,CAAA,MAAA;AAAA,QACC,CAAC,KAAO,EAAA,CAAA,EAAG,UAAU,KAAQ,GAAA,aAAA,CAAc,KAAK,CAAI,GAAA,WAAA;AAAA,QACpD,CAAA;AAAA,OAGJ,GAAA,WAAA,CAAA;AAAA,KACG,MAAA;AACL,MAAA,MAAA,IACE,kBAAqB,GAAA,MAAA,CAAO,UAAU,CAAA,GAAA,CACrC,qBAAqB,CAAK,IAAA,WAAA,CAAA;AAAA,KAC/B;AAIA,IAAO,OAAA,KAAA,CAAM,MAAM,CAAA,GAAI,KAAY,CAAA,GAAA,MAAA,CAAA;AAAA,GAClC,EAAA;AAAA,IACD,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,kBAAiC,WAAY,CAAA,CAAC,EAAE,MAAA,EAAAA,SAAa,KAAA;AACjE,IAAA,qBAAA,CAAsBA,OAAM,CAAA,CAAA;AAAA,GAC9B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAkB,iBAAA,CAAA,YAAA,EAAc,UAAY,EAAA,eAAA,EAAiB,IAAI,CAAA,CAAA;AAEjE,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,GACF,CAAA;AACF;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = "/* TODO: Should the outer most container being 'wrapper'? */\n.saltListDeprecated-wrapper {\n  /* Color */\n  --list-background: var(--salt-container-primary-background);\n  /* Border */\n  --list-borderColor: var(--salt-container-primary-borderColor);\n  --list-borderStyle: var(--salt-container-borderStyle);\n  --list-borderWidth: var(--salt-size-border);\n  --list-borderRadius: 0;\n\n  /* Text, Font */\n  /* TODO: Do we necessary want to set this? Should rely on inheritance? */\n  /* --list-fontFamily: var(--salt-typography-fontFamily); */\n\n  /* Misc. */\n  --list-boxShadow: none;\n  --list-disabled-cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltListDeprecated-wrapper {\n  position: relative;\n}\n\n.saltListDeprecated {\n  /* font-family: var(--list-fontFamily); */\n  overflow-y: auto;\n}\n.saltListDeprecated:focus {\n  outline: none;\n}\n\n.saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) {\n  border-color: var(--list-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  border-radius: var(--list-borderRadius);\n}\n.saltListDeprecated-wrapper {\n  background: var(--list-background);\n  box-shadow: var(--list-boxShadow);\n  position: relative;\n}\n\n.saltListDeprecated-borderless {\n  border: none;\n}\n.saltListDeprecated-disabled {\n  cursor: var(--list-disabled-cursor);\n  /* TODO: Design: Check whether we want things behind the list to actually show through opacity */\n  /* Or instead of using `opacity` in favor of dedicated color setting, on background, border-color, etc. */\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=List.css.js.map

package/dist-es/list-deprecated/List.css.js.map

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

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

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import { useForkRef } from '@salt-ds/core';
+import { forwardRef, useContext, useRef } from 'react';
+import { ListBase } from './ListBase.js';
+import { ListStateContext } from './ListStateContext.js';
+import { useList } from './useList.js';
+import { useTypeSelect } from './useTypeSelect.js';
+import { DescendantContext, DescendantProvider } from './internal/DescendantContext.js';
+
+const ListWithDescendants = forwardRef(function ListWithDescendants2(props, ref) {
+  const { items } = useContext(DescendantContext);
+  const { focusedRef, state, helpers, listProps } = useList({
+    source: items.current.length ? items.current : [],
+    ...props
+  });
+  const { highlightedIndex } = state;
+  const { setHighlightedIndex, setFocusVisible } = helpers;
+  const {
+    disabled,
+    disableTypeToSelect,
+    getItemAtIndex,
+    itemCount,
+    itemToString,
+    onKeyDownCapture: onListKeyDownCapture,
+    ...restListProps
+  } = listProps;
+  const { onKeyDownCapture: onTypeSelectKeyDownCapture } = useTypeSelect({
+    getItemAtIndex,
+    highlightedIndex,
+    itemCount,
+    itemToString,
+    setFocusVisible,
+    setHighlightedIndex
+  });
+  const setListRef = useForkRef(focusedRef, props.listRef);
+  const handleKeyDownCapture = (event) => {
+    if (disabled) {
+      return;
+    }
+    if (onListKeyDownCapture) {
+      onListKeyDownCapture(event);
+    }
+    if (!disableTypeToSelect && onTypeSelectKeyDownCapture) {
+      onTypeSelectKeyDownCapture(event);
+    }
+  };
+  return /* @__PURE__ */ jsx(ListStateContext.Provider, {
+    value: { state, helpers },
+    children: /* @__PURE__ */ jsx(ListBase, {
+      listRef: setListRef,
+      ref,
+      ...restListProps,
+      disabled,
+      getItemAtIndex,
+      itemCount,
+      itemToString,
+      onKeyDownCapture: handleKeyDownCapture
+    })
+  });
+});
+const List = forwardRef(function List2(props, ref) {
+  const itemsRef = useRef([]);
+  return /* @__PURE__ */ jsx(DescendantProvider, {
+    items: itemsRef,
+    children: /* @__PURE__ */ jsx(ListWithDescendants, {
+      ref,
+      ...props
+    })
+  });
+});
+
+export { List };
+//# sourceMappingURL=List.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../src/list-deprecated/List.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\n\nimport {\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  ReactElement,\n  useContext,\n  useRef,\n} from \"react\";\n\nimport { ListBase, ListScrollHandles } from \"./ListBase\";\nimport { ListProps, ListSelectionVariant } from \"./ListProps\";\nimport { ListStateContext } from \"./ListStateContext\";\nimport { useList } from \"./useList\";\nimport { useTypeSelect } from \"./useTypeSelect\";\n\nimport {\n  DescendantContext,\n  DescendantProvider,\n} from \"./internal/DescendantContext\";\n\nconst ListWithDescendants = forwardRef(function ListWithDescendants<\n  Item,\n  Variant extends ListSelectionVariant\n>(\n  props: ListProps<Item, Variant>,\n  ref?: ForwardedRef<ListScrollHandles<Item>>\n) {\n  const { items } = useContext(DescendantContext);\n\n  const { focusedRef, state, helpers, listProps } = useList({\n    source: items.current.length ? items.current : [],\n    ...props,\n  });\n\n  const { highlightedIndex } = state;\n  const { setHighlightedIndex, setFocusVisible } = helpers;\n\n  const {\n    disabled,\n    disableTypeToSelect,\n    getItemAtIndex,\n    itemCount,\n    itemToString,\n    onKeyDownCapture: onListKeyDownCapture,\n    ...restListProps\n  } = listProps;\n\n  const { onKeyDownCapture: onTypeSelectKeyDownCapture } = useTypeSelect({\n    getItemAtIndex,\n    highlightedIndex,\n    itemCount,\n    itemToString,\n    setFocusVisible,\n    setHighlightedIndex,\n  });\n\n  const setListRef = useForkRef(focusedRef, props.listRef);\n\n  const handleKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    if (onListKeyDownCapture) {\n      onListKeyDownCapture(event);\n    }\n\n    if (!disableTypeToSelect && onTypeSelectKeyDownCapture) {\n      onTypeSelectKeyDownCapture(event);\n    }\n  };\n\n  return (\n    <ListStateContext.Provider value={{ state, helpers }}>\n      <ListBase\n        listRef={setListRef}\n        ref={ref}\n        {...restListProps}\n        disabled={disabled}\n        getItemAtIndex={getItemAtIndex}\n        itemCount={itemCount}\n        itemToString={itemToString}\n        onKeyDownCapture={handleKeyDownCapture}\n      />\n    </ListStateContext.Provider>\n  );\n}) as <Item, Variant extends ListSelectionVariant>(\n  props: ListProps<Item, Variant> & {\n    ref?: ForwardedRef<ListScrollHandles<Item>>;\n  }\n) => ReactElement<ListProps<Item, Variant>>;\n\nexport const List = forwardRef(function List<\n  Item,\n  Variant extends ListSelectionVariant\n>(\n  props: ListProps<Item, Variant>,\n  ref?: ForwardedRef<ListScrollHandles<Item>>\n) {\n  const itemsRef = useRef([]);\n\n  return (\n    <DescendantProvider items={itemsRef}>\n      <ListWithDescendants<Item, Variant> ref={ref} {...props} />\n    </DescendantProvider>\n  );\n}) as <Item = string, Variant extends ListSelectionVariant = \"default\">(\n  props: ListProps<Item, Variant> & {\n    ref?: ForwardedRef<ListScrollHandles<Item>>;\n  }\n) => ReactElement<ListProps<Item, Variant>>;\n"],"names":["ListWithDescendants","List"],"mappings":";;;;;;;;;AAsBA,MAAM,mBAAsB,GAAA,UAAA,CAAW,SAASA,oBAAAA,CAI9C,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,KAAA,EAAU,GAAA,UAAA,CAAW,iBAAiB,CAAA,CAAA;AAE9C,EAAA,MAAM,EAAE,UAAY,EAAA,KAAA,EAAO,OAAS,EAAA,SAAA,KAAc,OAAQ,CAAA;AAAA,IACxD,QAAQ,KAAM,CAAA,OAAA,CAAQ,MAAS,GAAA,KAAA,CAAM,UAAU,EAAC;AAAA,IAChD,GAAG,KAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,kBAAqB,GAAA,KAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,mBAAqB,EAAA,eAAA,EAAoB,GAAA,OAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,oBAAA;AAAA,IACf,GAAA,aAAA;AAAA,GACD,GAAA,SAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,0BAA2B,EAAA,GAAI,aAAc,CAAA;AAAA,IACrE,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,mBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,UAAY,EAAA,KAAA,CAAM,OAAO,CAAA,CAAA;AAEvD,EAAM,MAAA,oBAAA,GAAuB,CAAC,KAAyC,KAAA;AACrE,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,oBAAsB,EAAA;AACxB,MAAA,oBAAA,CAAqB,KAAK,CAAA,CAAA;AAAA,KAC5B;AAEA,IAAI,IAAA,CAAC,uBAAuB,0BAA4B,EAAA;AACtD,MAAA,0BAAA,CAA2B,KAAK,CAAA,CAAA;AAAA,KAClC;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,IAA0B,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,IACjD,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,OAAS,EAAA,UAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,aAAA;AAAA,MACJ,QAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAkB,EAAA,oBAAA;AAAA,KACpB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAMM,MAAM,IAAO,GAAA,UAAA,CAAW,SAASC,KAAAA,CAItC,OACA,GACA,EAAA;AACA,EAAM,MAAA,QAAA,GAAW,MAAO,CAAA,EAAE,CAAA,CAAA;AAE1B,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IAAmB,KAAO,EAAA,QAAA;AAAA,IACzB,QAAC,kBAAA,GAAA,CAAA,mBAAA,EAAA;AAAA,MAAmC,GAAA;AAAA,MAAW,GAAG,KAAA;AAAA,KAAO,CAAA;AAAA,GAC3D,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,285 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useId, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { createContext, memo, forwardRef, useContext, useRef, useMemo, useImperativeHandle, Children } from 'react';
+import { areEqual, VariableSizeList, FixedSizeList } from 'react-window';
+import { calcPreferredListHeight } from './internal/calcPreferredListHeight.js';
+import { scrollIntoView } from './internal/scrollIntoView.js';
+import { useListAutoSizer } from './internal/useListAutoSizer.js';
+import { itemToString } from './itemToString.js';
+import { ListItemBase } from './ListItemBase.js';
+import { ListItemContext } from './ListItemContext.js';
+import { useListStateContext } from './ListStateContext.js';
+import { useListItem, useVirtualizedListItem } from './useListItem.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './List.css.js';
+
+const withBaseName = makePrefixer("saltListDeprecated");
+const ListboxContext = createContext({});
+const DefaultItem = memo(function DefaultItem2(props) {
+  const { item, itemToString, itemProps } = useListItem(props);
+  return /* @__PURE__ */ jsx(ListItemBase, {
+    ...itemProps,
+    children: itemToString(item)
+  });
+}, areEqual);
+const DefaultVirtualizedItem = memo(
+  function DefaultVirtualizedItem2(props) {
+    const { item, itemToString, itemProps } = useVirtualizedListItem(props);
+    return /* @__PURE__ */ jsx(ListItemBase, {
+      ...itemProps,
+      children: itemToString(item)
+    });
+  },
+  areEqual
+);
+const Listbox = forwardRef(function Listbox2(props, ref) {
+  const { style, onScroll, children } = props;
+  const {
+    className,
+    borderless,
+    disabled,
+    disableFocus,
+    listRef,
+    style: styleProp,
+    onScroll: onScrollProp,
+    ...restListProps
+  } = useContext(ListboxContext);
+  const setListRef = useForkRef(ref, listRef);
+  const handleScroll = (event) => {
+    if (onScroll) {
+      onScroll(event);
+    }
+    if (onScrollProp) {
+      onScrollProp(event);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName("disabled")]: disabled
+      },
+      className
+    ),
+    onScroll: handleScroll,
+    ref: setListRef,
+    style: { ...style, ...styleProp },
+    tabIndex: disabled || disableFocus ? void 0 : 0,
+    ...restListProps,
+    children
+  });
+});
+const noScrolling = {
+  scrollToIndex: (itemIndex) => void 0,
+  scrollToItem: (item) => void 0,
+  scrollTo: (scrollOffset) => void 0
+};
+const ListBase = forwardRef(function ListBase2(props, ref) {
+  var _a;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-list-deprecated",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { state } = useListStateContext();
+  const generatedId = useId(props.id);
+  const defaultId = (_a = state.id) != null ? _a : generatedId;
+  const sizeStackable = "36px";
+  const defaultItemHeight = parseInt(sizeStackable, 10);
+  const hasIndexer = typeof props.getItemAtIndex === "function";
+  const hasVariableHeight = typeof props.getItemHeight === "function";
+  const {
+    id = defaultId,
+    source = [],
+    borderless,
+    children,
+    disableMouseDown,
+    itemTextHighlightPattern,
+    itemCount = source.length,
+    itemToString: itemToString$1 = itemToString,
+    itemGapSize = 1,
+    itemHeight = defaultItemHeight,
+    getItemHeight = () => itemHeight,
+    getItemId = (index) => `${id}-item-${index}`,
+    getItemIndex = (item) => source.indexOf(item),
+    getItemAtIndex,
+    overscanCount = 10,
+    displayedItemCount = 10,
+    virtualized,
+    width,
+    height,
+    maxWidth,
+    maxHeight,
+    minWidth,
+    minHeight,
+    ListPlaceholder,
+    ListItem = virtualized ? DefaultVirtualizedItem : DefaultItem,
+    listRef: listRefProp,
+    ...restProps
+  } = props;
+  const { highlightedIndex } = state;
+  const preferredHeight = height != null ? height : calcPreferredListHeight({
+    borderless,
+    displayedItemCount,
+    itemCount,
+    itemHeight,
+    getItemHeight,
+    itemGapSize
+  });
+  const [containerRef, autoSize] = useListAutoSizer({
+    responsive: width === void 0 || height === void 0,
+    height: preferredHeight,
+    width
+  });
+  const virtualizedListRef = useRef(null);
+  const listRef = useRef(null);
+  const setListRef = useForkRef(listRef, listRefProp);
+  const scrollToIndex = (itemIndex) => {
+    var _a2;
+    scrollIntoView(
+      (_a2 = listRef.current) == null ? void 0 : _a2.querySelector(`[data-option-index="${itemIndex}"]`),
+      listRef
+    );
+  };
+  const scrollHandles = useMemo(
+    () => ({
+      scrollToIndex,
+      scrollToItem: (item) => {
+        scrollToIndex(getItemIndex(item));
+      },
+      scrollTo: (scrollOffset) => {
+        if (listRef.current) {
+          listRef.current.scrollTop = scrollOffset;
+        }
+      }
+    }),
+    [getItemIndex]
+  );
+  const virtualizedScrollHandles = useMemo(
+    () => ({
+      scrollToIndex: (itemIndex) => {
+        if (virtualizedListRef.current) {
+          virtualizedListRef.current.scrollToItem(itemIndex);
+        }
+      },
+      scrollToItem: (item) => {
+        virtualizedListRef.current.scrollToItem(getItemIndex(item));
+      },
+      scrollTo: (scrollOffset) => {
+        virtualizedListRef.current.scrollTo(scrollOffset);
+      }
+    }),
+    [getItemIndex]
+  );
+  useImperativeHandle(
+    ref,
+    () => {
+      if (virtualized && virtualizedListRef.current) {
+        return virtualizedScrollHandles;
+      } else if (listRef.current) {
+        return scrollHandles;
+      } else {
+        return noScrolling;
+      }
+    },
+    [virtualized, scrollHandles, virtualizedScrollHandles]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (highlightedIndex == null) {
+      return;
+    }
+    if (virtualized && virtualizedListRef.current) {
+      virtualizedListRef.current.scrollToItem(highlightedIndex);
+    } else if (listRef.current) {
+      scrollToIndex(highlightedIndex);
+    }
+  }, [highlightedIndex, virtualized]);
+  const renderList = () => {
+    if (Children.count(children)) {
+      return /* @__PURE__ */ jsx(Listbox, {
+        style: autoSize,
+        children: /* @__PURE__ */ jsx(ListItemContext.Provider, {
+          value: {
+            disableMouseDown,
+            getItemId,
+            getItemHeight,
+            itemToString: itemToString$1,
+            itemTextHighlightPattern
+          },
+          children
+        })
+      });
+    }
+    if (virtualized) {
+      const VirtualizedList = hasVariableHeight ? VariableSizeList : FixedSizeList;
+      return /* @__PURE__ */ jsx(ListItemContext.Provider, {
+        value: {
+          disableMouseDown,
+          getItemId,
+          itemToString: itemToString$1,
+          itemTextHighlightPattern
+        },
+        children: /* @__PURE__ */ jsx(VirtualizedList, {
+          height: autoSize.height,
+          itemCount,
+          itemData: source,
+          itemSize: hasVariableHeight ? getItemHeight : itemHeight,
+          outerElementType: Listbox,
+          overscanCount,
+          ref: virtualizedListRef,
+          width: autoSize.width,
+          children: ListItem
+        })
+      });
+    }
+    return /* @__PURE__ */ jsx(Listbox, {
+      style: autoSize,
+      children: /* @__PURE__ */ jsx(ListItemContext.Provider, {
+        value: {
+          disableMouseDown,
+          getItemId,
+          getItemHeight,
+          itemToString: itemToString$1,
+          itemTextHighlightPattern
+        },
+        children: (hasIndexer ? Array.from({ length: itemCount }) : source).map(
+          (item, index) => /* @__PURE__ */ jsx(ListItem, {
+            index,
+            item: hasIndexer ? getItemAtIndex(index) : item
+          }, getItemId(index))
+        )
+      })
+    });
+  };
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(withBaseName("wrapper"), {
+      [withBaseName("borderless")]: borderless
+    }),
+    ref: containerRef,
+    style: {
+      minWidth,
+      minHeight,
+      width: width != null ? width : "100%",
+      height: height != null ? height : "100%",
+      maxWidth: maxWidth != null ? maxWidth : width,
+      maxHeight: maxHeight != null ? maxHeight : preferredHeight
+    },
+    children: itemCount === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ jsx(ListPlaceholder, {
+      style: autoSize
+    }) : /* @__PURE__ */ jsx(ListboxContext.Provider, {
+      value: {
+        ...restProps,
+        listRef: setListRef,
+        id,
+        borderless
+      },
+      children: renderList()
+    })
+  });
+});
+
+export { ListBase };
+//# sourceMappingURL=ListBase.js.map