@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.30

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

@@ -0,0 +1,78 @@
+import { clsx } from 'clsx';
+import { useCallback, isValidElement } from 'react';
+import { ToolbarButton } from '../ToolbarButton.js';
+
+const NullActivationIndicator = () => null;
+const primaryControls = ["Dropdown", "Input"];
+const getChildElementName = (element) => {
+  if (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) => isValidElement(element) && element.type === ToolbarButton;
+const getToolbarFormFieldProps = (child, isOverflowPanel = false) => {
+  let activationIndicator = NullActivationIndicator;
+  let variant = "tertiary";
+  const element = child;
+  if (isValidElement(element)) {
+    const name = getChildElementName(element);
+    if (primaryControls.includes(name)) {
+      activationIndicator = void 0;
+      variant = "primary";
+    }
+  }
+  return {
+    ActivationIndicatorComponent: activationIndicator,
+    className: 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 = useCallback(
+    (e) => {
+      if (onClick && !InteractiveComponents.includes(childElementName)) {
+        onClick(e);
+      }
+    },
+    [childElementName, onClick]
+  );
+  return {
+    ActivationIndicatorComponent: ActivationIndicatorComponentProp != null ? ActivationIndicatorComponentProp : ActivationIndicatorComponent,
+    className: clsx("saltToolbarField", classNameProp, className),
+    labelPlacement,
+    onClick: handleClick,
+    ...rest,
+    ...calculatedProps
+  };
+};
+
+export { getToolbarFormFieldProps, useToolbarField };
+//# sourceMappingURL=useToolbarField.js.map

package/dist-es/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":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+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";
+
+export { css_248z as default };
+//# sourceMappingURL=Tree.css.js.map

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

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

package/dist-es/tree/Tree.js

@@ -0,0 +1,218 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, isValidElement, createElement } from 'react';
+import { makePrefixer, useIdMemo, useForkRef } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useAutoSizer } from '../common-hooks/useAutoSizer.js';
+import { calcPreferredHeight } from '../common-hooks/calcPreferredHeight.js';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/keyUtils.js';
+import { closestListItemIndex } from '../common-hooks/list-dom-utils.js';
+import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
+import { GROUP_SELECTION_NONE } from '../common-hooks/useSelection.js';
+import '../responsive/useResizeObserver.js';
+import { isSelected } from '../common-hooks/utils/isSelected.js';
+import { useTree } from './useTree.js';
+import { TreeNode } from './TreeNode.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './Tree.css.js';
+
+const withBaseName = makePrefixer("saltTree");
+const Tree = forwardRef(function Tree2({
+  className,
+  defaultSelected,
+  disabled,
+  groupSelection = GROUP_SELECTION_NONE,
+  height,
+  id: idProp,
+  onHighlight,
+  onToggle,
+  onSelect,
+  onSelectionChange,
+  revealSelected,
+  selected: selectedProp,
+  selectionStrategy,
+  source,
+  style: styleProp,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-tree",
+    css: css_248z,
+    window: targetWindow
+  });
+  const id = useIdMemo(idProp);
+  const rootRef = useRef(null);
+  const contentRef = useRef(null);
+  const collectionHook = useCollectionItems({
+    id,
+    source,
+    options: {
+      noChildrenLabel: "No children available",
+      revealSelected: revealSelected ? Boolean(selectedProp) || Boolean(defaultSelected) || false : void 0
+    }
+  });
+  const preferredHeight = height != null ? height : calcPreferredHeight({
+    displayedItemCount: 10,
+    itemCount: collectionHook.data.length,
+    itemHeight: 36
+  });
+  const autoSize = useAutoSizer({
+    containerRef: rootRef,
+    responsive: width === void 0 || height === void 0,
+    height: preferredHeight,
+    width
+  });
+  const handleSelect = useCallback(
+    (evt, selectedItem) => {
+      if (onSelect) {
+        if (isValidElement(selectedItem.value)) {
+          onSelect(evt, selectedItem.label);
+        } else if (selectedItem.value !== null) {
+          onSelect(evt, selectedItem.value);
+        }
+      }
+    },
+    [onSelect]
+  );
+  const handleSelectionChange = 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({
+    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 = 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(selected, item),
+      className: clsx({
+        focusVisible: focusVisible === idx.value
+      })
+    };
+    list.push(
+      /* @__PURE__ */ jsx(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__ */ createElement(TreeNode, {
+        ...defaultItemHandlers,
+        ...listItemHandlers,
+        "aria-disabled": disabled || item.disabled,
+        "aria-expanded": item.expanded,
+        "aria-level": item.level,
+        className: 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(selected, item)
+      }, item.expanded ? /* @__PURE__ */ 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__ */ jsx("div", {
+    ...htmlAttributes,
+    ...listHandlers,
+    ...listProps,
+    className: clsx(withBaseName(), className),
+    id: `Tree-${id}`,
+    ref: useForkRef(rootRef, forwardedRef),
+    style: { ...styleProp, ...autoSize },
+    tabIndex: 0,
+    children: /* @__PURE__ */ jsx("ul", {
+      className: withBaseName("scrollingContentContainer"),
+      ref: contentRef,
+      role: "tree",
+      children: renderContent()
+    })
+  });
+});
+
+export { Tree };
+//# sourceMappingURL=Tree.js.map

package/dist-es/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        ? Boolean(selectedProp) || Boolean(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":["Tree","treeCss","selected","id"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltTreeNode {\n  /* Color */\n  --tree-item-text-color: var(--salt-content-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-content-primary-foreground);\n  --saltIcon-color: var(--salt-content-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";
+
+export { css_248z as default };
+//# sourceMappingURL=TreeNode.css.js.map

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

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

package/dist-es/tree/TreeNode.js

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

package/dist-es/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":["treeNodeCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,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,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,IACpD,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,GAChC,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,KAAA;AAAA,IAAO,SAAA;AAAA,IAAsB,IAAK,EAAA,cAAA;AAAA,IACxC,QAAA,EAAA;AAAA,sBAAC,IAAA,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,wBACT,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,YAAG,aAAa,EAAA,IAAA;AAAA,YACpD,8BAAC,iBAAkB,EAAA,EAAA,CAAA;AAAA,WACrB,CACE,GAAA,IAAA;AAAA,0BACH,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAEjC,QAAA,EAAA,KAAA;AAAA,WACH,CAAA;AAAA,UACC,WAAA,KAAgB,yBACd,GAAA,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-es/tree/useTree.js

@@ -0,0 +1,152 @@
+import { useRef, useCallback } from 'react';
+import '@salt-ds/core';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/keyUtils.js';
+import { useCollapsibleGroups } from '../common-hooks/useCollapsibleGroups.js';
+import { closestListItemIndex } from '../common-hooks/list-dom-utils.js';
+import { useKeyboardNavigation } from '../common-hooks/useKeyboardNavigation.js';
+import { useSelection } from '../common-hooks/useSelection.js';
+import { useViewportTracking } from '../common-hooks/useViewportTracking.js';
+import { useKeyboardNavigation as useKeyboardNavigation$1 } from './use-tree-keyboard-navigation.js';
+
+const useTree = ({
+  collectionHook,
+  containerRef,
+  contentRef = containerRef,
+  defaultSelected,
+  disabled,
+  groupSelection,
+  onSelect,
+  onSelectionChange,
+  onToggle,
+  onHighlight: onHighlightProp,
+  selected: selectedProp,
+  selectionStrategy
+}) => {
+  const lastSelection = 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({
+    containerRef,
+    indexPositions: collectionHook.data,
+    onHighlight: onHighlightProp,
+    onKeyboardNavigation: handleKeyboardNavigation,
+    selected: lastSelection.current
+  });
+  const collapsibleHook = useCollapsibleGroups({
+    collapsibleHeaders: true,
+    collectionHook,
+    highlightedIdx,
+    onToggle
+  });
+  const selectionHook = useSelection({
+    defaultSelected,
+    highlightedIdx,
+    indexPositions: collectionHook.data,
+    onSelect,
+    onSelectionChange,
+    selected: selectedProp,
+    selectionStrategy
+  });
+  const treeNavigationHook = useKeyboardNavigation$1({
+    collectionHook,
+    highlightedIdx,
+    highlightItemAtIndex: keyboardHook.setHighlightedIndex
+  });
+  const handleClick = 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 = 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({
+    containerRef,
+    contentRef,
+    highlightedIdx,
+    indexPositions: collectionHook.data
+  });
+  const handleMouseMove = useCallback(
+    (evt) => {
+      if (!isScrolling.current && !disabled) {
+        keyboardHook.listProps.onMouseMove();
+        const idx = 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
+  };
+};
+
+export { useTree };
+//# sourceMappingURL=useTree.js.map

package/dist-es/tree/useTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTree.js","sources":["../src/tree/useTree.ts"],"sourcesContent":["import { KeyboardEvent, useCallback, useRef, MouseEvent } from \"react\";\nimport {\n  closestListItemIndex,\n  ListHandlers,\n  SelectionStrategy,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useViewportTracking,\n} from \"../common-hooks\";\nimport { ListControlProps } from \"../list/listTypes\";\nimport { TreeHookProps, TreeHookResult } from \"./treeTypes\";\nimport { useKeyboardNavigation as useTreeNavigation } from \"./use-tree-keyboard-navigation\";\n\nexport const useTree = <Item, Selection extends SelectionStrategy = \"default\">({\n  collectionHook,\n  containerRef,\n  contentRef = containerRef,\n  defaultSelected,\n  disabled,\n  groupSelection,\n  onSelect,\n  onSelectionChange,\n  onToggle,\n  onHighlight: onHighlightProp,\n  selected: selectedProp,\n  selectionStrategy,\n}: // totalItemCount,\nTreeHookProps<Item, Selection>): TreeHookResult<Item, Selection> => {\n  const lastSelection = useRef(selectedProp || defaultSelected);\n\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIdx: number) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIdx);\n  };\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigation<Item, Selection>({\n      containerRef,\n      indexPositions: collectionHook.data,\n      onHighlight: onHighlightProp,\n      onKeyboardNavigation: handleKeyboardNavigation,\n      selected: lastSelection.current,\n    });\n\n  const collapsibleHook = useCollapsibleGroups<Item>({\n    collapsibleHeaders: true,\n    collectionHook,\n    highlightedIdx,\n    onToggle,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected,\n    // groupSelection,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n    onSelect,\n    onSelectionChange,\n    selected: selectedProp,\n    selectionStrategy: selectionStrategy,\n  });\n\n  const treeNavigationHook = useTreeNavigation<Item>({\n    collectionHook,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n  });\n\n  const handleClick = useCallback(\n    (evt: MouseEvent) => {\n      collapsibleHook?.onClick?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onClick?.(evt);\n      }\n    },\n    [collapsibleHook, selectionHook]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHook.listProps.onKeyDown?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook?.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        treeNavigationHook.listHandlers.onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook.onClick,\n      collapsibleHook.onKeyDown,\n      keyboardHook.listProps,\n      selectionHook.listHandlers,\n      treeNavigationHook.listHandlers,\n    ]\n  );\n\n  // This is only appropriate whan we are directly controlling a List,\n  // not when a control is manipulating the list\n  const { isScrolling, scrollIntoView } = useViewportTracking({\n    containerRef,\n    contentRef,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n  });\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      if (!isScrolling.current && !disabled) {\n        keyboardHook.listProps.onMouseMove();\n        const idx = closestListItemIndex(evt.target as HTMLElement);\n        if (idx !== undefined && idx !== highlightedIdx) {\n          const item = collectionHook.data[idx];\n          if (item.disabled) {\n            keyboardHook.setHighlightedIndex(-1);\n          } else {\n            keyboardHook.setHighlightedIndex(idx);\n          }\n        }\n      }\n    },\n    [\n      collectionHook.data,\n      disabled,\n      keyboardHook.setHighlightedIndex,\n      highlightedIdx,\n      isScrolling,\n    ]\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIdx === undefined || highlightedIdx === -1\n      ? undefined\n      : collectionHook.data[highlightedIdx]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const listProps: ListControlProps = {\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  };\n\n  const listHandlers: ListHandlers = /*listHandlersProp || */ {\n    onClick: handleClick,\n    // MouseEnter would be much better for this. There is a bug in Cypress\n    // wheby it emits spurious MouseEnter (and MouseOver) events around\n    // keypress events, which break many tests.\n    onMouseMove: handleMouseMove,\n  };\n\n  const listItemHandlers = {\n    onClick: handleClick,\n  };\n\n  return {\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected: selectionHook.selected,\n    setSelected: selectionHook.setSelected,\n  };\n};\n"],"names":["useTreeNavigation"],"mappings":"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"}

package/dist-es/utils/useEventCallback.js

@@ -0,0 +1,16 @@
+import { useRef, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+
+function useEventCallback(fn) {
+  const ref = useRef(fn);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return useCallback(
+    (...args) => (0, ref.current)(...args),
+    []
+  );
+}
+
+export { useEventCallback };
+//# sourceMappingURL=useEventCallback.js.map

package/dist-es/window/ElectronWindow.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltWindow {\n  --saltDialog-boxShadow: none;\n  --saltDialog-margin: 0;\n  width: max-content;\n  height: max-content;\n  position: fixed;\n  overflow: hidden;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ElectronWindow.css.js.map

package/dist-es/window/ElectronWindow.css.js.map

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