@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist-cjs/toolbar/overflow-panel/OverflowSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowSeparator.js","sources":["../src/toolbar/overflow-panel/OverflowSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport overflowSeparatorCss from \"./OverflowSeparator.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltOverflowSeparator\");\n\nexport interface OverflowSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  children?: never;\n  focusable?: boolean;\n}\n\nexport const OverflowSeparator = (\n  props: OverflowSeparatorProps\n): ReactElement => {\n  const { className, focusable, ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-separator\",\n    css: overflowSeparatorCss,\n    window: targetWindow,\n  });\n  return <div className={clsx(withBaseName(), className)} {...rest} />;\n};\n\nOverflowSeparator.defaultProps = {\n  focusable: false,\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","overflowSeparatorCss","jsx","clsx"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAO5C,MAAA,iBAAA,GAAoB,CAC/B,KACiB,KAAA;AACjB,EAAA,MAAM,EAAE,SAAA,EAAW,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1C,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,IAAA;AAAA,GAAM,CAAA,CAAA;AACpE,EAAA;AAEA,iBAAA,CAAkB,YAAe,GAAA;AAAA,EAC/B,SAAW,EAAA,KAAA;AACb,CAAA;;;;"}

package/dist-cjs/toolbar/toolbar-field/ToolbarField.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useToolbarField = require('./useToolbarField.js');
+var FormFieldLegacy = require('../../form-field-legacy/FormFieldLegacy.js');
+require('../../form-field-legacy/FormLabel.js');
+
+const ToolbarField = React.forwardRef(function ToolbarField2(props, forwardedRef) {
+  const toolbarFieldProps = useToolbarField.useToolbarField(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldLegacy.FormFieldLegacy, {
+    ...toolbarFieldProps,
+    ref: forwardedRef
+  });
+});
+ToolbarField.displayName = "ToolbarField";
+
+exports.ToolbarField = ToolbarField;
+//# sourceMappingURL=ToolbarField.js.map

package/dist-cjs/toolbar/toolbar-field/ToolbarField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarField.js","sources":["../src/toolbar/toolbar-field/ToolbarField.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from \"react\";\nimport { ToolbarFieldProps } from \"./toolbarFieldTypes\";\nimport { useToolbarField } from \"./useToolbarField\";\n\nimport { FormFieldLegacy as FormField } from \"../../form-field-legacy\";\n\nexport const ToolbarField = forwardRef(function ToolbarField(\n  props: ToolbarFieldProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const toolbarFieldProps = useToolbarField(props);\n  return <FormField {...toolbarFieldProps} ref={forwardedRef} />;\n});\n\nToolbarField.displayName = \"ToolbarField\";\n"],"names":["forwardRef","ToolbarField","useToolbarField","jsx","FormField"],"mappings":";;;;;;;;;;AAMO,MAAM,YAAe,GAAAA,gBAAA,CAAW,SAASC,aAAAA,CAC9C,OACA,YACA,EAAA;AACA,EAAM,MAAA,iBAAA,GAAoBC,gCAAgB,KAAK,CAAA,CAAA;AAC/C,EAAA,uBAAQC,cAAA,CAAAC,+BAAA,EAAA;AAAA,IAAW,GAAG,iBAAA;AAAA,IAAmB,GAAK,EAAA,YAAA;AAAA,GAAc,CAAA,CAAA;AAC9D,CAAC,EAAA;AAED,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}

package/dist-cjs/toolbar/toolbar-field/useToolbarField.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var clsx = require('clsx');
+var React = require('react');
+var ToolbarButton = require('../ToolbarButton.js');
+
+const NullActivationIndicator = () => null;
+const primaryControls = ["Dropdown", "Input"];
+const getChildElementName = (element) => {
+  if (React.isValidElement(element)) {
+    const { type } = element;
+    if (typeof type === "string") {
+      return type;
+    } else if (typeof type.name === "string") {
+      return type.name;
+    } else if ("displayName" in type) {
+      return type.displayName;
+    } else {
+      return "";
+    }
+  } else {
+    throw Error(
+      "useToolbarField, child of ToolbarField is not valid ReactElememnt"
+    );
+  }
+};
+const isToolbarButton = (element) => React.isValidElement(element) && element.type === ToolbarButton.ToolbarButton;
+const getToolbarFormFieldProps = (child, isOverflowPanel = false) => {
+  let activationIndicator = NullActivationIndicator;
+  let variant = "tertiary";
+  const element = child;
+  if (React.isValidElement(element)) {
+    const name = getChildElementName(element);
+    if (primaryControls.includes(name)) {
+      activationIndicator = void 0;
+      variant = "primary";
+    }
+  }
+  return {
+    ActivationIndicatorComponent: activationIndicator,
+    className: clsx.clsx({
+      "saltFormFieldLegacy-toolbarButton": isOverflowPanel && isToolbarButton(element),
+      [`saltFormFieldLegacy-${variant}`]: variant
+    }),
+    fullWidth: false
+  };
+};
+const InteractiveComponents = ["Input", "Dropdown"];
+const useToolbarField = (props) => {
+  const {
+    ActivationIndicatorComponent: ActivationIndicatorComponentProp,
+    className: classNameProp,
+    inOverflowPanel,
+    labelPlacement: labelPlacementProp,
+    onClick,
+    ...rest
+  } = props;
+  const childElementName = getChildElementName(props.children);
+  const { className, ActivationIndicatorComponent, ...calculatedProps } = getToolbarFormFieldProps(props.children, inOverflowPanel);
+  const labelPlacement = labelPlacementProp != null ? labelPlacementProp : inOverflowPanel ? "top" : "left";
+  const handleClick = React.useCallback(
+    (e) => {
+      if (onClick && !InteractiveComponents.includes(childElementName)) {
+        onClick(e);
+      }
+    },
+    [childElementName, onClick]
+  );
+  return {
+    ActivationIndicatorComponent: ActivationIndicatorComponentProp != null ? ActivationIndicatorComponentProp : ActivationIndicatorComponent,
+    className: clsx.clsx("saltToolbarField", classNameProp, className),
+    labelPlacement,
+    onClick: handleClick,
+    ...rest,
+    ...calculatedProps
+  };
+};
+
+exports.getToolbarFormFieldProps = getToolbarFormFieldProps;
+exports.useToolbarField = useToolbarField;
+//# sourceMappingURL=useToolbarField.js.map

