@vuu-ui/vuu-ui-controls 0.0.26

package/esm/toolbar/Toolbar.js

@@ -0,0 +1,88 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId, asReactElements } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import React, { useRef, useMemo } from 'react';
+import { OverflowContainer } from '../overflow-container/OverflowContainer.js';
+import { useToolbar } from './useToolbar.js';
+import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import toolbarCss from './Toolbar.css.js';
+
+const classBase = "vuuToolbar";
+const Toolbar = ({
+  activeItemIndex: activeItemIndexProp,
+  alignItems = "start",
+  defaultActiveItemIndex,
+  children,
+  className,
+  id: idProp,
+  onActiveChange,
+  onNavigateOutOfBounds,
+  orientation = "horizontal",
+  selectionStrategy = "none",
+  showSeparators = false,
+  ...props
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-toolbar",
+    css: toolbarCss,
+    window: targetWindow
+  });
+  const rootRef = useRef(null);
+  const {
+    activeItemIndex,
+    focusableIdx,
+    focusVisible,
+    itemProps,
+    ...toolbarHook
+  } = useToolbar({
+    activeItemIndex: activeItemIndexProp,
+    defaultActiveItemIndex,
+    containerRef: rootRef,
+    onActiveChange,
+    onNavigateOutOfBounds,
+    orientation,
+    selectionStrategy
+  });
+  const id = useId(idProp);
+  const items = useMemo(
+    () => asReactElements(children).map((child, index) => {
+      const {
+        id: itemId = `${id}-tab-${index}`,
+        className: itemClassName,
+        ...ownProps
+      } = child.props;
+      const selected = activeItemIndex.includes(index);
+      return React.cloneElement(child, {
+        ...forwardCallbackProps(ownProps, itemProps),
+        className: cx("vuuToolbarItem", itemClassName),
+        "data-overflow-priority": selected ? "1" : void 0,
+        id: itemId,
+        key: index,
+        "aria-selected": selected,
+        tabIndex: focusableIdx === index ? 0 : -1
+      });
+    }),
+    [activeItemIndex, children, focusableIdx, id, itemProps]
+  );
+  return /* @__PURE__ */ jsx(
+    OverflowContainer,
+    {
+      ...props,
+      ...toolbarHook.containerProps,
+      className: cx(className, classBase, `${classBase}-${orientation}`, {
+        [`${classBase}-alignCenter`]: alignItems === "center",
+        [`${classBase}-alignEnd`]: alignItems === "end",
+        [`${classBase}-withSeparators`]: showSeparators
+      }),
+      ...props,
+      ref: rootRef,
+      children: items
+    }
+  );
+};
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

package/esm/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n  OverflowContainer,\n  OverflowContainerProps,\n} from \"../overflow-container\";\nimport { useToolbar } from \"./useToolbar\";\nimport { forwardCallbackProps } from \"../utils\";\n\nimport toolbarCss from \"./Toolbar.css\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n} from \"../common-hooks\";\n\nconst classBase = \"vuuToolbar\";\n\nexport type ActiveItemChangeHandler = (itemIndex: number[]) => void;\n\nexport type NavigationOutOfBoundsHandler = (direction: \"start\" | \"end\") => void;\nexport interface ToolbarProps extends OverflowContainerProps {\n  activeItemIndex?: number[];\n  alignItems?: \"start\" | \"center\" | \"end\";\n  defaultActiveItemIndex?: number[];\n  onActiveChange?: ActiveItemChangeHandler;\n  /**\n   * Indicates that user has used Arrow key navigation to move beyond the\n   * last or before the first item. A higher level component may want to\n   * use this to implement a seamless navigation across components.\n   */\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;\n  showSeparators?: boolean;\n}\n\nexport const Toolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  alignItems = \"start\",\n  defaultActiveItemIndex,\n  children,\n  className,\n  id: idProp,\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation = \"horizontal\",\n  selectionStrategy = \"none\",\n  showSeparators = false,\n  ...props\n}: ToolbarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toolbar\",\n    css: toolbarCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeItemIndex,\n    focusableIdx,\n    focusVisible,\n    itemProps,\n    ...toolbarHook\n  } = useToolbar({\n    activeItemIndex: activeItemIndexProp,\n    defaultActiveItemIndex,\n    containerRef: rootRef,\n    onActiveChange,\n    onNavigateOutOfBounds,\n    orientation,\n    selectionStrategy,\n  });\n\n  const id = useId(idProp);\n\n  const items = useMemo(\n    () =>\n      asReactElements(children).map((child, index) => {\n        const {\n          id: itemId = `${id}-tab-${index}`,\n          className: itemClassName,\n          ...ownProps\n        } = child.props;\n        const selected = activeItemIndex.includes(index);\n        return React.cloneElement(child, {\n          ...forwardCallbackProps(ownProps, itemProps),\n          className: cx(\"vuuToolbarItem\", itemClassName),\n          \"data-overflow-priority\": selected ? \"1\" : undefined,\n          id: itemId,\n          key: index,\n          \"aria-selected\": selected,\n          tabIndex: focusableIdx === index ? 0 : -1,\n        });\n      }),\n    [activeItemIndex, children, focusableIdx, id, itemProps]\n  );\n\n  return (\n    <OverflowContainer\n      {...props}\n      {...toolbarHook.containerProps}\n      className={cx(className, classBase, `${classBase}-${orientation}`, {\n        [`${classBase}-alignCenter`]: alignItems === \"center\",\n        [`${classBase}-alignEnd`]: alignItems === \"end\",\n        [`${classBase}-withSeparators`]: showSeparators,\n      })}\n      {...props}\n      ref={rootRef}\n    >\n      {items}\n    </OverflowContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/toolbar/toolbar-dom-utils.js

