@salt-ds/lab 1.0.0-alpha.9 → 1.0.0-alpha.90

package/dist-es/list/keyset.js

@@ -0,0 +1,38 @@
+class KeySet {
+  constructor(from = 0, to = 0) {
+    this.keys = /* @__PURE__ */ new Map();
+    this.free = [];
+    this.nextKeyValue = 0;
+    this.reset(from, to);
+  }
+  next() {
+    if (this.free.length) {
+      return this.free.pop();
+    }
+    return this.nextKeyValue++;
+  }
+  reset(from, to) {
+    this.keys.forEach((keyValue, rowIndex) => {
+      if (rowIndex < from || rowIndex >= to) {
+        this.free.push(keyValue);
+        this.keys.delete(rowIndex);
+      }
+    });
+    const size = to - from;
+    if (this.keys.size + this.free.length > size) {
+      this.free.length = size - this.keys.size;
+    }
+    for (let rowIndex = from; rowIndex < to; rowIndex++) {
+      if (!this.keys.has(rowIndex)) {
+        const nextKeyValue = this.next();
+        this.keys.set(rowIndex, nextKeyValue);
+      }
+    }
+  }
+  keyFor(rowIndex) {
+    return this.keys.get(rowIndex);
+  }
+}
+
+export { KeySet };
+//# sourceMappingURL=keyset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keyset.js","sources":["../src/list/keyset.ts"],"sourcesContent":["export class KeySet {\n  private keys: Map<number, number>;\n\n  private free: number[];\n\n  private nextKeyValue: number;\n\n  constructor(from = 0, to = 0) {\n    this.keys = new Map<number, number>();\n    this.free = [];\n    this.nextKeyValue = 0;\n    this.reset(from, to);\n  }\n\n  next(): number {\n    if (this.free.length) {\n      return this.free.pop() as number;\n    }\n    return this.nextKeyValue++;\n  }\n\n  reset(from: number, to: number) {\n    this.keys.forEach((keyValue, rowIndex) => {\n      if (rowIndex < from || rowIndex >= to) {\n        this.free.push(keyValue);\n        this.keys.delete(rowIndex);\n      }\n    });\n\n    const size = to - from;\n    if (this.keys.size + this.free.length > size) {\n      this.free.length = size - this.keys.size;\n    }\n\n    for (let rowIndex = from; rowIndex < to; rowIndex++) {\n      if (!this.keys.has(rowIndex)) {\n        const nextKeyValue = this.next();\n        this.keys.set(rowIndex, nextKeyValue);\n      }\n    }\n  }\n\n  keyFor(rowIndex: number) {\n    return this.keys.get(rowIndex);\n  }\n}\n"],"names":[],"mappings":"AAAO,MAAM,MAAA,CAAO;AAAA,EAOlB,WAAA,CAAY,IAAA,GAAO,CAAA,EAAG,EAAA,GAAK,CAAA,EAAG;AAC5B,IAAA,IAAA,CAAK,IAAA,uBAAW,GAAA,EAAoB;AACpC,IAAA,IAAA,CAAK,OAAO,EAAC;AACb,IAAA,IAAA,CAAK,YAAA,GAAe,CAAA;AACpB,IAAA,IAAA,CAAK,KAAA,CAAM,MAAM,EAAE,CAAA;AAAA,EACrB;AAAA,EAEA,IAAA,GAAe;AACb,IAAA,IAAI,IAAA,CAAK,KAAK,MAAA,EAAQ;AACpB,MAAA,OAAO,IAAA,CAAK,KAAK,GAAA,EAAI;AAAA,IACvB;AACA,IAAA,OAAO,IAAA,CAAK,YAAA,EAAA;AAAA,EACd;AAAA,EAEA,KAAA,CAAM,MAAc,EAAA,EAAY;AAC9B,IAAA,IAAA,CAAK,IAAA,CAAK,OAAA,CAAQ,CAAC,QAAA,EAAU,QAAA,KAAa;AACxC,MAAA,IAAI,QAAA,GAAW,IAAA,IAAQ,QAAA,IAAY,EAAA,EAAI;AACrC,QAAA,IAAA,CAAK,IAAA,CAAK,KAAK,QAAQ,CAAA;AACvB,QAAA,IAAA,CAAK,IAAA,CAAK,OAAO,QAAQ,CAAA;AAAA,MAC3B;AAAA,IACF,CAAC,CAAA;AAED,IAAA,MAAM,OAAO,EAAA,GAAK,IAAA;AAClB,IAAA,IAAI,KAAK,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,IAAA,CAAK,SAAS,IAAA,EAAM;AAC5C,MAAA,IAAA,CAAK,IAAA,CAAK,MAAA,GAAS,IAAA,GAAO,IAAA,CAAK,IAAA,CAAK,IAAA;AAAA,IACtC;AAEA,IAAA,KAAA,IAAS,QAAA,GAAW,IAAA,EAAM,QAAA,GAAW,EAAA,EAAI,QAAA,EAAA,EAAY;AACnD,MAAA,IAAI,CAAC,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC5B,QAAA,MAAM,YAAA,GAAe,KAAK,IAAA,EAAK;AAC/B,QAAA,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,QAAA,EAAU,YAAY,CAAA;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,QAAA,EAAkB;AACvB,IAAA,OAAO,IAAA,CAAK,IAAA,CAAK,GAAA,CAAI,QAAQ,CAAA;AAAA,EAC/B;AACF;;;;"}