package/dist-cjs/toolbar/toolbar-field/useToolbarField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarField.js","sources":["../src/toolbar/toolbar-field/useToolbarField.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  isValidElement,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport { ToolbarButton } from \"../ToolbarButton\";\nimport { ToolbarFieldProps } from \"./toolbarFieldTypes\";\n\ntype TypeWithDisplayName = { displayName: string };\ntype ActivationIndicator = ToolbarFieldProps[\"ActivationIndicatorComponent\"];\ntype ToolbarFormFieldVariant = \"primary\" | \"tertiary\";\n\nconst NullActivationIndicator = () => null;\nconst primaryControls = [\"Dropdown\", \"Input\"];\n\nconst getChildElementName = (element: ReactNode): string => {\n  if (isValidElement(element)) {\n    const { type } = element;\n    if (typeof type === \"string\") {\n      return type;\n    } else if (typeof type.name === \"string\") {\n      return type.name;\n    } else if (\"displayName\" in type) {\n      return (type as TypeWithDisplayName).displayName;\n    } else {\n      return \"\";\n    }\n  } else {\n    throw Error(\n      \"useToolbarField, child of ToolbarField is not valid ReactElememnt\"\n    );\n  }\n};\n\n// ToolbarButton gets special styling treatment in the OverflowPanel but styling is\n// applied to the FormField, so we need to target those FormFields hosting ToolbarButtons.\nconst isToolbarButton = (element: ReactElement): boolean =>\n  isValidElement(element) && element.type === ToolbarButton;\n\n// Some props for Toolbar FormFields depend on the control hosted by\n// the FormField.\nexport const getToolbarFormFieldProps = (\n  child: ReactNode,\n  isOverflowPanel = false\n): ToolbarFieldProps => {\n  let activationIndicator: ActivationIndicator = NullActivationIndicator;\n  let variant: ToolbarFormFieldVariant = \"tertiary\";\n  const element = child as ReactElement;\n  if (isValidElement(element)) {\n    const name = getChildElementName(element);\n    if (primaryControls.includes(name)) {\n      activationIndicator = undefined;\n      variant = \"primary\";\n    }\n  }\n  return {\n    ActivationIndicatorComponent: activationIndicator,\n    className: clsx({\n      \"saltFormFieldLegacy-toolbarButton\":\n        isOverflowPanel && isToolbarButton(element),\n      [`saltFormFieldLegacy-${variant}`]: variant,\n    }),\n    fullWidth: false,\n  };\n};\n\n// Eventually this list needs to be configurable at the Toolbar level\nconst InteractiveComponents = [\"Input\", \"Dropdown\"];\n\nexport const useToolbarField = (\n  props: ToolbarFieldProps\n): ToolbarFieldProps => {\n  const {\n    ActivationIndicatorComponent: ActivationIndicatorComponentProp,\n    className: classNameProp,\n    inOverflowPanel,\n    labelPlacement: labelPlacementProp,\n    onClick,\n    ...rest\n  } = props;\n\n  const childElementName = getChildElementName(props.children);\n  const { className, ActivationIndicatorComponent, ...calculatedProps } =\n    getToolbarFormFieldProps(props.children, inOverflowPanel);\n\n  const labelPlacement =\n    labelPlacementProp ?? (inOverflowPanel ? \"top\" : \"left\");\n\n  // disableFocusRing ???\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (onClick && !InteractiveComponents.includes(childElementName)) {\n        onClick(e);\n      }\n    },\n    [childElementName, onClick]\n  );\n  return {\n    ActivationIndicatorComponent:\n      ActivationIndicatorComponentProp ?? ActivationIndicatorComponent,\n    className: clsx(\"saltToolbarField\", classNameProp, className),\n    labelPlacement,\n    onClick: handleClick,\n    ...rest,\n    ...calculatedProps,\n  };\n};\n"],"names":["isValidElement","ToolbarButton","clsx","useCallback"],"mappings":"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"}

