@vuu-ui/vuu-ui-controls 0.0.26

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

@@ -0,0 +1,49 @@
+import { useRef, useState } from 'react';
+import { isHeader, isGroupNode } from './hierarchical-data-utils.js';
+import { isExpanded } from './treeTypeUtils.js';
+
+const populateIndices = (nodes, results = [], idx = { value: 0 }) => {
+  let skipToNextHeader = false;
+  for (const node of nodes) {
+    if (skipToNextHeader && !isHeader(node)) {
+      continue;
+    } else {
+      results[idx.value] = node;
+      idx.value += 1;
+      skipToNextHeader = false;
+      if (isHeader(node) && node.expanded === false) {
+        skipToNextHeader = true;
+      } else if (isGroupNode(node)) {
+        if (isExpanded(node)) {
+          populateIndices(node.childNodes, results, idx);
+        }
+      }
+    }
+  }
+  return results;
+};
+const useHierarchicalData = (source) => {
+  const externalSource = useRef(source);
+  const statefulSource = useRef(source);
+  const indexPositions = useRef(populateIndices(source));
+  const [, forceUpdate] = useState({});
+  if (source !== externalSource.current) {
+    externalSource.current = source;
+    statefulSource.current = source;
+    indexPositions.current = populateIndices(source);
+  }
+  const setData = (value) => {
+    statefulSource.current = value;
+    indexPositions.current = populateIndices(value);
+    forceUpdate({});
+  };
+  return {
+    // data, // do we actually use the data anywhere
+    data: statefulSource.current,
+    indexPositions: indexPositions.current,
+    setData
+  };
+};
+
+export { useHierarchicalData };
+//# sourceMappingURL=use-hierarchical-data.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-hierarchical-data.js","sources":["../../src/tree/use-hierarchical-data.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { isGroupNode, isHeader } from \"./hierarchical-data-utils\";\nimport { isExpanded } from \"./treeTypeUtils\";\nimport { NormalisedTreeSourceNode } from \"./treeTypes\";\n\nconst populateIndices = (\n  nodes: NormalisedTreeSourceNode[],\n  results: NormalisedTreeSourceNode[] = [],\n  idx = { value: 0 }\n) => {\n  let skipToNextHeader = false;\n  for (const node of nodes) {\n    if (skipToNextHeader && !isHeader(node)) {\n      continue;\n    } else {\n      results[idx.value] = node;\n      idx.value += 1;\n      skipToNextHeader = false;\n      if (isHeader(node) && node.expanded === false) {\n        skipToNextHeader = true;\n      } else if (isGroupNode(node)) {\n        if (isExpanded(node)) {\n          populateIndices(node.childNodes, results, idx);\n        }\n      }\n    }\n  }\n  return results;\n};\n\n//TODO return a read-only data structure\n// Question: is source changes at runtime, do we lose any current state ?\nexport const useHierarchicalData = (source: NormalisedTreeSourceNode[]) => {\n  // console.log(`%c[useHierarchicalData<${label}>] entry`, 'color: green; font-weight: bold;');\n\n  const externalSource = useRef(source);\n  const statefulSource = useRef(source);\n  const indexPositions = useRef(populateIndices(source));\n  const [, forceUpdate] = useState({});\n\n  // Maintain a mapping between nodes and their current index position within the rendered list.\n  // This index position is liable to change with every expand/collapse operation. We require this\n  // when handling keyboard events - these are List level, not listItem level, so we depend on the\n\n  // Client needs to be careful source is not recreated inadvertently on each render\n  if (source !== externalSource.current) {\n    // console.log(\n    //   `%cuseHierarchicalData source has changed`,\n    //   'color:red;font-weight: bold;',\n    //   externalSource.current,\n    //   source\n    // );\n    externalSource.current = source;\n    // we might want to try and merge existing state here ?\n    statefulSource.current = source;\n    indexPositions.current = populateIndices(source);\n  }\n\n  const setData = (value: NormalisedTreeSourceNode[]) => {\n    statefulSource.current = value;\n    indexPositions.current = populateIndices(value);\n    // console.log(\n    //   `data set in ${label} (${indexPositions.current.length} visible items)`,\n    //   indexPositions.current.map((i) => ({ index: i.index, label: i.label }))\n    // );\n    forceUpdate({});\n  };\n\n  return {\n    // data, // do we actually use the data anywhere\n    data: statefulSource.current,\n    indexPositions: indexPositions.current,\n    setData,\n  };\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,eAAA,GAAkB,CACtB,KAAA,EACA,OAAsC,GAAA,IACtC,GAAM,GAAA,EAAE,KAAO,EAAA,CAAA,EACZ,KAAA;AACH,EAAA,IAAI,gBAAmB,GAAA,KAAA,CAAA;AACvB,EAAA,KAAA,MAAW,QAAQ,KAAO,EAAA;AACxB,IAAA,IAAI,gBAAoB,IAAA,CAAC,QAAS,CAAA,IAAI,CAAG,EAAA;AACvC,MAAA,SAAA;AAAA,KACK,MAAA;AACL,MAAQ,OAAA,CAAA,GAAA,CAAI,KAAK,CAAI,GAAA,IAAA,CAAA;AACrB,MAAA,GAAA,CAAI,KAAS,IAAA,CAAA,CAAA;AACb,MAAmB,gBAAA,GAAA,KAAA,CAAA;AACnB,MAAA,IAAI,QAAS,CAAA,IAAI,CAAK,IAAA,IAAA,CAAK,aAAa,KAAO,EAAA;AAC7C,QAAmB,gBAAA,GAAA,IAAA,CAAA;AAAA,OACrB,MAAA,IAAW,WAAY,CAAA,IAAI,CAAG,EAAA;AAC5B,QAAI,IAAA,UAAA,CAAW,IAAI,CAAG,EAAA;AACpB,UAAgB,eAAA,CAAA,IAAA,CAAK,UAAY,EAAA,OAAA,EAAS,GAAG,CAAA,CAAA;AAAA,SAC/C;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT,CAAA,CAAA;AAIa,MAAA,mBAAA,GAAsB,CAAC,MAAuC,KAAA;AAGzE,EAAM,MAAA,cAAA,GAAiB,OAAO,MAAM,CAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiB,OAAO,MAAM,CAAA,CAAA;AACpC,EAAA,MAAM,cAAiB,GAAA,MAAA,CAAO,eAAgB,CAAA,MAAM,CAAC,CAAA,CAAA;AACrD,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAOnC,EAAI,IAAA,MAAA,KAAW,eAAe,OAAS,EAAA;AAOrC,IAAA,cAAA,CAAe,OAAU,GAAA,MAAA,CAAA;AAEzB,IAAA,cAAA,CAAe,OAAU,GAAA,MAAA,CAAA;AACzB,IAAe,cAAA,CAAA,OAAA,GAAU,gBAAgB,MAAM,CAAA,CAAA;AAAA,GACjD;AAEA,EAAM,MAAA,OAAA,GAAU,CAAC,KAAsC,KAAA;AACrD,IAAA,cAAA,CAAe,OAAU,GAAA,KAAA,CAAA;AACzB,IAAe,cAAA,CAAA,OAAA,GAAU,gBAAgB,KAAK,CAAA,CAAA;AAK9C,IAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,GAChB,CAAA;AAEA,EAAO,OAAA;AAAA;AAAA,IAEL,MAAM,cAAe,CAAA,OAAA;AAAA,IACrB,gBAAgB,cAAe,CAAA,OAAA;AAAA,IAC/B,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/tree/use-items-with-ids.js

