@vuu-ui/vuu-ui-controls 0.0.26

package/esm/toolbar/useToolbar.js

@@ -0,0 +1,98 @@
+import { isValidNumber } from '@vuu-ui/vuu-utils';
+import { useRef, useCallback } from 'react';
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { useSelection } from './useSelection.js';
+
+const useToolbar = ({
+  activeItemIndex: activeItemIndexProp,
+  defaultActiveItemIndex,
+  containerRef,
+  itemQuery = "vuuToolbarItem",
+  onActiveChange,
+  onNavigateOutOfBounds,
+  orientation,
+  selectionStrategy
+}) => {
+  const lastSelection = useRef(activeItemIndexProp);
+  const {
+    focusItem: keyboardHookFocusItem,
+    highlightedIdx,
+    onClick: keyboardHookHandleClick,
+    onKeyDown: keyboardHookHandleKeyDown,
+    setHighlightedIdx: keyboardHookSetHighlightedIndex,
+    ...keyboardHook
+  } = useKeyboardNavigation({
+    containerRef,
+    onNavigateOutOfBounds,
+    orientation
+  });
+  const {
+    activateItem: selectionHookActivateItem,
+    itemHandlers: { onClick, onKeyDown },
+    selected: selectionHookSelected
+  } = useSelection({
+    containerRef,
+    defaultSelected: defaultActiveItemIndex,
+    highlightedIdx,
+    itemQuery,
+    onSelectionChange: onActiveChange,
+    selected: activeItemIndexProp,
+    selectionStrategy
+  });
+  lastSelection.current = selectionHookSelected;
+  const handleClick = useCallback(
+    (evt) => {
+      const target = evt.target;
+      const toolbarItem = target.closest("[data-index]");
+      if (toolbarItem) {
+        const index = parseInt(toolbarItem.dataset.index ?? "-1");
+        if (index !== -1 && isValidNumber(index)) {
+          keyboardHookHandleClick(evt, index);
+          onClick?.(evt, index);
+        }
+      }
+    },
+    [keyboardHookHandleClick, onClick]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      keyboardHookHandleKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        onKeyDown?.(evt);
+      }
+    },
+    [keyboardHookHandleKeyDown, onKeyDown]
+  );
+  const onSwitchWrappedItemIntoView = useCallback(
+    (item) => {
+      const index = parseInt(item.index);
+      if (!isNaN(index)) {
+        selectionHookActivateItem(index);
+        keyboardHookFocusItem(index);
+      }
+    },
+    [keyboardHookFocusItem, selectionHookActivateItem]
+  );
+  const itemProps = {
+    onClick: handleClick,
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  return {
+    activeItemIndex: selectionHookSelected,
+    focusableIdx: keyboardHook.focusableIdx,
+    focusVisible: keyboardHook.focusVisible,
+    containerProps: {
+      PopupMenuProps: {
+        onKeyDown: handleKeyDown,
+        onMenuClose: keyboardHook.onOverflowMenuClose
+      },
+      ...keyboardHook.containerProps,
+      onSwitchWrappedItemIntoView
+    },
+    itemProps
+  };
+};
+
+export { useToolbar };
+//# sourceMappingURL=useToolbar.js.map

package/esm/toolbar/useToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbar.js","sources":["../../src/toolbar/useToolbar.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { OverflowItem } from \"../overflow-container\";\nimport { ToolbarProps } from \"./Toolbar\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport interface ToolbarHookProps\n  extends Pick<\n      ToolbarProps,\n      | \"activeItemIndex\"\n      | \"defaultActiveItemIndex\"\n      | \"onActiveChange\"\n      | \"onNavigateOutOfBounds\"\n    >,\n    Required<Pick<ToolbarProps, \"orientation\" | \"selectionStrategy\">> {\n  containerRef: RefObject<HTMLElement>;\n  itemQuery?: string;\n}\n\nexport const useToolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  defaultActiveItemIndex,\n  containerRef,\n  itemQuery = \"vuuToolbarItem\",\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation,\n  selectionStrategy,\n}: ToolbarHookProps) => {\n  const lastSelection = useRef(activeItemIndexProp);\n\n  const {\n    focusItem: keyboardHookFocusItem,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    onNavigateOutOfBounds,\n    orientation,\n  });\n\n  const {\n    activateItem: selectionHookActivateItem,\n    itemHandlers: { onClick, onKeyDown },\n    selected: selectionHookSelected,\n  } = useSelection({\n    containerRef,\n    defaultSelected: defaultActiveItemIndex,\n    highlightedIdx,\n    itemQuery,\n    onSelectionChange: onActiveChange,\n    selected: activeItemIndexProp,\n    selectionStrategy,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>) => {\n      const target = evt.target as HTMLElement;\n      const toolbarItem = target.closest(\"[data-index]\") as HTMLElement;\n      if (toolbarItem) {\n        const index = parseInt(toolbarItem.dataset.index ?? \"-1\");\n        if (index !== -1 && isValidNumber(index)) {\n          keyboardHookHandleClick(evt, index);\n          onClick?.(evt, index);\n        }\n      }\n    },\n    [keyboardHookHandleClick, onClick]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        onKeyDown?.(evt);\n      }\n    },\n    [keyboardHookHandleKeyDown, onKeyDown]\n  );\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        //TODO need to be able to reset the overflow-priority without selecting the item\n        selectionHookActivateItem(index);\n        keyboardHookFocusItem(index);\n      }\n    },\n    [keyboardHookFocusItem, selectionHookActivateItem]\n  );\n\n  const itemProps = {\n    onClick: handleClick,\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  return {\n    activeItemIndex: selectionHookSelected,\n    focusableIdx: keyboardHook.focusableIdx,\n    focusVisible: keyboardHook.focusVisible,\n    containerProps: {\n      PopupMenuProps: {\n        onKeyDown: handleKeyDown,\n        onMenuClose: keyboardHook.onOverflowMenuClose,\n      },\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    itemProps,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/tree/Tree.css.js

