@salt-ds/lab 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-es/common-hooks/useKeyboardNavigation.js

@@ -0,0 +1,286 @@
+import { useControlled } from '@salt-ds/core';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { PageDown, ArrowDown, ArrowUp, Home, End, PageUp, isNavigationKey, isCharacterKey } from './keyUtils.js';
+import { hasSelection, getFirstSelectedItem } from './selectionTypes.js';
+
+const LIST_FOCUS_VISIBLE = -2;
+function nextItemIdx(count, key, idx) {
+  if (key === ArrowUp || key === End) {
+    if (idx > 0) {
+      return idx - 1;
+    }
+    return idx;
+  }
+  if (idx === null) {
+    return 0;
+  }
+  if (idx === count - 1) {
+    return idx;
+  }
+  return idx + 1;
+}
+const getIndexOfSelectedItem = (items, selected) => {
+  const selectedItem = getFirstSelectedItem(selected);
+  if (selectedItem) {
+    return items.indexOf(selectedItem);
+  }
+  return -1;
+};
+const getStartIdx = (key, idx, selectedIdx, length) => {
+  if (key === End) {
+    return length;
+  }
+  if (key === Home) {
+    return -1;
+  }
+  if (idx !== -1) {
+    return idx;
+  }
+  return selectedIdx;
+};
+const getItemRect = (item) => {
+  const el = document.getElementById(item.id);
+  if (el) {
+    return el.getBoundingClientRect();
+  }
+  throw Error(
+    `useKeyboardNavigation.getItemRect no element found for item  #${item == null ? void 0 : item.id}`
+  );
+};
+const pageDown = (containerEl, itemEl, indexPositions, index) => {
+  const { top: itemTop } = itemEl.getBoundingClientRect();
+  const { scrollTop, clientHeight, scrollHeight } = containerEl;
+  const lastIndexPosition = indexPositions.length - 1;
+  const newScrollTop = Math.min(
+    scrollTop + clientHeight,
+    scrollHeight - clientHeight
+  );
+  if (newScrollTop !== scrollTop && index < lastIndexPosition) {
+    containerEl.scrollTo(0, newScrollTop);
+    let nextIdx = index;
+    let nextRect;
+    do {
+      nextIdx += 1;
+      nextRect = getItemRect(indexPositions[nextIdx]);
+    } while (nextRect.top < itemTop && nextIdx < lastIndexPosition);
+    return nextIdx;
+  }
+};
+const pageUp = async (containerEl, itemEl, indexPositions, index) => {
+  const { top: itemTop } = itemEl.getBoundingClientRect();
+  const { scrollTop, clientHeight } = containerEl;
+  const newScrollTop = Math.max(scrollTop - clientHeight, 0);
+  if (newScrollTop !== scrollTop && index > 0) {
+    containerEl.scrollTo(0, newScrollTop);
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        let nextIdx = index;
+        let nextRect;
+        do {
+          nextIdx -= 1;
+          nextRect = getItemRect(indexPositions[nextIdx]);
+        } while (nextRect.top > itemTop && nextIdx > 0);
+        resolve(nextIdx);
+      });
+    });
+  }
+};
+const isLeaf = (item) => !item.header && !item.childNodes;
+const isFocusable = (item) => isLeaf(item) || item.expanded !== void 0;
+const useKeyboardNavigation = ({
+  containerRef,
+  defaultHighlightedIndex = -1,
+  disableHighlightOnFocus,
+  highlightedIndex: highlightedIndexProp,
+  indexPositions,
+  onHighlight,
+  onKeyboardNavigation,
+  restoreLastFocus,
+  selected
+}) => {
+  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 == null ? void 0 : onHighlight(idx);
+      setHighlightedIdx(idx);
+      if (fromKeyboard) {
+        lastFocus.current = idx;
+      }
+    },
+    [onHighlight]
+  );
+  const nextPageItemIdx = useCallback(
+    async (e, index) => {
+      const { id } = indexPositions[index];
+      let result;
+      if (id) {
+        const itemEl = document.getElementById(id);
+        const { current: containerEl } = containerRef;
+        if (itemEl && containerEl) {
+          result = e.key === PageDown ? pageDown(containerEl, itemEl, indexPositions, index) : await pageUp(containerEl, itemEl, indexPositions, index);
+        }
+      }
+      return result ?? index;
+    },
+    [containerRef, indexPositions]
+  );
+  const nextFocusableItemIdx = useCallback(
+    (key = ArrowDown, idx = key === ArrowDown ? -1 : indexPositions.length) => {
+      if (indexPositions.length === 0) {
+        return -1;
+      }
+      const indexOfSelectedItem = getIndexOfSelectedItem(
+        indexPositions,
+        selected
+      );
+      const startIdx = getStartIdx(
+        key,
+        idx,
+        indexOfSelectedItem,
+        indexPositions.length
+      );
+      let nextIdx = nextItemIdx(indexPositions.length, key, startIdx);
+      if (nextIdx === 0 && key === ArrowUp && !isFocusable(indexPositions[0])) {
+        return idx;
+      }
+      while (((key === ArrowDown || key === Home) && nextIdx < indexPositions.length || (key === ArrowUp || key === End) && nextIdx > 0) && !isFocusable(indexPositions[nextIdx])) {
+        nextIdx = nextItemIdx(indexPositions.length, key, nextIdx);
+      }
+      return nextIdx;
+    },
+    [indexPositions, selected]
+  );
+  const keyboardNavigation = useRef(false);
+  const ignoreFocus = useRef(false);
+  const setIgnoreFocus = useCallback(
+    (value) => ignoreFocus.current = value,
+    []
+  );
+  const handleFocus = useCallback(() => {
+    if (ignoreFocus.current) {
+      ignoreFocus.current = false;
+    } else {
+      keyboardNavigation.current = true;
+      if (indexPositions.length === 0) {
+        setHighlightedIndex(LIST_FOCUS_VISIBLE);
+      } else if (highlightedIndex !== -1) {
+        forceRender({});
+      } else if (restoreLastFocus) {
+        if (lastFocus.current !== -1) {
+          setHighlightedIndex(lastFocus.current);
+        } else {
+          const selectedItemIdx = getIndexOfSelectedItem(
+            indexPositions,
+            selected
+          );
+          if (selectedItemIdx !== -1) {
+            setHighlightedIndex(selectedItemIdx);
+          } else {
+            setHighlightedIndex(0);
+          }
+        }
+      } else if (hasSelection(selected)) {
+        const selectedItemIdx = getIndexOfSelectedItem(
+          indexPositions,
+          selected
+        );
+        setHighlightedIndex(selectedItemIdx);
+      } else if (disableHighlightOnFocus !== true) {
+        setHighlightedIndex(nextFocusableItemIdx());
+      }
+    }
+  }, [
+    disableHighlightOnFocus,
+    highlightedIndex,
+    indexPositions,
+    nextFocusableItemIdx,
+    restoreLastFocus,
+    selected,
+    setHighlightedIndex
+  ]);
+  const navigateChildItems = useCallback(
+    async (e) => {
+      const nextIdx = e.key === PageDown || e.key === PageUp ? await nextPageItemIdx(e, highlightedIndex) : nextFocusableItemIdx(e.key, highlightedIndex);
+      if (nextIdx !== highlightedIndex) {
+        setHighlightedIndex(nextIdx, true);
+      }
+      onKeyboardNavigation == null ? void 0 : onKeyboardNavigation(e, nextIdx);
+    },
+    [
+      highlightedIndex,
+      nextFocusableItemIdx,
+      nextPageItemIdx,
+      onKeyboardNavigation,
+      setHighlightedIndex
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (indexPositions.length > 0 && isNavigationKey(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        keyboardNavigation.current = true;
+        void navigateChildItems(e);
+      } else if (isCharacterKey(e)) {
+        keyboardNavigation.current = true;
+      }
+    },
+    [indexPositions, navigateChildItems]
+  );
+  const listProps = useMemo(() => {
+    return {
+      onBlur: (e) => {
+        const sourceTarget = e.target.closest(".saltList");
+        const destTarget = e.relatedTarget;
+        if (sourceTarget && !(sourceTarget == null ? void 0 : 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,
+    setHighlightedIndex,
+    setIgnoreFocus
+  ]);
+  return {
+    focusVisible: keyboardNavigation.current ? highlightedIndex : -1,
+    controlledHighlighting: isControlledHighlighting,
+    highlightedIndex,
+    setHighlightedIndex,
+    keyboardNavigation,
+    listProps,
+    setIgnoreFocus
+  };
+};
+
+export { LIST_FOCUS_VISIBLE, useKeyboardNavigation };
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist-es/common-hooks/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/common-hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  End,\n  Home,\n  isCharacterKey,\n  isNavigationKey,\n  PageDown,\n  PageUp,\n} from \"./keyUtils\";\nimport type {\n  NavigationHookProps,\n  NavigationHookResult,\n} from \"./navigationTypes\";\nimport {\n  getFirstSelectedItem,\n  hasSelection,\n  type SelectionStrategy,\n} from \"./selectionTypes\";\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    }\n    return idx;\n  }\n  if (idx === null) {\n    return 0;\n  }\n  if (idx === count - 1) {\n    return idx;\n  }\n  return idx + 1;\n}\n\nconst getIndexOfSelectedItem = (\n  items: CollectionItem<unknown>[],\n  selected?: CollectionItem<unknown> | null | CollectionItem<unknown>[],\n) => {\n  const selectedItem = getFirstSelectedItem(selected);\n  if (selectedItem) {\n    return items.indexOf(selectedItem);\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  }\n  if (key === Home) {\n    return -1;\n  }\n  if (idx !== -1) {\n    return idx;\n  }\n  return selectedIdx;\n};\n\nconst getItemRect = (item: CollectionItem<unknown>) => {\n  const el = document.getElementById(item.id);\n  if (el) {\n    return el.getBoundingClientRect();\n  }\n  throw Error(\n    `useKeyboardNavigation.getItemRect no element found for item  #${item?.id}`,\n  );\n};\n\nconst pageDown = (\n  containerEl: HTMLElement,\n  itemEl: HTMLElement,\n  indexPositions: CollectionItem<unknown>[],\n  index: number,\n): number | undefined => {\n  const { top: itemTop } = itemEl.getBoundingClientRect();\n  const { scrollTop, clientHeight, scrollHeight } = containerEl;\n  const lastIndexPosition = indexPositions.length - 1;\n  const newScrollTop = Math.min(\n    scrollTop + clientHeight,\n    scrollHeight - clientHeight,\n  );\n  if (newScrollTop !== scrollTop && index < lastIndexPosition) {\n    containerEl.scrollTo(0, newScrollTop);\n    // Might need to do this in a timeout, in case virtualized content has rendered\n    let nextIdx = index;\n    let nextRect: DOMRect;\n    do {\n      nextIdx += 1;\n      nextRect = getItemRect(indexPositions[nextIdx]);\n    } while (nextRect.top < itemTop && nextIdx < lastIndexPosition);\n    return nextIdx;\n  }\n};\n\nconst pageUp = async (\n  containerEl: HTMLElement,\n  itemEl: HTMLElement,\n  indexPositions: CollectionItem<unknown>[],\n  index: number,\n): Promise<number | undefined> => {\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    containerEl.scrollTo(0, newScrollTop);\n    return new Promise((resolve) => {\n      // We must defer this operation until after render. If Items are virtualized.\n      // we need to allow them to be rendered.\n      requestAnimationFrame(() => {\n        let nextIdx = index;\n        let nextRect: DOMRect;\n        do {\n          nextIdx -= 1;\n          nextRect = getItemRect(indexPositions[nextIdx]);\n        } while (nextRect.top > itemTop && nextIdx > 0);\n        resolve(nextIdx);\n      });\n    });\n  }\n};\n\nconst isLeaf = <Item>(item: CollectionItem<Item>): boolean =>\n  !item.header && !item.childNodes;\nconst isFocusable = <Item>(item: CollectionItem<Item>) =>\n  isLeaf(item) || item.expanded !== undefined;\n\nexport const useKeyboardNavigation = <\n  Item,\n  Selection extends SelectionStrategy,\n>({\n  containerRef,\n  defaultHighlightedIndex = -1,\n  disableHighlightOnFocus,\n  highlightedIndex: highlightedIndexProp,\n  indexPositions,\n  onHighlight,\n  onKeyboardNavigation,\n  restoreLastFocus,\n  selected,\n}: NavigationHookProps<Item, Selection>): 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],\n  );\n\n  const nextPageItemIdx = useCallback(\n    async (e: KeyboardEvent<HTMLElement>, index: number): Promise<number> => {\n      const { id } = indexPositions[index];\n      let result: number | undefined;\n      if (id) {\n        const itemEl = document.getElementById(id);\n        const { current: containerEl } = containerRef;\n        if (itemEl && containerEl) {\n          result =\n            e.key === PageDown\n              ? pageDown(containerEl, itemEl, indexPositions, index)\n              : await pageUp(containerEl, itemEl, indexPositions, index);\n        }\n      }\n      return result ?? index;\n    },\n    [containerRef, indexPositions],\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (\n      key = ArrowDown,\n      idx: number = key === ArrowDown ? -1 : indexPositions.length,\n    ) => {\n      if (indexPositions.length === 0) {\n        return -1;\n      }\n      const indexOfSelectedItem = getIndexOfSelectedItem(\n        indexPositions,\n        selected,\n      );\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 startIdx = getStartIdx(\n        key,\n        idx,\n        indexOfSelectedItem,\n        indexPositions.length,\n      );\n\n      let nextIdx = nextItemIdx(indexPositions.length, key, startIdx);\n      // Guard against returning zero, when first item is a header or group\n      if (nextIdx === 0 && key === ArrowUp && !isFocusable(indexPositions[0])) {\n        return idx;\n      }\n      while (\n        (((key === ArrowDown || key === Home) &&\n          nextIdx < indexPositions.length) ||\n          ((key === ArrowUp || key === End) && nextIdx > 0)) &&\n        !isFocusable(indexPositions[nextIdx])\n      ) {\n        nextIdx = nextItemIdx(indexPositions.length, key, nextIdx);\n      }\n      return nextIdx;\n    },\n    [indexPositions, 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 = useCallback(\n    (value: boolean) => (ignoreFocus.current = value),\n    [],\n  );\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 (indexPositions.length === 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(\n            indexPositions,\n            selected,\n          );\n          if (selectedItemIdx !== -1) {\n            setHighlightedIndex(selectedItemIdx);\n          } else {\n            setHighlightedIndex(0);\n          }\n        }\n      } else if (hasSelection(selected)) {\n        const selectedItemIdx = getIndexOfSelectedItem(\n          indexPositions,\n          selected,\n        );\n        setHighlightedIndex(selectedItemIdx);\n      } else if (disableHighlightOnFocus !== true) {\n        setHighlightedIndex(nextFocusableItemIdx());\n      }\n    }\n  }, [\n    disableHighlightOnFocus,\n    highlightedIndex,\n    indexPositions,\n    nextFocusableItemIdx,\n    restoreLastFocus,\n    selected,\n    setHighlightedIndex,\n  ]);\n\n  const navigateChildItems = useCallback(\n    async (e: KeyboardEvent<HTMLElement>) => {\n      const nextIdx =\n        e.key === PageDown || e.key === PageUp\n          ? await nextPageItemIdx(e, 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<HTMLElement>) => {\n      if (indexPositions.length > 0 && isNavigationKey(e)) {\n        e.preventDefault();\n        e.stopPropagation();\n        keyboardNavigation.current = true;\n        void navigateChildItems(e);\n      } else if (isCharacterKey(e)) {\n        keyboardNavigation.current = true;\n      }\n    },\n    [indexPositions, navigateChildItems],\n  );\n\n  const listProps = useMemo(() => {\n    return {\n      onBlur: (e: FocusEvent) => {\n        //TODO no direct ref to List\n        const sourceTarget = (e.target as HTMLElement).closest(\".saltList\");\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    setHighlightedIndex,\n    setIgnoreFocus,\n  ]);\n\n  return {\n    focusVisible: keyboardNavigation.current ? highlightedIndex : -1,\n    controlledHighlighting: isControlledHighlighting,\n    highlightedIndex,\n    setHighlightedIndex,\n    keyboardNavigation,\n    listProps,\n    setIgnoreFocus,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/common-hooks/useKeyboardNavigationPanel.js

@@ -0,0 +1,148 @@
+import { useControlled } from '@salt-ds/core';
+import { useRef, useCallback, useMemo } from 'react';
+
+function nextItemIdx(count, direction, idx, cycleFocus = false) {
+  if (direction === "BWD") {
+    if (idx > 0) {
+      return idx - 1;
+    }
+    return cycleFocus ? count - 1 : idx;
+  }
+  if (idx === null) {
+    return 0;
+  }
+  if (idx === count - 1) {
+    return cycleFocus ? 0 : idx;
+  }
+  return idx + 1;
+}
+const isLeaf = (item) => !item.header && !item.childNodes;
+const isFocusable = (item) => (isLeaf(item) || item.expanded !== void 0) && item.focusable !== false;
+const useKeyboardNavigationPanel = ({
+  cycleFocus = false,
+  defaultHighlightedIndex: defaultHighlightedIdx = -1,
+  focusOnHighlight = false,
+  highlightedIndex: highlightedIdxProp,
+  indexPositions,
+  onHighlight,
+  onKeyboardNavigation
+}) => {
+  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = useControlled({
+    controlled: highlightedIdxProp,
+    default: defaultHighlightedIdx,
+    name: "UseKeyboardNavigation"
+  });
+  const keyboardNavigation = useRef(true);
+  const ignoreFocus = useRef(false);
+  const setIgnoreFocus = useCallback(
+    (value) => ignoreFocus.current = value,
+    []
+  );
+  const setHighlightedIndex = useCallback(
+    (idx) => {
+      onHighlight == null ? void 0 : onHighlight(idx);
+      setHighlightedIdx(idx);
+      if (focusOnHighlight && idx !== -1) {
+        const { id } = indexPositions[idx];
+        const formField = document.getElementById(id);
+        const targetEl = formField == null ? void 0 : formField.querySelector("[tabindex]");
+        setIgnoreFocus(true);
+        targetEl == null ? void 0 : targetEl.focus();
+      }
+    },
+    [focusOnHighlight, indexPositions, onHighlight, setIgnoreFocus]
+  );
+  const nextFocusableItemIdx = useCallback(
+    (direction = "FWD", idx = direction === "FWD" ? -1 : indexPositions.length) => {
+      let nextIdx = nextItemIdx(
+        indexPositions.length,
+        direction,
+        idx,
+        cycleFocus
+      );
+      while ((direction === "FWD" && nextIdx < indexPositions.length || direction === "BWD" && nextIdx > 0) && !isFocusable(indexPositions[nextIdx])) {
+        nextIdx = nextItemIdx(
+          indexPositions.length,
+          direction,
+          nextIdx,
+          cycleFocus
+        );
+      }
+      return nextIdx;
+    },
+    [cycleFocus, indexPositions]
+  );
+  const handleFocus = useCallback(() => {
+    if (ignoreFocus.current) {
+      ignoreFocus.current = false;
+    } else {
+      setHighlightedIndex(nextFocusableItemIdx());
+    }
+  }, [nextFocusableItemIdx, setHighlightedIndex]);
+  const navigateChildItems = useCallback(
+    (e) => {
+      const direction = e.shiftKey ? "BWD" : "FWD";
+      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
+      console.log(`nextFocusableItem from ${highlightedIdx} is ${nextIdx}`);
+      if (nextIdx !== highlightedIdx) {
+        setHighlightedIndex(nextIdx);
+        onKeyboardNavigation == null ? void 0 : onKeyboardNavigation(e, nextIdx);
+      }
+    },
+    [
+      highlightedIdx,
+      nextFocusableItemIdx,
+      onKeyboardNavigation,
+      setHighlightedIndex
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      if (indexPositions.length > 0 && evt.key === "Tab") {
+        evt.preventDefault();
+        evt.stopPropagation();
+        keyboardNavigation.current = true;
+        navigateChildItems(evt);
+      }
+    },
+    [indexPositions, navigateChildItems]
+  );
+  const listProps = useMemo(
+    () => ({
+      onBlur: () => {
+      },
+      onFocus: handleFocus,
+      // Does this have to be capture ? We'll have to change the types
+      // onKeyDownCapture: handleKeyDown,
+      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 = true;
+        setIgnoreFocus(false);
+        setHighlightedIndex(-1);
+      }
+    }),
+    [handleFocus, handleKeyDown, setHighlightedIndex, setIgnoreFocus]
+  );
+  return {
+    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,
+    controlledHighlighting: isControlledHighlighting,
+    highlightedIndex: highlightedIdx,
+    setHighlightedIndex,
+    keyboardNavigation,
+    listProps,
+    setIgnoreFocus
+  };
+};
+
+export { useKeyboardNavigationPanel };
+//# sourceMappingURL=useKeyboardNavigationPanel.js.map

package/dist-es/common-hooks/useKeyboardNavigationPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigationPanel.js","sources":["../src/common-hooks/useKeyboardNavigationPanel.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback, useMemo, useRef } from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport type { NavigationHookResult, NavigationProps } from \"./navigationTypes\";\n\ntype NavigationDirection = \"FWD\" | \"BWD\";\n\nfunction nextItemIdx(\n  count: number,\n  direction: NavigationDirection,\n  idx: number,\n  cycleFocus = false,\n) {\n  if (direction === \"BWD\") {\n    if (idx > 0) {\n      return idx - 1;\n    }\n    return cycleFocus ? count - 1 : idx;\n  }\n  if (idx === null) {\n    return 0;\n  }\n  if (idx === count - 1) {\n    return cycleFocus ? 0 : idx;\n  }\n  return idx + 1;\n}\n\nconst isLeaf = <Item>(item: CollectionItem<Item>): boolean =>\n  !item.header && !item.childNodes;\nconst isFocusable = <Item>(item: CollectionItem<Item>) =>\n  (isLeaf(item) || item.expanded !== undefined) && item.focusable !== false;\n\n// we need a way to set highlightedIdx when selection changes\nexport const useKeyboardNavigationPanel = ({\n  cycleFocus = false,\n  defaultHighlightedIndex: defaultHighlightedIdx = -1,\n  focusOnHighlight = false,\n  highlightedIndex: highlightedIdxProp,\n  indexPositions,\n  onHighlight,\n  onKeyboardNavigation,\n}: NavigationProps): NavigationHookResult => {\n  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] =\n    useControlled({\n      controlled: highlightedIdxProp,\n      default: defaultHighlightedIdx,\n      name: \"UseKeyboardNavigation\",\n    });\n\n  // does this belong here or should it be a method passed in?\n  const keyboardNavigation = useRef(true);\n  const ignoreFocus = useRef<boolean>(false);\n  const setIgnoreFocus = useCallback(\n    (value: boolean) => (ignoreFocus.current = value),\n    [],\n  );\n\n  const setHighlightedIndex = useCallback(\n    (idx: number) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n      if (focusOnHighlight && idx !== -1) {\n        const { id } = indexPositions[idx];\n        const formField = document.getElementById(id);\n        const targetEl = formField?.querySelector(\"[tabindex]\") as HTMLElement;\n        setIgnoreFocus(true);\n        targetEl?.focus();\n      }\n    },\n    [focusOnHighlight, indexPositions, onHighlight, setIgnoreFocus],\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (\n      direction: NavigationDirection = \"FWD\",\n      idx = direction === \"FWD\" ? -1 : indexPositions.length,\n    ) => {\n      let nextIdx = nextItemIdx(\n        indexPositions.length,\n        direction,\n        idx,\n        cycleFocus,\n      );\n      while (\n        ((direction === \"FWD\" && nextIdx < indexPositions.length) ||\n          (direction === \"BWD\" && nextIdx > 0)) &&\n        !isFocusable(indexPositions[nextIdx])\n      ) {\n        nextIdx = nextItemIdx(\n          indexPositions.length,\n          direction,\n          nextIdx,\n          cycleFocus,\n        );\n      }\n      return nextIdx;\n    },\n    [cycleFocus, indexPositions],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (ignoreFocus.current) {\n      ignoreFocus.current = false;\n    } else {\n      setHighlightedIndex(nextFocusableItemIdx());\n    }\n  }, [nextFocusableItemIdx, setHighlightedIndex]);\n\n  const navigateChildItems = useCallback(\n    (e: KeyboardEvent<HTMLElement>) => {\n      const direction: NavigationDirection = e.shiftKey ? \"BWD\" : \"FWD\";\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      console.log(`nextFocusableItem from ${highlightedIdx} is ${nextIdx}`);\n      if (nextIdx !== highlightedIdx) {\n        setHighlightedIndex(nextIdx);\n        // What exactly is the point of this ?\n        onKeyboardNavigation?.(e, nextIdx);\n      }\n    },\n    [\n      highlightedIdx,\n      nextFocusableItemIdx,\n      onKeyboardNavigation,\n      setHighlightedIndex,\n    ],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if (indexPositions.length > 0 && evt.key === \"Tab\") {\n        evt.preventDefault();\n        evt.stopPropagation();\n        keyboardNavigation.current = true;\n        navigateChildItems(evt);\n      }\n    },\n    [indexPositions, navigateChildItems],\n  );\n\n  const listProps = useMemo(\n    () => ({\n      onBlur: () => {\n        // This sets highlightedIdx to -1 before a click on ListItem can effect selection\n        // maybe in a timeout\n        // setHighlightedIndex(-1);\n      },\n      onFocus: handleFocus,\n      // Does this have to be capture ? We'll have to change the types\n      // onKeyDownCapture: handleKeyDown,\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 = true;\n        setIgnoreFocus(false);\n        setHighlightedIndex(-1);\n      },\n    }),\n    [handleFocus, handleKeyDown, setHighlightedIndex, setIgnoreFocus],\n  );\n\n  return {\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    controlledHighlighting: isControlledHighlighting,\n    highlightedIndex: highlightedIdx,\n    setHighlightedIndex,\n    keyboardNavigation,\n    listProps,\n    setIgnoreFocus,\n  };\n};\n"],"names":[],"mappings":"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"}