@@ -0,0 +1,98 @@
+import { useCallback, useMemo } from 'react';
+
+const PathSeparators = /* @__PURE__ */ new Set(["/", "-", "."]);
+const isPathSeparator = (char) => PathSeparators.has(char);
+const isParentPath = (parentPath, childPath) => childPath.startsWith(parentPath) && isPathSeparator(childPath[parentPath.length]);
+const useItemsWithIds = (sourceProp, idRoot = "root", {
+  collapsibleHeaders = void 0,
+  defaultExpanded = false,
+  revealSelected = false
+} = {}) => {
+  const countChildItems = (item, items, idx) => {
+    if (item.childNodes) {
+      return item.childNodes.length;
+    } else if (item.header) {
+      let i = idx + 1;
+      let count2 = 0;
+      while (i < items.length && !items[i].header) {
+        count2++;
+        i++;
+      }
+      return count2;
+    } else {
+      return 0;
+    }
+  };
+  const isExpanded = useCallback(
+    (path) => {
+      if (Array.isArray(revealSelected)) {
+        return revealSelected.some((id) => isParentPath(path, id));
+      }
+      return defaultExpanded;
+    },
+    [defaultExpanded, revealSelected]
+  );
+  const normalizeItems = useCallback(
+    (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
+      let count2 = 0;
+      items.forEach((item, i, all) => {
+        const isCollapsibleHeader = item.header && collapsibleHeaders;
+        const isNonCollapsibleGroupNode = item.childNodes && collapsibleHeaders === false;
+        const isLeaf = !item.childNodes || item.childNodes.length === 0;
+        const nonCollapsible = isNonCollapsibleGroupNode || isLeaf && !isCollapsibleHeader;
+        const childPath = path ? `${path}.${i}` : `${i}`;
+        const id = item.id ?? `${idRoot}-${childPath}`;
+        const expanded = nonCollapsible ? void 0 : isExpanded(id);
+        const normalisedItem = {
+          ...item,
+          childNodes: void 0,
+          id,
+          count: !isNonCollapsibleGroupNode && expanded === void 0 ? 0 : countChildItems(item, all, i),
+          expanded,
+          index: indexer.index,
+          level
+        };
+        results.push(normalisedItem);
+        flattenedSource2.push(items[i]);
+        count2 += 1;
+        indexer.index += 1;
+        if (item.childNodes) {
+          const [childCount, children] = normalizeItems(
+            item.childNodes,
+            indexer,
+            level + 1,
+            childPath,
+            [],
+            flattenedSource2
+          );
+          normalisedItem.childNodes = children;
+          if (expanded === true || isNonCollapsibleGroupNode) {
+            count2 += childCount;
+          }
+        }
+      });
+      return [count2, results, flattenedSource2];
+    },
+    [collapsibleHeaders, idRoot, isExpanded]
+  );
+  const [count, sourceWithIds, flattenedSource] = useMemo(() => {
+    return normalizeItems(sourceProp, { index: 0 });
+  }, [normalizeItems, sourceProp]);
+  const sourceItemById = useCallback(
+    (id, target = sourceWithIds) => {
+      const sourceWithId = target.find(
+        (i) => i.id === id || i?.childNodes?.length && isParentPath(i.id, id)
+      );
+      if (sourceWithId?.id === id) {
+        return flattenedSource[sourceWithId.index];
+      } else if (sourceWithId) {
+        return sourceItemById(id, sourceWithId.childNodes);
+      }
+    },
+    [flattenedSource, sourceWithIds]
+  );
+  return [count, sourceWithIds, sourceItemById];
+};
+
+export { useItemsWithIds };
+//# sourceMappingURL=use-items-with-ids.js.map

package/esm/tree/use-items-with-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-items-with-ids.js","sources":["../../src/tree/use-items-with-ids.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { NormalisedTreeSourceNode, TreeSourceNode } from \"./treeTypes\";\n\nconst PathSeparators = new Set([\"/\", \"-\", \".\"]);\n// TODO where do we define or identify separators\nconst isPathSeparator = (char: string) => PathSeparators.has(char);\n\nconst isParentPath = (parentPath: string, childPath: string) =>\n  childPath.startsWith(parentPath) &&\n  isPathSeparator(childPath[parentPath.length]);\n\ntype Indexer = {\n  index: number;\n};\n\ntype SourceItemById = (\n  id: string,\n  target?: NormalisedTreeSourceNode[]\n) => TreeSourceNode | undefined;\n\nexport const useItemsWithIds = (\n  sourceProp: TreeSourceNode[],\n  idRoot = \"root\",\n  {\n    collapsibleHeaders = undefined,\n    defaultExpanded = false,\n    revealSelected = false,\n  } = {}\n): [number, NormalisedTreeSourceNode[], SourceItemById] => {\n  const countChildItems = (\n    item: TreeSourceNode,\n    items: TreeSourceNode[],\n    idx: number\n  ) => {\n    if (item.childNodes) {\n      return item.childNodes.length;\n    } else if (item.header) {\n      let i = idx + 1;\n      let count = 0;\n      while (i < items.length && !items[i].header) {\n        count++;\n        i++;\n      }\n      return count;\n    } else {\n      return 0;\n    }\n  };\n\n  const isExpanded = useCallback(\n    (path) => {\n      if (Array.isArray(revealSelected)) {\n        return revealSelected.some((id) => isParentPath(path, id));\n      }\n      return defaultExpanded;\n    },\n    [defaultExpanded, revealSelected]\n  );\n\n  const normalizeItems = useCallback(\n    (\n      items: TreeSourceNode[],\n      indexer: Indexer,\n      level = 1,\n      path = \"\",\n      results: NormalisedTreeSourceNode[] = [],\n      flattenedSource: TreeSourceNode[] = []\n    ): [number, NormalisedTreeSourceNode[], TreeSourceNode[]] => {\n      let count = 0;\n      // TODO get rid of the Proxy\n      items.forEach((item, i, all) => {\n        const isCollapsibleHeader = item.header && collapsibleHeaders;\n        const isNonCollapsibleGroupNode =\n          item.childNodes && collapsibleHeaders === false;\n        const isLeaf = !item.childNodes || item.childNodes.length === 0;\n        const nonCollapsible =\n          isNonCollapsibleGroupNode || (isLeaf && !isCollapsibleHeader);\n        const childPath = path ? `${path}.${i}` : `${i}`;\n        const id = item.id ?? `${idRoot}-${childPath}`;\n\n        const expanded = nonCollapsible ? undefined : isExpanded(id);\n        //TODO dev time check - if id is provided by user, make sure\n        // hierarchical pattern is consistent\n        const normalisedItem: NormalisedTreeSourceNode = {\n          ...item,\n          childNodes: undefined,\n          id,\n          count:\n            !isNonCollapsibleGroupNode && expanded === undefined\n              ? 0\n              : countChildItems(item, all, i),\n          expanded,\n          index: indexer.index,\n          level,\n        };\n        results.push(normalisedItem);\n        flattenedSource.push(items[i]);\n\n        count += 1;\n        indexer.index += 1;\n\n        // if ((isNonCollapsibleGroupNode || expanded !== undefined) && !isCollapsibleHeader) {\n        if (item.childNodes) {\n          const [childCount, children] = normalizeItems(\n            item.childNodes,\n            indexer,\n            level + 1,\n            childPath,\n            [],\n            flattenedSource\n          );\n          normalisedItem.childNodes = children;\n          if (expanded === true || isNonCollapsibleGroupNode) {\n            count += childCount;\n          }\n        }\n      });\n      return [count, results, flattenedSource];\n    },\n    [collapsibleHeaders, idRoot, isExpanded]\n  );\n\n  const [count, sourceWithIds, flattenedSource] = useMemo<\n    [number, NormalisedTreeSourceNode[], TreeSourceNode[]]\n  >(() => {\n    return normalizeItems(sourceProp, { index: 0 });\n  }, [normalizeItems, sourceProp]);\n\n  const sourceItemById = useCallback<SourceItemById>(\n    (id, target = sourceWithIds): TreeSourceNode | undefined => {\n      const sourceWithId = target.find(\n        (i) => i.id === id || (i?.childNodes?.length && isParentPath(i.id, id))\n      );\n      if (sourceWithId?.id === id) {\n        return flattenedSource[sourceWithId.index];\n      } else if (sourceWithId) {\n        return sourceItemById(id, sourceWithId.childNodes);\n      }\n    },\n    [flattenedSource, sourceWithIds]\n  );\n\n  return [count, sourceWithIds, sourceItemById];\n};\n"],"names":["count","flattenedSource"],"mappings":"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"}