@@ -0,0 +1,4 @@
+var treeCss = ".vuuTree {\n  --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));\n  --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));\n  --tree-toggle-width: 12px;\n  --tree-icon-color: var(--vuuTree-icon-color, #4c505b);\n  --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);\n  --tree-node-indent: 0px;\n\n  --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));\n  --list-item-height: var(--hw-list-item-height, 30px);\n  --list-item-padding: var(--hw-list-item-padding, 0 6px);\n  --list-item-header-bg: var(--hw-list-item-header-bg, black);\n  --list-item-header-color: var(--hw-list-item-header-color, white);\n  --list-item-header-font-weight: bold;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-content: '';\n  --list-item-header-twisty-top: 50%;\n  --list-item-header-twisty-left: -18px;\n  --list-item-header-twisty-right: auto;\n  --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);\n  --list-item-selected-color: white;\n  --list-item-text-color: var(--hw-gray-800);\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n\n  list-style: none;\n  margin: 0;\n  padding: 0 1px;\n  font-size: var(--vuuTree-font-size, 14px);\n  max-height: inherit;\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n}\n\n.vuuTree-viewport {\n  --list-item-height: 30px;\n  box-sizing: border-box;\n  max-height: inherit;\n  overflow: auto;\n}\n\n.vuuTree-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.vuuTree-scrollingContentContainer .vuuTreeNode {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n\n.vuuTreeNode {\n  list-style: none;\n}\n\n/* Leaf node or the div child of a collapsible node */\n.vuuTreeNode:not([aria-expanded]),\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n  --checkbox-border-color: black;\n  --checkbox-border-width: 1px;\n  --checkbox-tick: black;\n  --list-item-padding-left: 6px;\n  --svg-toggle: var(--tree-node-collapse);\n\n  align-items: center;\n  color: var(--list-item-text-color);\n  display: flex;\n  flex-wrap: nowrap;\n  height: var(--list-item-height);\n  line-height: var(--list-item-height);\n  padding: var(--list-item-padding);\n  padding-left: var(--padding-left);\n  position: relative;\n  cursor: default;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.vuuTreeNode:not([aria-expanded]) {\n  --padding-left: calc(\n    var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n  );\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n  --padding-left: calc(\n    var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n  );\n}\n\n.vuuTreeNode-icon {\n  background-color: var(--tree-icon-color);\n  display: inline-block;\n  height: 18px;\n  margin-right: 6px;\n  -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n  mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n  flex: 0 0 18px;\n}\n\n.vuuTreeNode[aria-expanded] {\n  flex-direction: column;\n}\n\n.vuuTreeNode[aria-expanded] {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTreeNode > *[role='group'] {\n  padding-left: 0px;\n}\n\n.vuuTreeNode {\n  padding-left: calc(var(--padding-left) + var(--tree-node-indent));\n}\n\n.vuuTreeNode[aria-level='2'] {\n  --tree-node-indent: 12px;\n}\n.vuuTreeNode[aria-level='3'] {\n  --tree-node-indent: 24px;\n}\n.vuuTreeNode[aria-level='4'] {\n  --tree-node-indent: 36px;\n}\n\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]\n  > div:first-child {\n  background-color: var(--list-hilited-bg);\n}\n\n.vuuTreeNode-toggle {\n  cursor: pointer;\n}\n\n.vuuTreeNode > .vuuTreeNode-toggle {\n  display: inline-block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;\n  mask: var(--svg-toggle) center center/8px 8px no-repeat;\n  background-color: var(--list-item-header-twisty-color);\n  height: 18px;\n  margin-top: -9px;\n  left: var(--tree-node-indent);\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 18px;\n}\n\n.vuuTreeNode[aria-selected='true'] {\n  --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n\n.vuuTreeNode:not(.focusVisible):focus {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vuuTreeNode:not([aria-expanded]).focusVisible:before,\n.vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {\n  content: '';\n  position: absolute;\n  top: 0px;\n  left: var(--tree-focus-offset, 0px);\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n  background-color: var(--list-hilited-bg);\n}\n\n\n.vuuTreeNode[aria-expanded='false'] > *:first-child:after {\n  --svg-toggle: var(--tree-node-expand);\n}\n\n.vuuTreeNode[aria-expanded='true'] > *:first-child:after {\n  transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected='true'],\n.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected='true'] > div:first-child {\n  --checkbox-border-color: var(--list-item-selected-color);\n  --checkbox-tick: var(--list-item-selected-color);\n  --focus-visible-border-color: var(--list-item-selected-color);\n  background-color: var(--list-item-selected-bg);\n  color: var(--list-item-selected-color);\n}\n\n.with-checkbox .vuuTreeNode {\n  padding-left: 28px;\n}\n\n.with-checkbox .vuuTreeNode:before {\n  border-style: solid;\n  border-width: var(--checkbox-border-width);\n  border-color: var(--checkbox-border-color);\n  content: '';\n  height: 12px;\n  left: 3px;\n  margin-top: -7px;\n  position: absolute;\n  top: 50%;\n  width: 12px;\n}\n";
+
+export { treeCss as default };
+//# sourceMappingURL=Tree.css.js.map

package/esm/tree/Tree.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/tree/Tree.js