package/dist-cjs/tree/Tree.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTree {\n  --tree-node-collapse: var(--saltTree-node-collapse, var(--list-svg-tree-node-collapse));\n  --tree-node-expand: var(--saltTree-node-expand, var(--list-svg-tree-node-expand));\n  --tree-node-expanded-transform: var(--saltTree-node-expanded-transform, none);\n  --tree-node-indent: 0px;\n  --tree-toggle-width: 12px;\n\n  /* TODO: Use appropriate characteristics */\n  --list-background-highlighted: rgba(1, 1, 1, 0.1);\n  --list-item-height: 30px;\n  --list-item-padding: 0 6px;\n  --list-item-header-background: black;\n  --list-item-header-color: white;\n  --list-item-header-fontWeight: bold;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-content: \"\";\n  --list-item-header-twisty-top: 50%;\n  --list-item-header-twisty-left: -18px;\n  --list-item-header-twisty-right: auto;\n  --list-item-selected-color: white;\n\n  margin: 0;\n  padding: 0 1px;\n  font-size: var(--saltTree-fontSize, 14px);\n  max-height: inherit;\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n}\n\n.saltTree-child-nodes {\n  width: 100%;\n}\n\n.saltTree-scrollingContentContainer {\n  box-sizing: inherit;\n  list-style: none;\n  margin: 0;\n  position: relative;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Tree.css.js.map

package/dist-cjs/tree/Tree.css.js.map

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

package/dist-cjs/tree/Tree.js

@@ -0,0 +1,223 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var useAutoSizer = require('../common-hooks/useAutoSizer.js');
+var calcPreferredHeight = require('../common-hooks/calcPreferredHeight.js');
+require('../common-hooks/collectionProvider.js');
+require('../common-hooks/keyUtils.js');
+var listDomUtils = require('../common-hooks/list-dom-utils.js');
+var useCollectionItems = require('../common-hooks/useCollectionItems.js');
+var useSelection = require('../common-hooks/useSelection.js');
+require('../responsive/useResizeObserver.js');
+var isSelected = require('../common-hooks/utils/isSelected.js');
+var useTree = require('./useTree.js');
+var TreeNode = require('./TreeNode.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Tree$1 = require('./Tree.css.js');
+
+const withBaseName = core.makePrefixer("saltTree");
+const Tree = React.forwardRef(function Tree2({
+  className,
+  defaultSelected,
+  disabled,
+  groupSelection = useSelection.GROUP_SELECTION_NONE,
+  height,
+  id: idProp,
+  onHighlight,
+  onToggle,
+  onSelect,
+  onSelectionChange,
+  revealSelected,
+  selected: selectedProp,
+  selectionStrategy,
+  source,
+  style: styleProp,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  var _a;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-tree",
+    css: Tree$1,
+    window: targetWindow
+  });
+  const id = core.useIdMemo(idProp);
+  const rootRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const collectionHook = useCollectionItems.useCollectionItems({
+    id,
+    source,
+    options: {
+      noChildrenLabel: "No children available",
+      revealSelected: revealSelected ? (_a = selectedProp != null ? selectedProp : defaultSelected) != null ? _a : false : void 0
+    }
+  });
+  const preferredHeight = height != null ? height : calcPreferredHeight.calcPreferredHeight({
+    displayedItemCount: 10,
+    itemCount: collectionHook.data.length,
+    itemHeight: 36
+  });
+  const autoSize = useAutoSizer.useAutoSizer({
+    containerRef: rootRef,
+    responsive: width === void 0 || height === void 0,
+    height: preferredHeight,
+    width
+  });
+  const handleSelect = React.useCallback(
+    (evt, selectedItem) => {
+      if (onSelect) {
+        if (React.isValidElement(selectedItem.value)) {
+          onSelect(evt, selectedItem.label);
+        } else if (selectedItem.value !== null) {
+          onSelect(evt, selectedItem.value);
+        }
+      }
+    },
+    [onSelect]
+  );
+  const handleSelectionChange = React.useCallback(
+    (evt, selected2) => {
+      if (onSelectionChange) {
+        onSelectionChange(
+          evt,
+          Array.isArray(selected2) ? selected2.map((s) => s.value) : selected2 && selected2.value
+        );
+      }
+    },
+    [onSelectionChange]
+  );
+  const {
+    focusVisible,
+    highlightedIdx,
+    highlightItemAtIndex,
+    listHandlers,
+    listProps,
+    listItemHandlers,
+    selected
+  } = useTree.useTree({
+    collectionHook,
+    containerRef: rootRef,
+    contentRef,
+    defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
+    disabled,
+    groupSelection,
+    onHighlight,
+    onSelect: handleSelect,
+    onSelectionChange: handleSelectionChange,
+    onToggle,
+    selected: collectionHook.itemToCollectionItem(selectedProp),
+    selectionStrategy
+  });
+  const defaultItemHandlers = {
+    onMouseEnter: (evt) => {
+      const idx = listDomUtils.closestListItemIndex(evt.target);
+      highlightItemAtIndex(idx);
+    }
+  };
+  const propsCommonToAllListItems = {
+    ...defaultItemHandlers,
+    ...listItemHandlers,
+    isLeaf: true,
+    role: "treeitem"
+  };
+  const allowGroupSelect = false;
+  function addLeafNode(list, item, idx) {
+    const itemProps = {
+      "aria-disabled": disabled || item.disabled,
+      "aria-level": item.level,
+      "data-idx": idx.value,
+      description: item.description,
+      id: item.id,
+      key: item.id,
+      highlighted: idx.value === highlightedIdx || void 0,
+      selected: isSelected.isSelected(selected, item),
+      className: clsx.clsx({
+        focusVisible: focusVisible === idx.value
+      })
+    };
+    list.push(
+      /* @__PURE__ */ jsxRuntime.jsx(TreeNode.TreeNode, {
+        ...propsCommonToAllListItems,
+        ...itemProps,
+        label: item.label
+      })
+    );
+    idx.value += 1;
+  }
+  function addGroupNode(list, items, idx, id2, title) {
+    const { value: i } = idx;
+    const item = items[i];
+    idx.value += 1;
+    list.push(
+      /* @__PURE__ */ React.createElement(TreeNode.TreeNode, {
+        ...defaultItemHandlers,
+        ...listItemHandlers,
+        "aria-disabled": disabled || item.disabled,
+        "aria-expanded": item.expanded,
+        "aria-level": item.level,
+        className: clsx.clsx({
+          focusVisible: focusVisible === i,
+          [withBaseName("toggle")]: !allowGroupSelect
+        }),
+        "data-idx": i,
+        "data-selectable": true,
+        description: item.description,
+        highlighted: i === highlightedIdx,
+        id: id2,
+        key: `header-${i}`,
+        label: title,
+        selected: isSelected.isSelected(selected, item)
+      }, item.expanded ? /* @__PURE__ */ jsxRuntime.jsx("ul", {
+        className: withBaseName("child-nodes"),
+        role: "group",
+        children: renderItems(items, idx, item.level + 1)
+      }) : null)
+    );
+  }
+  const renderItems = (items, idx = { value: 0 }, level = 1) => {
+    const listItems = [];
+    while (idx.value < items.length) {
+      const item = items[idx.value];
+      if (item.level < level) {
+        break;
+      }
+      if (item.childNodes) {
+        addGroupNode(listItems, items, idx, item.id, item.label);
+      } else {
+        addLeafNode(listItems, item, idx);
+      }
+    }
+    return listItems;
+  };
+  const renderContent = () => {
+    if (collectionHook.data.length) {
+      return renderItems(collectionHook.data);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...htmlAttributes,
+    ...listHandlers,
+    ...listProps,
+    className: clsx.clsx(withBaseName(), className),
+    id: `Tree-${id}`,
+    ref: core.useForkRef(rootRef, forwardedRef),
+    style: { ...styleProp, ...autoSize },
+    tabIndex: 0,
+    children: /* @__PURE__ */ jsxRuntime.jsx("ul", {
+      className: withBaseName("scrollingContentContainer"),
+      ref: contentRef,
+      role: "tree",
+      children: renderContent()
+    })
+  });
+});
+
+exports.Tree = Tree;
+//# sourceMappingURL=Tree.js.map

package/dist-cjs/tree/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  calcPreferredHeight,\n  closestListItemIndex,\n  CollectionIndexer,\n  CollectionItem,\n  GROUP_SELECTION_NONE,\n  isSelected,\n  SelectHandler,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useAutoSizer,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { TreeProps } from \"./treeTypes\";\n\nimport { useTree } from \"./useTree\";\nimport { TreeNode } from \"./TreeNode\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport treeCss from \"./Tree.css\";\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nconst getSelectedItemsFromSource = (\n  source: any[],\n  selectionStrategy: SelectionStrategy,\n  result: any[] = []\n) => {\n  const isSingleSelection =\n    selectionStrategy === \"default\" || selectionStrategy === \"deselectable\";\n  for (let item of source) {\n    if (item.selected === true) {\n      result.push(item);\n      if (isSingleSelection) {\n        break;\n      }\n    }\n    if (item.childNodes) {\n      getSelectedItemsFromSource(item.childNodes, selectionStrategy, result);\n      if (isSingleSelection && result.length === 1) {\n        break;\n      }\n    }\n  }\n\n  return isSingleSelection ? result[0] : result.length > 0 ? result : undefined;\n};\n\nexport const Tree = forwardRef(function Tree<\n  Item,\n  Selection extends SelectionStrategy = \"deselectable\"\n>(\n  {\n    className,\n    defaultSelected,\n    disabled,\n    groupSelection = GROUP_SELECTION_NONE,\n    height,\n    id: idProp,\n    onHighlight,\n    onToggle,\n    onSelect,\n    onSelectionChange,\n    revealSelected,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    style: styleProp,\n    width,\n    ...htmlAttributes\n  }: TreeProps<Item, Selection>,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree\",\n    css: treeCss,\n    window: targetWindow,\n  });\n\n  const id = useIdMemo(idProp);\n  const rootRef = useRef(null);\n  const contentRef = useRef(null);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    options: {\n      noChildrenLabel: \"No children available\",\n      revealSelected: revealSelected\n        ? selectedProp ?? defaultSelected ?? false\n        : undefined,\n    },\n  });\n\n  //------------- from original List\n  const preferredHeight =\n    height ??\n    calcPreferredHeight({\n      displayedItemCount: 10,\n      itemCount: collectionHook.data.length,\n      itemHeight: 36,\n      // getItemHeight,\n      // itemGapSize,\n    });\n\n  const autoSize = useAutoSizer<HTMLDivElement>({\n    containerRef: rootRef,\n    responsive: width === undefined || height === undefined,\n    height: preferredHeight,\n    width,\n  });\n  //---------------\n\n  const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n    (evt, selectedItem) => {\n      if (onSelect) {\n        if (isValidElement(selectedItem.value)) {\n          onSelect(evt, selectedItem.label as any);\n        } else if (selectedItem.value !== null) {\n          onSelect(evt, selectedItem.value);\n        }\n      }\n    },\n    [onSelect]\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<CollectionItem<Item>, Selection>\n  >(\n    (evt, selected) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (onSelectionChange) {\n        onSelectionChange(\n          evt,\n          Array.isArray(selected)\n            ? (selected.map((s) => s.value) as returnType)\n            : selected && (selected.value as returnType)\n        );\n      }\n    },\n    [onSelectionChange]\n  );\n\n  // const getSelected = (\n  //   sel: Item | null | Item[]\n  // ):\n  //   | undefined\n  //   | (Selection extends SingleSelectionStrategy\n  //       ? CollectionItem<Item> | null\n  //       : CollectionItem<Item>[]) => {\n  //   if (sel !== undefined) {\n  //     return collectionHook.itemToCollectionItem<Selection, typeof sel>(sel);\n  //   } else if (Array.isArray(source)) {\n  //     const selected = getSelectedItemsFromSource(\n  //       source,\n  //       selectionStrategy ?? \"default\"\n  //     );\n  //     return Array.isArray(selected)\n  //       ? collectionHook.itemToCollectionItem(selected)\n  //       : selected\n  //       ? collectionHook.toCollectionItem(selected)\n  //       : undefined;\n  //   }\n  // };\n\n  const {\n    focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected,\n  } = useTree<Item, Selection>({\n    collectionHook,\n    containerRef: rootRef,\n    contentRef,\n    // Note this isn't enough for a Tree, because of nested structure\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    disabled,\n    groupSelection,\n    onHighlight,\n    onSelect: handleSelect,\n    onSelectionChange: handleSelectionChange,\n    onToggle,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  // TODO move into useTree (see useList)\n  const defaultItemHandlers = {\n    onMouseEnter: (evt: MouseEvent) => {\n      // if (!isScrolling.current) {\n      const idx = closestListItemIndex(evt.target as HTMLElement);\n      highlightItemAtIndex(idx!);\n      // onMouseEnterListItem && onMouseEnterListItem(evt, idx);\n      // }\n    },\n  };\n\n  const propsCommonToAllListItems = {\n    ...defaultItemHandlers,\n    ...listItemHandlers,\n    isLeaf: true,\n    role: \"treeitem\",\n  };\n  // const allowGroupSelect = groupSelectionEnabled(groupSelection);\n  const allowGroupSelect = false;\n\n  /**\n   * Add a ListItem from source item\n   */\n  function addLeafNode(\n    list: ReactElement[],\n    item: CollectionItem<Item>,\n    idx: CollectionIndexer\n  ) {\n    const itemProps = {\n      \"aria-disabled\": disabled || item.disabled,\n      \"aria-level\": item.level,\n      \"data-idx\": idx.value,\n      description: item.description,\n      id: item.id,\n      key: item.id,\n      highlighted: idx.value === highlightedIdx || undefined,\n      selected: isSelected<Item>(selected, item),\n      className: clsx({\n        focusVisible: focusVisible === idx.value,\n      }),\n    };\n\n    list.push(\n      <TreeNode\n        {...propsCommonToAllListItems}\n        {...itemProps}\n        label={item.label}\n      >\n        {/* {item.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n      </TreeNode>\n    );\n    idx.value += 1;\n  }\n\n  function addGroupNode(\n    list: ReactElement[],\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer,\n    id: string,\n    title: string\n  ) {\n    const { value: i } = idx;\n    const item = items[i];\n    idx.value += 1;\n    list.push(\n      <TreeNode\n        {...defaultItemHandlers}\n        {...listItemHandlers}\n        aria-disabled={disabled || item.disabled}\n        aria-expanded={item.expanded}\n        aria-level={item.level}\n        className={clsx({\n          focusVisible: focusVisible === i,\n          [withBaseName(\"toggle\")]: !allowGroupSelect,\n        })}\n        // data-icon={child.icon}\n        data-idx={i}\n        data-selectable\n        description={item.description}\n        highlighted={i === highlightedIdx}\n        id={id}\n        key={`header-${i}`}\n        label={title}\n        selected={isSelected<Item>(selected, item)}\n      >\n        {item.expanded ? (\n          <ul className={withBaseName(\"child-nodes\")} role=\"group\">\n            {renderItems(items, idx, item.level! + 1)}\n          </ul>\n        ) : null}\n      </TreeNode>\n    );\n  }\n\n  const renderItems = (\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer = { value: 0 },\n    level = 1\n  ): ReactElement[] => {\n    const listItems: ReactElement[] = [];\n    while (idx.value < items.length) {\n      const item = items[idx.value];\n      if (item.level! < level) {\n        break;\n      }\n      if (item.childNodes) {\n        addGroupNode(listItems, items, idx, item.id!, item.label!);\n      } else {\n        addLeafNode(listItems, item, idx);\n      }\n    }\n\n    return listItems;\n  };\n\n  function renderEmpty() {\n    // if (emptyMessage || showEmptyMessage) {\n    //   return (\n    //     <span className={withBaseName(\"empty-message\")}>\n    //       {emptyMessage ?? defaultEmptyMessage}\n    //     </span>\n    //   );\n    // } else {\n    return null;\n    // }\n  }\n\n  const renderContent = () => {\n    if (collectionHook.data.length) {\n      return renderItems(collectionHook.data);\n    } else {\n      renderEmpty();\n    }\n  };\n\n  return (\n    <div\n      {...htmlAttributes}\n      {...listHandlers}\n      {...listProps}\n      className={clsx(withBaseName(), className)}\n      id={`Tree-${id}`}\n      ref={useForkRef(rootRef, forwardedRef)}\n      style={{ ...styleProp, ...autoSize }}\n      tabIndex={0}\n    >\n      <ul\n        className={withBaseName(\"scrollingContentContainer\")}\n        ref={contentRef}\n        role=\"tree\"\n        // style={{ height: contentHeight }}\n      >\n        {renderContent()}\n      </ul>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Tree","GROUP_SELECTION_NONE","useWindow","useComponentCssInjection","treeCss","useIdMemo","useRef","useCollectionItems","calcPreferredHeight","useAutoSizer","useCallback","isValidElement","selected","useTree","closestListItemIndex","isSelected","clsx","jsx","TreeNode","id","createElement","useForkRef"],"mappings":"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"}

