@vuu-ui/vuu-ui-controls 0.13.2 → 0.13.3

package/esm/list/common-hooks/useKeyboardNavigation.js

@@ -1,286 +0,0 @@
-import { useControlled } from '@salt-ds/core';
-import { useRef, useState, useCallback, useMemo } from 'react';
-import { PageDown, ArrowUp, ArrowDown, PageUp, isNavigationKey, isCharacterKey, End, Home } from './keyUtils.js';
-import '../../common-hooks/collectionProvider.js';
-import '../../common-hooks/use-resize-observer.js';
-import { hasSelection, getFirstSelectedItem } from '../../common-hooks/selectionTypes.js';
-import { getElementByDataIndex, isValidNumber } from '@vuu-ui/vuu-utils';
-
-const LIST_FOCUS_VISIBLE = -2;
-function nextItemIdx(count, key, idx) {
-  if (key === ArrowUp || key === End) {
-    if (idx > 0) {
-      return idx - 1;
-    } else {
-      return idx;
-    }
-  } else {
-    if (idx === null) {
-      return 0;
-    } else if (idx === count - 1) {
-      return idx;
-    } else {
-      return idx + 1;
-    }
-  }
-}
-const getIndexOfSelectedItem = (selected) => {
-  const selectedItemId = Array.isArray(selected) ? getFirstSelectedItem(selected) : void 0;
-  if (selectedItemId) {
-    const el = document.getElementById(selectedItemId);
-    if (el) {
-      const index = parseInt(el.dataset.index ?? "-1");
-      if (isValidNumber(index)) {
-        return index;
-      }
-    }
-  }
-  return -1;
-};
-const getStartIdx = (key, idx, selectedIdx, length) => {
-  if (key === End) {
-    return length;
-  } else if (key === Home) {
-    return -1;
-  } else if (idx !== -1) {
-    return idx;
-  } else {
-    return selectedIdx;
-  }
-};
-const pageDown = (containerEl, itemEl, itemCount, index) => {
-  const { top: itemTop } = itemEl.getBoundingClientRect();
-  const { scrollTop, clientHeight, scrollHeight } = containerEl;
-  const lastIndexPosition = itemCount - 1;
-  const newScrollTop = Math.min(
-    scrollTop + clientHeight,
-    scrollHeight - clientHeight
-  );
-  if (newScrollTop === scrollTop && index < lastIndexPosition) {
-    return lastIndexPosition;
-  } else if (newScrollTop !== scrollTop && index < lastIndexPosition) {
-    containerEl.scrollTo(0, newScrollTop);
-    let nextIdx = index;
-    let nextRect;
-    do {
-      nextIdx += 1;
-      nextRect = getElementByDataIndex(
-        containerEl,
-        nextIdx,
-        true
-      ).getBoundingClientRect();
-    } while (nextRect.top < itemTop && nextIdx < lastIndexPosition);
-    return nextIdx;
-  }
-};
-const pageUp = (containerEl, itemEl, index) => {
-  const { top: itemTop } = itemEl.getBoundingClientRect();
-  const { scrollTop, clientHeight } = containerEl;
-  const newScrollTop = Math.max(scrollTop - clientHeight, 0);
-  if (newScrollTop === scrollTop && index > 0) {
-    return 0;
-  } else if (newScrollTop !== scrollTop && index > 0) {
-    containerEl.scrollTo(0, newScrollTop);
-    let nextIdx = index;
-    let nextRect;
-    do {
-      nextIdx -= 1;
-      nextRect = getElementByDataIndex(
-        containerEl,
-        nextIdx,
-        true
-      ).getBoundingClientRect();
-    } while (nextRect.top > itemTop && nextIdx > 0);
-    return nextIdx;
-  }
-};
-const isLeaf = (element) => element !== void 0;
-const isFocusable = (container, index) => {
-  const targetEl = getElementByDataIndex(container, index);
-  return isLeaf(targetEl);
-};
-const useKeyboardNavigation = ({
-  containerRef,
-  defaultHighlightedIndex = -1,
-  disableHighlightOnFocus,
-  highlightedIndex: highlightedIndexProp,
-  itemCount,
-  onHighlight,
-  onKeyboardNavigation,
-  restoreLastFocus,
-  selected,
-  // TODO
-  viewportItemCount: _
-}) => {
-  const lastFocus = useRef(-1);
-  const [, forceRender] = useState({});
-  const [highlightedIndex, setHighlightedIdx, isControlledHighlighting] = useControlled({
-    controlled: highlightedIndexProp,
-    default: defaultHighlightedIndex,
-    name: "UseKeyboardNavigation"
-  });
-  const setHighlightedIndex = useCallback(
-    (idx, fromKeyboard = false) => {
-      onHighlight?.(idx);
-      setHighlightedIdx(idx);
-      if (fromKeyboard) {
-        lastFocus.current = idx;
-      }
-    },
-    [onHighlight, setHighlightedIdx]
-  );
-  const nextPageItemIdx = useCallback(
-    (key, index) => {
-      const itemEl = getElementByDataIndex(containerRef.current, index, true);
-      let result;
-      if (itemEl) {
-        const { current: containerEl } = containerRef;
-        if (itemEl && containerEl) {
-          result = key === PageDown ? pageDown(containerEl, itemEl, itemCount, index) : pageUp(containerEl, itemEl, index);
-        }
-      }
-      return result ?? index;
-    },
-    [containerRef, itemCount]
-  );
-  const nextFocusableItemIdx = useCallback(
-    (key = ArrowDown, idx = key === ArrowDown ? -1 : itemCount) => {
-      if (itemCount === 0) {
-        return -1;
-      } else {
-        const isEnd = key === "End";
-        const isHome = key === "Home";
-        const indexOfSelectedItem = isEnd || isHome || idx === -1 ? -1 : getIndexOfSelectedItem(selected);
-        const startIdx = getStartIdx(key, idx, indexOfSelectedItem, itemCount);
-        let nextIdx = nextItemIdx(itemCount, key, startIdx);
-        const { current: container } = containerRef;
-        if (nextIdx === 0 && key === ArrowUp && container && !isFocusable(container, 0)) {
-          return idx;
-        }
-        while (((key === ArrowDown || isHome) && nextIdx < itemCount || (key === ArrowUp || isEnd) && nextIdx > 0) && container && !isFocusable(container, nextIdx)) {
-          nextIdx = nextItemIdx(itemCount, key, nextIdx);
-        }
-        return nextIdx;
-      }
-    },
-    [containerRef, itemCount, selected]
-  );
-  const keyboardNavigation = useRef(false);
-  const ignoreFocus = useRef(false);
-  const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const handleFocus = useCallback(() => {
-    if (ignoreFocus.current) {
-      ignoreFocus.current = false;
-    } else {
-      keyboardNavigation.current = true;
-      if (itemCount === 0) {
-        setHighlightedIndex(LIST_FOCUS_VISIBLE);
-      } else if (highlightedIndex !== -1) {
-        forceRender({});
-      } else if (restoreLastFocus) {
-        if (lastFocus.current !== -1) {
-          setHighlightedIndex(lastFocus.current);
-        } else {
-          const selectedItemIdx = getIndexOfSelectedItem(selected);
-          if (selectedItemIdx !== -1) {
-            setHighlightedIndex(selectedItemIdx);
-          } else {
-            setHighlightedIndex(0);
-          }
-        }
-      } else if (hasSelection(selected)) {
-        const selectedItemIdx = getIndexOfSelectedItem(selected);
-        setHighlightedIndex(selectedItemIdx);
-      } else if (disableHighlightOnFocus !== true) {
-        setHighlightedIndex(nextFocusableItemIdx());
-      }
-    }
-  }, [
-    disableHighlightOnFocus,
-    highlightedIndex,
-    itemCount,
-    nextFocusableItemIdx,
-    restoreLastFocus,
-    selected,
-    setHighlightedIndex
-  ]);
-  const navigateChildItems = useCallback(
-    async (e) => {
-      const nextIdx = e.key === PageDown || e.key === PageUp ? nextPageItemIdx(e.key, highlightedIndex) : nextFocusableItemIdx(e.key, highlightedIndex);
-      if (nextIdx !== highlightedIndex) {
-        setHighlightedIndex(nextIdx, true);
-      }
-      onKeyboardNavigation?.(e, nextIdx);
-    },
-    [
-      highlightedIndex,
-      nextFocusableItemIdx,
-      nextPageItemIdx,
-      onKeyboardNavigation,
-      setHighlightedIndex
-    ]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (itemCount > 0 && isNavigationKey(e)) {
-        e.preventDefault();
-        e.stopPropagation();
-        keyboardNavigation.current = true;
-        navigateChildItems(e);
-      } else if (isCharacterKey(e)) {
-        keyboardNavigation.current = true;
-      }
-    },
-    [itemCount, navigateChildItems]
-  );
-  const containerProps = useMemo(() => {
-    return {
-      onBlur: (e) => {
-        const sourceTarget = e.target.closest(".vuuList");
-        const destTarget = e.relatedTarget;
-        if (sourceTarget && !sourceTarget?.contains(destTarget)) {
-          keyboardNavigation.current = false;
-          setHighlightedIdx(-1);
-          if (!restoreLastFocus) {
-            lastFocus.current = -1;
-          }
-        }
-      },
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown,
-      onMouseDownCapture: () => {
-        keyboardNavigation.current = false;
-        setIgnoreFocus(true);
-      },
-      // onMouseEnter would seem less expensive but it misses some cases
-      onMouseMove: () => {
-        if (keyboardNavigation.current) {
-          keyboardNavigation.current = false;
-        }
-      },
-      onMouseLeave: () => {
-        keyboardNavigation.current = false;
-        setIgnoreFocus(false);
-        setHighlightedIndex(-1);
-      }
-    };
-  }, [
-    handleFocus,
-    handleKeyDown,
-    restoreLastFocus,
-    setHighlightedIdx,
-    setHighlightedIndex
-  ]);
-  return {
-    focusVisible: keyboardNavigation.current ? highlightedIndex : -1,
-    controlledHighlighting: isControlledHighlighting,
-    highlightedIndex,
-    setHighlightedIndex,
-    keyboardNavigation,
-    containerProps,
-    setIgnoreFocus
-  };
-};
-
-export { LIST_FOCUS_VISIBLE, useKeyboardNavigation };
-//# sourceMappingURL=useKeyboardNavigation.js.map