@@ -0,0 +1,176 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, createElement } from 'react';
+import { useIdMemo, useForkRef } from '@salt-ds/core';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { closestListItemIndex } from './list-dom-utils.js';
+import { isExpanded } from './treeTypeUtils.js';
+import { useItemsWithIds } from './use-items-with-ids.js';
+import { groupSelectionEnabled } from './use-selection.js';
+import { useViewportTracking } from './use-viewport-tracking.js';
+import { useTree } from './useTree.js';
+import treeCss from './Tree.css.js';
+
+const classBase = "vuuTree";
+const TreeNode = ({ children, idx, ...props }) => {
+  return /* @__PURE__ */ jsx("li", { ...props, children });
+};
+const Tree = forwardRef(function Tree2({
+  allowDragDrop,
+  className,
+  defaultSelected,
+  groupSelection = "none",
+  id: idProp,
+  onHighlight,
+  onSelectionChange,
+  revealSelected,
+  selected: selectedProp,
+  selection = "single",
+  source,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-tree",
+    css: treeCss,
+    window: targetWindow
+  });
+  const id = useIdMemo(idProp);
+  const rootRef = useRef(null);
+  const [, sourceWithIds, sourceItemById] = useItemsWithIds(source, id, {
+    revealSelected: revealSelected ? selectedProp ?? defaultSelected ?? false : void 0
+  });
+  const handleSelectionChange = (evt, selected2) => {
+    if (onSelectionChange) {
+      const sourceItems = selected2.map((id2) => sourceItemById(id2)).filter((sourceItem) => sourceItem !== void 0);
+      onSelectionChange(sourceItems);
+    }
+  };
+  const {
+    focusVisible,
+    highlightedIdx,
+    hiliteItemAtIndex,
+    listProps,
+    listItemHandlers,
+    selected,
+    visibleData
+  } = useTree({
+    defaultSelected,
+    groupSelection,
+    onChange: handleSelectionChange,
+    onHighlight,
+    selected: selectedProp,
+    selection,
+    sourceWithIds
+  });
+  useViewportTracking(rootRef, highlightedIdx);
+  const defaultItemHandlers = {
+    onMouseEnter: (evt) => {
+      const targetEl = evt.target;
+      const idx = closestListItemIndex(targetEl);
+      hiliteItemAtIndex(idx);
+    }
+  };
+  const propsCommonToAllListItems = {
+    ...defaultItemHandlers,
+    ...listItemHandlers,
+    role: "treeitem"
+  };
+  const allowGroupSelect = groupSelectionEnabled(groupSelection);
+  function addLeafNode(list, item, idx) {
+    list.push(
+      /* @__PURE__ */ jsxs(
+        TreeNode,
+        {
+          ...propsCommonToAllListItems,
+          ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
+          children: [
+            item.icon ? /* @__PURE__ */ jsx("span", { className: `${classBase}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ jsx("span", { children: item.label })
+          ]
+        }
+      )
+    );
+    idx.value += 1;
+  }
+  function addGroupNode(list, child, idx, id2, title) {
+    const { value: i } = idx;
+    idx.value += 1;
+    list.push(
+      /* @__PURE__ */ createElement(
+        TreeNode,
+        {
+          ...listItemHandlers,
+          "aria-expanded": child.expanded,
+          "aria-level": child.level,
+          "aria-selected": selected.includes(id2) || void 0,
+          className: cx(`${classBase}Node`, {
+            focusVisible: focusVisible === i,
+            [`${classBase}Node-toggle`]: !allowGroupSelect
+          }),
+          "data-idx": i,
+          "data-highlighted": i === highlightedIdx || void 0,
+          "data-selectable": true,
+          id: id2,
+          key: `header-${i}`
+        },
+        allowGroupSelect ? /* @__PURE__ */ jsxs("div", { className: `${classBase}Node-label`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${classBase}Node-toggle` }),
+          title
+        ] }) : /* @__PURE__ */ jsxs("div", { className: `${classBase}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${classBase}Node-icon`,
+              "data-icon": child.icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("span", { children: title })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+      )
+    );
+  }
+  function renderSourceContent(items, idx = { value: 0 }) {
+    if (items?.length > 0) {
+      const listItems = [];
+      for (const item of items) {
+        if (item.childNodes) {
+          addGroupNode(listItems, item, idx, item.id, item.label);
+        } else {
+          addLeafNode(listItems, item, idx);
+        }
+      }
+      return listItems;
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...htmlAttributes,
+      ...listProps,
+      className: cx(classBase, className),
+      id: `Tree-${id}`,
+      ref: useForkRef(rootRef, forwardedRef),
+      role: "tree",
+      tabIndex: 0,
+      children: renderSourceContent(visibleData)
+    }
+  );
+});
+const getListItemProps = (item, idx, highlightedIdx, selected, focusVisible, className) => ({
+  id: item.id,
+  key: item.id,
+  "aria-level": item.level,
+  "aria-selected": selected.includes(item.id) || void 0,
+  "data-idx": idx.value,
+  "data-highlighted": idx.value === highlightedIdx || void 0,
+  className: cx("vuuTreeNode", className, {
+    focusVisible: focusVisible === idx.value
+  })
+});
+Tree.displayName = "Tree";
+
+export { Tree, TreeNode };
+//# sourceMappingURL=Tree.js.map