package/esm/tree/use-keyboard-navigation.js

@@ -0,0 +1,142 @@
+import { useMemo, useCallback, useRef } from 'react';
+import { getNodeById, getIndexOfNode } from './hierarchical-data-utils.js';
+import { useControlled } from '@salt-ds/core';
+import { ArrowUp, ArrowDown, isNavigationKey, ArrowLeft } from './key-code.js';
+
+function nextItemIdx(count, key, idx) {
+  if (key === ArrowUp || key === ArrowLeft) {
+    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 isLeaf = (item) => !item.header && !item.childNodes;
+const isFocusable = (item) => isLeaf(item) || item.expanded !== void 0;
+const useKeyboardNavigation = ({
+  defaultHighlightedIdx = -1,
+  highlightedIdx: highlightedIdxProp,
+  treeNodes,
+  onHighlight,
+  onKeyboardNavigation,
+  selected = []
+}) => {
+  const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo(
+    () => ({
+      bwd: ArrowUp,
+      fwd: ArrowDown
+    }),
+    []
+  );
+  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = useControlled({
+    controlled: highlightedIdxProp,
+    default: defaultHighlightedIdx,
+    name: "highlightedIdx"
+  });
+  const setHighlightedIndex = useCallback(
+    (idx) => {
+      onHighlight?.(idx);
+      setHighlightedIdx(idx);
+    },
+    [onHighlight, setHighlightedIdx]
+  );
+  const nextFocusableItemIdx = useCallback(
+    (key = ArrowFwd, idx = key === ArrowFwd ? -1 : treeNodes.length) => {
+      let nextIdx = nextItemIdx(treeNodes.length, key, idx);
+      while (nextIdx !== -1 && (key === ArrowFwd && nextIdx < treeNodes.length || key === ArrowBwd && nextIdx > 0) && !isFocusable(treeNodes[nextIdx])) {
+        nextIdx = nextItemIdx(treeNodes.length, key, nextIdx);
+      }
+      return nextIdx;
+    },
+    [ArrowBwd, ArrowFwd, treeNodes]
+  );
+  const keyBoardNavigation = useRef(true);
+  const ignoreFocus = useRef(false);
+  const setIgnoreFocus = (value) => ignoreFocus.current = value;
+  const handleFocus = useCallback(() => {
+    if (ignoreFocus.current) {
+      ignoreFocus.current = false;
+    } else if (selected.length > 0) {
+      const node = getNodeById(treeNodes, selected[0]);
+      if (node) {
+        const idx = getIndexOfNode(treeNodes, node);
+        setHighlightedIndex(idx);
+      }
+    } else {
+      setHighlightedIndex(nextFocusableItemIdx());
+    }
+  }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
+  const navigateChildItems = useCallback(
+    (e) => {
+      const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
+      if (nextIdx !== highlightedIdx) {
+        setHighlightedIndex(nextIdx);
+        onKeyboardNavigation?.(e, nextIdx);
+      }
+    },
+    [
+      highlightedIdx,
+      nextFocusableItemIdx,
+      onKeyboardNavigation,
+      setHighlightedIndex
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (treeNodes.length > 0 && isNavigationKey(e, "vertical")) {
+        e.preventDefault();
+        e.stopPropagation();
+        keyBoardNavigation.current = true;
+        navigateChildItems(e);
+      }
+    },
+    [treeNodes, navigateChildItems]
+  );
+  const listProps = useMemo(
+    () => ({
+      onBlur: () => {
+        setHighlightedIndex(-1);
+      },
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onMouseDownCapture: () => {
+        keyBoardNavigation.current = false;
+        setIgnoreFocus(true);
+      },
+      // onMouseEnter would seem less expensive but it misses some cases
+      // SHould this be here - this is not strictly keyboard nav
+      onMouseMove: () => {
+        if (keyBoardNavigation.current) {
+          keyBoardNavigation.current = false;
+        }
+      },
+      onMouseLeave: () => {
+        keyBoardNavigation.current = true;
+        setIgnoreFocus(false);
+        setHighlightedIndex(-1);
+      }
+    }),
+    [handleFocus, handleKeyDown, setHighlightedIndex]
+  );
+  return {
+    focusVisible: keyBoardNavigation.current ? highlightedIdx : -1,
+    controlledHighlighting: isControlledHighlighting,
+    highlightedIdx,
+    hiliteItemAtIndex: setHighlightedIndex,
+    keyBoardNavigation,
+    listProps,
+    setIgnoreFocus
+  };
+};
+
+export { useKeyboardNavigation };
+//# sourceMappingURL=use-keyboard-navigation.js.map

package/esm/tree/use-keyboard-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard-navigation.js","sources":["../../src/tree/use-keyboard-navigation.ts"],"sourcesContent":["import { KeyboardEvent, useCallback, useMemo, useRef } from \"react\";\nimport { getIndexOfNode, getNodeById } from \"./hierarchical-data-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { ArrowDown, ArrowLeft, ArrowUp, isNavigationKey } from \"./key-code\";\nimport { NormalisedTreeSourceNode } from \"./treeTypes\";\n\nfunction nextItemIdx(count: number, key: string, idx: number) {\n  if (key === ArrowUp || key === ArrowLeft) {\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 isLeaf = (item: NormalisedTreeSourceNode) =>\n  !item.header && !item.childNodes;\nconst isFocusable = (item: NormalisedTreeSourceNode) =>\n  isLeaf(item) || item.expanded !== undefined;\n\nexport interface KeyboardNavigationHookProps {\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  onHighlight?: (highlightedIdx: number) => void;\n  onKeyboardNavigation?: (evt: KeyboardEvent, nextIdx: number) => void;\n  selected: string[];\n  treeNodes: NormalisedTreeSourceNode[];\n}\n\n// we need a way to set highlightedIdx when selection changes\nexport const useKeyboardNavigation = ({\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  treeNodes,\n  onHighlight,\n  onKeyboardNavigation,\n  selected = [],\n}: KeyboardNavigationHookProps) => {\n  const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo(\n    () => ({\n      bwd: ArrowUp,\n      fwd: ArrowDown,\n    }),\n    []\n  );\n\n  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] =\n    useControlled({\n      controlled: highlightedIdxProp,\n      default: defaultHighlightedIdx,\n      name: \"highlightedIdx\",\n    });\n\n  const setHighlightedIndex = useCallback(\n    (idx) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n    },\n    [onHighlight, setHighlightedIdx]\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (key = ArrowFwd, idx = key === ArrowFwd ? -1 : treeNodes.length) => {\n      let nextIdx = nextItemIdx(treeNodes.length, key, idx);\n      while (\n        nextIdx !== -1 &&\n        ((key === ArrowFwd && nextIdx < treeNodes.length) ||\n          (key === ArrowBwd && nextIdx > 0)) &&\n        !isFocusable(treeNodes[nextIdx])\n      ) {\n        nextIdx = nextItemIdx(treeNodes.length, key, nextIdx);\n      }\n      return nextIdx;\n    },\n    [ArrowBwd, ArrowFwd, treeNodes]\n  );\n\n  // does this belong here or should it be a method passed in?\n  const keyBoardNavigation = useRef(true);\n  const ignoreFocus = useRef(false);\n  const setIgnoreFocus = (value: boolean) => (ignoreFocus.current = value);\n\n  const handleFocus = useCallback(() => {\n    if (ignoreFocus.current) {\n      ignoreFocus.current = false;\n    } else if (selected.length > 0) {\n      const node = getNodeById(treeNodes, selected[0]);\n      if (node) {\n        const idx = getIndexOfNode(treeNodes, node);\n        setHighlightedIndex(idx);\n      }\n    } else {\n      setHighlightedIndex(nextFocusableItemIdx());\n    }\n  }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);\n\n  const navigateChildItems = useCallback(\n    (e) => {\n      const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);\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    (e) => {\n      if (treeNodes.length > 0 && isNavigationKey(e, \"vertical\")) {\n        e.preventDefault();\n        e.stopPropagation();\n        keyBoardNavigation.current = true;\n        navigateChildItems(e);\n      }\n    },\n    [treeNodes, navigateChildItems]\n  );\n\n  const listProps = useMemo(\n    () => ({\n      onBlur: () => {\n        setHighlightedIndex(-1);\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      // SHould this be here - this is not strictly keyboard nav\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]\n  );\n\n  return {\n    focusVisible: keyBoardNavigation.current ? highlightedIdx : -1,\n    controlledHighlighting: isControlledHighlighting,\n    highlightedIdx,\n    hiliteItemAtIndex: setHighlightedIndex,\n    keyBoardNavigation,\n    listProps,\n    setIgnoreFocus,\n  };\n};\n"],"names":[],"mappings":";;;;;AAMA,SAAS,WAAA,CAAY,KAAe,EAAA,GAAA,EAAa,GAAa,EAAA;AAC5D,EAAI,IAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,KAAQ,SAAW,EAAA;AACxC,IAAA,IAAI,MAAM,CAAG,EAAA;AACX,MAAA,OAAO,GAAM,GAAA,CAAA,CAAA;AAAA,KACR,MAAA;AACL,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,MAAO,OAAA,CAAA,CAAA;AAAA,KACT,MAAA,IAAW,GAAQ,KAAA,KAAA,GAAQ,CAAG,EAAA;AAC5B,MAAO,OAAA,GAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAA,OAAO,GAAM,GAAA,CAAA,CAAA;AAAA,KACf;AAAA,GACF;AACF,CAAA;AAEA,MAAM,SAAS,CAAC,IAAA,KACd,CAAC,IAAK,CAAA,MAAA,IAAU,CAAC,IAAK,CAAA,UAAA,CAAA;AACxB,MAAM,cAAc,CAAC,IAAA,KACnB,OAAO,IAAI,CAAA,IAAK,KAAK,QAAa,KAAA,KAAA,CAAA,CAAA;AAY7B,MAAM,wBAAwB,CAAC;AAAA,EACpC,qBAAwB,GAAA,CAAA,CAAA;AAAA,EACxB,cAAgB,EAAA,kBAAA;AAAA,EAChB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,oBAAA;AAAA,EACA,WAAW,EAAC;AACd,CAAmC,KAAA;AACjC,EAAA,MAAM,EAAE,GAAA,EAAK,QAAU,EAAA,GAAA,EAAK,UAAa,GAAA,OAAA;AAAA,IACvC,OAAO;AAAA,MACL,GAAK,EAAA,OAAA;AAAA,MACL,GAAK,EAAA,SAAA;AAAA,KACP,CAAA;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAmB,EAAA,wBAAwB,IAChE,aAAc,CAAA;AAAA,IACZ,UAAY,EAAA,kBAAA;AAAA,IACZ,OAAS,EAAA,qBAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,GACP,CAAA,CAAA;AAEH,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,GAAQ,KAAA;AACP,MAAA,WAAA,GAAc,GAAG,CAAA,CAAA;AACjB,MAAA,iBAAA,CAAkB,GAAG,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,aAAa,iBAAiB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,MAAM,QAAU,EAAA,GAAA,GAAM,QAAQ,QAAW,GAAA,CAAA,CAAA,GAAK,UAAU,MAAW,KAAA;AAClE,MAAA,IAAI,OAAU,GAAA,WAAA,CAAY,SAAU,CAAA,MAAA,EAAQ,KAAK,GAAG,CAAA,CAAA;AACpD,MAAA,OACE,YAAY,CACV,CAAA,KAAA,GAAA,KAAQ,QAAY,IAAA,OAAA,GAAU,UAAU,MACvC,IAAA,GAAA,KAAQ,QAAY,IAAA,OAAA,GAAU,MACjC,CAAC,WAAA,CAAY,SAAU,CAAA,OAAO,CAAC,CAC/B,EAAA;AACA,QAAA,OAAA,GAAU,WAAY,CAAA,SAAA,CAAU,MAAQ,EAAA,GAAA,EAAK,OAAO,CAAA,CAAA;AAAA,OACtD;AACA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,QAAU,EAAA,QAAA,EAAU,SAAS,CAAA;AAAA,GAChC,CAAA;AAGA,EAAM,MAAA,kBAAA,GAAqB,OAAO,IAAI,CAAA,CAAA;AACtC,EAAM,MAAA,WAAA,GAAc,OAAO,KAAK,CAAA,CAAA;AAChC,EAAA,MAAM,cAAiB,GAAA,CAAC,KAAoB,KAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AAElE,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AAAA,KACxB,MAAA,IAAW,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AAC9B,MAAA,MAAM,IAAO,GAAA,WAAA,CAAY,SAAW,EAAA,QAAA,CAAS,CAAC,CAAC,CAAA,CAAA;AAC/C,MAAA,IAAI,IAAM,EAAA;AACR,QAAM,MAAA,GAAA,GAAM,cAAe,CAAA,SAAA,EAAW,IAAI,CAAA,CAAA;AAC1C,QAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,OACzB;AAAA,KACK,MAAA;AACL,MAAA,mBAAA,CAAoB,sBAAsB,CAAA,CAAA;AAAA,KAC5C;AAAA,KACC,CAAC,SAAA,EAAW,oBAAsB,EAAA,QAAA,EAAU,mBAAmB,CAAC,CAAA,CAAA;AAEnE,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,OAAU,GAAA,oBAAA,CAAqB,CAAE,CAAA,GAAA,EAAK,cAAc,CAAA,CAAA;AAC1D,MAAA,IAAI,YAAY,cAAgB,EAAA;AAC9B,QAAA,mBAAA,CAAoB,OAAO,CAAA,CAAA;AAE3B,QAAA,oBAAA,GAAuB,GAAG,OAAO,CAAA,CAAA;AAAA,OACnC;AAAA,KACF;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAA,IAAI,UAAU,MAAS,GAAA,CAAA,IAAK,eAAgB,CAAA,CAAA,EAAG,UAAU,CAAG,EAAA;AAC1D,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,QAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,QAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAC7B,QAAA,kBAAA,CAAmB,CAAC,CAAA,CAAA;AAAA,OACtB;AAAA,KACF;AAAA,IACA,CAAC,WAAW,kBAAkB,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,OAAA;AAAA,IAChB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,QAAA,mBAAA,CAAoB,CAAE,CAAA,CAAA,CAAA;AAAA,OACxB;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,oBAAoB,MAAM;AACxB,QAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA,CAAA;AAC7B,QAAA,cAAA,CAAe,IAAI,CAAA,CAAA;AAAA,OACrB;AAAA;AAAA;AAAA,MAIA,aAAa,MAAM;AACjB,QAAA,IAAI,mBAAmB,OAAS,EAAA;AAC9B,UAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA,CAAA;AAAA,SAC/B;AAAA,OACF;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAC7B,QAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AACpB,QAAA,mBAAA,CAAoB,CAAE,CAAA,CAAA,CAAA;AAAA,OACxB;AAAA,KACF,CAAA;AAAA,IACA,CAAC,WAAa,EAAA,aAAA,EAAe,mBAAmB,CAAA;AAAA,GAClD,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,YAAA,EAAc,kBAAmB,CAAA,OAAA,GAAU,cAAiB,GAAA,CAAA,CAAA;AAAA,IAC5D,sBAAwB,EAAA,wBAAA;AAAA,IACxB,cAAA;AAAA,IACA,iBAAmB,EAAA,mBAAA;AAAA,IACnB,kBAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/tree/use-selection.js

@@ -0,0 +1,147 @@
+import { useRef, useCallback } from 'react';
+import { useControlled } from '@salt-ds/core';
+
+const SINGLE = "single";
+const CHECKBOX = "checkbox";
+const MULTI = "multi";
+const EXTENDED = "extended";
+const defaultSelectionKeys = ["Enter", " "];
+const NO_HANDLERS = {};
+const isCollapsibleItem = (item) => item.expanded !== void 0;
+const groupSelectionEnabled = (groupSelection) => groupSelection && groupSelection !== "none";
+const useSelection = ({
+  defaultSelected,
+  highlightedIdx,
+  treeNodes,
+  onChange,
+  selected: selectedProp,
+  selection = SINGLE,
+  selectionKeys = defaultSelectionKeys
+}) => {
+  const singleSelect = selection === SINGLE;
+  const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX);
+  const extendedSelect = selection === EXTENDED;
+  const lastActive = useRef(-1);
+  const isSelectionEvent = useCallback(
+    (evt) => selectionKeys.includes(evt.key),
+    [selectionKeys]
+  );
+  const [selected, setSelected] = useControlled({
+    controlled: selectedProp,
+    default: defaultSelected ?? [],
+    name: "selected"
+  });
+  const selectItemAtIndex = useCallback(
+    (evt, idx, id, rangeSelect, preserveExistingSelection = false) => {
+      const { current: active } = lastActive;
+      const isSelected = selected?.includes(id);
+      const inactiveRange = active === -1;
+      const actsLikeSingleSelect = singleSelect || extendedSelect && !preserveExistingSelection && (!rangeSelect || inactiveRange);
+      const actsLikeMultiSelect = multiSelect || extendedSelect && preserveExistingSelection && !rangeSelect;
+      let newSelected = [];
+      if (actsLikeSingleSelect && isSelected) {
+        newSelected = [];
+      } else if (actsLikeSingleSelect) {
+        newSelected = [id];
+      } else if (actsLikeMultiSelect && isSelected) {
+        newSelected = selected.filter((i) => i !== id);
+      } else if (actsLikeMultiSelect) {
+        newSelected = selected.concat(id);
+      } else if (extendedSelect) {
+        const [from, to] = idx > active ? [active, idx] : [idx, active];
+        newSelected = selected.slice();
+        for (let i = from; i <= to; i++) {
+          const { id: id2 } = treeNodes[i];
+          if (!selected.includes(id2)) {
+            newSelected.push(id2);
+          }
+        }
+      }
+      setSelected(newSelected);
+      if (onChange) {
+        onChange(evt, newSelected);
+      }
+    },
+    [
+      extendedSelect,
+      treeNodes,
+      multiSelect,
+      onChange,
+      selected,
+      setSelected,
+      singleSelect
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      if (~highlightedIdx && isSelectionEvent(evt)) {
+        evt.preventDefault();
+        const item = treeNodes[highlightedIdx];
+        selectItemAtIndex(
+          evt,
+          highlightedIdx,
+          item.id,
+          false,
+          evt.ctrlKey || evt.metaKey
+        );
+        if (extendedSelect) {
+          lastActive.current = highlightedIdx;
+        }
+      }
+    },
+    [
+      extendedSelect,
+      highlightedIdx,
+      treeNodes,
+      isSelectionEvent,
+      selectItemAtIndex
+    ]
+  );
+  const handleKeyboardNavigation = useCallback(
+    (evt, currentIndex) => {
+      if (extendedSelect && evt.shiftKey) {
+        const item = treeNodes[currentIndex];
+        selectItemAtIndex(evt, currentIndex, item.id, true);
+      }
+    },
+    [extendedSelect, treeNodes, selectItemAtIndex]
+  );
+  const listHandlers = selection === "none" ? NO_HANDLERS : {
+    onKeyDown: handleKeyDown,
+    onKeyboardNavigation: handleKeyboardNavigation
+  };
+  const handleClick = useCallback(
+    (evt) => {
+      if (highlightedIdx !== -1) {
+        const item = treeNodes[highlightedIdx];
+        if (!isCollapsibleItem(item)) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          selectItemAtIndex(
+            evt,
+            highlightedIdx,
+            item.id,
+            evt.shiftKey,
+            evt.ctrlKey || evt.metaKey
+          );
+          if (extendedSelect) {
+            lastActive.current = highlightedIdx;
+          }
+        }
+      }
+    },
+    [extendedSelect, highlightedIdx, treeNodes, selectItemAtIndex]
+  );
+  const listItemHandlers = selection === "none" ? NO_HANDLERS : {
+    onClick: handleClick
+  };
+  return {
+    listHandlers,
+    listItemHandlers,
+    selected,
+    setSelected
+  };
+};
+
+export { CHECKBOX, EXTENDED, MULTI, SINGLE, groupSelectionEnabled, useSelection };
+//# sourceMappingURL=use-selection.js.map