package/esm/list/common-hooks/useKeyboardNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../src/list/common-hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  FocusEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  End,\n  Home,\n  isCharacterKey,\n  isNavigationKey,\n  PageDown,\n  PageUp,\n} from \"./keyUtils\";\nimport {\n  NavigationHookProps,\n  NavigationHookResult,\n  getFirstSelectedItem,\n  hasSelection,\n} from \"../../common-hooks\";\nimport { getElementByDataIndex, isValidNumber } from \"@vuu-ui/vuu-utils\";\n\nexport const LIST_FOCUS_VISIBLE = -2;\n\nfunction nextItemIdx(count: number, key: string, idx: number) {\n  if (key === ArrowUp || key === End) {\n    if (idx > 0) {\n      return idx - 1;\n    } else {\n      return idx;\n    }\n  } else {\n    if (idx === null) {\n      return 0;\n    } else if (idx === count - 1) {\n      return idx;\n    } else {\n      return idx + 1;\n    }\n  }\n}\n\nconst getIndexOfSelectedItem = (selected?: string[]) => {\n  const selectedItemId = Array.isArray(selected)\n    ? getFirstSelectedItem(selected)\n    : undefined;\n  if (selectedItemId) {\n    const el = document.getElementById(selectedItemId) as HTMLElement;\n    if (el) {\n      const index = parseInt(el.dataset.index ?? \"-1\");\n      if (isValidNumber(index)) {\n        return index;\n      }\n    }\n  }\n  return -1;\n};\n\nconst getStartIdx = (\n  key: string,\n  idx: number,\n  selectedIdx: number,\n  length: number,\n) => {\n  if (key === End) {\n    return length;\n  } else if (key === Home) {\n    return -1;\n  } else if (idx !== -1) {\n    return idx;\n  } else {\n    return selectedIdx;\n  }\n};\n\nconst pageDown = (\n  containerEl: HTMLElement,\n  itemEl: HTMLElement,\n  itemCount: number,\n  index: number,\n): number | undefined => {\n  const { top: itemTop } = itemEl.getBoundingClientRect();\n  const { scrollTop, clientHeight, scrollHeight } = containerEl;\n  const lastIndexPosition = itemCount - 1;\n  const newScrollTop = Math.min(\n    scrollTop + clientHeight,\n    scrollHeight - clientHeight,\n  );\n  // If there is no scroll movement, we are already scrolled to last page, or\n  // no scroll movement is necessary, highlight last item\n  if (newScrollTop === scrollTop && index < lastIndexPosition) {\n    return lastIndexPosition;\n  } else if (newScrollTop !== scrollTop && index < lastIndexPosition) {\n    containerEl.scrollTo(0, newScrollTop);\n    let nextIdx = index;\n    let nextRect;\n    do {\n      nextIdx += 1;\n      nextRect = getElementByDataIndex(\n        containerEl,\n        nextIdx,\n        true,\n      ).getBoundingClientRect();\n    } while (nextRect.top < itemTop && nextIdx < lastIndexPosition);\n    return nextIdx;\n  }\n};\n\nconst pageUp = (\n  containerEl: HTMLElement,\n  itemEl: HTMLElement,\n  index: number,\n) => {\n  const { top: itemTop } = itemEl.getBoundingClientRect();\n  const { scrollTop, clientHeight } = containerEl;\n  const newScrollTop = Math.max(scrollTop - clientHeight, 0);\n  if (newScrollTop === scrollTop && index > 0) {\n    return 0;\n  } else if (newScrollTop !== scrollTop && index > 0) {\n    containerEl.scrollTo(0, newScrollTop);\n    let nextIdx = index;\n    let nextRect;\n    do {\n      nextIdx -= 1;\n      nextRect = getElementByDataIndex(\n        containerEl,\n        nextIdx,\n        true,\n      ).getBoundingClientRect();\n    } while (nextRect.top > itemTop && nextIdx > 0);\n    return nextIdx;\n  }\n};\n\n// const isLeaf = <Item>(item: CollectionItem<Item>): boolean =>\n//   !item.header && !item.childNodes;\nconst isLeaf = (element?: HTMLElement) => element !== undefined;\n// const isFocusable = <Item>(item: CollectionItem<Item>) =>\n//   isLeaf(item) || item.expanded !== undefined;\n// TODO read dom element and check for leaf item or toggleable group\nconst isFocusable = (container: HTMLElement, index: number) => {\n  const targetEl = getElementByDataIndex(container, index);\n  return isLeaf(targetEl);\n};\n\nexport const useKeyboardNavigation = ({\n  containerRef,\n  defaultHighlightedIndex = -1,\n  disableHighlightOnFocus,\n  highlightedIndex: highlightedIndexProp,\n  itemCount,\n  onHighlight,\n  onKeyboardNavigation,\n  restoreLastFocus,\n  selected,\n  // TODO\n  viewportItemCount: _,\n}: NavigationHookProps): NavigationHookResult => {\n  const lastFocus = useRef(-1);\n  const [, forceRender] = useState({});\n  const [highlightedIndex, setHighlightedIdx, isControlledHighlighting] =\n    useControlled({\n      controlled: highlightedIndexProp,\n      default: defaultHighlightedIndex,\n      name: \"UseKeyboardNavigation\",\n    });\n\n  const setHighlightedIndex = useCallback(\n    (idx: number, fromKeyboard = false) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n      if (fromKeyboard) {\n        lastFocus.current = idx;\n      }\n    },\n    [onHighlight, setHighlightedIdx],\n  );\n\n  const nextPageItemIdx = useCallback(\n    (key: \"PageDown\" | \"PageUp\" | \"Home\" | \"End\", index: number) => {\n      const itemEl = getElementByDataIndex(containerRef.current, index, true);\n      let result: number | undefined;\n      if (itemEl) {\n        const { current: containerEl } = containerRef;\n        if (itemEl && containerEl) {\n          result =\n            key === PageDown\n              ? pageDown(containerEl, itemEl, itemCount, index)\n              : pageUp(containerEl, itemEl, index);\n        }\n      }\n      return result ?? index;\n    },\n    [containerRef, itemCount],\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (key = ArrowDown, idx: number = key === ArrowDown ? -1 : itemCount) => {\n      //TODO we don't seem to have selectedhere first time after selection\n      if (itemCount === 0) {\n        return -1;\n      } else {\n        const isEnd = key === \"End\";\n        const isHome = key === \"Home\";\n        // The start index is generally the highlightedIdx (passed in as idx).\n        // We don't need it for Home and End navigation.\n        // Special case where we have selection, but no highlighting - begin\n        // navigation from selected item.\n        const indexOfSelectedItem =\n          isEnd || isHome || idx === -1 ? -1 : getIndexOfSelectedItem(selected);\n        const startIdx = getStartIdx(key, idx, indexOfSelectedItem, itemCount);\n        let nextIdx = nextItemIdx(itemCount, key, startIdx);\n\n        const { current: container } = containerRef;\n        // Guard against returning zero, when first item is a header or group\n        if (\n          nextIdx === 0 &&\n          key === ArrowUp &&\n          container &&\n          !isFocusable(container, 0)\n        ) {\n          return idx;\n        }\n        // TODO this is causing an infinite loop in some scenarios\n        while (\n          (((key === ArrowDown || isHome) && nextIdx < itemCount) ||\n            ((key === ArrowUp || isEnd) && nextIdx > 0)) &&\n          container &&\n          !isFocusable(container, nextIdx)\n        ) {\n          nextIdx = nextItemIdx(itemCount, key, nextIdx);\n        }\n        return nextIdx;\n      }\n    },\n    [containerRef, itemCount, selected],\n  );\n\n  // does this belong here or should it be a method passed in?\n  const keyboardNavigation = useRef(false);\n  const ignoreFocus = useRef<boolean>(false);\n  const setIgnoreFocus = (value: boolean) => (ignoreFocus.current = value);\n\n  const handleFocus = useCallback(() => {\n    // Ignore focus if mouse has been used\n    if (ignoreFocus.current) {\n      ignoreFocus.current = false;\n    } else {\n      // If mouse wan't used, then keyboard must have been\n      keyboardNavigation.current = true;\n      if (itemCount === 0) {\n        setHighlightedIndex(LIST_FOCUS_VISIBLE);\n      } else if (highlightedIndex !== -1) {\n        // We need to force a render here. We're not changing the highlightedIdx, but we want to\n        // make sure we render with the correct focusVisible value. We don't store focusVisible\n        // in state, as there are places where we would double render, as highlightedIdx also changes.\n        forceRender({});\n      } else if (restoreLastFocus) {\n        if (lastFocus.current !== -1) {\n          setHighlightedIndex(lastFocus.current);\n        } else {\n          const selectedItemIdx = getIndexOfSelectedItem(selected);\n          if (selectedItemIdx !== -1) {\n            setHighlightedIndex(selectedItemIdx);\n          } else {\n            setHighlightedIndex(0);\n          }\n        }\n      } else if (hasSelection(selected)) {\n        const selectedItemIdx = getIndexOfSelectedItem(selected);\n        setHighlightedIndex(selectedItemIdx);\n      } else if (disableHighlightOnFocus !== true) {\n        setHighlightedIndex(nextFocusableItemIdx());\n      }\n    }\n  }, [\n    disableHighlightOnFocus,\n    highlightedIndex,\n    itemCount,\n    nextFocusableItemIdx,\n    restoreLastFocus,\n    selected,\n    setHighlightedIndex,\n  ]);\n\n  const navigateChildItems = useCallback(\n    async (e: KeyboardEvent) => {\n      const nextIdx =\n        e.key === PageDown || e.key === PageUp\n          ? nextPageItemIdx(e.key, highlightedIndex)\n          : nextFocusableItemIdx(e.key, highlightedIndex);\n\n      if (nextIdx !== highlightedIndex) {\n        setHighlightedIndex(nextIdx, true);\n      }\n      // Users may need to know that a Keyboard navigation event has been handled\n      // even if no actual navigation was effected. e.g. fine-grained control\n      // over aria-activedescendant requires this.\n      onKeyboardNavigation?.(e, nextIdx);\n    },\n    [\n      highlightedIndex,\n      nextFocusableItemIdx,\n      nextPageItemIdx,\n      onKeyboardNavigation,\n      setHighlightedIndex,\n    ],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (itemCount > 0 && isNavigationKey(e)) {\n        e.preventDefault();\n        e.stopPropagation();\n        keyboardNavigation.current = true;\n        navigateChildItems(e);\n      } else if (isCharacterKey(e)) {\n        keyboardNavigation.current = true;\n      }\n    },\n    [itemCount, navigateChildItems],\n  );\n\n  const containerProps = useMemo(() => {\n    return {\n      onBlur: (e: FocusEvent) => {\n        //TODO no direct ref to List\n        const sourceTarget = (e.target as HTMLElement).closest(\".vuuList\");\n        const destTarget = e.relatedTarget as HTMLElement;\n        if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n          keyboardNavigation.current = false;\n          setHighlightedIdx(-1);\n          if (!restoreLastFocus) {\n            lastFocus.current = -1;\n          }\n        }\n      },\n      onFocus: handleFocus,\n      onKeyDown: handleKeyDown,\n      onMouseDownCapture: () => {\n        keyboardNavigation.current = false;\n        setIgnoreFocus(true);\n      },\n\n      // onMouseEnter would seem less expensive but it misses some cases\n      onMouseMove: () => {\n        if (keyboardNavigation.current) {\n          keyboardNavigation.current = false;\n        }\n      },\n      onMouseLeave: () => {\n        keyboardNavigation.current = false;\n        setIgnoreFocus(false);\n        setHighlightedIndex(-1);\n      },\n    };\n  }, [\n    handleFocus,\n    handleKeyDown,\n    restoreLastFocus,\n    setHighlightedIdx,\n    setHighlightedIndex,\n  ]);\n\n  return {\n    focusVisible: keyboardNavigation.current ? highlightedIndex : -1,\n    controlledHighlighting: isControlledHighlighting,\n    highlightedIndex,\n    setHighlightedIndex,\n    keyboardNavigation,\n    containerProps,\n    setIgnoreFocus,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/list/common-hooks/useTypeahead.js