@@ -0,0 +1,15 @@
+import { getElementDataIndex } from '@vuu-ui/vuu-utils';
+
+const getIndexOfItem = (container, query) => {
+  if (container) {
+    const targetTab = container.querySelector(
+      `[data-index]:has(${query})`
+    );
+    return getElementDataIndex(targetTab);
+  }
+  return -1;
+};
+const getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditableLabel-editing");
+
+export { getIndexOfEditedItem, getIndexOfItem };
+//# sourceMappingURL=toolbar-dom-utils.js.map

package/esm/toolbar/toolbar-dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-dom-utils.js","sources":["../../src/toolbar/toolbar-dom-utils.ts"],"sourcesContent":["import { getElementDataIndex } from \"@vuu-ui/vuu-utils\";\n\nexport const getIndexOfItem = (\n  container: HTMLElement | null,\n  query: string\n) => {\n  if (container) {\n    const targetTab = container.querySelector(\n      `[data-index]:has(${query})`\n    ) as HTMLElement;\n    return getElementDataIndex(targetTab);\n  }\n  return -1;\n};\n\nexport const getIndexOfSelectedTab = (container: HTMLElement | null) =>\n  getIndexOfItem(container, '[aria-selected=\"true\"]');\n\nexport const getIndexOfEditedItem = (container: HTMLElement | null) =>\n  getIndexOfItem(container, \".vuuEditableLabel-editing\");\n"],"names":[],"mappings":";;AAEa,MAAA,cAAA,GAAiB,CAC5B,SAAA,EACA,KACG,KAAA;AACH,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,MAAM,YAAY,SAAU,CAAA,aAAA;AAAA,MAC1B,oBAAoB,KAAK,CAAA,CAAA,CAAA;AAAA,KAC3B,CAAA;AACA,IAAA,OAAO,oBAAoB,SAAS,CAAA,CAAA;AAAA,GACtC;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,EAAA;AAKO,MAAM,oBAAuB,GAAA,CAAC,SACnC,KAAA,cAAA,CAAe,WAAW,2BAA2B;;;;"}

package/esm/toolbar/useKeyboardNavigation.js

