@vuu-ui/vuu-ui-controls 0.9.0 → 0.9.2

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

@@ -1 +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;;;;"}
+{"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 \"@vuu-ui/vuu-utils\";\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.map

@@ -1 +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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"}
+{"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 \"@vuu-ui/vuu-utils\";\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.map

@@ -1 +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":"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"}
+{"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 \"@vuu-ui/vuu-utils\";\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":"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"}

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

@@ -1 +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":"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"}
+{"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 \"@vuu-ui/vuu-utils\";\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":"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"}

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

@@ -1 +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;;;;"}
+{"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 \"@vuu-ui/vuu-utils\";\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/useTree.js

@@ -1,8 +1,8 @@
 import { useRef, useCallback } from 'react';
+import { useCollapsibleGroups } from './use-collapsible-groups.js';
+import { useHierarchicalData } from './use-hierarchical-data.js';
 import { useKeyboardNavigation } from './use-keyboard-navigation.js';
 import { useSelection } from './use-selection.js';
-import { useHierarchicalData } from './use-hierarchical-data.js';
-import { useCollapsibleGroups } from './use-collapsible-groups.js';
 import { useTreeKeyboardNavigation } from './use-tree-keyboard-navigation.js';
 
 const EMPTY_ARRAY = [];

package/esm/tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTree.js","sources":["../../src/tree/useTree.ts"],"sourcesContent":["import { KeyboardEvent, useCallback, useRef } from \"react\";\nimport { useKeyboardNavigation } from \"./use-keyboard-navigation\";\nimport {\n  GroupSelection,\n  TreeNodeSelectionHandler,\n  TreeSelection,\n  useSelection,\n} from \"./use-selection\";\nimport { useHierarchicalData } from \"./use-hierarchical-data\";\nimport { useCollapsibleGroups } from \"./use-collapsible-groups\";\nimport { useTreeKeyboardNavigation } from \"./use-tree-keyboard-navigation\";\nimport type { NormalisedTreeSourceNode } from \"./treeTypes\";\n\nconst EMPTY_ARRAY: string[] = [];\n\nexport interface TreeHookProps {\n  defaultSelected?: string[];\n  groupSelection: GroupSelection;\n  onChange: TreeNodeSelectionHandler;\n  onHighlight?: (index: number) => void;\n  selected?: string[];\n  selection: TreeSelection;\n  sourceWithIds: NormalisedTreeSourceNode[];\n}\n\nexport const useTree = ({\n  defaultSelected,\n  sourceWithIds,\n  onChange,\n  onHighlight: onHighlightProp,\n  selected: selectedProp,\n  selection,\n}: TreeHookProps) => {\n  const lastSelection = useRef<string[]>(EMPTY_ARRAY);\n  const dataHook = useHierarchicalData(sourceWithIds);\n\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIdx: number) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIdx);\n  };\n\n  const { highlightedIdx, ...keyboardHook } = useKeyboardNavigation({\n    treeNodes: dataHook.indexPositions,\n    onHighlight: onHighlightProp,\n    onKeyboardNavigation: handleKeyboardNavigation,\n    selected: lastSelection.current,\n  });\n\n  const collapsibleHook = useCollapsibleGroups({\n    collapsibleHeaders: true,\n    highlightedIdx,\n    treeNodes: dataHook.indexPositions,\n    setVisibleData: dataHook.setData,\n    source: dataHook.data,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected,\n    highlightedIdx,\n    treeNodes: dataHook.indexPositions,\n    onChange,\n    selected: selectedProp,\n    selection,\n  });\n\n  const treeNavigationHook = useTreeKeyboardNavigation({\n    source: dataHook.data,\n    highlightedIdx,\n    hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,\n    indexPositions: dataHook.indexPositions,\n  });\n\n  const handleClick = useCallback(\n    (evt) => {\n      collapsibleHook.listItemHandlers?.onClick(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listItemHandlers?.onClick?.(evt);\n      }\n    },\n    [collapsibleHook, selectionHook]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt) => {\n      keyboardHook.listProps.onKeyDown?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        treeNavigationHook.listHandlers.onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook.listHandlers,\n      keyboardHook.listProps,\n      selectionHook.listHandlers,\n      treeNavigationHook.listHandlers,\n    ]\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIdx === undefined || highlightedIdx === -1\n      ? undefined\n      : dataHook.indexPositions[highlightedIdx]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const listProps = {\n    \"aria-activedescendant\": getActiveDescendant(),\n    onBlur: keyboardHook.listProps.onBlur,\n    onFocus: keyboardHook.listProps.onFocus,\n    onKeyDown: handleKeyDown,\n    onMouseDownCapture: keyboardHook.listProps.onMouseDownCapture,\n    onMouseLeave: keyboardHook.listProps.onMouseLeave,\n    onMouseMove: keyboardHook.listProps.onMouseMove,\n  };\n\n  const listItemHandlers = {\n    onClick: handleClick,\n  };\n\n  return {\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx,\n    hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,\n    listProps,\n    listItemHandlers,\n    selected: selectionHook.selected,\n    visibleData: dataHook.data,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTree.js","sources":["../../src/tree/useTree.ts"],"sourcesContent":["import type { NormalisedTreeSourceNode } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEvent, useCallback, useRef } from \"react\";\nimport { useCollapsibleGroups } from \"./use-collapsible-groups\";\nimport { useHierarchicalData } from \"./use-hierarchical-data\";\nimport { useKeyboardNavigation } from \"./use-keyboard-navigation\";\nimport {\n  GroupSelection,\n  TreeNodeSelectionHandler,\n  TreeSelection,\n  useSelection,\n} from \"./use-selection\";\nimport { useTreeKeyboardNavigation } from \"./use-tree-keyboard-navigation\";\n\nconst EMPTY_ARRAY: string[] = [];\n\nexport interface TreeHookProps {\n  defaultSelected?: string[];\n  groupSelection: GroupSelection;\n  onChange: TreeNodeSelectionHandler;\n  onHighlight?: (index: number) => void;\n  selected?: string[];\n  selection: TreeSelection;\n  sourceWithIds: NormalisedTreeSourceNode[];\n}\n\nexport const useTree = ({\n  defaultSelected,\n  sourceWithIds,\n  onChange,\n  onHighlight: onHighlightProp,\n  selected: selectedProp,\n  selection,\n}: TreeHookProps) => {\n  const lastSelection = useRef<string[]>(EMPTY_ARRAY);\n  const dataHook = useHierarchicalData(sourceWithIds);\n\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIdx: number) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIdx);\n  };\n\n  const { highlightedIdx, ...keyboardHook } = useKeyboardNavigation({\n    treeNodes: dataHook.indexPositions,\n    onHighlight: onHighlightProp,\n    onKeyboardNavigation: handleKeyboardNavigation,\n    selected: lastSelection.current,\n  });\n\n  const collapsibleHook = useCollapsibleGroups({\n    collapsibleHeaders: true,\n    highlightedIdx,\n    treeNodes: dataHook.indexPositions,\n    setVisibleData: dataHook.setData,\n    source: dataHook.data,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected,\n    highlightedIdx,\n    treeNodes: dataHook.indexPositions,\n    onChange,\n    selected: selectedProp,\n    selection,\n  });\n\n  const treeNavigationHook = useTreeKeyboardNavigation({\n    source: dataHook.data,\n    highlightedIdx,\n    hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,\n    indexPositions: dataHook.indexPositions,\n  });\n\n  const handleClick = useCallback(\n    (evt) => {\n      collapsibleHook.listItemHandlers?.onClick(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listItemHandlers?.onClick?.(evt);\n      }\n    },\n    [collapsibleHook, selectionHook],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt) => {\n      keyboardHook.listProps.onKeyDown?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        treeNavigationHook.listHandlers.onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook.listHandlers,\n      keyboardHook.listProps,\n      selectionHook.listHandlers,\n      treeNavigationHook.listHandlers,\n    ],\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIdx === undefined || highlightedIdx === -1\n      ? undefined\n      : dataHook.indexPositions[highlightedIdx]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const listProps = {\n    \"aria-activedescendant\": getActiveDescendant(),\n    onBlur: keyboardHook.listProps.onBlur,\n    onFocus: keyboardHook.listProps.onFocus,\n    onKeyDown: handleKeyDown,\n    onMouseDownCapture: keyboardHook.listProps.onMouseDownCapture,\n    onMouseLeave: keyboardHook.listProps.onMouseLeave,\n    onMouseMove: keyboardHook.listProps.onMouseMove,\n  };\n\n  const listItemHandlers = {\n    onClick: handleClick,\n  };\n\n  return {\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx,\n    hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,\n    listProps,\n    listItemHandlers,\n    selected: selectionHook.selected,\n    visibleData: dataHook.data,\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,18 +1,18 @@
 {
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.9.0",
-    "@vuu-ui/vuu-table-types": "0.9.0"
+    "@vuu-ui/vuu-data-types": "0.9.2",
+    "@vuu-ui/vuu-table-types": "0.9.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-data-react": "0.9.0",
-    "@vuu-ui/vuu-layout": "0.9.0",
-    "@vuu-ui/vuu-popups": "0.9.0",
-    "@vuu-ui/vuu-table": "0.9.0",
-    "@vuu-ui/vuu-utils": "0.9.0",
+    "@vuu-ui/vuu-data-react": "0.9.2",
+    "@vuu-ui/vuu-layout": "0.9.2",
+    "@vuu-ui/vuu-popups": "0.9.2",
+    "@vuu-ui/vuu-table": "0.9.2",
+    "@vuu-ui/vuu-utils": "0.9.2",
     "@floating-ui/react": "^0.26.5",
     "@salt-ds/core": "1.34.0",
     "@salt-ds/icons": "1.12.1",

package/types/cycle-state-button/CycleStateButton.d.ts

@@ -1,11 +1,10 @@
+/// <reference types="react" />
 import { ButtonProps } from "@salt-ds/core";
-import type { CommitResponse } from "@vuu-ui/vuu-table-types";
 import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
-import { SyntheticEvent } from "react";
-export type CycleStateCommitHandler = (evt: SyntheticEvent, value: VuuRowDataItemType) => CommitResponse;
+import { CommitHandler } from "@vuu-ui/vuu-utils";
 export interface CycleStateButtonProps extends Omit<ButtonProps, "onChange"> {
     onChange?: (value: VuuRowDataItemType) => void;
-    onCommit?: CycleStateCommitHandler;
+    onCommit?: CommitHandler<HTMLButtonElement>;
     values: string[];
     value: string;
 }

package/types/editable/useEditableText.d.ts

@@ -1,20 +1,19 @@
 import { DataValueValidationChecker } from "@vuu-ui/vuu-data-types";
-import { DataItemCommitHandler } from "@vuu-ui/vuu-table-types";
 import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { DataItemEditHandler } from "@vuu-ui/vuu-table-types";
 import { FocusEventHandler, FormEventHandler, KeyboardEvent } from "react";
-export declare const WarnCommit: () => Promise<true>;
 export interface EditableTextHookProps<T extends VuuRowDataItemType = VuuRowDataItemType> {
     clientSideEditValidationCheck?: DataValueValidationChecker;
-    initialValue?: T;
-    onCommit: DataItemCommitHandler<T>;
+    value?: T;
+    onEdit?: DataItemEditHandler;
     type?: "string" | "number" | "boolean";
 }
-export declare const useEditableText: <T extends string | number = string>({ clientSideEditValidationCheck, initialValue, onCommit, type, }: EditableTextHookProps<T>) => {
+export declare const useEditableText: <T extends string | number | boolean = string>({ clientSideEditValidationCheck, value, onEdit, type, }: EditableTextHookProps<T>) => {
     inputProps: {
         onBlur: FocusEventHandler<HTMLElement>;
         onKeyDown: (evt: KeyboardEvent<HTMLElement>) => void;
     };
     onChange: FormEventHandler;
-    value: string | T;
+    value: string;
     warningMessage: string | undefined;
 };

package/types/icon-button/ToggleIconButton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IconButtonProps } from "./IconButton";
+export interface ToggleIconButtonProps extends Omit<IconButtonProps, "icon"> {
+    isExpanded: boolean;
+}
+export declare const ToggleIconButton: ({ className, isExpanded, size, variant, ...props }: ToggleIconButtonProps) => JSX.Element;

package/types/icon-button/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./Icon";
 export * from "./IconButton";
+export * from "./ToggleIconButton";

package/types/tree/Tree.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import type { TreeSourceNode } from "./treeTypes";
 import { GroupSelection, TreeSelection } from "./use-selection";
+import { TreeSourceNode } from "@vuu-ui/vuu-utils";
 export interface TreeNodeProps extends HTMLAttributes<HTMLLIElement> {
     idx?: number;
 }

package/types/tree/hierarchical-data-utils.d.ts

@@ -1,4 +1,4 @@
-import { NormalisedTreeSourceNode } from "./treeTypes";
+import { NormalisedTreeSourceNode } from "@vuu-ui/vuu-utils";
 export declare const getNodeParentPath: ({ id }: NormalisedTreeSourceNode) => string | null | undefined;
 export declare const isGroupNode: (node: NormalisedTreeSourceNode) => boolean;
 export declare const isCollapsibleGroupNode: (node: NormalisedTreeSourceNode) => boolean;

package/types/tree/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./Tree";
 export * from "./Tree";
-export * from "./treeTypes";
 export * from "./use-items-with-ids";

package/types/tree/treeTypeUtils.d.ts

@@ -1,2 +1,2 @@
-import type { NonLeafNode, NormalisedTreeSourceNode } from "./treeTypes";
+import type { NonLeafNode, NormalisedTreeSourceNode } from "@vuu-ui/vuu-utils";
 export declare const isExpanded: (node: NormalisedTreeSourceNode) => node is NonLeafNode;

package/types/tree/use-collapsible-groups.d.ts

@@ -1,5 +1,5 @@
 import { KeyboardEvent, MouseEvent } from "react";
-import { NormalisedTreeSourceNode } from "./treeTypes";
+import { NormalisedTreeSourceNode } from "@vuu-ui/vuu-utils";
 export interface CollapsibleGroupsHookProps {
     collapsibleHeaders?: boolean;
     highlightedIdx: number;

package/types/tree/use-hierarchical-data.d.ts

@@ -1,4 +1,4 @@
-import { NormalisedTreeSourceNode } from "./treeTypes";
+import { NormalisedTreeSourceNode } from "@vuu-ui/vuu-utils";
 export declare const useHierarchicalData: (source: NormalisedTreeSourceNode[]) => {
     data: NormalisedTreeSourceNode[];
     indexPositions: NormalisedTreeSourceNode[];

package/types/tree/use-items-with-ids.d.ts

@@ -1,4 +1,4 @@
-import { NormalisedTreeSourceNode, TreeSourceNode } from "./treeTypes";
+import { NormalisedTreeSourceNode, TreeSourceNode } from "@vuu-ui/vuu-utils";
 type SourceItemById = (id: string, target?: NormalisedTreeSourceNode[]) => TreeSourceNode | undefined;
 export declare const useItemsWithIds: (sourceProp: TreeSourceNode[], idRoot?: string, { collapsibleHeaders, defaultExpanded, revealSelected, }?: {
     collapsibleHeaders?: undefined;

package/types/tree/use-keyboard-navigation.d.ts

@@ -1,5 +1,5 @@
 import { KeyboardEvent } from "react";
-import { NormalisedTreeSourceNode } from "./treeTypes";
+import { NormalisedTreeSourceNode } from "@vuu-ui/vuu-utils";
 export interface KeyboardNavigationHookProps {
     defaultHighlightedIdx?: number;
     highlightedIdx?: number;

package/types/tree/use-selection.d.ts

@@ -1,5 +1,5 @@
 import { KeyboardEvent, MouseEvent, SyntheticEvent } from "react";
-import { NormalisedTreeSourceNode } from "./treeTypes";
+import { NormalisedTreeSourceNode } from "@vuu-ui/vuu-utils";
 export type TreeSelection = "none" | "single" | "checkbox" | "multi" | "extended";
 export declare const SINGLE = "single";
 export declare const CHECKBOX = "checkbox";

package/types/tree/use-tree-keyboard-navigation.d.ts

@@ -1,4 +1,4 @@
-import { NormalisedTreeSourceNode } from "./treeTypes";
+import { NormalisedTreeSourceNode } from "@vuu-ui/vuu-utils";
 export interface TreeKeyboardNavigationHookProps {
     highlightedIdx: number;
     hiliteItemAtIndex: (idx: number) => void;

package/types/tree/useTree.d.ts

@@ -1,5 +1,5 @@
+import type { NormalisedTreeSourceNode } from "@vuu-ui/vuu-utils";
 import { GroupSelection, TreeNodeSelectionHandler, TreeSelection } from "./use-selection";
-import type { NormalisedTreeSourceNode } from "./treeTypes";
 export interface TreeHookProps {
     defaultSelected?: string[];
     groupSelection: GroupSelection;

package/types/tree/treeTypes.d.ts

@@ -1,17 +0,0 @@
-export interface TreeSourceNode {
-    id: string;
-    icon?: string;
-    header?: boolean;
-    label: string;
-    childNodes?: TreeSourceNode[];
-}
-export interface NormalisedTreeSourceNode extends TreeSourceNode {
-    childNodes?: NormalisedTreeSourceNode[];
-    count: number;
-    expanded?: boolean;
-    index: number;
-    level: number;
-}
-export interface NonLeafNode extends NormalisedTreeSourceNode {
-    childNodes: NormalisedTreeSourceNode[];
-}