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

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

@@ -1,70 +0,0 @@
-import { useCallback } from 'react';
-import { ArrowRight, Enter, ArrowLeft } from './keyUtils.js';
-
-const NO_HANDLERS = {};
-const canToggleItem = (item) => Array.isArray(item.childNodes);
-const toggleIconClicked = (el) => {
-  const closestToggle = el.closest(
-    "[data-toggle],[aria-expanded]"
-  );
-  return closestToggle.dataset.toggle === "true";
-};
-const useCollapsibleGroups = ({
-  collapsibleHeaders,
-  collectionHook,
-  highlightedIdx,
-  onToggle
-}) => {
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === ArrowRight || e.key === Enter) {
-        const item = collectionHook.data[highlightedIdx];
-        if (item) {
-          if (item.expanded === false && item.value) {
-            e.preventDefault();
-            collectionHook.expandGroupItem(item);
-            onToggle?.(item.value);
-          }
-        }
-      }
-      if (e.key === ArrowLeft || e.key === Enter) {
-        const item = collectionHook.data[highlightedIdx];
-        if (item) {
-          if (item.expanded && item.value) {
-            e.preventDefault();
-            collectionHook.collapseGroupItem(item);
-            onToggle?.(item.value);
-          }
-        }
-      }
-    },
-    [collectionHook, highlightedIdx, onToggle]
-  );
-  const handleClick = useCallback(
-    (evt) => {
-      console.log(`useCollapsibleGroups idx=${highlightedIdx}`);
-      const item = collectionHook.data[highlightedIdx];
-      console.log(evt.target, evt.currentTarget);
-      if (item && canToggleItem(item) && (toggleIconClicked(evt.target))) {
-        evt.stopPropagation();
-        evt.preventDefault();
-        if (item.expanded === false && item.value) {
-          collectionHook.expandGroupItem(item);
-          onToggle?.(item.value);
-        } else if (item.expanded === true && item.value) {
-          collectionHook.collapseGroupItem(item);
-          onToggle?.(item.value);
-        }
-      }
-    },
-    [collectionHook, highlightedIdx, onToggle]
-  );
-  const listHandlers = {
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  };
-  return collapsibleHeaders ? listHandlers : NO_HANDLERS;
-};
-
-export { useCollapsibleGroups };
-//# sourceMappingURL=useCollapsibleGroups.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useCollapsibleGroups.js","sources":["../../../src/list/common-hooks/useCollapsibleGroups.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, useCallback } from \"react\";\nimport { ArrowLeft, ArrowRight, Enter } from \"./keyUtils\";\nimport { ListHandlers } from \"../../common-hooks\";\nimport {\n  CollectionHookResult,\n  CollectionItem,\n} from \"../../common-hooks/collectionTypes\";\n\nconst NO_HANDLERS = {};\nconst canToggleItem = (item: CollectionItem<unknown>) =>\n  Array.isArray(item.childNodes);\n// TODO how do we determine this and where does this function belong = in the collectionHook ?\nconst canSelectItem = (_: CollectionItem<unknown>) => true;\n\nconst toggleIconClicked = (el: HTMLElement) => {\n  const closestToggle = el.closest(\n    \"[data-toggle],[aria-expanded]\",\n  ) as HTMLElement;\n  return closestToggle.dataset.toggle === \"true\";\n};\n\ninterface CollapsibleHookProps<Item> {\n  collapsibleHeaders?: boolean;\n  collectionHook: CollectionHookResult<Item>;\n  highlightedIdx: number;\n  onToggle?: (node: Item) => void;\n}\n\ninterface CollapsibleHookResult {\n  onClick?: ListHandlers[\"onClick\"];\n  onKeyDown?: ListHandlers[\"onKeyDown\"];\n}\n\nexport const useCollapsibleGroups = <Item>({\n  collapsibleHeaders,\n  collectionHook,\n  highlightedIdx,\n  onToggle,\n}: CollapsibleHookProps<Item>): CollapsibleHookResult => {\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLElement>) => {\n      if (e.key === ArrowRight || e.key === Enter) {\n        const item = collectionHook.data[highlightedIdx];\n        if (item) {\n          if (item.expanded === false && item.value) {\n            e.preventDefault();\n            collectionHook.expandGroupItem(item);\n            onToggle?.(item.value);\n          }\n        }\n      }\n\n      if (e.key === ArrowLeft || e.key === Enter) {\n        const item = collectionHook.data[highlightedIdx];\n        if (item) {\n          if (item.expanded && item.value) {\n            e.preventDefault();\n            collectionHook.collapseGroupItem(item);\n            onToggle?.(item.value);\n          }\n        }\n      }\n    },\n    [collectionHook, highlightedIdx, onToggle],\n  );\n\n  const handleClick = useCallback(\n    (evt: MouseEvent<HTMLElement>) => {\n      console.log(`useCollapsibleGroups idx=${highlightedIdx}`);\n      const item = collectionHook.data[highlightedIdx];\n      console.log(evt.target, evt.currentTarget);\n      if (\n        item &&\n        canToggleItem(item) &&\n        (!canSelectItem(item) || toggleIconClicked(evt.target as HTMLElement))\n      ) {\n        evt.stopPropagation();\n        evt.preventDefault();\n        if (item.expanded === false && item.value) {\n          collectionHook.expandGroupItem(item);\n          onToggle?.(item.value);\n        } else if (item.expanded === true && item.value) {\n          collectionHook.collapseGroupItem(item);\n          onToggle?.(item.value);\n        }\n      }\n    },\n    [collectionHook, highlightedIdx, onToggle],\n  );\n\n  /**\n   * These are List handlers, so we will not have reference to the actual node\n   * element. We must rely on highlightedIdx to tell us which node is interactive.\n   */\n  const listHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n  };\n\n  return collapsibleHeaders ? listHandlers : NO_HANDLERS;\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,50 +0,0 @@
-import { useMemo, useImperativeHandle } from 'react';
-
-const noScrolling = {
-  scrollToIndex: () => void 0,
-  scrollToItem: () => void 0,
-  scrollTo: () => void 0
-};
-const useImperativeScrollingAPI = ({
-  collectionHook,
-  forwardedRef,
-  scrollableRef,
-  scrollIntoView
-}) => {
-  const scrollHandles = useMemo(
-    () => ({
-      scrollToIndex: (itemIndex) => {
-        const collectionItem = collectionHook.data[itemIndex];
-        if (collectionItem) {
-          scrollIntoView?.(collectionItem);
-        }
-      },
-      scrollToItem: (item) => {
-        const collectionItem = collectionHook.toCollectionItem(item);
-        if (collectionItem) {
-          scrollIntoView?.(collectionItem);
-        }
-      },
-      scrollTo: (scrollOffset) => {
-        if (scrollableRef?.current) {
-          scrollableRef.current.scrollTop = scrollOffset;
-        }
-      }
-    }),
-    [collectionHook, scrollIntoView, scrollableRef]
-  );
-  useImperativeHandle(
-    forwardedRef,
-    () => {
-      if (scrollableRef.current) {
-        return scrollHandles;
-      } else {
-        return noScrolling;
-      }
-    },
-    [scrollHandles, scrollableRef]
-  );
-};
-
-export { useImperativeScrollingAPI };
-//# sourceMappingURL=useImperativeScrollingAPI.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useImperativeScrollingAPI.js","sources":["../../../src/list/common-hooks/useImperativeScrollingAPI.ts"],"sourcesContent":["import {\n  ForwardedRef,\n  MutableRefObject,\n  useImperativeHandle,\n  useMemo,\n} from \"react\";\nimport {\n  CollectionHookResult,\n  CollectionItem,\n} from \"../../common-hooks/collectionTypes\";\n\nexport interface ScrollingAPI<Item> {\n  scrollToIndex: (itemIndex: number) => void;\n  scrollToItem: (item: Item) => void;\n  scrollTo: (scrollOffset: number) => void;\n}\n\nexport interface ScrollingAPIHook<Item> {\n  collectionHook: CollectionHookResult<Item>;\n  forwardedRef?: ForwardedRef<ScrollingAPI<Item>>;\n  scrollableRef: MutableRefObject<HTMLElement | null>;\n  scrollIntoView?: (item: CollectionItem<Item>) => void;\n}\n\nconst noScrolling: ScrollingAPI<unknown> = {\n  scrollToIndex: () => undefined,\n  scrollToItem: () => undefined,\n  scrollTo: () => undefined,\n};\n\nexport const useImperativeScrollingAPI = <Item>({\n  collectionHook,\n  forwardedRef,\n  scrollableRef,\n  scrollIntoView,\n}: ScrollingAPIHook<Item>) => {\n  const scrollHandles: ScrollingAPI<Item> = useMemo(\n    () => ({\n      scrollToIndex: (itemIndex: number) => {\n        const collectionItem = collectionHook.data[itemIndex];\n        if (collectionItem) {\n          scrollIntoView?.(collectionItem);\n        }\n      },\n      scrollToItem: (item: Item) => {\n        const collectionItem = collectionHook.toCollectionItem(item);\n        if (collectionItem) {\n          scrollIntoView?.(collectionItem);\n        }\n      },\n      scrollTo: (scrollOffset: number) => {\n        if (scrollableRef?.current) {\n          scrollableRef.current.scrollTop = scrollOffset;\n        }\n      },\n    }),\n    [collectionHook, scrollIntoView, scrollableRef]\n  );\n\n  useImperativeHandle(\n    forwardedRef,\n    () => {\n      if (scrollableRef.current) {\n        return scrollHandles;\n      } else {\n        return noScrolling;\n      }\n    },\n    [scrollHandles, scrollableRef]\n  );\n};\n"],"names":[],"mappings":";;AAwBA,MAAM,WAAqC,GAAA;AAAA,EACzC,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,UAAU,MAAM,KAAA;AAClB,CAAA;AAEO,MAAM,4BAA4B,CAAO;AAAA,EAC9C,cAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,aAAoC,GAAA,OAAA;AAAA,IACxC,OAAO;AAAA,MACL,aAAA,EAAe,CAAC,SAAsB,KAAA;AACpC,QAAM,MAAA,cAAA,GAAiB,cAAe,CAAA,IAAA,CAAK,SAAS,CAAA;AACpD,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,cAAA,GAAiB,cAAc,CAAA;AAAA;AACjC,OACF;AAAA,MACA,YAAA,EAAc,CAAC,IAAe,KAAA;AAC5B,QAAM,MAAA,cAAA,GAAiB,cAAe,CAAA,gBAAA,CAAiB,IAAI,CAAA;AAC3D,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,cAAA,GAAiB,cAAc,CAAA;AAAA;AACjC,OACF;AAAA,MACA,QAAA,EAAU,CAAC,YAAyB,KAAA;AAClC,QAAA,IAAI,eAAe,OAAS,EAAA;AAC1B,UAAA,aAAA,CAAc,QAAQ,SAAY,GAAA,YAAA;AAAA;AACpC;AACF,KACF,CAAA;AAAA,IACA,CAAC,cAAgB,EAAA,cAAA,EAAgB,aAAa;AAAA,GAChD;AAEA,EAAA,mBAAA;AAAA,IACE,YAAA;AAAA,IACA,MAAM;AACJ,MAAA,IAAI,cAAc,OAAS,EAAA;AACzB,QAAO,OAAA,aAAA;AAAA,OACF,MAAA;AACL,QAAO,OAAA,WAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,GAC/B;AACF;;;;"}

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":";;;;;;;;AA2BO,MAAM,kBAAqB,GAAA,CAAA;AAElC,SAAS,WAAA,CAAY,KAAe,EAAA,GAAA,EAAa,GAAa,EAAA;AAC5D,EAAI,IAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,IAAA,IAAI,MAAM,CAAG,EAAA;AACX,MAAA,OAAO,GAAM,GAAA,CAAA;AAAA,KACR,MAAA;AACL,MAAO,OAAA,GAAA;AAAA;AACT,GACK,MAAA;AACL,IAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,MAAO,OAAA,CAAA;AAAA,KACT,MAAA,IAAW,GAAQ,KAAA,KAAA,GAAQ,CAAG,EAAA;AAC5B,MAAO,OAAA,GAAA;AAAA,KACF,MAAA;AACL,MAAA,OAAO,GAAM,GAAA,CAAA;AAAA;AACf;AAEJ;AAEA,MAAM,sBAAA,GAAyB,CAAC,QAAwB,KAAA;AACtD,EAAA,MAAM,iBAAiB,KAAM,CAAA,OAAA,CAAQ,QAAQ,CACzC,GAAA,oBAAA,CAAqB,QAAQ,CAC7B,GAAA,KAAA,CAAA;AACJ,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAM,MAAA,EAAA,GAAK,QAAS,CAAA,cAAA,CAAe,cAAc,CAAA;AACjD,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,EAAG,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA;AAC/C,MAAI,IAAA,aAAA,CAAc,KAAK,CAAG,EAAA;AACxB,QAAO,OAAA,KAAA;AAAA;AACT;AACF;AAEF,EAAO,OAAA,CAAA,CAAA;AACT,CAAA;AAEA,MAAM,WAAc,GAAA,CAClB,GACA,EAAA,GAAA,EACA,aACA,MACG,KAAA;AACH,EAAA,IAAI,QAAQ,GAAK,EAAA;AACf,IAAO,OAAA,MAAA;AAAA,GACT,MAAA,IAAW,QAAQ,IAAM,EAAA;AACvB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT,MAAA,IAAW,QAAQ,CAAI,CAAA,EAAA;AACrB,IAAO,OAAA,GAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,WAAA;AAAA;AAEX,CAAA;AAEA,MAAM,QAAW,GAAA,CACf,WACA,EAAA,MAAA,EACA,WACA,KACuB,KAAA;AACvB,EAAA,MAAM,EAAE,GAAA,EAAK,OAAQ,EAAA,GAAI,OAAO,qBAAsB,EAAA;AACtD,EAAA,MAAM,EAAE,SAAA,EAAW,YAAc,EAAA,YAAA,EAAiB,GAAA,WAAA;AAClD,EAAA,MAAM,oBAAoB,SAAY,GAAA,CAAA;AACtC,EAAA,MAAM,eAAe,IAAK,CAAA,GAAA;AAAA,IACxB,SAAY,GAAA,YAAA;AAAA,IACZ,YAAe,GAAA;AAAA,GACjB;AAGA,EAAI,IAAA,YAAA,KAAiB,SAAa,IAAA,KAAA,GAAQ,iBAAmB,EAAA;AAC3D,IAAO,OAAA,iBAAA;AAAA,GACE,MAAA,IAAA,YAAA,KAAiB,SAAa,IAAA,KAAA,GAAQ,iBAAmB,EAAA;AAClE,IAAY,WAAA,CAAA,QAAA,CAAS,GAAG,YAAY,CAAA;AACpC,IAAA,IAAI,OAAU,GAAA,KAAA;AACd,IAAI,IAAA,QAAA;AACJ,IAAG,GAAA;AACD,MAAW,OAAA,IAAA,CAAA;AACX,MAAW,QAAA,GAAA,qBAAA;AAAA,QACT,WAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,QACA,qBAAsB,EAAA;AAAA,KACjB,QAAA,QAAA,CAAS,GAAM,GAAA,OAAA,IAAW,OAAU,GAAA,iBAAA;AAC7C,IAAO,OAAA,OAAA;AAAA;AAEX,CAAA;AAEA,MAAM,MAAS,GAAA,CACb,WACA,EAAA,MAAA,EACA,KACG,KAAA;AACH,EAAA,MAAM,EAAE,GAAA,EAAK,OAAQ,EAAA,GAAI,OAAO,qBAAsB,EAAA;AACtD,EAAM,MAAA,EAAE,SAAW,EAAA,YAAA,EAAiB,GAAA,WAAA;AACpC,EAAA,MAAM,YAAe,GAAA,IAAA,CAAK,GAAI,CAAA,SAAA,GAAY,cAAc,CAAC,CAAA;AACzD,EAAI,IAAA,YAAA,KAAiB,SAAa,IAAA,KAAA,GAAQ,CAAG,EAAA;AAC3C,IAAO,OAAA,CAAA;AAAA,GACE,MAAA,IAAA,YAAA,KAAiB,SAAa,IAAA,KAAA,GAAQ,CAAG,EAAA;AAClD,IAAY,WAAA,CAAA,QAAA,CAAS,GAAG,YAAY,CAAA;AACpC,IAAA,IAAI,OAAU,GAAA,KAAA;AACd,IAAI,IAAA,QAAA;AACJ,IAAG,GAAA;AACD,MAAW,OAAA,IAAA,CAAA;AACX,MAAW,QAAA,GAAA,qBAAA;AAAA,QACT,WAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,QACA,qBAAsB,EAAA;AAAA,KACjB,QAAA,QAAA,CAAS,GAAM,GAAA,OAAA,IAAW,OAAU,GAAA,CAAA;AAC7C,IAAO,OAAA,OAAA;AAAA;AAEX,CAAA;AAIA,MAAM,MAAA,GAAS,CAAC,OAAA,KAA0B,OAAY,KAAA,KAAA,CAAA;AAItD,MAAM,WAAA,GAAc,CAAC,SAAA,EAAwB,KAAkB,KAAA;AAC7D,EAAM,MAAA,QAAA,GAAW,qBAAsB,CAAA,SAAA,EAAW,KAAK,CAAA;AACvD,EAAA,OAAO,OAAO,QAAQ,CAAA;AACxB,CAAA;AAEO,MAAM,wBAAwB,CAAC;AAAA,EACpC,YAAA;AAAA,EACA,uBAA0B,GAAA,CAAA,CAAA;AAAA,EAC1B,uBAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EAClB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,oBAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA;AAAA,EAEA,iBAAmB,EAAA;AACrB,CAAiD,KAAA;AAC/C,EAAM,MAAA,SAAA,GAAY,OAAO,CAAE,CAAA,CAAA;AAC3B,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA;AACnC,EAAA,MAAM,CAAC,gBAAA,EAAkB,iBAAmB,EAAA,wBAAwB,IAClE,aAAc,CAAA;AAAA,IACZ,UAAY,EAAA,oBAAA;AAAA,IACZ,OAAS,EAAA,uBAAA;AAAA,IACT,IAAM,EAAA;AAAA,GACP,CAAA;AAEH,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,GAAa,EAAA,YAAA,GAAe,KAAU,KAAA;AACrC,MAAA,WAAA,GAAc,GAAG,CAAA;AACjB,MAAA,iBAAA,CAAkB,GAAG,CAAA;AACrB,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,SAAA,CAAU,OAAU,GAAA,GAAA;AAAA;AACtB,KACF;AAAA,IACA,CAAC,aAAa,iBAAiB;AAAA,GACjC;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,KAA6C,KAAkB,KAAA;AAC9D,MAAA,MAAM,MAAS,GAAA,qBAAA,CAAsB,YAAa,CAAA,OAAA,EAAS,OAAO,IAAI,CAAA;AACtE,MAAI,IAAA,MAAA;AACJ,MAAA,IAAI,MAAQ,EAAA;AACV,QAAM,MAAA,EAAE,OAAS,EAAA,WAAA,EAAgB,GAAA,YAAA;AACjC,QAAA,IAAI,UAAU,WAAa,EAAA;AACzB,UACE,MAAA,GAAA,GAAA,KAAQ,QACJ,GAAA,QAAA,CAAS,WAAa,EAAA,MAAA,EAAQ,SAAW,EAAA,KAAK,CAC9C,GAAA,MAAA,CAAO,WAAa,EAAA,MAAA,EAAQ,KAAK,CAAA;AAAA;AACzC;AAEF,MAAA,OAAO,MAAU,IAAA,KAAA;AAAA,KACnB;AAAA,IACA,CAAC,cAAc,SAAS;AAAA,GAC1B;AAEA,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,GAAM,GAAA,SAAA,EAAW,MAAc,GAAQ,KAAA,SAAA,GAAY,KAAK,SAAc,KAAA;AAErE,MAAA,IAAI,cAAc,CAAG,EAAA;AACnB,QAAO,OAAA,CAAA,CAAA;AAAA,OACF,MAAA;AACL,QAAA,MAAM,QAAQ,GAAQ,KAAA,KAAA;AACtB,QAAA,MAAM,SAAS,GAAQ,KAAA,MAAA;AAKvB,QAAA,MAAM,sBACJ,KAAS,IAAA,MAAA,IAAU,QAAQ,CAAK,CAAA,GAAA,CAAA,CAAA,GAAK,uBAAuB,QAAQ,CAAA;AACtE,QAAA,MAAM,QAAW,GAAA,WAAA,CAAY,GAAK,EAAA,GAAA,EAAK,qBAAqB,SAAS,CAAA;AACrE,QAAA,IAAI,OAAU,GAAA,WAAA,CAAY,SAAW,EAAA,GAAA,EAAK,QAAQ,CAAA;AAElD,QAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,YAAA;AAE/B,QACE,IAAA,OAAA,KAAY,KACZ,GAAQ,KAAA,OAAA,IACR,aACA,CAAC,WAAA,CAAY,SAAW,EAAA,CAAC,CACzB,EAAA;AACA,UAAO,OAAA,GAAA;AAAA;AAGT,QAAA,OAAA,CAAA,CACK,GAAQ,KAAA,SAAA,IAAa,MAAW,KAAA,OAAA,GAAU,cACzC,GAAQ,KAAA,OAAA,IAAW,KAAU,KAAA,OAAA,GAAU,MAC3C,SACA,IAAA,CAAC,WAAY,CAAA,SAAA,EAAW,OAAO,CAC/B,EAAA;AACA,UAAU,OAAA,GAAA,WAAA,CAAY,SAAW,EAAA,GAAA,EAAK,OAAO,CAAA;AAAA;AAE/C,QAAO,OAAA,OAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,YAAc,EAAA,SAAA,EAAW,QAAQ;AAAA,GACpC;AAGA,EAAM,MAAA,kBAAA,GAAqB,OAAO,KAAK,CAAA;AACvC,EAAM,MAAA,WAAA,GAAc,OAAgB,KAAK,CAAA;AACzC,EAAA,MAAM,cAAiB,GAAA,CAAC,KAAoB,KAAA,WAAA,CAAY,OAAU,GAAA,KAAA;AAElE,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AAEpC,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,WAAA,CAAY,OAAU,GAAA,KAAA;AAAA,KACjB,MAAA;AAEL,MAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA;AAC7B,MAAA,IAAI,cAAc,CAAG,EAAA;AACnB,QAAA,mBAAA,CAAoB,kBAAkB,CAAA;AAAA,OACxC,MAAA,IAAW,qBAAqB,CAAI,CAAA,EAAA;AAIlC,QAAA,WAAA,CAAY,EAAE,CAAA;AAAA,iBACL,gBAAkB,EAAA;AAC3B,QAAI,IAAA,SAAA,CAAU,YAAY,CAAI,CAAA,EAAA;AAC5B,UAAA,mBAAA,CAAoB,UAAU,OAAO,CAAA;AAAA,SAChC,MAAA;AACL,UAAM,MAAA,eAAA,GAAkB,uBAAuB,QAAQ,CAAA;AACvD,UAAA,IAAI,oBAAoB,CAAI,CAAA,EAAA;AAC1B,YAAA,mBAAA,CAAoB,eAAe,CAAA;AAAA,WAC9B,MAAA;AACL,YAAA,mBAAA,CAAoB,CAAC,CAAA;AAAA;AACvB;AACF,OACF,MAAA,IAAW,YAAa,CAAA,QAAQ,CAAG,EAAA;AACjC,QAAM,MAAA,eAAA,GAAkB,uBAAuB,QAAQ,CAAA;AACvD,QAAA,mBAAA,CAAoB,eAAe,CAAA;AAAA,OACrC,MAAA,IAAW,4BAA4B,IAAM,EAAA;AAC3C,QAAA,mBAAA,CAAoB,sBAAsB,CAAA;AAAA;AAC5C;AACF,GACC,EAAA;AAAA,IACD,uBAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,oBAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,OAAO,CAAqB,KAAA;AAC1B,MAAA,MAAM,OACJ,GAAA,CAAA,CAAE,GAAQ,KAAA,QAAA,IAAY,EAAE,GAAQ,KAAA,MAAA,GAC5B,eAAgB,CAAA,CAAA,CAAE,KAAK,gBAAgB,CAAA,GACvC,oBAAqB,CAAA,CAAA,CAAE,KAAK,gBAAgB,CAAA;AAElD,MAAA,IAAI,YAAY,gBAAkB,EAAA;AAChC,QAAA,mBAAA,CAAoB,SAAS,IAAI,CAAA;AAAA;AAKnC,MAAA,oBAAA,GAAuB,GAAG,OAAO,CAAA;AAAA,KACnC;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,oBAAA;AAAA,MACA,eAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,IAAI,SAAY,GAAA,CAAA,IAAK,eAAgB,CAAA,CAAC,CAAG,EAAA;AACvC,QAAA,CAAA,CAAE,cAAe,EAAA;AACjB,QAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,QAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA;AAC7B,QAAA,kBAAA,CAAmB,CAAC,CAAA;AAAA,OACtB,MAAA,IAAW,cAAe,CAAA,CAAC,CAAG,EAAA;AAC5B,QAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA;AAAA;AAC/B,KACF;AAAA,IACA,CAAC,WAAW,kBAAkB;AAAA,GAChC;AAEA,EAAM,MAAA,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAO,OAAA;AAAA,MACL,MAAA,EAAQ,CAAC,CAAkB,KAAA;AAEzB,QAAA,MAAM,YAAgB,GAAA,CAAA,CAAE,MAAuB,CAAA,OAAA,CAAQ,UAAU,CAAA;AACjE,QAAA,MAAM,aAAa,CAAE,CAAA,aAAA;AACrB,QAAA,IAAI,YAAgB,IAAA,CAAC,YAAc,EAAA,QAAA,CAAS,UAAU,CAAG,EAAA;AACvD,UAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA;AAC7B,UAAA,iBAAA,CAAkB,CAAE,CAAA,CAAA;AACpB,UAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,YAAA,SAAA,CAAU,OAAU,GAAA,CAAA,CAAA;AAAA;AACtB;AACF,OACF;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,oBAAoB,MAAM;AACxB,QAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA;AAC7B,QAAA,cAAA,CAAe,IAAI,CAAA;AAAA,OACrB;AAAA;AAAA,MAGA,aAAa,MAAM;AACjB,QAAA,IAAI,mBAAmB,OAAS,EAAA;AAC9B,UAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA;AAAA;AAC/B,OACF;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA;AAC7B,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAA,mBAAA,CAAoB,CAAE,CAAA,CAAA;AAAA;AACxB,KACF;AAAA,GACC,EAAA;AAAA,IACD,WAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAO,OAAA;AAAA,IACL,YAAA,EAAc,kBAAmB,CAAA,OAAA,GAAU,gBAAmB,GAAA,CAAA,CAAA;AAAA,IAC9D,sBAAwB,EAAA,wBAAA;AAAA,IACxB,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,kBAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

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;;;;"}