@@ -0,0 +1,303 @@
+import { useControlled } from '@salt-ds/core';
+import { dispatchMouseEvent, Home, End, ArrowLeft, ArrowRight, ArrowUp, ArrowDown, getFocusableElement, getElementDataIndex, getClosest } from '@vuu-ui/vuu-utils';
+import { useRef, useState, useCallback } from 'react';
+import { getIndexOfEditedItem } from './toolbar-dom-utils.js';
+
+const navigation = {
+  horizontal: {
+    [Home]: "start",
+    [End]: "end",
+    [ArrowLeft]: "bwd",
+    [ArrowRight]: "fwd"
+  },
+  vertical: {
+    [Home]: "start",
+    [End]: "end",
+    [ArrowUp]: "bwd",
+    [ArrowDown]: "fwd"
+  }
+};
+const isOverflowIndicator = (el) => el !== null && el.dataset.index === "overflow";
+const itemIsNotFocusable = (container, direction, indexCount, nextIdx, hasOverflowedItem) => {
+  if (container) {
+    const withinRangeBwd = direction === "bwd" && nextIdx > 0;
+    const withinRangeFwd = direction === "fwd" && nextIdx < indexCount;
+    const withinRange = withinRangeBwd || withinRangeFwd;
+    const nextElement = getElementByPosition(container, nextIdx, true);
+    const isOverflowedItem = hasOverflowedItem && !isNonWrappedElement(nextElement);
+    const isHiddenOverflowIndicator = !hasOverflowedItem && isOverflowIndicator(nextElement);
+    hasOverflowedItem && !isNonWrappedElement(nextElement);
+    return withinRange && (isOverflowedItem || isHiddenOverflowIndicator);
+  } else {
+    return false;
+  }
+};
+const isNavigationKey = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
+const isMenuActivationKey = (key) => key === ArrowDown;
+function nextItemIdx(count, direction, idx) {
+  if (direction === "start") {
+    return 0;
+  } else if (direction === "end") {
+    return count - 1;
+  } else if (direction === "bwd") {
+    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 isNonWrappedElement = (element) => element !== null && !element.classList.contains("wrapped");
+const getToolbarItems = (container) => Array.from(container.querySelectorAll("[data-index]"));
+const getIndexOfOverflowItem = (container) => {
+  if (container === null) {
+    return -1;
+  } else {
+    const targets = getToolbarItems(container);
+    const indexValues = targets.map((el) => el.dataset.index);
+    return indexValues.indexOf("overflow");
+  }
+};
+const getElementByPosition = (container, index, includeOverflowInd = false) => {
+  if (container !== null) {
+    const targets = getToolbarItems(container);
+    const target = targets[index];
+    if (!includeOverflowInd && isOverflowIndicator(target)) {
+      return null;
+    } else {
+      return target;
+    }
+  }
+  return null;
+};
+const useKeyboardNavigation = ({
+  containerRef,
+  defaultHighlightedIdx = -1,
+  highlightedIdx: highlightedIdxProp,
+  onNavigateOutOfBounds,
+  orientation
+}) => {
+  const mouseClickPending = useRef(false);
+  const focusedRef = useRef(-1);
+  const [hasFocus, setHasFocus] = useState(false);
+  const [highlightedIdx, _setHighlightedIdx] = useControlled({
+    controlled: highlightedIdxProp,
+    default: defaultHighlightedIdx,
+    name: "UseKeyboardNavigation"
+  });
+  const setHighlightedIdx = useCallback(
+    (value) => {
+      _setHighlightedIdx(focusedRef.current = value);
+    },
+    [_setHighlightedIdx]
+  );
+  const keyboardNavigation = useRef(false);
+  const focusItem = useCallback(
+    (itemIndex, immediateFocus = false, withKeyboard, delay = 70) => {
+      console.log(`focus item ${itemIndex}`);
+      setHighlightedIdx(itemIndex);
+      if (withKeyboard === true && !keyboardNavigation.current) {
+        keyboardNavigation.current = true;
+      }
+      const setFocus = () => {
+        const element = getElementByPosition(
+          containerRef.current,
+          itemIndex,
+          true
+        );
+        if (element) {
+          const focussableElement = getFocusableElement(element);
+          focussableElement?.focus();
+        }
+      };
+      if (immediateFocus) {
+        setFocus();
+      } else {
+        setTimeout(setFocus, delay);
+      }
+    },
+    [containerRef, setHighlightedIdx]
+  );
+  const onFocus = (e) => {
+    if (focusedRef.current === -1) {
+      if (e.target.tabIndex === 0) {
+        const index = getElementDataIndex(getClosest(e.target, "index"));
+        setHighlightedIdx(index);
+      } else if (e.target.tabIndex === -1) ; else {
+        const index = getIndexOfEditedItem(containerRef.current);
+        if (index !== -1) {
+          requestAnimationFrame(() => {
+            setHighlightedIdx(index);
+          });
+        }
+      }
+    }
+  };
+  const getIndexCount = useCallback(
+    () => containerRef.current?.querySelectorAll(`[data-index]`).length ?? 0,
+    [containerRef]
+  );
+  const nextFocusableItemIdx = useCallback(
+    (direction = "fwd", idx) => {
+      const indexCount = getIndexCount();
+      const index = typeof idx === "number" ? idx : indexCount;
+      let nextIdx = nextItemIdx(indexCount, direction, index);
+      const nextDirection = direction === "start" ? "fwd" : direction === "end" ? "bwd" : direction;
+      const hasOverflowedItem = containerRef.current?.querySelector(
+        ".vuuOverflowContainer-wrapContainer-overflowed"
+      ) != null;
+      while (itemIsNotFocusable(
+        containerRef.current,
+        nextDirection,
+        indexCount,
+        nextIdx,
+        hasOverflowedItem
+      )) {
+        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);
+        if (newIdx === nextIdx) {
+          return index;
+        } else {
+          nextIdx = newIdx;
+        }
+      }
+      return nextIdx;
+    },
+    [containerRef, getIndexCount]
+  );
+  const navigateChildItems = useCallback(
+    (e) => {
+      const direction = navigation[orientation][e.key];
+      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
+      console.log(`highlightedIdx = ${highlightedIdx}, nextIdx = ${nextIdx} `);
+      if (nextIdx !== highlightedIdx) {
+        const immediateFocus = true;
+        focusItem(nextIdx, immediateFocus);
+      } else {
+        onNavigateOutOfBounds?.(direction === "bwd" ? "start" : "end");
+      }
+    },
+    [
+      orientation,
+      nextFocusableItemIdx,
+      highlightedIdx,
+      focusItem,
+      onNavigateOutOfBounds
+    ]
+  );
+  const highlightedItemHasMenu = useCallback(() => {
+    const el = getElementByPosition(containerRef.current, highlightedIdx);
+    if (el) {
+      return el.querySelector(".vuuPopupMenu") != null;
+    }
+    return false;
+  }, [containerRef, highlightedIdx]);
+  const highlightedItemInEditState = useCallback(() => {
+    const el = getElementByPosition(containerRef.current, highlightedIdx);
+    if (el) {
+      return el.querySelector(".vuuEditableLabel-input") != null;
+    }
+    return false;
+  }, [containerRef, highlightedIdx]);
+  const activateItemMenu = useCallback(() => {
+    const el = getElementByPosition(containerRef.current, highlightedIdx);
+    const menuEl = el?.querySelector(".vuuPopupMenu");
+    if (menuEl) {
+      dispatchMouseEvent(menuEl, "click");
+    }
+    return false;
+  }, [containerRef, highlightedIdx]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {
+        e.preventDefault();
+        if (keyboardNavigation.current) {
+          navigateChildItems(e);
+        } else {
+          keyboardNavigation.current = true;
+          navigateChildItems(e);
+        }
+      } else if (isMenuActivationKey(e.key) && highlightedItemHasMenu() && !highlightedItemInEditState()) {
+        activateItemMenu();
+      }
+    },
+    [
+      activateItemMenu,
+      getIndexCount,
+      highlightedItemHasMenu,
+      highlightedItemInEditState,
+      navigateChildItems,
+      orientation
+    ]
+  );
+  const handleItemClick = (_, itemIndex) => {
+    setHighlightedIdx(itemIndex);
+  };
+  const handleFocus = useCallback(() => {
+    if (!hasFocus) {
+      setHasFocus(true);
+      if (!mouseClickPending.current) {
+        keyboardNavigation.current = true;
+      } else {
+        mouseClickPending.current = false;
+      }
+    }
+  }, [hasFocus]);
+  const handleContainerMouseDown = useCallback(() => {
+    if (!hasFocus) {
+      mouseClickPending.current = true;
+    }
+    keyboardNavigation.current = false;
+  }, [hasFocus]);
+  const handleOverflowMenuClose = useCallback(
+    (closeReason) => {
+      if (closeReason?.type === "escape") {
+        const index = getIndexOfOverflowItem(containerRef.current);
+        if (index !== -1) {
+          focusItem(index);
+        }
+      }
+    },
+    [containerRef, focusItem]
+  );
+  const containerProps = {
+    onBlur: (e) => {
+      const sourceTarget = e.target.closest(".vuuToolbar");
+      const destTarget = e.relatedTarget;
+      if (sourceTarget && !sourceTarget?.contains(destTarget)) {
+        setHighlightedIdx(-1);
+        setHasFocus(false);
+      }
+    },
+    onMouseDownCapture: handleContainerMouseDown,
+    onFocus: handleFocus,
+    onMouseLeave: () => {
+      keyboardNavigation.current = true;
+      setHighlightedIdx(-1);
+      mouseClickPending.current = false;
+    }
+  };
+  return {
+    containerProps,
+    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,
+    focusIsWithinComponent: hasFocus,
+    highlightedIdx,
+    focusableIdx: 0,
+    focusItem,
+    onClick: handleItemClick,
+    onFocus,
+    onKeyDown: handleKeyDown,
+    onOverflowMenuClose: handleOverflowMenuClose,
+    setHighlightedIdx
+  };
+};
+
+export { useKeyboardNavigation };
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/esm/toolbar/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../src/toolbar/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  dispatchMouseEvent,\n  getClosest,\n  getElementDataIndex,\n  getFocusableElement,\n  orientationType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowLeft,\n  ArrowRight,\n  Home,\n  End,\n} from \"@vuu-ui/vuu-utils\";\nimport { getIndexOfEditedItem } from \"./toolbar-dom-utils\";\nimport { NavigationOutOfBoundsHandler } from \"./Toolbar\";\nimport { PopupCloseCallback } from \"@vuu-ui/vuu-popups\";\n\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n  horizontal: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowLeft]: \"bwd\",\n    [ArrowRight]: \"fwd\",\n  } as directionMap,\n  vertical: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowUp]: \"bwd\",\n    [ArrowDown]: \"fwd\",\n  } as directionMap,\n};\n\nconst isOverflowIndicator = (el: HTMLElement | null) =>\n  el !== null && el.dataset.index === \"overflow\";\n\nconst itemIsNotFocusable = (\n  container: HTMLElement | null,\n  direction: \"bwd\" | \"fwd\",\n  indexCount: number,\n  nextIdx: number,\n  hasOverflowedItem: boolean\n) => {\n  if (container) {\n    const withinRangeBwd = direction === \"bwd\" && nextIdx > 0;\n    const withinRangeFwd = direction === \"fwd\" && nextIdx < indexCount;\n    const withinRange = withinRangeBwd || withinRangeFwd;\n    const nextElement = getElementByPosition(container, nextIdx, true);\n    const isOverflowedItem =\n      hasOverflowedItem && !isNonWrappedElement(nextElement);\n    const isHiddenOverflowIndicator =\n      !hasOverflowedItem && isOverflowIndicator(nextElement);\n    hasOverflowedItem && !isNonWrappedElement(nextElement);\n    return withinRange && (isOverflowedItem || isHiddenOverflowIndicator);\n  } else {\n    return false;\n  }\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\"\n) => navigation[orientation][key] !== undefined;\n\nconst isMenuActivationKey = (key: string) => key === ArrowDown;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n  if (direction === \"start\") {\n    return 0;\n  } else if (direction === \"end\") {\n    return count - 1;\n  } else if (direction === \"bwd\") {\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 isNonWrappedElement = (element: HTMLElement | null) =>\n  element !== null && !element.classList.contains(\"wrapped\");\n\nconst getToolbarItems = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\"[data-index]\")) as HTMLElement[];\n\nconst getIndexOfOverflowItem = (container: HTMLElement | null) => {\n  if (container === null) {\n    return -1;\n  } else {\n    const targets = getToolbarItems(container);\n    const indexValues = targets.map((el) => el.dataset.index);\n    return indexValues.indexOf(\"overflow\");\n  }\n};\n\n// Get an OverflowItem based on data-index\nconst getElementByPosition = (\n  container: HTMLElement | null,\n  index: number,\n  includeOverflowInd = false\n) => {\n  if (container !== null) {\n    const targets = getToolbarItems(container);\n    const target = targets[index];\n    if (!includeOverflowInd && isOverflowIndicator(target)) {\n      return null;\n    } else {\n      return target;\n    }\n  }\n  return null;\n};\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface ToolbarNavigationHookProps {\n  containerRef: RefObject<HTMLElement>;\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  orientation: orientationType;\n}\n\ninterface ToolbarNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  focusableIdx: number;\n  highlightedIdx: number;\n  focusItem: (\n    itemIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean,\n    delay?: number\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: ReactMouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  onOverflowMenuClose?: PopupCloseCallback;\n  setHighlightedIdx: (highlightedIndex: number) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  containerRef,\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  onNavigateOutOfBounds,\n  orientation,\n}: ToolbarNavigationHookProps): ToolbarNavigationHookResult => {\n  const mouseClickPending = useRef(false);\n  /** tracks the highlighted index */\n  const focusedRef = useRef<number>(-1);\n  const [hasFocus, setHasFocus] = useState(false);\n  const [highlightedIdx, _setHighlightedIdx] = useControlled({\n    controlled: highlightedIdxProp,\n    default: defaultHighlightedIdx,\n    name: \"UseKeyboardNavigation\",\n  });\n\n  const setHighlightedIdx = useCallback(\n    (value: number) => {\n      _setHighlightedIdx((focusedRef.current = value));\n    },\n    [_setHighlightedIdx]\n  );\n\n  const keyboardNavigation = useRef(false);\n\n  const focusItem = useCallback(\n    (\n      itemIndex: number,\n      immediateFocus = false,\n      withKeyboard?: boolean,\n      delay = 70\n    ) => {\n      // The timeout is important in two scenarios:\n      // 1) where tab has overflowed and is being selected from overflow menu.\n      // We must not focus it until the overflow mechanism + render has restored\n      // it to the main display.\n      // 2) when we are focussing a new tab\n      // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n      // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n      // styled by css class) focus style will briefly linger on both.\n      console.log(`focus item ${itemIndex}`);\n      setHighlightedIdx(itemIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const element = getElementByPosition(\n          containerRef.current,\n          itemIndex,\n          true\n        );\n        if (element) {\n          const focussableElement = getFocusableElement(element);\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, delay);\n      }\n    },\n    [containerRef, setHighlightedIdx]\n  );\n\n  const onFocus = (e: FocusEvent<HTMLElement>) => {\n    // If focus is received by keyboard navigation, item with tabindex 0 will receive\n    // focus. If the item receiving focus has tabindex -1, then focus has been set\n    // programatically. We must respect this and not reset focus to selected tab.\n    if (focusedRef.current === -1) {\n      // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n      // the click event will have set correct value.\n      if (e.target.tabIndex === 0) {\n        // we are tabbing into the focusable item, by default the first\n        // align highlighted index\n        const index = getElementDataIndex(getClosest(e.target, \"index\"));\n        setHighlightedIdx(index);\n      } else if (e.target.tabIndex === -1) {\n        // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n        // to revisit this and add code here if we may get focus set programatically in other ways.\n      } else {\n        const index = getIndexOfEditedItem(containerRef.current);\n        if (index !== -1) {\n          requestAnimationFrame(() => {\n            setHighlightedIdx(index);\n          });\n        }\n      }\n    }\n  };\n\n  const getIndexCount = useCallback(\n    () => containerRef.current?.querySelectorAll(`[data-index]`).length ?? 0,\n    [containerRef]\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (direction: directionType = \"fwd\", idx?: number) => {\n      const indexCount = getIndexCount();\n      const index = typeof idx === \"number\" ? idx : indexCount;\n\n      let nextIdx = nextItemIdx(indexCount, direction, index);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n\n      const hasOverflowedItem =\n        containerRef.current?.querySelector(\n          \".vuuOverflowContainer-wrapContainer-overflowed\"\n        ) != null;\n\n      while (\n        itemIsNotFocusable(\n          containerRef.current,\n          nextDirection,\n          indexCount,\n          nextIdx,\n          hasOverflowedItem\n        )\n      ) {\n        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);\n        if (newIdx === nextIdx) {\n          // theres no further index and nextIndex is not focusable\n          // so there are no further focusable items\n          return index;\n        } else {\n          nextIdx = newIdx;\n        }\n      }\n      return nextIdx;\n    },\n    [containerRef, getIndexCount]\n  );\n\n  const navigateChildItems = useCallback(\n    (e: React.KeyboardEvent) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      console.log(`highlightedIdx = ${highlightedIdx}, nextIdx = ${nextIdx} `);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        focusItem(nextIdx, immediateFocus);\n      } else {\n        onNavigateOutOfBounds?.(direction === \"bwd\" ? \"start\" : \"end\");\n      }\n    },\n    [\n      orientation,\n      nextFocusableItemIdx,\n      highlightedIdx,\n      focusItem,\n      onNavigateOutOfBounds,\n    ]\n  );\n\n  const highlightedItemHasMenu = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    if (el) {\n      return el.querySelector(\".vuuPopupMenu\") != null;\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const highlightedItemInEditState = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    if (el) {\n      return el.querySelector(\".vuuEditableLabel-input\") != null;\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const activateItemMenu = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    const menuEl = el?.querySelector(\".vuuPopupMenu\") as HTMLElement;\n    if (menuEl) {\n      dispatchMouseEvent(menuEl, \"click\");\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e);\n        }\n      } else if (\n        isMenuActivationKey(e.key) &&\n        highlightedItemHasMenu() &&\n        !highlightedItemInEditState()\n      ) {\n        activateItemMenu();\n      }\n    },\n    [\n      activateItemMenu,\n      getIndexCount,\n      highlightedItemHasMenu,\n      highlightedItemInEditState,\n      navigateChildItems,\n      orientation,\n    ]\n  );\n\n  // TODO, in common hooks, we use mouse movement to track current highlighted\n  // index, rather than rely on component item reporting it\n  const handleItemClick = (_: ReactMouseEvent, itemIndex: number) => {\n    setHighlightedIdx(itemIndex);\n  };\n\n  const handleFocus = useCallback(() => {\n    if (!hasFocus) {\n      setHasFocus(true);\n      if (!mouseClickPending.current) {\n        keyboardNavigation.current = true;\n      } else {\n        mouseClickPending.current = false;\n      }\n    }\n  }, [hasFocus]);\n\n  const handleContainerMouseDown = useCallback(() => {\n    if (!hasFocus) {\n      mouseClickPending.current = true;\n    }\n    keyboardNavigation.current = false;\n  }, [hasFocus]);\n\n  const handleOverflowMenuClose = useCallback<PopupCloseCallback>(\n    (closeReason) => {\n      if (closeReason?.type === \"escape\") {\n        const index = getIndexOfOverflowItem(containerRef.current);\n        if (index !== -1) {\n          focusItem(index);\n        }\n      }\n    },\n    [containerRef, focusItem]\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".vuuToolbar\");\n      const destTarget = e.relatedTarget as HTMLElement;\n      if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n        setHighlightedIdx(-1);\n        setHasFocus(false);\n      }\n    },\n    onMouseDownCapture: handleContainerMouseDown,\n    onFocus: handleFocus,\n    onMouseLeave: () => {\n      keyboardNavigation.current = true;\n      setHighlightedIdx(-1);\n      mouseClickPending.current = false;\n    },\n  };\n\n  return {\n    containerProps,\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    focusIsWithinComponent: hasFocus,\n    highlightedIdx,\n    focusableIdx: 0,\n    focusItem,\n    onClick: handleItemClick,\n    onFocus,\n    onKeyDown: handleKeyDown,\n    onOverflowMenuClose: handleOverflowMenuClose,\n    setHighlightedIdx,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/toolbar/useSelection.js