package/esm/tree/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","sources":["../../src/tree/Tree.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ForwardedRef,\n  HTMLAttributes,\n  MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { closestListItemIndex } from \"./list-dom-utils\";\nimport { isExpanded } from \"./treeTypeUtils\";\nimport type { NormalisedTreeSourceNode, TreeSourceNode } from \"./treeTypes\";\nimport { useItemsWithIds } from \"./use-items-with-ids\";\nimport {\n  GroupSelection,\n  TreeNodeSelectionHandler,\n  TreeSelection,\n  groupSelectionEnabled,\n} from \"./use-selection\";\nimport { useViewportTracking } from \"./use-viewport-tracking\";\nimport { useTree } from \"./useTree\";\n\nimport treeCss from \"./Tree.css\";\n\nconst classBase = \"vuuTree\";\n\ntype Indexer = {\n  value: number;\n};\n\nexport interface TreeNodeProps extends HTMLAttributes<HTMLLIElement> {\n  idx?: number;\n}\n\n// eslint-disable-next-line no-unused-vars\nexport const TreeNode = ({ children, idx, ...props }: TreeNodeProps) => {\n  return <li {...props}>{children}</li>;\n};\n\nexport interface TreeProps extends HTMLAttributes<HTMLUListElement> {\n  allowDragDrop?: boolean;\n  defaultSelected?: any;\n  groupSelection?: GroupSelection;\n  onHighlight?: (index: number) => void;\n  onSelectionChange?: (selected: TreeSourceNode[]) => void;\n  revealSelected?: boolean;\n  selected?: string[];\n  selection?: TreeSelection;\n  source: TreeSourceNode[];\n}\n\nexport const Tree = forwardRef(function Tree(\n  {\n    allowDragDrop,\n    className,\n    defaultSelected,\n    groupSelection = \"none\",\n    id: idProp,\n    onHighlight,\n    onSelectionChange,\n    revealSelected,\n    selected: selectedProp,\n    selection = \"single\",\n    source,\n    ...htmlAttributes\n  }: TreeProps,\n  forwardedRef: ForwardedRef<HTMLUListElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tree\",\n    css: treeCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLUListElement>(null);\n  // returns the full source data\n  const [, sourceWithIds, sourceItemById] = useItemsWithIds(source, id, {\n    revealSelected: revealSelected\n      ? selectedProp ?? defaultSelected ?? false\n      : undefined,\n  });\n\n  const handleSelectionChange: TreeNodeSelectionHandler = (evt, selected) => {\n    if (onSelectionChange) {\n      const sourceItems = selected\n        .map((id) => sourceItemById(id))\n        .filter((sourceItem) => sourceItem !== undefined) as TreeSourceNode[];\n      onSelectionChange(sourceItems);\n    }\n  };\n\n  const {\n    focusVisible,\n    highlightedIdx,\n    hiliteItemAtIndex,\n    listProps,\n    listItemHandlers,\n    selected,\n    visibleData,\n  } = useTree({\n    defaultSelected,\n    groupSelection,\n    onChange: handleSelectionChange,\n    onHighlight,\n    selected: selectedProp,\n    selection,\n    sourceWithIds,\n  });\n\n  // const isScrolling = useViewportTracking(root, highlightedIdx);\n  useViewportTracking(rootRef, highlightedIdx);\n\n  const defaultItemHandlers = {\n    onMouseEnter: (evt: MouseEvent) => {\n      // if (!isScrolling.current) {\n      const targetEl = evt.target as HTMLElement;\n      const idx = closestListItemIndex(targetEl);\n      hiliteItemAtIndex(idx);\n      // onMouseEnterListItem && onMouseEnterListItem(evt, idx);\n      // }\n    },\n  };\n\n  const propsCommonToAllListItems = {\n    ...defaultItemHandlers,\n    ...listItemHandlers,\n    role: \"treeitem\",\n  };\n  const allowGroupSelect = groupSelectionEnabled(groupSelection);\n\n  /**\n   * Add a ListItem from source item\n   */\n  function addLeafNode(\n    list: JSX.Element[],\n    item: NormalisedTreeSourceNode,\n    idx: Indexer\n  ) {\n    list.push(\n      <TreeNode\n        {...propsCommonToAllListItems}\n        {...getListItemProps(item, idx, highlightedIdx, selected, focusVisible)}\n      >\n        {item.icon ? (\n          <span className={`${classBase}Node-icon`} data-icon={item.icon} />\n        ) : null}\n        <span>{item.label}</span>\n      </TreeNode>\n    );\n    idx.value += 1;\n  }\n\n  function addGroupNode(\n    list: JSX.Element[],\n    child: NormalisedTreeSourceNode,\n    idx: Indexer,\n    id: string,\n    title: string\n  ) {\n    const { value: i } = idx;\n    idx.value += 1;\n    list.push(\n      <TreeNode\n        {...listItemHandlers}\n        aria-expanded={child.expanded}\n        aria-level={child.level}\n        aria-selected={selected.includes(id) || undefined}\n        className={cx(`${classBase}Node`, {\n          focusVisible: focusVisible === i,\n          [`${classBase}Node-toggle`]: !allowGroupSelect,\n        })}\n        data-idx={i}\n        data-highlighted={i === highlightedIdx || undefined}\n        data-selectable\n        id={id}\n        key={`header-${i}`}\n      >\n        {allowGroupSelect ? (\n          <div className={`${classBase}Node-label`}>\n            <span className={`${classBase}Node-toggle`} />\n            {title}\n          </div>\n        ) : (\n          <div className={`${classBase}Node-label`}>\n            {child.icon ? (\n              <span\n                className={`${classBase}Node-icon`}\n                data-icon={child.icon}\n              />\n            ) : null}\n            <span>{title}</span>\n          </div>\n        )}\n        <ul role=\"group\">\n          {isExpanded(child) ? renderSourceContent(child.childNodes, idx) : \"\"}\n        </ul>\n      </TreeNode>\n    );\n  }\n\n  function renderSourceContent(\n    items: NormalisedTreeSourceNode[],\n    idx = { value: 0 }\n  ) {\n    if (items?.length > 0) {\n      const listItems: JSX.Element[] = [];\n      for (const item of items) {\n        if (item.childNodes) {\n          addGroupNode(listItems, item, idx, item.id, item.label);\n        } else {\n          addLeafNode(listItems, item, idx);\n        }\n      }\n      return listItems;\n    }\n  }\n\n  return (\n    <ul\n      {...htmlAttributes}\n      {...listProps}\n      className={cx(classBase, className)}\n      id={`Tree-${id}`}\n      ref={useForkRef<HTMLUListElement>(rootRef, forwardedRef)}\n      role=\"tree\"\n      tabIndex={0}\n    >\n      {renderSourceContent(visibleData)}\n    </ul>\n  );\n});\n\nconst getListItemProps = (\n  item: NormalisedTreeSourceNode,\n  idx: Indexer,\n  highlightedIdx: number,\n  selected: string[],\n  focusVisible: number,\n  className?: string\n) => ({\n  id: item.id,\n  key: item.id,\n  \"aria-level\": item.level,\n  \"aria-selected\": selected.includes(item.id) || undefined,\n  \"data-idx\": idx.value,\n  \"data-highlighted\": idx.value === highlightedIdx || undefined,\n  className: cx(\"vuuTreeNode\", className, {\n    focusVisible: focusVisible === idx.value,\n  }),\n});\n\nTree.displayName = \"Tree\";\n"],"names":["Tree","useId","selected","id"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAM,SAAY,GAAA,SAAA,CAAA;AAWX,MAAM,WAAW,CAAC,EAAE,UAAU,GAAK,EAAA,GAAG,OAA2B,KAAA;AACtE,EAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA,EAAI,GAAG,KAAA,EAAQ,QAAS,EAAA,CAAA,CAAA;AAClC,EAAA;AAca,MAAA,IAAA,GAAO,UAAW,CAAA,SAASA,KACtC,CAAA;AAAA,EACE,aAAA;AAAA,EACA,SAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAiB,GAAA,MAAA;AAAA,EACjB,EAAI,EAAA,MAAA;AAAA,EACJ,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,QAAA;AAAA,EACZ,MAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAA,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,UAAM,MAAM,CAAA,CAAA;AACvB,EAAM,MAAA,OAAA,GAAU,OAAyB,IAAI,CAAA,CAAA;AAE7C,EAAA,MAAM,GAAG,aAAA,EAAe,cAAc,CAAI,GAAA,eAAA,CAAgB,QAAQ,EAAI,EAAA;AAAA,IACpE,cAAgB,EAAA,cAAA,GACZ,YAAgB,IAAA,eAAA,IAAmB,KACnC,GAAA,KAAA,CAAA;AAAA,GACL,CAAA,CAAA;AAED,EAAM,MAAA,qBAAA,GAAkD,CAAC,GAAA,EAAKC,SAAa,KAAA;AACzE,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAA,MAAM,WAAcA,GAAAA,SAAAA,CACjB,GAAI,CAAA,CAACC,GAAO,KAAA,cAAA,CAAeA,GAAE,CAAC,CAC9B,CAAA,MAAA,CAAO,CAAC,UAAA,KAAe,eAAe,KAAS,CAAA,CAAA,CAAA;AAClD,MAAA,iBAAA,CAAkB,WAAW,CAAA,CAAA;AAAA,KAC/B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,MACE,OAAQ,CAAA;AAAA,IACV,eAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAU,EAAA,qBAAA;AAAA,IACV,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAGD,EAAA,mBAAA,CAAoB,SAAS,cAAc,CAAA,CAAA;AAE3C,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,YAAA,EAAc,CAAC,GAAoB,KAAA;AAEjC,MAAA,MAAM,WAAW,GAAI,CAAA,MAAA,CAAA;AACrB,MAAM,MAAA,GAAA,GAAM,qBAAqB,QAAQ,CAAA,CAAA;AACzC,MAAA,iBAAA,CAAkB,GAAG,CAAA,CAAA;AAAA,KAGvB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,yBAA4B,GAAA;AAAA,IAChC,GAAG,mBAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,IAAM,EAAA,UAAA;AAAA,GACR,CAAA;AACA,EAAM,MAAA,gBAAA,GAAmB,sBAAsB,cAAc,CAAA,CAAA;AAK7D,EAAS,SAAA,WAAA,CACP,IACA,EAAA,IAAA,EACA,GACA,EAAA;AACA,IAAK,IAAA,CAAA,IAAA;AAAA,sBACH,IAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,yBAAA;AAAA,UACH,GAAG,gBAAiB,CAAA,IAAA,EAAM,GAAK,EAAA,cAAA,EAAgB,UAAU,YAAY,CAAA;AAAA,UAErE,QAAA,EAAA;AAAA,YAAK,IAAA,CAAA,IAAA,mBACH,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,SAAA,CAAA,EAAA,WAAA,EAAW,IAAK,CAAA,IAAA,EAAM,CAC9D,GAAA,IAAA;AAAA,4BACJ,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,IAAA,CAAK,KAAM,EAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OACpB;AAAA,KACF,CAAA;AACA,IAAA,GAAA,CAAI,KAAS,IAAA,CAAA,CAAA;AAAA,GACf;AAEA,EAAA,SAAS,YACP,CAAA,IAAA,EACA,KACA,EAAA,GAAA,EACAA,KACA,KACA,EAAA;AACA,IAAM,MAAA,EAAE,KAAO,EAAA,CAAA,EAAM,GAAA,GAAA,CAAA;AACrB,IAAA,GAAA,CAAI,KAAS,IAAA,CAAA,CAAA;AACb,IAAK,IAAA,CAAA,IAAA;AAAA,sBACH,aAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,gBAAA;AAAA,UACJ,iBAAe,KAAM,CAAA,QAAA;AAAA,UACrB,cAAY,KAAM,CAAA,KAAA;AAAA,UAClB,eAAe,EAAA,QAAA,CAAS,QAASA,CAAAA,GAAE,CAAK,IAAA,KAAA,CAAA;AAAA,UACxC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAQ,IAAA,CAAA,EAAA;AAAA,YAChC,cAAc,YAAiB,KAAA,CAAA;AAAA,YAC/B,CAAC,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,CAAC,gBAAA;AAAA,WAC/B,CAAA;AAAA,UACD,UAAU,EAAA,CAAA;AAAA,UACV,kBAAA,EAAkB,MAAM,cAAkB,IAAA,KAAA,CAAA;AAAA,UAC1C,iBAAe,EAAA,IAAA;AAAA,UACf,EAAIA,EAAAA,GAAAA;AAAA,UACJ,GAAA,EAAK,UAAU,CAAC,CAAA,CAAA;AAAA,SAAA;AAAA,QAEf,mCACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,UAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAe,WAAA,CAAA,EAAA,CAAA;AAAA,UAC3C,KAAA;AAAA,SAAA,EACH,oBAEC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,UAAA,CAAA,EAAA,QAAA,EAAA;AAAA,UAAA,KAAA,CAAM,IACL,mBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,cACvB,aAAW,KAAM,CAAA,IAAA;AAAA,aAAA;AAAA,WAEjB,GAAA,IAAA;AAAA,0BACJ,GAAA,CAAC,UAAM,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,SACf,EAAA,CAAA;AAAA,wBAED,GAAA,CAAA,IAAA,EAAA,EAAG,IAAK,EAAA,OAAA,EACN,QAAW,EAAA,UAAA,CAAA,KAAK,CAAI,GAAA,mBAAA,CAAoB,KAAM,CAAA,UAAA,EAAY,GAAG,CAAA,GAAI,EACpE,EAAA,CAAA;AAAA,OACF;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,SAAS,oBACP,KACA,EAAA,GAAA,GAAM,EAAE,KAAA,EAAO,GACf,EAAA;AACA,IAAI,IAAA,KAAA,EAAO,SAAS,CAAG,EAAA;AACrB,MAAA,MAAM,YAA2B,EAAC,CAAA;AAClC,MAAA,KAAA,MAAW,QAAQ,KAAO,EAAA;AACxB,QAAA,IAAI,KAAK,UAAY,EAAA;AACnB,UAAA,YAAA,CAAa,WAAW,IAAM,EAAA,GAAA,EAAK,IAAK,CAAA,EAAA,EAAI,KAAK,KAAK,CAAA,CAAA;AAAA,SACjD,MAAA;AACL,UAAY,WAAA,CAAA,SAAA,EAAW,MAAM,GAAG,CAAA,CAAA;AAAA,SAClC;AAAA,OACF;AACA,MAAO,OAAA,SAAA,CAAA;AAAA,KACT;AAAA,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACH,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,EAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACd,GAAA,EAAK,UAA6B,CAAA,OAAA,EAAS,YAAY,CAAA;AAAA,MACvD,IAAK,EAAA,MAAA;AAAA,MACL,QAAU,EAAA,CAAA;AAAA,MAET,8BAAoB,WAAW,CAAA;AAAA,KAAA;AAAA,GAClC,CAAA;AAEJ,CAAC,EAAA;AAED,MAAM,mBAAmB,CACvB,IAAA,EACA,KACA,cACA,EAAA,QAAA,EACA,cACA,SACI,MAAA;AAAA,EACJ,IAAI,IAAK,CAAA,EAAA;AAAA,EACT,KAAK,IAAK,CAAA,EAAA;AAAA,EACV,cAAc,IAAK,CAAA,KAAA;AAAA,EACnB,eAAiB,EAAA,QAAA,CAAS,QAAS,CAAA,IAAA,CAAK,EAAE,CAAK,IAAA,KAAA,CAAA;AAAA,EAC/C,YAAY,GAAI,CAAA,KAAA;AAAA,EAChB,kBAAA,EAAoB,GAAI,CAAA,KAAA,KAAU,cAAkB,IAAA,KAAA,CAAA;AAAA,EACpD,SAAA,EAAW,EAAG,CAAA,aAAA,EAAe,SAAW,EAAA;AAAA,IACtC,YAAA,EAAc,iBAAiB,GAAI,CAAA,KAAA;AAAA,GACpC,CAAA;AACH,CAAA,CAAA,CAAA;AAEA,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

package/esm/tree/hierarchical-data-utils.js

@@ -0,0 +1,65 @@
+const getNodeParentPath = ({ id }) => {
+  let pos = id.lastIndexOf("-");
+  if (pos !== -1) {
+    const path = id.slice(pos + 1);
+    const steps = path.split(".");
+    if (steps.length === 1) {
+      return null;
+    } else {
+      steps.pop();
+      return `${id.slice(0, pos)}-${steps.join(".")}`;
+    }
+  } else if ((pos = id.lastIndexOf("/")) !== -1) {
+    return id.slice(0, pos);
+  }
+};
+const isGroupNode = (node) => node.childNodes !== void 0;
+const isHeader = (node) => node.header === true;
+const PATH_SEPARATORS = /* @__PURE__ */ new Set([".", "/"]);
+const isDescendantOf = (node, targetPath) => {
+  if (!targetPath.startsWith(node.id)) {
+    return false;
+  } else {
+    return PATH_SEPARATORS.has(targetPath.charAt(node.id.length));
+  }
+};
+const getNodeById = (nodes, id) => {
+  for (const node of nodes) {
+    if (node.id === id) {
+      return node;
+    } else if (isDescendantOf(node, id)) {
+      return getNodeById(node.childNodes, id);
+    }
+  }
+};
+const getIndexOfNode = (treeNodes, node) => {
+  const id = typeof node === "string" ? node : node.id;
+  for (let i = 0; i < treeNodes.length; i++) {
+    if (treeNodes[i].id === id) {
+      return i;
+    }
+  }
+};
+const replaceNode = (nodes, id, props) => {
+  let childNodes;
+  const newNodes = nodes.map((node) => {
+    if (node.id === id) {
+      return {
+        ...node,
+        ...props
+      };
+    } else if (isDescendantOf(node, id)) {
+      childNodes = replaceNode(node.childNodes, id, props);
+      return {
+        ...node,
+        childNodes
+      };
+    } else {
+      return node;
+    }
+  });
+  return newNodes;
+};
+
+export { getIndexOfNode, getNodeById, getNodeParentPath, isGroupNode, isHeader, replaceNode };
+//# sourceMappingURL=hierarchical-data-utils.js.map

package/esm/tree/hierarchical-data-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hierarchical-data-utils.js","sources":["../../src/tree/hierarchical-data-utils.ts"],"sourcesContent":["import { NonLeafNode, NormalisedTreeSourceNode } from \"./treeTypes\";\n\nexport const getNodeParentPath = ({ id }: NormalisedTreeSourceNode) => {\n  let pos = id.lastIndexOf(\"-\");\n  if (pos !== -1) {\n    // using the built-in hierarchical id scheme\n    // rootId-n-n.n\n    const path = id.slice(pos + 1);\n    const steps = path.split(\".\");\n    if (steps.length === 1) {\n      return null;\n    } else {\n      steps.pop();\n      return `${id.slice(0, pos)}-${steps.join(\".\")}`;\n    }\n  } else if ((pos = id.lastIndexOf(\"/\")) !== -1) {\n    // using a path scheme step/step/step\n    return id.slice(0, pos);\n  }\n};\n\nexport const isGroupNode = (node: NormalisedTreeSourceNode) =>\n  node.childNodes !== undefined;\nexport const isCollapsibleGroupNode = (node: NormalisedTreeSourceNode) =>\n  isGroupNode(node) && node.expanded !== undefined;\nexport const isHeader = (node: NormalisedTreeSourceNode) =>\n  node.header === true;\n\nconst PATH_SEPARATORS = new Set([\".\", \"/\"]);\n\nconst isDescendantOf = (\n  node: NormalisedTreeSourceNode,\n  targetPath: string\n): node is NonLeafNode => {\n  if (!targetPath.startsWith(node.id)) {\n    return false;\n  } else {\n    return PATH_SEPARATORS.has(targetPath.charAt(node.id.length));\n  }\n};\n\nexport const getNodeById = (\n  nodes: NormalisedTreeSourceNode[],\n  id: string\n): NormalisedTreeSourceNode | undefined => {\n  for (const node of nodes) {\n    if (node.id === id) {\n      return node;\n    } else if (isDescendantOf(node, id)) {\n      return getNodeById(node.childNodes, id);\n    }\n  }\n};\n\nexport const getIndexOfNode = (\n  treeNodes: NormalisedTreeSourceNode[],\n  node: NormalisedTreeSourceNode\n) => {\n  const id = typeof node === \"string\" ? node : node.id;\n  for (let i = 0; i < treeNodes.length; i++) {\n    if (treeNodes[i].id === id) {\n      return i;\n    }\n  }\n};\n\nexport const replaceNode = (\n  nodes: NormalisedTreeSourceNode[],\n  id: string,\n  props: Partial<NormalisedTreeSourceNode>\n): NormalisedTreeSourceNode[] => {\n  let childNodes;\n  const newNodes = nodes.map((node) => {\n    if (node.id === id) {\n      return {\n        ...node,\n        ...props,\n      };\n    } else if (isDescendantOf(node, id)) {\n      childNodes = replaceNode(node.childNodes, id, props);\n      return {\n        ...node,\n        childNodes,\n      };\n    } else {\n      return node;\n    }\n  });\n\n  return newNodes;\n};\n"],"names":[],"mappings":"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"}

