@vuu-ui/vuu-ui-controls 0.0.26

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

@@ -0,0 +1,80 @@
+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.collapseGroupItem,
+      collectionHook.data,
+      collectionHook.expandGroupItem,
+      highlightedIdx
+    ]
+  );
+  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.collapseGroupItem,
+      collectionHook.data,
+      collectionHook.expandGroupItem,
+      highlightedIdx
+    ]
+  );
+  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

@@ -0,0 +1 @@
+{"version":3,"file":"useCollapsibleGroups.js","sources":["../../../src/list/common-hooks/useCollapsibleGroups.ts"],"sourcesContent":["import { 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) => {\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    [\n      collectionHook.collapseGroupItem,\n      collectionHook.data,\n      collectionHook.expandGroupItem,\n      highlightedIdx,\n    ]\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    [\n      collectionHook.collapseGroupItem,\n      collectionHook.data,\n      collectionHook.expandGroupItem,\n      highlightedIdx,\n    ]\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":";;;AAQA,MAAM,cAAc,EAAC,CAAA;AACrB,MAAM,gBAAgB,CAAC,IAAA,KACrB,KAAM,CAAA,OAAA,CAAQ,KAAK,UAAU,CAAA,CAAA;AAI/B,MAAM,iBAAA,GAAoB,CAAC,EAAoB,KAAA;AAC7C,EAAA,MAAM,gBAAgB,EAAG,CAAA,OAAA;AAAA,IACvB,+BAAA;AAAA,GACF,CAAA;AACA,EAAO,OAAA,aAAA,CAAc,QAAQ,MAAW,KAAA,MAAA,CAAA;AAC1C,CAAA,CAAA;AAcO,MAAM,uBAAuB,CAAO;AAAA,EACzC,kBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AACF,CAAyD,KAAA;AACvD,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,UAAc,IAAA,CAAA,CAAE,QAAQ,KAAO,EAAA;AAC3C,QAAM,MAAA,IAAA,GAAO,cAAe,CAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAC/C,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,IAAI,IAAK,CAAA,QAAA,KAAa,KAAS,IAAA,IAAA,CAAK,KAAO,EAAA;AACzC,YAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,YAAA,cAAA,CAAe,gBAAgB,IAAI,CAAA,CAAA;AACnC,YAAA,QAAA,GAAW,KAAK,KAAK,CAAA,CAAA;AAAA,WACvB;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,SAAa,IAAA,CAAA,CAAE,QAAQ,KAAO,EAAA;AAC1C,QAAM,MAAA,IAAA,GAAO,cAAe,CAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAC/C,QAAA,IAAI,IAAM,EAAA;AACR,UAAI,IAAA,IAAA,CAAK,QAAY,IAAA,IAAA,CAAK,KAAO,EAAA;AAC/B,YAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,YAAA,cAAA,CAAe,kBAAkB,IAAI,CAAA,CAAA;AACrC,YAAA,QAAA,GAAW,KAAK,KAAK,CAAA,CAAA;AAAA,WACvB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,cAAe,CAAA,iBAAA;AAAA,MACf,cAAe,CAAA,IAAA;AAAA,MACf,cAAe,CAAA,eAAA;AAAA,MACf,cAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAiC,KAAA;AAChC,MAAQ,OAAA,CAAA,GAAA,CAAI,CAA4B,yBAAA,EAAA,cAAc,CAAE,CAAA,CAAA,CAAA;AACxD,MAAM,MAAA,IAAA,GAAO,cAAe,CAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAC/C,MAAA,OAAA,CAAQ,GAAI,CAAA,GAAA,CAAI,MAAQ,EAAA,GAAA,CAAI,aAAa,CAAA,CAAA;AACzC,MACE,IAAA,IAAA,IACA,aAAc,CAAA,IAAI,CACjB,KAAwB,iBAAA,CAAkB,GAAI,CAAA,MAAqB,CACpE,CAAA,EAAA;AACA,QAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,QAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,QAAA,IAAI,IAAK,CAAA,QAAA,KAAa,KAAS,IAAA,IAAA,CAAK,KAAO,EAAA;AACzC,UAAA,cAAA,CAAe,gBAAgB,IAAI,CAAA,CAAA;AACnC,UAAA,QAAA,GAAW,KAAK,KAAK,CAAA,CAAA;AAAA,SACZ,MAAA,IAAA,IAAA,CAAK,QAAa,KAAA,IAAA,IAAQ,KAAK,KAAO,EAAA;AAC/C,UAAA,cAAA,CAAe,kBAAkB,IAAI,CAAA,CAAA;AACrC,UAAA,QAAA,GAAW,KAAK,KAAK,CAAA,CAAA;AAAA,SACvB;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,cAAe,CAAA,iBAAA;AAAA,MACf,cAAe,CAAA,IAAA;AAAA,MACf,cAAe,CAAA,eAAA;AAAA,MACf,cAAA;AAAA,KACF;AAAA,GACF,CAAA;AAMA,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB,OAAS,EAAA,WAAA;AAAA,IACT,SAAW,EAAA,aAAA;AAAA,GACb,CAAA;AAEA,EAAA,OAAO,qBAAqB,YAAe,GAAA,WAAA,CAAA;AAC7C;;;;"}

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1 @@
+{"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,CAAA;AAClB,CAAA,CAAA;AAEO,MAAM,4BAA4B,CAAO;AAAA,EAC9C,cAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;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,CAAA;AACpD,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,cAAA,GAAiB,cAAc,CAAA,CAAA;AAAA,SACjC;AAAA,OACF;AAAA,MACA,YAAA,EAAc,CAAC,IAAe,KAAA;AAC5B,QAAM,MAAA,cAAA,GAAiB,cAAe,CAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAC3D,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,cAAA,GAAiB,cAAc,CAAA,CAAA;AAAA,SACjC;AAAA,OACF;AAAA,MACA,QAAA,EAAU,CAAC,YAAyB,KAAA;AAClC,QAAA,IAAI,eAAe,OAAS,EAAA;AAC1B,UAAA,aAAA,CAAc,QAAQ,SAAY,GAAA,YAAA,CAAA;AAAA,SACpC;AAAA,OACF;AAAA,KACF,CAAA;AAAA,IACA,CAAC,cAAgB,EAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,GAChD,CAAA;AAEA,EAAA,mBAAA;AAAA,IACE,YAAA;AAAA,IACA,MAAM;AACJ,MAAA,IAAI,cAAc,OAAS,EAAA;AACzB,QAAO,OAAA,aAAA,CAAA;AAAA,OACF,MAAA;AACL,QAAO,OAAA,WAAA,CAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA,CAAC,eAAe,aAAa,CAAA;AAAA,GAC/B,CAAA;AACF;;;;"}

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

@@ -0,0 +1,286 @@
+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

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

@@ -0,0 +1,72 @@
+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

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