@@ -0,0 +1,92 @@
+import { useCallback } from 'react';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/use-resize-observer.js';
+import { allowMultipleSelection, deselectionIsAllowed, selectionIsDisallowed } from '../common-hooks/selectionTypes.js';
+import { useControlled } from '@salt-ds/core';
+import { isSelectableElement, getClosestIndexItem } from '@vuu-ui/vuu-utils';
+
+const defaultSelectionKeys = ["Enter", " "];
+const NO_SELECTION_HANDLERS = {};
+const useSelection = ({
+  defaultSelected,
+  highlightedIdx,
+  onSelectionChange,
+  selected: selectedProp,
+  selectionStrategy
+}) => {
+  const [selected, setSelected, isControlled] = useControlled({
+    controlled: selectedProp,
+    default: defaultSelected ?? [],
+    name: "useSelection",
+    state: "selected"
+  });
+  const isSelectionEvent = useCallback(
+    (evt) => defaultSelectionKeys.includes(evt.key),
+    []
+  );
+  const selectItem = useCallback(
+    (itemIndex, specialKey = false) => {
+      const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
+      setSelected(newSelected);
+      onSelectionChange?.(newSelected);
+    },
+    [onSelectionChange, selected, selectionStrategy, setSelected]
+  );
+  const deselectItem = useCallback(
+    (itemIndex, specialKey = false) => {
+      const newSelected = selectionStrategy === "deselectable" || selectionStrategy === "multiple-special-key" && !specialKey ? [] : selected.filter((index) => index !== itemIndex);
+      setSelected(newSelected);
+      onSelectionChange?.(newSelected);
+    },
+    [onSelectionChange, selected, selectionStrategy, setSelected]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (isSelectionEvent(e) && isSelectableElement(e.target)) {
+        if (!selected.includes(highlightedIdx)) {
+          e.stopPropagation();
+          e.preventDefault();
+          selectItem(highlightedIdx, e.shiftKey);
+        } else if (deselectionIsAllowed(selectionStrategy)) {
+          e.stopPropagation();
+          e.preventDefault();
+          deselectItem(highlightedIdx, e.shiftKey);
+        }
+      }
+    },
+    [
+      isSelectionEvent,
+      selected,
+      highlightedIdx,
+      selectionStrategy,
+      selectItem,
+      deselectItem
+    ]
+  );
+  const handleClick = useCallback(
+    (e, itemIndex) => {
+      const element = getClosestIndexItem(e.target);
+      if (isSelectableElement(element)) {
+        if (!selected.includes(itemIndex)) {
+          selectItem(itemIndex, e.shiftKey);
+        } else if (deselectionIsAllowed(selectionStrategy)) {
+          deselectItem(itemIndex, e.shiftKey);
+        }
+      }
+    },
+    [deselectItem, selectItem, selected, selectionStrategy]
+  );
+  const itemHandlers = selectionIsDisallowed(selectionStrategy) ? NO_SELECTION_HANDLERS : {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  };
+  return {
+    activateItem: selectItem,
+    itemHandlers,
+    isControlled,
+    selected
+  };
+};
+
+export { useSelection };
+//# sourceMappingURL=useSelection.js.map