package/esm/tree/use-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection.js","sources":["../../src/tree/use-selection.ts"],"sourcesContent":["import {\n  KeyboardEvent,\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { NormalisedTreeSourceNode } from \"./treeTypes\";\n\nexport type TreeSelection =\n  | \"none\"\n  | \"single\"\n  | \"checkbox\"\n  | \"multi\"\n  | \"extended\";\n\nexport const SINGLE = \"single\";\nexport const CHECKBOX = \"checkbox\";\nexport const MULTI = \"multi\";\nexport const EXTENDED = \"extended\";\n\nexport type GroupSelection = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst NO_HANDLERS = {};\n\nconst isCollapsibleItem = (item: NormalisedTreeSourceNode) =>\n  item.expanded !== undefined;\n\nexport type TreeNodeSelectionHandler = (\n  evt: SyntheticEvent,\n  selected: string[]\n) => void;\n\nexport const groupSelectionEnabled = (groupSelection: GroupSelection) =>\n  groupSelection && groupSelection !== \"none\";\n\nexport interface SelectionHookProps {\n  defaultSelected?: string[];\n  highlightedIdx: number;\n  onChange: TreeNodeSelectionHandler;\n  selected?: string[];\n  selection: TreeSelection;\n  selectionKeys?: string[];\n  treeNodes: NormalisedTreeSourceNode[];\n}\n\nexport interface SelectionHookResult {\n  listHandlers: {\n    onKeyDown?: (evt: KeyboardEvent) => void;\n    onKeyboardNavigation?: (evt: KeyboardEvent, currentIndex: number) => void;\n  };\n  listItemHandlers: {\n    onClick?: (evt: MouseEvent) => void;\n  };\n  selected: string[];\n  setSelected: (selected: string[]) => void;\n}\n\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  treeNodes,\n  onChange,\n  selected: selectedProp,\n  selection = SINGLE,\n  selectionKeys = defaultSelectionKeys,\n}: SelectionHookProps): SelectionHookResult => {\n  const singleSelect = selection === SINGLE;\n  const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX);\n  const extendedSelect = selection === EXTENDED;\n  const lastActive = useRef(-1);\n\n  const isSelectionEvent = useCallback(\n    (evt) => selectionKeys.includes(evt.key),\n    [selectionKeys]\n  );\n\n  const [selected, setSelected] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"selected\",\n  });\n\n  // const highlightedIdxRef = useRef();\n  // highlightedIdxRef.current = highlightedIdx;\n\n  const selectItemAtIndex = useCallback(\n    (\n      evt: SyntheticEvent,\n      idx: number,\n      id: string,\n      rangeSelect: boolean,\n      preserveExistingSelection = false\n    ) => {\n      const { current: active } = lastActive;\n      const isSelected = selected?.includes(id);\n      const inactiveRange = active === -1;\n      const actsLikeSingleSelect =\n        singleSelect ||\n        (extendedSelect &&\n          !preserveExistingSelection &&\n          (!rangeSelect || inactiveRange));\n      const actsLikeMultiSelect =\n        multiSelect ||\n        (extendedSelect && preserveExistingSelection && !rangeSelect);\n\n      let newSelected: string[] = [];\n      if (actsLikeSingleSelect && isSelected) {\n        newSelected = [];\n      } else if (actsLikeSingleSelect) {\n        newSelected = [id];\n      } else if (actsLikeMultiSelect && isSelected) {\n        newSelected = selected.filter((i) => i !== id);\n      } else if (actsLikeMultiSelect) {\n        newSelected = selected.concat(id);\n      } else if (extendedSelect) {\n        const [from, to] = idx > active ? [active, idx] : [idx, active];\n        newSelected = selected.slice();\n        for (let i = from; i <= to; i++) {\n          const { id } = treeNodes[i];\n          if (!selected.includes(id)) {\n            newSelected.push(id);\n          }\n        }\n      }\n      setSelected(newSelected);\n      if (onChange) {\n        onChange(evt, newSelected);\n      }\n    },\n    [\n      extendedSelect,\n      treeNodes,\n      multiSelect,\n      onChange,\n      selected,\n      setSelected,\n      singleSelect,\n    ]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      if (~highlightedIdx && isSelectionEvent(evt)) {\n        evt.preventDefault();\n        const item = treeNodes[highlightedIdx];\n        selectItemAtIndex(\n          evt,\n          highlightedIdx,\n          item.id,\n          false,\n          evt.ctrlKey || evt.metaKey\n        );\n        if (extendedSelect) {\n          lastActive.current = highlightedIdx;\n        }\n      }\n    },\n    [\n      extendedSelect,\n      highlightedIdx,\n      treeNodes,\n      isSelectionEvent,\n      selectItemAtIndex,\n    ]\n  );\n\n  const handleKeyboardNavigation = useCallback(\n    (evt: KeyboardEvent, currentIndex: number) => {\n      if (extendedSelect && evt.shiftKey) {\n        const item = treeNodes[currentIndex];\n        selectItemAtIndex(evt, currentIndex, item.id, true);\n      }\n    },\n    [extendedSelect, treeNodes, selectItemAtIndex]\n  );\n\n  const listHandlers =\n    selection === \"none\"\n      ? NO_HANDLERS\n      : {\n          onKeyDown: handleKeyDown,\n          onKeyboardNavigation: handleKeyboardNavigation,\n        };\n\n  const handleClick = useCallback(\n    (evt: MouseEvent) => {\n      if (highlightedIdx !== -1) {\n        const item = treeNodes[highlightedIdx];\n        if (!isCollapsibleItem(item)) {\n          evt.preventDefault();\n          evt.stopPropagation();\n          selectItemAtIndex(\n            evt,\n            highlightedIdx,\n            item.id,\n            evt.shiftKey,\n            evt.ctrlKey || evt.metaKey\n          );\n          if (extendedSelect) {\n            lastActive.current = highlightedIdx;\n          }\n        }\n      }\n    },\n    [extendedSelect, highlightedIdx, treeNodes, selectItemAtIndex]\n  );\n\n  const listItemHandlers =\n    selection === \"none\"\n      ? NO_HANDLERS\n      : {\n          onClick: handleClick,\n        };\n\n  return {\n    listHandlers,\n    listItemHandlers,\n    selected,\n    setSelected,\n  };\n};\n"],"names":["id"],"mappings":";;;AAiBO,MAAM,MAAS,GAAA,SAAA;AACf,MAAM,QAAW,GAAA,WAAA;AACjB,MAAM,KAAQ,GAAA,QAAA;AACd,MAAM,QAAW,GAAA,WAAA;AAIxB,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAE1C,MAAM,cAAc,EAAC,CAAA;AAErB,MAAM,iBAAoB,GAAA,CAAC,IACzB,KAAA,IAAA,CAAK,QAAa,KAAA,KAAA,CAAA,CAAA;AAOb,MAAM,qBAAwB,GAAA,CAAC,cACpC,KAAA,cAAA,IAAkB,cAAmB,KAAA,OAAA;AAwBhC,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,MAAA;AAAA,EACZ,aAAgB,GAAA,oBAAA;AAClB,CAA+C,KAAA;AAC7C,EAAA,MAAM,eAAe,SAAc,KAAA,MAAA,CAAA;AACnC,EAAA,MAAM,WAAc,GAAA,SAAA,KAAc,KAAS,IAAA,SAAA,CAAU,WAAW,QAAQ,CAAA,CAAA;AACxE,EAAA,MAAM,iBAAiB,SAAc,KAAA,QAAA,CAAA;AACrC,EAAM,MAAA,UAAA,GAAa,OAAO,CAAE,CAAA,CAAA,CAAA;AAE5B,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,GAAA,KAAQ,aAAc,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IACvC,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAc,CAAA;AAAA,IAC5C,UAAY,EAAA,YAAA;AAAA,IACZ,OAAA,EAAS,mBAAmB,EAAC;AAAA,IAC7B,IAAM,EAAA,UAAA;AAAA,GACP,CAAA,CAAA;AAKD,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CACE,GACA,EAAA,GAAA,EACA,EACA,EAAA,WAAA,EACA,4BAA4B,KACzB,KAAA;AACH,MAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,UAAA,CAAA;AAC5B,MAAM,MAAA,UAAA,GAAa,QAAU,EAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AACxC,MAAA,MAAM,gBAAgB,MAAW,KAAA,CAAA,CAAA,CAAA;AACjC,MAAA,MAAM,uBACJ,YACC,IAAA,cAAA,IACC,CAAC,yBAAA,KACA,CAAC,WAAe,IAAA,aAAA,CAAA,CAAA;AACrB,MAAA,MAAM,mBACJ,GAAA,WAAA,IACC,cAAkB,IAAA,yBAAA,IAA6B,CAAC,WAAA,CAAA;AAEnD,MAAA,IAAI,cAAwB,EAAC,CAAA;AAC7B,MAAA,IAAI,wBAAwB,UAAY,EAAA;AACtC,QAAA,WAAA,GAAc,EAAC,CAAA;AAAA,iBACN,oBAAsB,EAAA;AAC/B,QAAA,WAAA,GAAc,CAAC,EAAE,CAAA,CAAA;AAAA,OACnB,MAAA,IAAW,uBAAuB,UAAY,EAAA;AAC5C,QAAA,WAAA,GAAc,QAAS,CAAA,MAAA,CAAO,CAAC,CAAA,KAAM,MAAM,EAAE,CAAA,CAAA;AAAA,iBACpC,mBAAqB,EAAA;AAC9B,QAAc,WAAA,GAAA,QAAA,CAAS,OAAO,EAAE,CAAA,CAAA;AAAA,iBACvB,cAAgB,EAAA;AACzB,QAAA,MAAM,CAAC,IAAA,EAAM,EAAE,CAAA,GAAI,GAAM,GAAA,MAAA,GAAS,CAAC,MAAA,EAAQ,GAAG,CAAA,GAAI,CAAC,GAAA,EAAK,MAAM,CAAA,CAAA;AAC9D,QAAA,WAAA,GAAc,SAAS,KAAM,EAAA,CAAA;AAC7B,QAAA,KAAA,IAAS,CAAI,GAAA,IAAA,EAAM,CAAK,IAAA,EAAA,EAAI,CAAK,EAAA,EAAA;AAC/B,UAAA,MAAM,EAAE,EAAA,EAAAA,GAAG,EAAA,GAAI,UAAU,CAAC,CAAA,CAAA;AAC1B,UAAA,IAAI,CAAC,QAAA,CAAS,QAASA,CAAAA,GAAE,CAAG,EAAA;AAC1B,YAAA,WAAA,CAAY,KAAKA,GAAE,CAAA,CAAA;AAAA,WACrB;AAAA,SACF;AAAA,OACF;AACA,MAAA,WAAA,CAAY,WAAW,CAAA,CAAA;AACvB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,KAAK,WAAW,CAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAuB,KAAA;AACtB,MAAA,IAAI,CAAC,cAAA,IAAkB,gBAAiB,CAAA,GAAG,CAAG,EAAA;AAC5C,QAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,QAAM,MAAA,IAAA,GAAO,UAAU,cAAc,CAAA,CAAA;AACrC,QAAA,iBAAA;AAAA,UACE,GAAA;AAAA,UACA,cAAA;AAAA,UACA,IAAK,CAAA,EAAA;AAAA,UACL,KAAA;AAAA,UACA,GAAA,CAAI,WAAW,GAAI,CAAA,OAAA;AAAA,SACrB,CAAA;AACA,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,UAAA,CAAW,OAAU,GAAA,cAAA,CAAA;AAAA,SACvB;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,wBAA2B,GAAA,WAAA;AAAA,IAC/B,CAAC,KAAoB,YAAyB,KAAA;AAC5C,MAAI,IAAA,cAAA,IAAkB,IAAI,QAAU,EAAA;AAClC,QAAM,MAAA,IAAA,GAAO,UAAU,YAAY,CAAA,CAAA;AACnC,QAAA,iBAAA,CAAkB,GAAK,EAAA,YAAA,EAAc,IAAK,CAAA,EAAA,EAAI,IAAI,CAAA,CAAA;AAAA,OACpD;AAAA,KACF;AAAA,IACA,CAAC,cAAgB,EAAA,SAAA,EAAW,iBAAiB,CAAA;AAAA,GAC/C,CAAA;AAEA,EAAM,MAAA,YAAA,GACJ,SAAc,KAAA,MAAA,GACV,WACA,GAAA;AAAA,IACE,SAAW,EAAA,aAAA;AAAA,IACX,oBAAsB,EAAA,wBAAA;AAAA,GACxB,CAAA;AAEN,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAoB,KAAA;AACnB,MAAA,IAAI,mBAAmB,CAAI,CAAA,EAAA;AACzB,QAAM,MAAA,IAAA,GAAO,UAAU,cAAc,CAAA,CAAA;AACrC,QAAI,IAAA,CAAC,iBAAkB,CAAA,IAAI,CAAG,EAAA;AAC5B,UAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,UAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,UAAA,iBAAA;AAAA,YACE,GAAA;AAAA,YACA,cAAA;AAAA,YACA,IAAK,CAAA,EAAA;AAAA,YACL,GAAI,CAAA,QAAA;AAAA,YACJ,GAAA,CAAI,WAAW,GAAI,CAAA,OAAA;AAAA,WACrB,CAAA;AACA,UAAA,IAAI,cAAgB,EAAA;AAClB,YAAA,UAAA,CAAW,OAAU,GAAA,cAAA,CAAA;AAAA,WACvB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,cAAA,EAAgB,cAAgB,EAAA,SAAA,EAAW,iBAAiB,CAAA;AAAA,GAC/D,CAAA;AAEA,EAAM,MAAA,gBAAA,GACJ,SAAc,KAAA,MAAA,GACV,WACA,GAAA;AAAA,IACE,OAAS,EAAA,WAAA;AAAA,GACX,CAAA;AAEN,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/tree/use-tree-keyboard-navigation.js

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import { ArrowLeft } from './key-code.js';
+import { getNodeParentPath, getNodeById, getIndexOfNode } from './hierarchical-data-utils.js';
+
+const useTreeKeyboardNavigation = ({
+  highlightedIdx,
+  hiliteItemAtIndex,
+  indexPositions,
+  source
+}) => {
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === ArrowLeft) {
+        const node = indexPositions[highlightedIdx];
+        const parentId = getNodeParentPath(node);
+        if (parentId) {
+          e.preventDefault();
+          const parentNode = getNodeById(source, parentId);
+          if (parentNode) {
+            const idx = getIndexOfNode(indexPositions, parentNode);
+            if (idx !== void 0) {
+              hiliteItemAtIndex(idx);
+            }
+          }
+        }
+      }
+    },
+    [highlightedIdx, hiliteItemAtIndex, indexPositions, source]
+  );
+  const listHandlers = {
+    onKeyDown: handleKeyDown
+  };
+  return {
+    listHandlers
+  };
+};
+
+export { useTreeKeyboardNavigation };
+//# sourceMappingURL=use-tree-keyboard-navigation.js.map