@@ -1,72 +0,0 @@
-import { useRef, useCallback } from 'react';
-import { isCharacterKey, Space } from './keyUtils.js';
-
-const useTypeahead = ({
-  disableTypeToSelect,
-  highlightedIdx,
-  highlightItemAtIndex,
-  typeToNavigate,
-  items,
-  applyIncrementalSearch = true
-}) => {
-  const keyDownTimer = useRef(null);
-  const searchChars = useRef("");
-  const startIdx = useRef(-1);
-  const applySearch = useCallback(
-    (intermediateSearch) => {
-      if (intermediateSearch || !applyIncrementalSearch) {
-        const regex = new RegExp(`^${searchChars.current}`, "i");
-        let idx = items.findIndex(
-          ({ label }, i) => i > startIdx.current && regex.test(label)
-        );
-        if (idx === -1) {
-          idx = items.findIndex(
-            ({ label }, i) => i <= startIdx.current && regex.test(label)
-          );
-        }
-        if (idx !== -1) {
-          highlightItemAtIndex(idx);
-        }
-      } else {
-        searchChars.current = "";
-        keyDownTimer.current = null;
-        startIdx.current = -1;
-      }
-    },
-    [applyIncrementalSearch, highlightItemAtIndex, items]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      const searchInProgress = startIdx.current !== -1;
-      if (isCharacterKey(e) || searchInProgress && e.key === Space) {
-        if (typeToNavigate) {
-          e.preventDefault();
-          e.stopPropagation();
-          if (startIdx.current === -1 || e.key === searchChars.current) {
-            startIdx.current = highlightedIdx;
-          }
-          if (keyDownTimer.current !== null) {
-            clearTimeout(keyDownTimer.current);
-            keyDownTimer.current = null;
-          }
-          if (e.key !== searchChars.current) {
-            searchChars.current += e.key;
-          }
-          if (applyIncrementalSearch) {
-            applySearch(true);
-          }
-          keyDownTimer.current = window.setTimeout(() => {
-            applySearch();
-          }, 100);
-        }
-      }
-    },
-    [typeToNavigate, applyIncrementalSearch, highlightedIdx, applySearch]
-  );
-  return {
-    onKeyDown: disableTypeToSelect ? void 0 : handleKeyDown
-  };
-};
-
-export { useTypeahead };
-//# sourceMappingURL=useTypeahead.js.map