package/esm/toolbar/useSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.js","sources":["../../src/toolbar/useSelection.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useCallback } from \"react\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n  allowMultipleSelection,\n  deselectionIsAllowed,\n  selectionIsDisallowed,\n} from \"../common-hooks\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { getClosestIndexItem, isSelectableElement } from \"@vuu-ui/vuu-utils\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n  containerRef: RefObject<HTMLElement>;\n  defaultSelected?: number[];\n  highlightedIdx: number;\n  itemQuery: string;\n  onSelectionChange?: (selectedIndices: number[]) => void;\n  selected?: number[];\n  selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;\n}\n\nexport interface ItemHandlers {\n  onClick?: (e: MouseEvent, itemIndex: number) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nconst NO_SELECTION_HANDLERS: ItemHandlers = {};\n\nexport interface SelectionHookResult {\n  activateItem: (tabIndex: number) => void;\n  itemHandlers: ItemHandlers;\n  isControlled: boolean;\n  selected: number[];\n}\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n}: SelectionHookProps): SelectionHookResult => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"useSelection\",\n    state: \"selected\",\n  });\n\n  // const isSelectableElement = useMemo(\n  //   () =>\n  //     (el: HTMLElement): boolean =>\n  //       el && el.matches(`[class*=\"${itemQuery} \"]`),\n  //   [itemQuery]\n  // );\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    []\n  );\n\n  const selectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected = allowMultipleSelection(selectionStrategy, specialKey)\n        ? selected.concat(itemIndex)\n        : [itemIndex];\n\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected]\n  );\n\n  const deselectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected =\n        selectionStrategy === \"deselectable\" ||\n        (selectionStrategy === \"multiple-special-key\" && !specialKey)\n          ? []\n          : selected.filter((index) => index !== itemIndex);\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isSelectionEvent(e) && isSelectableElement(e.target as HTMLElement)) {\n        if (!selected.includes(highlightedIdx)) {\n          e.stopPropagation();\n          e.preventDefault();\n          selectItem(highlightedIdx, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          e.stopPropagation();\n          e.preventDefault();\n          deselectItem(highlightedIdx, e.shiftKey);\n        }\n      }\n    },\n    [\n      isSelectionEvent,\n      selected,\n      highlightedIdx,\n      selectionStrategy,\n      selectItem,\n      deselectItem,\n    ]\n  );\n\n  const handleClick = useCallback(\n    (e: MouseEvent, itemIndex: number) => {\n      const element = getClosestIndexItem(e.target as HTMLElement);\n      if (isSelectableElement(element)) {\n        if (!selected.includes(itemIndex)) {\n          selectItem(itemIndex, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          deselectItem(itemIndex, e.shiftKey);\n        }\n      }\n    },\n    [deselectItem, selectItem, selected, selectionStrategy]\n  );\n\n  const itemHandlers = selectionIsDisallowed(selectionStrategy)\n    ? NO_SELECTION_HANDLERS\n    : {\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n      };\n\n  return {\n    activateItem: selectItem,\n    itemHandlers,\n    isControlled,\n    selected,\n  };\n};\n"],"names":[],"mappings":"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"}