package/esm/tree/use-tree-keyboard-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-keyboard-navigation.js","sources":["../../src/tree/use-tree-keyboard-navigation.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { ArrowLeft } from \"./key-code\";\nimport {\n  getNodeById,\n  getNodeParentPath,\n  getIndexOfNode,\n} from \"./hierarchical-data-utils\";\nimport { NormalisedTreeSourceNode } from \"./treeTypes\";\n\nexport interface TreeKeyboardNavigationHookProps {\n  highlightedIdx: number;\n  hiliteItemAtIndex: (idx: number) => void;\n  indexPositions: NormalisedTreeSourceNode[];\n  source: NormalisedTreeSourceNode[];\n}\n\n// we need a way to set highlightedIdx when selection changes\nexport const useTreeKeyboardNavigation = ({\n  highlightedIdx,\n  hiliteItemAtIndex,\n  indexPositions,\n  source,\n}: TreeKeyboardNavigationHookProps) => {\n  const handleKeyDown = useCallback(\n    (e) => {\n      if (e.key === ArrowLeft) {\n        const node = indexPositions[highlightedIdx];\n        const parentId = getNodeParentPath(node);\n        if (parentId) {\n          e.preventDefault();\n          const parentNode = getNodeById(source, parentId);\n          if (parentNode) {\n            const idx = getIndexOfNode(indexPositions, parentNode);\n            if (idx !== undefined) {\n              hiliteItemAtIndex(idx);\n            }\n          }\n        }\n      }\n    },\n    [highlightedIdx, hiliteItemAtIndex, indexPositions, source]\n  );\n\n  const listHandlers = {\n    onKeyDown: handleKeyDown,\n  };\n\n  return {\n    listHandlers,\n  };\n};\n"],"names":[],"mappings":";;;;AAiBO,MAAM,4BAA4B,CAAC;AAAA,EACxC,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA;AAAA,EACA,MAAA;AACF,CAAuC,KAAA;AACrC,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,SAAW,EAAA;AACvB,QAAM,MAAA,IAAA,GAAO,eAAe,cAAc,CAAA,CAAA;AAC1C,QAAM,MAAA,QAAA,GAAW,kBAAkB,IAAI,CAAA,CAAA;AACvC,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,UAAM,MAAA,UAAA,GAAa,WAAY,CAAA,MAAA,EAAQ,QAAQ,CAAA,CAAA;AAC/C,UAAA,IAAI,UAAY,EAAA;AACd,YAAM,MAAA,GAAA,GAAM,cAAe,CAAA,cAAA,EAAgB,UAAU,CAAA,CAAA;AACrD,YAAA,IAAI,QAAQ,KAAW,CAAA,EAAA;AACrB,cAAA,iBAAA,CAAkB,GAAG,CAAA,CAAA;AAAA,aACvB;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,cAAA,EAAgB,iBAAmB,EAAA,cAAA,EAAgB,MAAM,CAAA;AAAA,GAC5D,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB,SAAW,EAAA,aAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/tree/use-viewport-tracking.js