package/esm/tree/key-code.js

@@ -0,0 +1,54 @@
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (const set of sets) {
+    for (const element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+const ArrowUp = "ArrowUp";
+const ArrowDown = "ArrowDown";
+const ArrowLeft = "ArrowLeft";
+const ArrowRight = "ArrowRight";
+const Enter = "Enter";
+const Delete = "Delete";
+const actionKeys = /* @__PURE__ */ new Set([Enter, Delete]);
+const focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+const arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+const verticalNavigationKeys = /* @__PURE__ */ new Set(["Home", "End", "ArrowDown", "ArrowUp"]);
+const horizontalNavigationKeys = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "ArrowRight",
+  "ArrowLeft"
+]);
+const functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+union(
+  actionKeys,
+  horizontalNavigationKeys,
+  verticalNavigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+const isNavigationKey = ({ key }, orientation = "vertical") => {
+  const navigationKeys = orientation === "vertical" ? verticalNavigationKeys : horizontalNavigationKeys;
+  return navigationKeys.has(key);
+};
+
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Delete, Enter, isNavigationKey };
+//# sourceMappingURL=key-code.js.map

package/esm/tree/key-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-code.js","sources":["../../src/tree/key-code.ts"],"sourcesContent":["import { KeyboardEvent } from \"react\";\n\nfunction union(set1: Set<string>, ...sets: Set<string>[]) {\n  const result = new Set(set1);\n  for (const set of sets) {\n    for (const element of set) {\n      result.add(element);\n    }\n  }\n  return result;\n}\n\nexport const ArrowUp = \"ArrowUp\";\nexport const ArrowDown = \"ArrowDown\";\nexport const ArrowLeft = \"ArrowLeft\";\nexport const Backspace = \"Backspace\";\nexport const ArrowRight = \"ArrowRight\";\nexport const Enter = \"Enter\";\nexport const Escape = \"Escape\";\nexport const Delete = \"Delete\";\n\nconst actionKeys = new Set([Enter, Delete]);\nconst focusKeys = new Set([\"Tab\"]);\n// const navigationKeys = new Set([\"Home\", \"End\", \"ArrowRight\", \"ArrowLeft\",\"ArrowDown\", \"ArrowUp\"]);\nconst arrowLeftRightKeys = new Set([\"ArrowRight\", \"ArrowLeft\"]);\nconst verticalNavigationKeys = new Set([\"Home\", \"End\", \"ArrowDown\", \"ArrowUp\"]);\nconst horizontalNavigationKeys = new Set([\n  \"Home\",\n  \"End\",\n  \"ArrowRight\",\n  \"ArrowLeft\",\n]);\nconst functionKeys = new Set([\n  \"F1\",\n  \"F2\",\n  \"F3\",\n  \"F4\",\n  \"F5\",\n  \"F6\",\n  \"F7\",\n  \"F8\",\n  \"F9\",\n  \"F10\",\n  \"F11\",\n  \"F12\",\n]);\nconst specialKeys = union(\n  actionKeys,\n  horizontalNavigationKeys,\n  verticalNavigationKeys,\n  arrowLeftRightKeys,\n  functionKeys,\n  focusKeys\n);\nexport const isCharacterKey = (evt: KeyboardEvent) => {\n  if (specialKeys.has(evt.key)) {\n    return false;\n  }\n  if (typeof evt.which === \"number\" && evt.which > 0) {\n    return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which !== 8;\n  }\n};\n\nexport const isNavigationKey = (\n  { key }: KeyboardEvent,\n  orientation = \"vertical\"\n) => {\n  const navigationKeys =\n    orientation === \"vertical\"\n      ? verticalNavigationKeys\n      : horizontalNavigationKeys;\n  return navigationKeys.has(key);\n};\n"],"names":[],"mappings":"AAEA,SAAS,KAAA,CAAM,SAAsB,IAAqB,EAAA;AACxD,EAAM,MAAA,MAAA,GAAS,IAAI,GAAA,CAAI,IAAI,CAAA,CAAA;AAC3B,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,IAAA,KAAA,MAAW,WAAW,GAAK,EAAA;AACzB,MAAA,MAAA,CAAO,IAAI,OAAO,CAAA,CAAA;AAAA,KACpB;AAAA,GACF;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAEO,MAAM,OAAU,GAAA,UAAA;AAChB,MAAM,SAAY,GAAA,YAAA;AAClB,MAAM,SAAY,GAAA,YAAA;AAElB,MAAM,UAAa,GAAA,aAAA;AACnB,MAAM,KAAQ,GAAA,QAAA;AAEd,MAAM,MAAS,GAAA,SAAA;AAEtB,MAAM,6BAAiB,IAAA,GAAA,CAAI,CAAC,KAAA,EAAO,MAAM,CAAC,CAAA,CAAA;AAC1C,MAAM,SAAY,mBAAA,IAAI,GAAI,CAAA,CAAC,KAAK,CAAC,CAAA,CAAA;AAEjC,MAAM,qCAAyB,IAAA,GAAA,CAAI,CAAC,YAAA,EAAc,WAAW,CAAC,CAAA,CAAA;AAC9D,MAAM,sBAAA,uBAA6B,GAAI,CAAA,CAAC,QAAQ,KAAO,EAAA,WAAA,EAAa,SAAS,CAAC,CAAA,CAAA;AAC9E,MAAM,wBAAA,uBAA+B,GAAI,CAAA;AAAA,EACvC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AACF,CAAC,CAAA,CAAA;AACD,MAAM,YAAA,uBAAmB,GAAI,CAAA;AAAA,EAC3B,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AACF,CAAC,CAAA,CAAA;AACmB,KAAA;AAAA,EAClB,UAAA;AAAA,EACA,wBAAA;AAAA,EACA,sBAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AACF,EAAA;AAUO,MAAM,kBAAkB,CAC7B,EAAE,GAAI,EAAA,EACN,cAAc,UACX,KAAA;AACH,EAAM,MAAA,cAAA,GACJ,WAAgB,KAAA,UAAA,GACZ,sBACA,GAAA,wBAAA,CAAA;AACN,EAAO,OAAA,cAAA,CAAe,IAAI,GAAG,CAAA,CAAA;AAC/B;;;;"}