package/dist-es/list/useList.js

@@ -0,0 +1,204 @@
+import { useRef, useCallback, isValidElement } from 'react';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/keyUtils.js';
+import { closestListItemIndex } from '../common-hooks/list-dom-utils.js';
+import '@salt-ds/core';
+import { useCollapsibleGroups } from '../common-hooks/useCollapsibleGroups.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,
+    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,
+    // MouseEnter would be much better for this. There is a bug in Cypress
+    // wheby it emits spurious MouseEnter (and MouseOver) events around
+    // keypress events, which break many tests.
+    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  type KeyboardEvent,\n  type MouseEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  type CollectionItem,\n  closestListItemIndex,\n  type ListHandlers,\n  type SelectHandler,\n  type SelectionChangeHandler,\n  type SelectionStrategy,\n  type SingleSelectionStrategy,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useTypeahead,\n  useViewportTracking,\n} from \"../common-hooks\";\n\nimport type {\n  ListControlProps,\n  ListHookProps,\n  ListHookResult,\n} 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  const lastSelection = useRef<typeof selected>(selected || defaultSelected);\n  const handleKeyboardNavigation = (\n    evt: KeyboardEvent<HTMLElement>,\n    nextIndex: number,\n  ) => {\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 Item);\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) => (isValidElement(s.value) ? s.label : s.value))\n            : selected &&\n              (isValidElement(selected.value)\n                ? selected.label\n                : selected.value)) as Selection extends SingleSelectionStrategy\n            ? Item\n            : Item[],\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<HTMLElement>) => {\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,51 @@
+import { useState, useMemo, useCallback } from 'react';
+import 'react/jsx-runtime';
+import '@salt-ds/core';
+import { useResizeObserver, HeightOnly } from '../responsive/useResizeObserver.js';
+
+const useListHeight = ({
+  borderless,
+  displayedItemCount,
+  getItemHeight,
+  // TODO no need to incur the cost of a resizeObserver if height is explicit
+  height: _height,
+  itemCount,
+  itemGapSize,
+  itemHeight: itemHeightProp,
+  rowHeightRef
+}) => {
+  const [measuredItemHeight, setMeasuredItemHeight] = useState(36);
+  const preferredHeight = useMemo(() => {
+    let result = borderless ? 0 : 2;
+    const itemHeight = 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
+      ) - // We don't want gap after the last item
+      itemGapSize;
+    } else {
+      result += preferredItemCount * Number(itemHeight) + (preferredItemCount - 1) * itemGapSize;
+    }
+    return Number.isNaN(result) ? void 0 : result;
+  }, [
+    borderless,
+    displayedItemCount,
+    getItemHeight,
+    itemCount,
+    itemGapSize,
+    itemHeightProp,
+    measuredItemHeight
+  ]);
+  const handleRowHeight = useCallback(({ height }) => {
+    setMeasuredItemHeight(height);
+  }, []);
+  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 { type RefObject, useCallback, useMemo, useState } from \"react\";\nimport {\n  HeightOnly,\n  type ResizeHandler,\n  useResizeObserver,\n} 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: _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 Number.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":[],"mappings":";;;;;AAsBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,UAAA;AAAA,EACA,kBAAA;AAAA,EACA,aAAA;AAAA;AAAA,EAEA,MAAA,EAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA,EAAY,cAAA;AAAA,EACZ;AACF,CAAA,KAA6C;AAE3C,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAElD,EAAE,CAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,QAAQ,MAAM;AACpC,IAAA,IAAI,MAAA,GAAS,aAAa,CAAA,GAAI,CAAA;AAC9B,IAAA,MAAM,aAAa,cAAA,IAAkB,kBAAA;AAGrC,IAAA,MAAM,kBAAA,GACJ,IAAA,CAAK,GAAA,CAAI,kBAAA,EAAoB,SAAS,CAAA,IAAK,kBAAA;AAE7C,IAAA,IAAI,OAAO,kBAAkB,UAAA,EAAY;AACvC,MAAA,MAAA,IACE,KAAA,CAAM,kBAAkB,CAAA,CACrB,IAAA,CAAK,CAAC,CAAA,CACN,MAAA;AAAA,QACC,CAAC,KAAA,EAAO,CAAA,EAAG,UAAU,KAAA,GAAQ,aAAA,CAAc,KAAK,CAAA,GAAI,WAAA;AAAA,QACpD;AAAA,OACF;AAAA,MAEF,WAAA;AAAA,IACJ,CAAA,MAAO;AACL,MAAA,MAAA,IACE,kBAAA,GAAqB,MAAA,CAAO,UAAU,CAAA,GAAA,CACrC,qBAAqB,CAAA,IAAK,WAAA;AAAA,IAC/B;AAIA,IAAA,OAAO,MAAA,CAAO,KAAA,CAAM,MAAM,CAAA,GAAI,MAAA,GAAY,MAAA;AAAA,EAC5C,CAAA,EAAG;AAAA,IACD,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,eAAA,GAAiC,WAAA,CAAY,CAAC,EAAE,QAAO,KAAM;AACjE,IAAA,qBAAA,CAAsB,MAAM,CAAA;AAAA,EAC9B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,iBAAA,CAAkB,YAAA,EAAc,UAAA,EAAY,eAAA,EAAiB,IAAI,CAAA;AAEjE,EAAA,OAAO;AAAA,IACL;AAAA,GACF;AACF;;;;"}