package/dist-cjs/tree/TreeNode.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTreeNode {\n  /* Color */\n  --tree-item-text-color: var(--salt-text-primary-foreground);\n  --tree-item-background: var(--salt-selectable-background);\n  --tree-item-background-hover: var(--salt-selectable-background-hover);\n\n  --tree-node-height: var(--saltTree-node-height, var(--salt-size-stackable));\n  --tree-node-icon-size: 12px;\n  --tree-node-icon-transform: none;\n  --tree-node-paddingLeft: 6px;\n\n  align-items: flex-start;\n  min-height: var(--tree-node-height, auto);\n  line-height: var(--salt-text-lineHeight);\n  list-style: none;\n  position: relative;\n  text-align: var(--list-item-textAlign);\n}\n\n.saltTreeNode-highlighted {\n  --tree-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-item[aria-selected=\"true\"] {\n  background: var(--salt-selectable-background-selected);\n  color: var(--salt-text-primary-foreground);\n  --saltIcon-color: var(--salt-text-primary-foreground);\n}\n\n.saltTreeNode[aria-expanded=\"true\"] {\n  --tree-node-icon-transform: rotate(45deg) translate(1px, 1px);\n}\n\n.saltTreeNode-item {\n  align-items: center;\n  background: var(--tree-item-background);\n  display: flex;\n  height: var(--tree-node-height);\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-node-indent));\n  position: relative;\n}\n\n.saltTreeNode-toggle {\n  display: inline-block;\n  flex: 0 0 18px;\n  height: var(--tree-node-icon-size);\n  transform: var(--tree-node-icon-transform);\n  transition: transform 0.1s ease;\n}\n\n.saltTreeNode-label {\n  align-items: center;\n  display: inline-flex;\n  height: var(--tree-node-height);\n}\n.saltTreeNode-description {\n  align-items: center;\n  display: inline-flex;\n  height: var(--tree-node-height);\n  padding-left: var(--salt-size-unit);\n}\n\n/* Leaf node or the div child of a collapsible node */\n/* .saltTreeNode:not([aria-expanded=\"true\"]), */\n.saltTreeNode[aria-expanded] > .saltTreeNode-label {\n  --checkbox-borderColor: black;\n  --checkbox-borderWidth: 1px;\n  --checkbox-tick: black;\n  /* --list-svg-toggle: var(--list-svg-chevron-down); */\n  --list-svg-toggle: var(--tree-node-collapse);\n\n  color: var(--list-item-text-color);\n  flex-wrap: nowrap;\n  line-height: var(--tree-node-height);\n  padding: var(--list-item-padding);\n  position: relative;\n  cursor: default;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.saltTreeNode:not([aria-expanded]) {\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));\n}\n\n.saltTreeNode[aria-expanded] > .saltTreeNode-label {\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));\n}\n\n.saltTreeNode[aria-expanded] {\n  flex-direction: column;\n}\n\n.saltTreeNode[aria-expanded] {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTreeNode > *[role=\"group\"] {\n  padding-left: 0px;\n}\n\n[aria-level=\"2\"] {\n  --tree-node-indent: 24px;\n}\n[aria-level=\"3\"] {\n  --tree-node-indent: 36px;\n}\n[aria-level=\"4\"] {\n  --tree-node-indent: 48px;\n}\n\n.saltTreeNode:not(.focusVisible):not([aria-expanded])[data-highlighted],\n.saltTreeNode:not(.focusVisible)[aria-expanded][data-highlighted] > div:first-child {\n  background: var(--list-background-highlighted);\n}\n\n.saltTree-toggle {\n  cursor: pointer;\n}\n\n.saltTreeNode[aria-selected=\"true\"] {\n  --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n.saltTreeNode:not(.focusVisible):focus {\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.saltTreeNode:not([aria-expanded]).focusVisible:before,\n.saltTreeNode[aria-expanded].focusVisible > div:first-child:before {\n  content: \"\";\n  position: absolute;\n  top: 0px;\n  left: var(--tree-offset-left-focusVisible, 0px);\n  right: 0;\n  bottom: 0px;\n  border: dotted rgb(141, 154, 179) 2px; /* FIXME: Needs checking */\n  background: var(--list-background-highlighted);\n}\n\n/* .saltTreeNode[aria-level='2'] {\n    --tree-offset-left-focusVisible: -13px;\n  }\n\n  .saltTreeNode[aria-level='3'] {\n    --tree-offset-left-focusVisible: -24px;\n  }\n\n  .saltTreeNode[aria-level='4'] {\n    --tree-offset-left-focusVisible: -36px;\n  } */\n\n.saltTreeNode[aria-expanded=\"false\"] > *:first-child:after {\n  --list-svg-toggle: var(--tree-node-expand);\n}\n\n.saltTreeNode[aria-expanded=\"true\"] > *:first-child:after {\n  transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.saltTree:not(.checkbox-only) .saltTreeNode:not([aria-expanded])[aria-selected=\"true\"],\n.saltTree:not(.checkbox-only) .saltTreeNode[aria-expanded][aria-selected=\"true\"] > div:first-child {\n  --checkbox-borderColor: var(--list-item-selected-color);\n  --checkbox-tick: var(--list-item-selected-color);\n  --tree-borderColor-focusVisible: var(--list-item-selected-color);\n  background: var(--list-item-background-active);\n  color: var(--list-item-selected-color);\n}\n\n.with-checkbox .saltTreeNode {\n  padding-left: 28px;\n}\n\n.with-checkbox .saltTreeNode:before {\n  border-style: solid;\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: \"\";\n  height: 12px;\n  left: 3px;\n  margin-top: -7px;\n  position: absolute;\n  top: 50%;\n  width: 12px;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TreeNode.css.js.map

package/dist-cjs/tree/TreeNode.css.js.map

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

package/dist-cjs/tree/TreeNode.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var icons = require('@salt-ds/icons');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var TreeNode$1 = require('./TreeNode.css.js');
+
+const withBaseName = core.makePrefixer("saltTreeNode");
+const TreeNode = ({
+  "aria-level": ariaLevel,
+  children,
+  className: classNameProp,
+  description,
+  highlighted,
+  idx,
+  isLeaf = false,
+  label,
+  onMouseEnter,
+  selected,
+  ...props
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-tree-node",
+    css: TreeNode$1,
+    window: targetWindow
+  });
+  const className = clsx.clsx(withBaseName(), classNameProp, {
+    [withBaseName("highlighted")]: highlighted
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", {
+    ...props,
+    className,
+    role: "presentation",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        "aria-level": ariaLevel,
+        "aria-selected": selected || void 0,
+        className: withBaseName("item"),
+        onMouseEnter,
+        role: "treeitem",
+        children: [
+          isLeaf === false ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+            className: withBaseName("toggle"),
+            "data-toggle": true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightIcon, {})
+          }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: withBaseName("label"),
+            children: label
+          }),
+          description !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: withBaseName("description"),
+            children: description
+          }) : null
+        ]
+      }),
+      children
+    ]
+  });
+};
+
+exports.TreeNode = TreeNode;
+//# sourceMappingURL=TreeNode.js.map