package/esm/tree/list-dom-utils.js

@@ -0,0 +1,15 @@
+function listItemIndex(listItemEl) {
+  if (listItemEl) {
+    let idx = listItemEl.dataset.idx;
+    if (idx) {
+      return parseInt(idx, 10);
+    } else if (idx = listItemEl.ariaPosInSet ?? "-1") {
+      return parseInt(idx, 10) - 1;
+    }
+  }
+}
+const closestListItem = (el) => el.closest("[data-idx],[aria-posinset]");
+const closestListItemIndex = (el) => listItemIndex(closestListItem(el));
+
+export { closestListItem, closestListItemIndex, listItemIndex };
+//# sourceMappingURL=list-dom-utils.js.map

package/esm/tree/list-dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-dom-utils.js","sources":["../../src/tree/list-dom-utils.ts"],"sourcesContent":["export const listItemElement = (listEl: HTMLElement, listItemIdx: number) =>\n  listEl.querySelector(`:scope > [data-idx=\"${listItemIdx}\"]`);\n\nexport function listItemIndex(listItemEl: HTMLElement) {\n  if (listItemEl) {\n    let idx = listItemEl.dataset.idx;\n    if (idx) {\n      return parseInt(idx, 10);\n      // eslint-disable-next-line no-cond-assign\n    } else if ((idx = listItemEl.ariaPosInSet ?? \"-1\")) {\n      return parseInt(idx, 10) - 1;\n    }\n  }\n}\n\nexport const listItemId = (el: HTMLElement | null) => el?.id;\n\nexport const closestListItem = (el: HTMLElement) =>\n  el.closest(\"[data-idx],[aria-posinset]\") as HTMLElement;\n\nexport const closestListItemId = (el: HTMLElement) =>\n  listItemId(closestListItem(el));\n\nexport const closestListItemIndex = (el: HTMLElement) =>\n  listItemIndex(closestListItem(el));\n"],"names":[],"mappings":"AAGO,SAAS,cAAc,UAAyB,EAAA;AACrD,EAAA,IAAI,UAAY,EAAA;AACd,IAAI,IAAA,GAAA,GAAM,WAAW,OAAQ,CAAA,GAAA,CAAA;AAC7B,IAAA,IAAI,GAAK,EAAA;AACP,MAAO,OAAA,QAAA,CAAS,KAAK,EAAE,CAAA,CAAA;AAAA,KAEb,MAAA,IAAA,GAAA,GAAM,UAAW,CAAA,YAAA,IAAgB,IAAO,EAAA;AAClD,MAAO,OAAA,QAAA,CAAS,GAAK,EAAA,EAAE,CAAI,GAAA,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF;AACF,CAAA;AAIO,MAAM,eAAkB,GAAA,CAAC,EAC9B,KAAA,EAAA,CAAG,QAAQ,4BAA4B,EAAA;AAKlC,MAAM,uBAAuB,CAAC,EAAA,KACnC,aAAc,CAAA,eAAA,CAAgB,EAAE,CAAC;;;;"}

package/esm/tree/treeTypeUtils.js

@@ -0,0 +1,4 @@
+const isExpanded = (node) => node.expanded === true;
+
+export { isExpanded };
+//# sourceMappingURL=treeTypeUtils.js.map

package/esm/tree/treeTypeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeTypeUtils.js","sources":["../../src/tree/treeTypeUtils.ts"],"sourcesContent":["import type { NonLeafNode, NormalisedTreeSourceNode } from \"./treeTypes\";\n\nexport const isExpanded = (\n  node: NormalisedTreeSourceNode\n): node is NonLeafNode => node.expanded === true;\n"],"names":[],"mappings":"AAEO,MAAM,UAAa,GAAA,CACxB,IACwB,KAAA,IAAA,CAAK,QAAa,KAAA;;;;"}

package/esm/tree/use-collapsible-groups.js

@@ -0,0 +1,83 @@
+import { useRef, useCallback } from 'react';
+import { closestListItem } from './list-dom-utils.js';
+import { ArrowRight, Enter, ArrowLeft } from './key-code.js';
+import { replaceNode, getNodeById } from './hierarchical-data-utils.js';
+
+const NO_HANDLERS = {};
+const isToggleElement = (element) => element && element.hasAttribute("aria-expanded");
+const useCollapsibleGroups = ({
+  collapsibleHeaders,
+  highlightedIdx,
+  treeNodes,
+  setVisibleData,
+  source
+}) => {
+  const fullSource = useRef(source);
+  const stateSource = useRef(fullSource.current);
+  const setSource = useCallback(
+    (value) => {
+      setVisibleData(stateSource.current = value);
+    },
+    [setVisibleData]
+  );
+  const expandNode = useCallback(
+    (nodeList, { id }) => replaceNode(nodeList, id, { expanded: true }),
+    []
+  );
+  const collapseNode = useCallback(
+    (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),
+    []
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === ArrowRight || e.key === Enter) {
+        const node = treeNodes[highlightedIdx];
+        if (node) {
+          if (node.expanded === false) {
+            e.preventDefault();
+            setSource(expandNode(stateSource.current, node));
+          }
+        }
+      }
+      if (e.key === ArrowLeft || e.key === Enter) {
+        const node = treeNodes[highlightedIdx];
+        if (node) {
+          if (node.expanded) {
+            e.preventDefault();
+            setSource(collapseNode(stateSource.current, node));
+          }
+        }
+      }
+    },
+    [collapseNode, expandNode, highlightedIdx, treeNodes, setSource]
+  );
+  const listHandlers = collapsibleHeaders ? {
+    onKeyDown: handleKeyDown
+  } : NO_HANDLERS;
+  const handleClick = useCallback(
+    (evt) => {
+      const el = closestListItem(evt.target);
+      if (isToggleElement(el)) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        const node = getNodeById(source, el.id);
+        if (node?.expanded === false) {
+          setSource(expandNode(source, node));
+        } else if (node?.expanded === true) {
+          setSource(collapseNode(source, node));
+        }
+      }
+    },
+    [collapseNode, expandNode, setSource, source]
+  );
+  const listItemHandlers = {
+    onClick: handleClick
+  };
+  return {
+    listHandlers,
+    listItemHandlers
+  };
+};
+
+export { useCollapsibleGroups };
+//# sourceMappingURL=use-collapsible-groups.js.map