package/dist-es/list/useVirtualization.js

@@ -0,0 +1,80 @@
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { KeySet } from './keyset.js';
+
+const byKey = ([k1], [k2]) => k1 - k2;
+const renderBuffer = 5;
+const useVirtualization = ({
+  viewportRef,
+  data,
+  itemGapSize = 0
+}) => {
+  const viewportMeasures = useRef({
+    contentHeight: 1e4,
+    firstVisibleRow: 0,
+    rowCount: 0,
+    rowHeight: 0,
+    scrollPos: 0
+  });
+  const [rows, setRows] = useState([]);
+  const keys = useMemo(() => new KeySet(0, 1), []);
+  const updateRows = useCallback(
+    (from, to) => {
+      const { rowHeight } = viewportMeasures.current;
+      const rowHeightWithGap = rowHeight + itemGapSize;
+      const lo = Math.max(0, from - renderBuffer);
+      const hi = Math.min(data.length, to + renderBuffer);
+      keys.reset(lo, hi);
+      const newRows = data.slice(lo, hi).map(
+        (value, idx) => [
+          keys.keyFor(idx + lo),
+          (idx + lo) * rowHeightWithGap,
+          idx + lo + 1,
+          value
+        ]
+      ).sort(byKey);
+      setRows(newRows);
+    },
+    [data, itemGapSize, keys]
+  );
+  useIsomorphicLayoutEffect(() => {
+    const viewport = viewportMeasures.current;
+    const viewportEl = viewportRef.current;
+    if (viewportEl) {
+      const listItemEl = viewportEl.querySelector(".saltListItem");
+      if (listItemEl) {
+        const { height: viewportHeight } = viewportEl.getBoundingClientRect();
+        const { height: rowHeight } = listItemEl.getBoundingClientRect();
+        viewport.rowHeight = rowHeight;
+        viewport.rowCount = Math.ceil(viewportHeight / rowHeight);
+        viewport.contentHeight = (rowHeight + itemGapSize) * data.length;
+        updateRows(0, viewport.rowCount);
+      }
+    }
+  }, [data, itemGapSize, updateRows, viewportRef]);
+  const handleVerticalScroll = useCallback(
+    (e) => {
+      const viewport = viewportMeasures.current;
+      const scrollTop = e.target.scrollTop;
+      if (scrollTop !== viewport.scrollPos) {
+        viewport.scrollPos = scrollTop;
+        const firstRow = Math.floor(scrollTop / viewport.rowHeight);
+        if (firstRow !== viewport.firstVisibleRow) {
+          viewport.firstVisibleRow = firstRow;
+          const from = firstRow;
+          const to = firstRow + viewport.rowCount;
+          updateRows(from, to);
+        }
+      }
+    },
+    [updateRows]
+  );
+  return {
+    rows,
+    contentHeight: viewportMeasures.current.contentHeight,
+    onVerticalScroll: handleVerticalScroll
+  };
+};
+
+export { useVirtualization };
+//# sourceMappingURL=useVirtualization.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualization.js","sources":["../src/list/useVirtualization.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type RefObject,\n  type UIEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { CollectionItem } from \"../common-hooks\";\nimport { KeySet } from \"./keyset\";\n\n/**\n * [ item key, total height before the item, next row index, CollectionItem<Item>]\n * e.g. first item: [0, 0, 1, data[0]]\n */\nexport type Row<Item> = [number, number, number, CollectionItem<Item>];\n\nconst byKey = ([k1]: Row<unknown>, [k2]: Row<unknown>) => k1 - k2;\n\nconst renderBuffer = 5;\n\ninterface VirtualizationHookProps<Item> {\n  viewportRef: RefObject<HTMLElement>;\n  data: CollectionItem<Item>[];\n  itemGapSize?: number;\n}\n\ninterface VirtualizationHookResult<Item> {\n  rows: Row<Item>[];\n  contentHeight: number;\n  onVerticalScroll: (e: UIEvent<HTMLElement>) => void;\n}\n\nexport const useVirtualization = <Item>({\n  viewportRef,\n  data,\n  itemGapSize = 0,\n}: VirtualizationHookProps<Item>): VirtualizationHookResult<Item> => {\n  const viewportMeasures = useRef({\n    contentHeight: 10000,\n    firstVisibleRow: 0,\n    rowCount: 0,\n    rowHeight: 0,\n    scrollPos: 0,\n  });\n  const [rows, setRows] = useState<Row<Item>[]>([]);\n  const keys = useMemo(() => new KeySet(0, 1), []);\n\n  const updateRows = useCallback(\n    (from: number, to: number) => {\n      const { rowHeight } = viewportMeasures.current;\n      const rowHeightWithGap = rowHeight + itemGapSize;\n      const lo = Math.max(0, from - renderBuffer);\n      const hi = Math.min(data.length, to + renderBuffer);\n      keys.reset(lo, hi);\n      const newRows = data\n        .slice(lo, hi)\n        .map(\n          (value, idx) =>\n            [\n              keys.keyFor(idx + lo),\n              (idx + lo) * rowHeightWithGap,\n              idx + lo + 1,\n              value,\n            ] as Row<Item>,\n        )\n        .sort(byKey);\n      setRows(newRows);\n    },\n    [data, itemGapSize, keys],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const viewport = viewportMeasures.current;\n    const viewportEl = viewportRef.current;\n    if (viewportEl) {\n      // TODO no reference to ListItem className\n      const listItemEl = viewportEl.querySelector(\".saltListItem\");\n      if (listItemEl) {\n        const { height: viewportHeight } = viewportEl.getBoundingClientRect();\n        const { height: rowHeight } = listItemEl.getBoundingClientRect();\n        viewport.rowHeight = rowHeight;\n        viewport.rowCount = Math.ceil(viewportHeight / rowHeight);\n        viewport.contentHeight = (rowHeight + itemGapSize) * data.length;\n        updateRows(0, viewport.rowCount);\n      }\n    }\n  }, [data, itemGapSize, updateRows, viewportRef]);\n\n  const handleVerticalScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      const viewport = viewportMeasures.current;\n      // TODO: check `as` cast\n      const scrollTop = (e.target as HTMLElement).scrollTop;\n      if (scrollTop !== viewport.scrollPos) {\n        viewport.scrollPos = scrollTop;\n        const firstRow = Math.floor(scrollTop / viewport.rowHeight);\n        if (firstRow !== viewport.firstVisibleRow) {\n          viewport.firstVisibleRow = firstRow;\n          const from = firstRow;\n          const to = firstRow + viewport.rowCount;\n          updateRows(from, to);\n        }\n      }\n    },\n    [updateRows],\n  );\n\n  return {\n    rows,\n    contentHeight: viewportMeasures.current.contentHeight,\n    onVerticalScroll: handleVerticalScroll,\n  };\n};\n"],"names":[],"mappings":"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"}

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-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\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-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,70 @@
+import { jsx } from 'react/jsx-runtime';
+import { useForkRef } from '@salt-ds/core';
+import { forwardRef, useContext, useRef } from 'react';
+import { DescendantContext, DescendantProvider } from './internal/DescendantContext.js';
+import { ListBase } from './ListBase.js';
+import { ListStateContext } from './ListStateContext.js';
+import { useList } from './useList.js';
+import { useTypeSelect } from './useTypeSelect.js';
+
+const ListWithDescendants = forwardRef(function ListWithDescendants2(props, ref) {
+  const { items } = useContext(DescendantContext);
+  const { focusedRef, state, helpers, listProps } = useList({
+    source: (items == null ? void 0 : 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  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type Ref,\n  useContext,\n  useRef,\n} from \"react\";\nimport {\n  DescendantContext,\n  DescendantProvider,\n} from \"./internal/DescendantContext\";\nimport { ListBase, type ListScrollHandles } from \"./ListBase\";\nimport type { ListProps, ListSelectionVariant } from \"./ListProps\";\nimport { ListStateContext } from \"./ListStateContext\";\nimport { useList } from \"./useList\";\nimport { useTypeSelect } from \"./useTypeSelect\";\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 : []) as Item[],\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(\n    focusedRef,\n    props.listRef,\n  ) as Ref<HTMLDivElement>;\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":";;;;;;;;;AAqBA,MAAM,mBAAA,GAAsB,UAAA,CAAW,SAASA,oBAAAA,CAI9C,OACA,GAAA,EACA;AACA,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,UAAA,CAAW,iBAAiB,CAAA;AAE9C,EAAA,MAAM,EAAE,UAAA,EAAY,KAAA,EAAO,OAAA,EAAS,SAAA,KAAc,OAAA,CAAQ;AAAA,IACxD,SAAS,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,OAAA,CAAQ,MAAA,IAAS,KAAA,CAAM,UAAU,EAAC;AAAA,IAClD,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,kBAAiB,GAAI,KAAA;AAC7B,EAAA,MAAM,EAAE,mBAAA,EAAqB,eAAA,EAAgB,GAAI,OAAA;AAEjD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAA,EAAkB,oBAAA;AAAA,IAClB,GAAG;AAAA,GACL,GAAI,SAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,0BAAA,EAA2B,GAAI,aAAA,CAAc;AAAA,IACrE,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,UAAA,GAAa,UAAA;AAAA,IACjB,UAAA;AAAA,IACA,KAAA,CAAM;AAAA,GACR;AAEA,EAAA,MAAM,oBAAA,GAAuB,CAAC,KAAA,KAAyC;AACrE,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,oBAAA,EAAsB;AACxB,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,IAC5B;AAEA,IAAA,IAAI,CAAC,uBAAuB,0BAAA,EAA4B;AACtD,MAAA,0BAAA,CAA2B,KAAK,CAAA;AAAA,IAClC;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,iBAAiB,QAAA,EAAjB,EAA0B,OAAO,EAAE,KAAA,EAAO,SAAQ,EACjD,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,UAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,aAAA;AAAA,MACJ,QAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA,EAAkB;AAAA;AAAA,GACpB,EACF,CAAA;AAEJ,CAAC,CAAA;AAMM,MAAM,IAAA,GAAO,UAAA,CAAW,SAASC,KAAAA,CAItC,OACA,GAAA,EACA;AACA,EAAA,MAAM,QAAA,GAAW,MAAA,CAAO,EAAE,CAAA;AAE1B,EAAA,uBACE,GAAA,CAAC,sBAAmB,KAAA,EAAO,QAAA,EACzB,8BAAC,mBAAA,EAAA,EAAmC,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA,EAC3D,CAAA;AAEJ,CAAC;;;;"}