package/esm/list/common-hooks/useTypeahead.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTypeahead.js","sources":["../../../src/list/common-hooks/useTypeahead.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { isCharacterKey, Space } from \"./keyUtils\";\nimport { CollectionItem } from \"../../common-hooks/collectionTypes\";\n\ninterface TypeaheadHookProps<Item> {\n  disableTypeToSelect?: boolean;\n  highlightedIdx: number;\n  highlightItemAtIndex: (idx: number) => void;\n  applyIncrementalSearch?: boolean;\n  typeToNavigate: boolean;\n  items: CollectionItem<Item>[];\n}\n\ninterface TypeaheadHookResult {\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nexport const useTypeahead = <Item>({\n  disableTypeToSelect,\n  highlightedIdx,\n  highlightItemAtIndex,\n  typeToNavigate,\n  items,\n  applyIncrementalSearch = true,\n}: TypeaheadHookProps<Item>): TypeaheadHookResult => {\n  const keyDownTimer = useRef<number | null>(null);\n  const searchChars = useRef(\"\");\n  const startIdx = useRef(-1);\n\n  const applySearch = useCallback(\n    (intermediateSearch?: true | undefined) => {\n      if (intermediateSearch || !applyIncrementalSearch) {\n        const regex = new RegExp(`^${searchChars.current}`, \"i\");\n        let idx = items.findIndex(\n          ({ label }, i) => i > startIdx.current && regex.test(label!)\n        );\n        if (idx === -1) {\n          idx = items.findIndex(\n            ({ label }, i) => i <= startIdx.current && regex.test(label!)\n          );\n        }\n        if (idx !== -1) {\n          highlightItemAtIndex(idx);\n        }\n      } else {\n        searchChars.current = \"\";\n        keyDownTimer.current = null;\n        startIdx.current = -1;\n      }\n    },\n    [applyIncrementalSearch, highlightItemAtIndex, items]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const searchInProgress = startIdx.current !== -1;\n      if (isCharacterKey(e) || (searchInProgress && e.key === Space)) {\n        if (typeToNavigate) {\n          e.preventDefault();\n          e.stopPropagation();\n          // If we type the same key repeatedly, we cycle through the matches\n          if (startIdx.current === -1 || e.key === searchChars.current) {\n            startIdx.current = highlightedIdx;\n          }\n          if (keyDownTimer.current !== null) {\n            clearTimeout(keyDownTimer.current);\n            keyDownTimer.current = null;\n          }\n          if (e.key !== searchChars.current) {\n            searchChars.current += e.key;\n          }\n          if (applyIncrementalSearch) {\n            applySearch(true);\n          }\n          // keyDownTimer.current = window.setTimeout(applySearch, 100);\n          keyDownTimer.current = window.setTimeout(() => {\n            applySearch();\n          }, 100);\n        }\n      }\n    },\n    [typeToNavigate, applyIncrementalSearch, highlightedIdx, applySearch]\n  );\n\n  return {\n    onKeyDown: disableTypeToSelect ? undefined : handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,eAAe,CAAO;AAAA,EACjC,mBAAA;AAAA,EACA,cAAA;AAAA,EACA,oBAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,sBAAyB,GAAA;AAC3B,CAAqD,KAAA;AACnD,EAAM,MAAA,YAAA,GAAe,OAAsB,IAAI,CAAA;AAC/C,EAAM,MAAA,WAAA,GAAc,OAAO,EAAE,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,OAAO,CAAE,CAAA,CAAA;AAE1B,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,kBAA0C,KAAA;AACzC,MAAI,IAAA,kBAAA,IAAsB,CAAC,sBAAwB,EAAA;AACjD,QAAA,MAAM,QAAQ,IAAI,MAAA,CAAO,IAAI,WAAY,CAAA,OAAO,IAAI,GAAG,CAAA;AACvD,QAAA,IAAI,MAAM,KAAM,CAAA,SAAA;AAAA,UACd,CAAC,EAAE,KAAA,EAAS,EAAA,CAAA,KAAM,IAAI,QAAS,CAAA,OAAA,IAAW,KAAM,CAAA,IAAA,CAAK,KAAM;AAAA,SAC7D;AACA,QAAA,IAAI,QAAQ,CAAI,CAAA,EAAA;AACd,UAAA,GAAA,GAAM,KAAM,CAAA,SAAA;AAAA,YACV,CAAC,EAAE,KAAA,EAAS,EAAA,CAAA,KAAM,KAAK,QAAS,CAAA,OAAA,IAAW,KAAM,CAAA,IAAA,CAAK,KAAM;AAAA,WAC9D;AAAA;AAEF,QAAA,IAAI,QAAQ,CAAI,CAAA,EAAA;AACd,UAAA,oBAAA,CAAqB,GAAG,CAAA;AAAA;AAC1B,OACK,MAAA;AACL,QAAA,WAAA,CAAY,OAAU,GAAA,EAAA;AACtB,QAAA,YAAA,CAAa,OAAU,GAAA,IAAA;AACvB,QAAA,QAAA,CAAS,OAAU,GAAA,CAAA,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,sBAAwB,EAAA,oBAAA,EAAsB,KAAK;AAAA,GACtD;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAA2B,KAAA;AAC1B,MAAM,MAAA,gBAAA,GAAmB,SAAS,OAAY,KAAA,CAAA,CAAA;AAC9C,MAAA,IAAI,eAAe,CAAC,CAAA,IAAM,gBAAoB,IAAA,CAAA,CAAE,QAAQ,KAAQ,EAAA;AAC9D,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,CAAA,CAAE,cAAe,EAAA;AACjB,UAAA,CAAA,CAAE,eAAgB,EAAA;AAElB,UAAA,IAAI,SAAS,OAAY,KAAA,CAAA,CAAA,IAAM,CAAE,CAAA,GAAA,KAAQ,YAAY,OAAS,EAAA;AAC5D,YAAA,QAAA,CAAS,OAAU,GAAA,cAAA;AAAA;AAErB,UAAI,IAAA,YAAA,CAAa,YAAY,IAAM,EAAA;AACjC,YAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AACjC,YAAA,YAAA,CAAa,OAAU,GAAA,IAAA;AAAA;AAEzB,UAAI,IAAA,CAAA,CAAE,GAAQ,KAAA,WAAA,CAAY,OAAS,EAAA;AACjC,YAAA,WAAA,CAAY,WAAW,CAAE,CAAA,GAAA;AAAA;AAE3B,UAAA,IAAI,sBAAwB,EAAA;AAC1B,YAAA,WAAA,CAAY,IAAI,CAAA;AAAA;AAGlB,UAAa,YAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC7C,YAAY,WAAA,EAAA;AAAA,aACX,GAAG,CAAA;AAAA;AACR;AACF,KACF;AAAA,IACA,CAAC,cAAA,EAAgB,sBAAwB,EAAA,cAAA,EAAgB,WAAW;AAAA,GACtE;AAEA,EAAO,OAAA;AAAA,IACL,SAAA,EAAW,sBAAsB,KAAY,CAAA,GAAA;AAAA,GAC/C;AACF;;;;"}