@@ -0,0 +1,74 @@
+import { useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import '../common-hooks/collectionProvider.js';
+import { useResizeObserver } from '../common-hooks/use-resize-observer.js';
+
+const HeightOnly = ["height", "scrollHeight"];
+const useViewportTracking = (root, highlightedIdx, stickyHeaders = false) => {
+  const scrollTop = useRef(0);
+  const scrolling = useRef(false);
+  const rootHeight = useRef(0);
+  const rootScrollHeight = useRef(0);
+  const scrollIntoView = useCallback(
+    (el) => {
+      const targetEl = el.ariaExpanded ? el.firstChild : el;
+      const headerHeight = stickyHeaders ? 30 : 0;
+      const t = targetEl.offsetTop;
+      const h = targetEl.offsetHeight;
+      const viewportStart = scrollTop.current + headerHeight;
+      const viewportEnd = viewportStart + rootHeight.current - headerHeight;
+      if (t + h > viewportEnd || t < viewportStart) {
+        scrollTop.current = t + h > viewportEnd ? scrollTop.current + (t + h) - viewportEnd : t - headerHeight;
+        scrolling.current = true;
+        if (root.current) {
+          root.current.scrollTop = scrollTop.current;
+        }
+        setTimeout(() => {
+          scrolling.current = false;
+        });
+      }
+    },
+    [root, stickyHeaders]
+  );
+  const scrollHandler = useCallback((e) => {
+    scrollTop.current = e.target.scrollTop;
+  }, []);
+  useEffect(() => {
+    const { current: rootEl } = root;
+    if (rootEl) {
+      rootEl.addEventListener("scroll", scrollHandler);
+    }
+    return () => {
+      if (rootEl) {
+        rootEl.removeEventListener("scroll", scrollHandler);
+      }
+    };
+  }, [root, scrollHandler]);
+  useLayoutEffect(() => {
+    if (highlightedIdx !== -1 && rootScrollHeight.current > rootHeight.current) {
+      if (root.current) {
+        const item = root.current.querySelector(`
+        [data-idx='${highlightedIdx}'],
+        [aria-posinset='${highlightedIdx + 1}']
+        `);
+        if (item === null) {
+          console.log(
+            "[useViewportTracking], is this virtualised ?  we're going to have to know rowHeight"
+          );
+        } else {
+          scrollIntoView(item);
+        }
+      }
+    }
+  }, [highlightedIdx, root, scrollIntoView]);
+  useEffect(() => {
+  }, [stickyHeaders]);
+  const onResize = useCallback(({ height, scrollHeight }) => {
+    rootHeight.current = height;
+    rootScrollHeight.current = scrollHeight;
+  }, []);
+  useResizeObserver(root, HeightOnly, onResize, true);
+  return scrolling;
+};
+
+export { useViewportTracking };
+//# sourceMappingURL=use-viewport-tracking.js.map

package/esm/tree/use-viewport-tracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewport-tracking.js","sources":["../../src/tree/use-viewport-tracking.ts"],"sourcesContent":["import {\n  RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { useResizeObserver } from \"../common-hooks\";\n\nconst HeightOnly = [\"height\", \"scrollHeight\"];\n\nexport const useViewportTracking = (\n  root: RefObject<HTMLElement>,\n  highlightedIdx: number,\n  stickyHeaders = false\n) => {\n  const scrollTop = useRef(0);\n  const scrolling = useRef(false);\n  const rootHeight = useRef(0);\n  const rootScrollHeight = useRef(0);\n\n  const scrollIntoView = useCallback(\n    (el) => {\n      const targetEl = el.ariaExpanded ? el.firstChild : el;\n      const headerHeight = stickyHeaders ? 30 : 0;\n      const t = targetEl.offsetTop;\n      const h = targetEl.offsetHeight;\n      const viewportStart = scrollTop.current + headerHeight;\n      const viewportEnd = viewportStart + rootHeight.current - headerHeight;\n\n      if (t + h > viewportEnd || t < viewportStart) {\n        scrollTop.current =\n          t + h > viewportEnd\n            ? scrollTop.current + (t + h) - viewportEnd\n            : t - headerHeight;\n\n        scrolling.current = true;\n        if (root.current) {\n          root.current.scrollTop = scrollTop.current;\n        }\n        setTimeout(() => {\n          scrolling.current = false;\n        });\n      }\n    },\n    [root, stickyHeaders]\n  );\n\n  const scrollHandler = useCallback((e) => {\n    scrollTop.current = e.target.scrollTop;\n  }, []);\n\n  useEffect(() => {\n    const { current: rootEl } = root;\n    if (rootEl) {\n      rootEl.addEventListener(\"scroll\", scrollHandler);\n    }\n\n    return () => {\n      if (rootEl) {\n        rootEl.removeEventListener(\"scroll\", scrollHandler);\n      }\n    };\n  }, [root, scrollHandler]);\n\n  useLayoutEffect(() => {\n    if (\n      highlightedIdx !== -1 &&\n      rootScrollHeight.current > rootHeight.current\n    ) {\n      if (root.current) {\n        const item = root.current.querySelector(`\n        [data-idx='${highlightedIdx}'],\n        [aria-posinset='${highlightedIdx + 1}']\n        `);\n        if (item === null) {\n          console.log(\n            \"[useViewportTracking], is this virtualised ?  we're going to have to know rowHeight\"\n          );\n        } else {\n          scrollIntoView(item);\n        }\n      }\n    }\n  }, [highlightedIdx, root, scrollIntoView]);\n\n  useEffect(() => {\n    // onsole.log('TODO measure the sticky header')\n  }, [stickyHeaders]);\n\n  const onResize = useCallback(({ height, scrollHeight }) => {\n    rootHeight.current = height;\n    rootScrollHeight.current = scrollHeight;\n  }, []);\n\n  useResizeObserver(root, HeightOnly, onResize, true);\n\n  return scrolling;\n};\n"],"names":[],"mappings":"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"}