package/esm/tree/use-collapsible-groups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-collapsible-groups.js","sources":["../../src/tree/use-collapsible-groups.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, useCallback, useRef } from \"react\";\nimport { closestListItem } from \"./list-dom-utils\";\nimport { ArrowLeft, ArrowRight, Enter } from \"./key-code\";\nimport { getNodeById, replaceNode } from \"./hierarchical-data-utils\";\nimport { NormalisedTreeSourceNode } from \"./treeTypes\";\n\nconst NO_HANDLERS: CollapsibleHookResult[\"listHandlers\"] = {};\nconst isToggleElement = (element: HTMLElement) =>\n  element && element.hasAttribute(\"aria-expanded\");\n\nexport interface CollapsibleGroupsHookProps {\n  collapsibleHeaders?: boolean;\n  highlightedIdx: number;\n  treeNodes: NormalisedTreeSourceNode[];\n  setVisibleData: (nodes: NormalisedTreeSourceNode[]) => void;\n  source: NormalisedTreeSourceNode[];\n}\n\nexport interface CollapsibleHookResult {\n  listHandlers: {\n    onKeyDown?: (e: KeyboardEvent) => void;\n  };\n  listItemHandlers: {\n    onClick: (e: MouseEvent) => void;\n  };\n}\n\nexport const useCollapsibleGroups = ({\n  collapsibleHeaders,\n  highlightedIdx,\n  treeNodes,\n  setVisibleData,\n  source,\n}: CollapsibleGroupsHookProps): CollapsibleHookResult => {\n  const fullSource = useRef<NormalisedTreeSourceNode[]>(source);\n  const stateSource = useRef<NormalisedTreeSourceNode[]>(fullSource.current);\n\n  const setSource = useCallback(\n    (value) => {\n      setVisibleData((stateSource.current = value));\n    },\n    [setVisibleData]\n  );\n\n  const expandNode = useCallback(\n    (nodeList: NormalisedTreeSourceNode[], { id }: NormalisedTreeSourceNode) =>\n      replaceNode(nodeList, id, { expanded: true }),\n    []\n  );\n\n  const collapseNode = useCallback(\n    (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),\n    []\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === ArrowRight || e.key === Enter) {\n        const node = treeNodes[highlightedIdx];\n        if (node) {\n          if (node.expanded === false) {\n            e.preventDefault();\n            setSource(expandNode(stateSource.current, node));\n          }\n        }\n      }\n\n      if (e.key === ArrowLeft || e.key === Enter) {\n        const node = treeNodes[highlightedIdx];\n        if (node) {\n          if (node.expanded) {\n            e.preventDefault();\n            setSource(collapseNode(stateSource.current, node));\n          }\n        }\n      }\n    },\n    [collapseNode, expandNode, highlightedIdx, treeNodes, setSource]\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 = collapsibleHeaders\n    ? {\n        onKeyDown: handleKeyDown,\n      }\n    : NO_HANDLERS;\n\n  const handleClick = useCallback(\n    (evt) => {\n      const el = closestListItem(evt.target);\n      if (isToggleElement(el)) {\n        evt.stopPropagation();\n        evt.preventDefault();\n        const node = getNodeById(source, el.id);\n        if (node?.expanded === false) {\n          setSource(expandNode(source, node));\n        } else if (node?.expanded === true) {\n          setSource(collapseNode(source, node));\n        }\n      }\n    },\n    [collapseNode, expandNode, setSource, source]\n  );\n\n  const listItemHandlers = {\n    onClick: handleClick,\n  };\n\n  return {\n    listHandlers,\n    listItemHandlers,\n  };\n};\n"],"names":[],"mappings":"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"}