package/esm/list/common-hooks/useViewportTracking.js

@@ -1,131 +0,0 @@
-import { useRef, useCallback } from 'react';
-import '../../common-hooks/collectionProvider.js';
-import { useResizeObserver } from '../../common-hooks/use-resize-observer.js';
-import { useIsomorphicLayoutEffect } from '@salt-ds/core';
-
-const HeightOnly = ["height"];
-const HeightWithScroll = ["height", "scrollHeight"];
-const EMPTY_ARRAY = [];
-const ObservedDimensions = {
-  containerOnly: [HeightWithScroll, EMPTY_ARRAY],
-  withContent: [HeightOnly, HeightOnly]
-};
-const getObservedDimensions = (containerOnly) => containerOnly ? ObservedDimensions.containerOnly : ObservedDimensions.withContent;
-const NULL_REF = { current: null };
-const getItemTop = (element, offsetContainer) => {
-  const { transform = "none" } = getComputedStyle(element);
-  if (transform.startsWith("matrix")) {
-    const pos = transform.lastIndexOf(",");
-    return parseInt(transform.slice(pos + 1));
-  } else {
-    let offsetParent = element.offsetParent;
-    if (offsetParent === offsetContainer || offsetContainer === null) {
-      return element.offsetTop;
-    } else {
-      let top = element.offsetTop;
-      while (offsetParent !== null && offsetParent !== offsetContainer) {
-        top += offsetParent.offsetTop;
-        offsetParent = offsetParent.offsetParent;
-      }
-      return top;
-    }
-  }
-};
-const useViewportTracking = ({
-  containerRef,
-  contentRef = NULL_REF,
-  highlightedIdx = -1,
-  indexPositions,
-  stickyHeaders = false
-}) => {
-  const scrolling = useRef(false);
-  const viewport = useRef({
-    height: 0,
-    contentHeight: 0
-  });
-  const scrollTo = useCallback((scrollPos) => {
-    scrolling.current = true;
-    if (containerRef.current) {
-      containerRef.current.scrollTop = scrollPos;
-    }
-    setTimeout(() => {
-      scrolling.current = false;
-    });
-  }, []);
-  const scrollToStart = useCallback(() => scrollTo(0), [scrollTo]);
-  const scrollToEnd = useCallback(() => {
-    scrollTo(viewport.current.contentHeight - viewport.current.height);
-  }, [scrollTo]);
-  const scrollIntoViewIfNeeded = useCallback(
-    (item) => {
-      const offsetContainer = contentRef.current || containerRef.current;
-      if (item.id) {
-        const el = document.getElementById(item.id);
-        if (el && containerRef.current) {
-          const { height: viewportHeight } = viewport.current;
-          const targetEl = el.ariaExpanded && el.firstChild ? el.firstChild : el;
-          const headerHeight = stickyHeaders ? 36 : 0;
-          const itemTop = getItemTop(targetEl, offsetContainer);
-          const itemHeight = targetEl.offsetHeight;
-          const { scrollTop } = containerRef.current;
-          const viewportStart = scrollTop + headerHeight;
-          const viewportEnd = viewportStart + viewportHeight - headerHeight;
-          if (itemTop + itemHeight > viewportEnd || itemTop < viewportStart) {
-            const newScrollTop = itemTop + itemHeight > viewportEnd ? scrollTop + (itemTop + itemHeight) - viewportEnd : itemTop - headerHeight;
-            scrollTo(newScrollTop);
-          }
-        }
-      }
-    },
-    [containerRef, contentRef, scrollTo, stickyHeaders]
-  );
-  useIsomorphicLayoutEffect(() => {
-    const { height, contentHeight } = viewport.current;
-    const item = indexPositions[highlightedIdx];
-    if (contentHeight > height && item) {
-      const [firstItem] = indexPositions;
-      const [lastItem] = indexPositions.slice(-1);
-      if (item === firstItem) {
-        scrollToStart();
-      } else if (item === lastItem) {
-        scrollToEnd();
-      } else {
-        scrollIntoViewIfNeeded(indexPositions[highlightedIdx]);
-      }
-    }
-  }, [
-    highlightedIdx,
-    indexPositions,
-    scrollIntoViewIfNeeded,
-    scrollToEnd,
-    scrollToStart
-  ]);
-  const onContainerResize = useCallback(
-    ({ height, scrollHeight }) => {
-      if (typeof height === "number") {
-        viewport.current.height = height;
-      }
-      if (typeof scrollHeight === "number") {
-        viewport.current.contentHeight = scrollHeight;
-      }
-    },
-    []
-  );
-  const onContentResize = useCallback(({ height }) => {
-    if (typeof height === "number") {
-      viewport.current.contentHeight = height;
-    }
-  }, []);
-  const [containerDimensions, contentDimensions] = getObservedDimensions(
-    contentRef === NULL_REF
-  );
-  useResizeObserver(containerRef, containerDimensions, onContainerResize, true);
-  useResizeObserver(contentRef, contentDimensions, onContentResize, true);
-  return {
-    isScrolling: scrolling,
-    scrollIntoView: scrollIntoViewIfNeeded
-  };
-};
-
-export { useViewportTracking };
-//# sourceMappingURL=useViewportTracking.js.map