package/dist-cjs/tree/TreeNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.js","sources":["../src/tree/TreeNode.tsx"],"sourcesContent":["import { HTMLAttributes, MouseEventHandler, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { TriangleRightIcon } from \"@salt-ds/icons\";\n\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport treeNodeCss from \"./TreeNode.css\";\n\nconst withBaseName = makePrefixer(\"saltTreeNode\");\nexport interface TreeNodeProps\n  extends Omit<HTMLAttributes<HTMLLIElement>, \"onMouseEnter\"> {\n  children?: ReactNode;\n  description?: string;\n  highlighted?: boolean;\n  idx?: number;\n  isLeaf?: boolean;\n  label?: string;\n  onMouseEnter?: MouseEventHandler;\n  selected?: boolean;\n}\n\nexport const TreeNode = ({\n  \"aria-level\": ariaLevel,\n  children,\n  className: classNameProp,\n  description,\n  highlighted,\n  idx,\n  isLeaf = false,\n  label,\n  onMouseEnter,\n  selected,\n  ...props\n}: TreeNodeProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree-node\",\n    css: treeNodeCss,\n    window: targetWindow,\n  });\n\n  const className = clsx(withBaseName(), classNameProp, {\n    [withBaseName(\"highlighted\")]: highlighted,\n  });\n\n  return (\n    <li {...props} className={className} role=\"presentation\">\n      <div\n        aria-level={ariaLevel}\n        aria-selected={selected || undefined}\n        className={withBaseName(\"item\")}\n        onMouseEnter={onMouseEnter}\n        role=\"treeitem\"\n      >\n        {isLeaf === false ? (\n          <span className={withBaseName(\"toggle\")} data-toggle={true}>\n            <TriangleRightIcon />\n          </span>\n        ) : null}\n        <div className={withBaseName(\"label\")}>\n          {/* {child.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n          {label}\n        </div>\n        {description !== undefined ? (\n          <div className={withBaseName(\"description\")}>{description}</div>\n        ) : null}\n      </div>\n      {children}\n    </li>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","treeNodeCss","clsx","jsxs","jsx","TriangleRightIcon"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAazC,MAAM,WAAW,CAAC;AAAA,EACvB,YAAc,EAAA,SAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAS,GAAA,KAAA;AAAA,EACT,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAY,GAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,IACpD,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,GAChC,CAAA,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,KAAA;AAAA,IAAO,SAAA;AAAA,IAAsB,IAAK,EAAA,cAAA;AAAA,IACxC,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,KAAA,EAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAC9B,YAAA;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAA,MAAA,KAAW,wBACTC,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,YAAG,aAAa,EAAA,IAAA;AAAA,YACpD,yCAACC,uBAAkB,EAAA,EAAA,CAAA;AAAA,WACrB,CACE,GAAA,IAAA;AAAA,0BACHD,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAEjC,QAAA,EAAA,KAAA;AAAA,WACH,CAAA;AAAA,UACC,WAAA,KAAgB,yBACdA,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YAAI,QAAA,EAAA,WAAA;AAAA,WAAY,CACxD,GAAA,IAAA;AAAA,SAAA;AAAA,OACN,CAAA;AAAA,MACC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/tree/useTree.js

@@ -0,0 +1,156 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('@salt-ds/core');
+require('../common-hooks/collectionProvider.js');
+require('../common-hooks/keyUtils.js');
+var useCollapsibleGroups = require('../common-hooks/useCollapsibleGroups.js');
+var listDomUtils = require('../common-hooks/list-dom-utils.js');
+var useKeyboardNavigation = require('../common-hooks/useKeyboardNavigation.js');
+var useSelection = require('../common-hooks/useSelection.js');
+var useViewportTracking = require('../common-hooks/useViewportTracking.js');
+var useTreeKeyboardNavigation = require('./use-tree-keyboard-navigation.js');
+
+const useTree = ({
+  collectionHook,
+  containerRef,
+  contentRef = containerRef,
+  defaultSelected,
+  disabled,
+  groupSelection,
+  onSelect,
+  onSelectionChange,
+  onToggle,
+  onHighlight: onHighlightProp,
+  selected: selectedProp,
+  selectionStrategy
+}) => {
+  const lastSelection = React.useRef(selectedProp || defaultSelected);
+  const handleKeyboardNavigation = (evt, nextIdx) => {
+    var _a, _b;
+    (_b = (_a = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a, evt, nextIdx);
+  };
+  const { highlightedIndex: highlightedIdx, ...keyboardHook } = useKeyboardNavigation.useKeyboardNavigation({
+    containerRef,
+    indexPositions: collectionHook.data,
+    onHighlight: onHighlightProp,
+    onKeyboardNavigation: handleKeyboardNavigation,
+    selected: lastSelection.current
+  });
+  const collapsibleHook = useCollapsibleGroups.useCollapsibleGroups({
+    collapsibleHeaders: true,
+    collectionHook,
+    highlightedIdx,
+    onToggle
+  });
+  const selectionHook = useSelection.useSelection({
+    defaultSelected,
+    highlightedIdx,
+    indexPositions: collectionHook.data,
+    onSelect,
+    onSelectionChange,
+    selected: selectedProp,
+    selectionStrategy
+  });
+  const treeNavigationHook = useTreeKeyboardNavigation.useKeyboardNavigation({
+    collectionHook,
+    highlightedIdx,
+    highlightItemAtIndex: keyboardHook.setHighlightedIndex
+  });
+  const handleClick = React.useCallback(
+    (evt) => {
+      var _a, _b, _c;
+      (_a = collapsibleHook == null ? void 0 : collapsibleHook.onClick) == null ? void 0 : _a.call(collapsibleHook, evt);
+      if (!evt.defaultPrevented) {
+        (_c = (_b = selectionHook.listHandlers).onClick) == null ? void 0 : _c.call(_b, evt);
+      }
+    },
+    [collapsibleHook, selectionHook]
+  );
+  const handleKeyDown = React.useCallback(
+    (evt) => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      (_b = (_a = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a, evt);
+      if (!evt.defaultPrevented) {
+        (_d = (_c = selectionHook.listHandlers).onKeyDown) == null ? void 0 : _d.call(_c, evt);
+      }
+      if (!evt.defaultPrevented) {
+        (_e = collapsibleHook == null ? void 0 : collapsibleHook.onKeyDown) == null ? void 0 : _e.call(collapsibleHook, evt);
+      }
+      if (!evt.defaultPrevented) {
+        (_g = (_f = treeNavigationHook.listHandlers).onKeyDown) == null ? void 0 : _g.call(_f, evt);
+      }
+    },
+    [
+      collapsibleHook.onClick,
+      collapsibleHook.onKeyDown,
+      keyboardHook.listProps,
+      selectionHook.listHandlers,
+      treeNavigationHook.listHandlers
+    ]
+  );
+  const { isScrolling, scrollIntoView } = useViewportTracking.useViewportTracking({
+    containerRef,
+    contentRef,
+    highlightedIdx,
+    indexPositions: collectionHook.data
+  });
+  const handleMouseMove = React.useCallback(
+    (evt) => {
+      if (!isScrolling.current && !disabled) {
+        keyboardHook.listProps.onMouseMove();
+        const idx = listDomUtils.closestListItemIndex(evt.target);
+        if (idx !== void 0 && idx !== highlightedIdx) {
+          const item = collectionHook.data[idx];
+          if (item.disabled) {
+            keyboardHook.setHighlightedIndex(-1);
+          } else {
+            keyboardHook.setHighlightedIndex(idx);
+          }
+        }
+      }
+    },
+    [
+      collectionHook.data,
+      disabled,
+      keyboardHook.setHighlightedIndex,
+      highlightedIdx,
+      isScrolling
+    ]
+  );
+  const getActiveDescendant = () => {
+    var _a;
+    return highlightedIdx === void 0 || highlightedIdx === -1 ? void 0 : (_a = collectionHook.data[highlightedIdx]) == null ? void 0 : _a.id;
+  };
+  lastSelection.current = selectionHook.selected;
+  const listProps = {
+    "aria-activedescendant": getActiveDescendant(),
+    onBlur: keyboardHook.listProps.onBlur,
+    onFocus: keyboardHook.listProps.onFocus,
+    onKeyDown: handleKeyDown,
+    onMouseDownCapture: keyboardHook.listProps.onMouseDownCapture,
+    onMouseLeave: keyboardHook.listProps.onMouseLeave
+  };
+  const listHandlers = {
+    onClick: handleClick,
+    onMouseMove: handleMouseMove
+  };
+  const listItemHandlers = {
+    onClick: handleClick
+  };
+  return {
+    focusVisible: keyboardHook.focusVisible,
+    highlightedIdx,
+    highlightItemAtIndex: keyboardHook.setHighlightedIndex,
+    listHandlers,
+    listProps,
+    listItemHandlers,
+    selected: selectionHook.selected,
+    setSelected: selectionHook.setSelected
+  };
+};
+
+exports.useTree = useTree;
+//# sourceMappingURL=useTree.js.map