package/esm/list/common-hooks/useViewportTracking.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useViewportTracking.js","sources":["../../../src/list/common-hooks/useViewportTracking.ts"],"sourcesContent":["import { MutableRefObject, RefObject, useCallback, useRef } from \"react\";\nimport { CollectionItem } from \"../../common-hooks/collectionTypes\";\nimport { ResizeHandler, useResizeObserver } from \"../../common-hooks\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nconst HeightOnly = [\"height\"];\nconst HeightWithScroll = [\"height\", \"scrollHeight\"];\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst EMPTY_ARRAY: any[] = [];\n\nconst ObservedDimensions = {\n  containerOnly: [HeightWithScroll, EMPTY_ARRAY],\n  withContent: [HeightOnly, HeightOnly],\n};\nconst getObservedDimensions = (containerOnly: boolean) =>\n  containerOnly\n    ? ObservedDimensions.containerOnly\n    : ObservedDimensions.withContent;\n\nconst NULL_REF = { current: null };\n\nconst getItemTop = (\n  element: HTMLElement,\n  offsetContainer: HTMLElement | null,\n) => {\n  const { transform = \"none\" } = getComputedStyle(element);\n  if (transform.startsWith(\"matrix\")) {\n    const pos = transform.lastIndexOf(\",\");\n    return parseInt(transform.slice(pos + 1));\n  } else {\n    let offsetParent = element.offsetParent as HTMLElement;\n    if (offsetParent === offsetContainer || offsetContainer === null) {\n      return element.offsetTop;\n    } else {\n      let top = element.offsetTop;\n      while (offsetParent !== null && offsetParent !== offsetContainer) {\n        top += offsetParent.offsetTop;\n        offsetParent = offsetParent.offsetParent as HTMLElement;\n      }\n      return top;\n    }\n  }\n};\n\nexport interface ViewportTrackingProps<Item> {\n  containerRef: RefObject<HTMLElement | null>;\n  contentRef?: RefObject<HTMLElement | null>;\n  highlightedIdx?: number;\n  indexPositions: CollectionItem<Item>[];\n  stickyHeaders?: boolean;\n}\n\nexport interface ViewportTrackingResult<Item> {\n  isScrolling: MutableRefObject<boolean>;\n  scrollIntoView: (item: CollectionItem<Item>) => void;\n}\n\nexport const useViewportTracking = <Item>({\n  containerRef,\n  contentRef = NULL_REF,\n  highlightedIdx = -1,\n  indexPositions,\n  stickyHeaders = false,\n}: ViewportTrackingProps<Item>): ViewportTrackingResult<Item> => {\n  const scrolling = useRef<boolean>(false);\n  const viewport = useRef({\n    height: 0,\n    contentHeight: 0,\n  });\n\n  const scrollTo = useCallback((scrollPos: number) => {\n    scrolling.current = true;\n    if (containerRef.current) {\n      containerRef.current.scrollTop = scrollPos;\n    }\n    setTimeout(() => {\n      scrolling.current = false;\n    });\n  }, []);\n\n  const scrollToStart = useCallback(() => scrollTo(0), [scrollTo]);\n\n  const scrollToEnd = useCallback(() => {\n    scrollTo(viewport.current.contentHeight - viewport.current.height);\n  }, [scrollTo]);\n\n  const scrollIntoViewIfNeeded = useCallback(\n    (item: CollectionItem<Item>) => {\n      const offsetContainer = contentRef.current || containerRef.current;\n      if (item.id) {\n        const el = document.getElementById(item.id);\n        if (el && containerRef.current) {\n          const { height: viewportHeight } = viewport.current;\n          const targetEl =\n            el.ariaExpanded && el.firstChild\n              ? (el.firstChild as HTMLElement)\n              : el;\n          const headerHeight = stickyHeaders ? 36 : 0;\n          const itemTop = getItemTop(targetEl, offsetContainer);\n          const itemHeight = targetEl.offsetHeight;\n          const { scrollTop } = containerRef.current;\n          const viewportStart = scrollTop + headerHeight;\n          const viewportEnd = viewportStart + viewportHeight - headerHeight;\n\n          if (itemTop + itemHeight > viewportEnd || itemTop < viewportStart) {\n            const newScrollTop =\n              itemTop + itemHeight > viewportEnd\n                ? scrollTop + (itemTop + itemHeight) - viewportEnd\n                : itemTop - headerHeight;\n\n            scrollTo(newScrollTop);\n          }\n        }\n      }\n    },\n    [containerRef, contentRef, scrollTo, stickyHeaders],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const { height, contentHeight } = viewport.current;\n    const item = indexPositions[highlightedIdx];\n    if (contentHeight > height && item) {\n      const [firstItem] = indexPositions;\n      const [lastItem] = indexPositions.slice(-1);\n      if (item === firstItem) {\n        scrollToStart();\n      } else if (item === lastItem) {\n        scrollToEnd();\n      } else {\n        scrollIntoViewIfNeeded(indexPositions[highlightedIdx]);\n      }\n    }\n  }, [\n    highlightedIdx,\n    indexPositions,\n    scrollIntoViewIfNeeded,\n    scrollToEnd,\n    scrollToStart,\n  ]);\n\n  const onContainerResize: ResizeHandler = useCallback(\n    ({ height, scrollHeight }) => {\n      if (typeof height === \"number\") {\n        viewport.current.height = height;\n      }\n      if (typeof scrollHeight === \"number\") {\n        viewport.current.contentHeight = scrollHeight;\n      }\n    },\n    [],\n  );\n\n  const onContentResize: ResizeHandler = useCallback(({ height }) => {\n    if (typeof height === \"number\") {\n      viewport.current.contentHeight = height;\n    }\n  }, []);\n\n  // If we only have a container, then we will observe its height and scrollHeight,\n  // contentRef will be null, so second call to observer will observe nothing.\n  // If we have both container and content, then we observe the height of each.\n  const [containerDimensions, contentDimensions] = getObservedDimensions(\n    contentRef === NULL_REF,\n  );\n  useResizeObserver(containerRef, containerDimensions, onContainerResize, true);\n  useResizeObserver(contentRef, contentDimensions, onContentResize, true);\n\n  return {\n    isScrolling: scrolling,\n    scrollIntoView: scrollIntoViewIfNeeded,\n  };\n};\n"],"names":[],"mappings":"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"}