@salt-ds/lab 1.0.0-alpha.86 → 1.0.0-alpha.88

package/dist-types/tree/Tree.d.ts

@@ -1,3 +1,36 @@
-import { type SelectionStrategy } from "../common-hooks";
-import type { TreeProps } from "./treeTypes";
-export declare const Tree: import("react").ForwardRefExoticComponent<TreeProps<unknown, SelectionStrategy> & import("react").RefAttributes<HTMLDivElement>>;
+import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
+export interface TreeProps extends ComponentPropsWithoutRef<"ul"> {
+    /**
+     * Default expanded nodes (uncontrolled)
+     */
+    defaultExpanded?: string[];
+    /**
+     * Expanded nodes (controlled)
+     */
+    expanded?: string[];
+    /**
+     * Callback on expanded nodes change
+     */
+    onExpandedChange?: (event: SyntheticEvent, expanded: string[]) => void;
+    /**
+     * Default selected nodes (uncontrolled)
+     */
+    defaultSelected?: string[];
+    /**
+     * Selected nodes
+     */
+    selected?: string[];
+    /**
+     * Callback on selected nodes change
+     */
+    onSelectionChange?: (event: SyntheticEvent, selected: string[]) => void;
+    /**
+     * Sets multiselect mode with checkboxes and allows for multiple node selection
+     */
+    multiselect?: boolean;
+    /**
+     * Sets tree to disabled state, preventing all interaction
+     */
+    disabled?: boolean;
+}
+export declare const Tree: import("react").ForwardRefExoticComponent<TreeProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist-types/tree/TreeContext.d.ts

@@ -0,0 +1,71 @@
+import { type Dispatch, type ReactNode, type SetStateAction, type SyntheticEvent } from "react";
+import type { TreeModel, TreeNodeMeta } from "./useTree";
+export interface TreeContextValue {
+    expandedState: Set<string>;
+    /** Toggle a node expansion state */
+    toggleExpanded: (event: SyntheticEvent, value: string) => void;
+    /** Selected node values */
+    selectedState: string[];
+    /** Selected node values as Set for O(1) lookups */
+    selectedSet: Set<string>;
+    /** Set selected state directly */
+    setSelectedState: Dispatch<SetStateAction<string[]>>;
+    /** Select node */
+    select: (event: SyntheticEvent, value: string) => void;
+    /** Whether multiselect mode with checkboxes is enabled */
+    multiselect: boolean;
+    /** Disabled state of the tree */
+    disabled: boolean;
+    /** Set of disabled node IDs */
+    disabledIdsSet: Set<string>;
+    /** Tree model for traversal */
+    treeModel: TreeModel;
+    /** Get node metadata from tree model */
+    getNodeMeta: (value: string) => TreeNodeMeta | undefined;
+    /** Get parent of a node */
+    getParent: (value: string) => string | undefined;
+    /** Get children of a node */
+    getChildren: (value: string) => string[];
+    /** Get all descendants of a node */
+    getDescendants: (value: string) => string[];
+    /** Get all ancestors of a node */
+    getAncestors: (value: string) => string[];
+    /** Memoized visible (navigable) nodes in tree order */
+    visibleNodes: string[];
+    /** Memoized tabbable node ID for roving tabindex (computed once at tree level) */
+    tabbableNodeId: string | undefined;
+    /** Register a DOM element for focus management */
+    registerElement: (value: string, element: HTMLElement) => () => void;
+    /** Get DOM element for a node (if mounted) */
+    getElement: (value: string) => HTMLElement | undefined;
+    /** Active node value */
+    activeNode: string | undefined;
+    /** Set the active node */
+    setActiveNode: Dispatch<SetStateAction<string | undefined>>;
+    /** Set of indeterminate (partially selected) node IDs */
+    indeterminateState: Set<string>;
+}
+export declare const TreeProvider: import("react").Provider<TreeContextValue | undefined>;
+export declare function useTreeContext(): TreeContextValue;
+export interface TreeNodeContextValue {
+    /** Current node value */
+    value: string;
+    /** Current depth level */
+    level: number;
+    /** Whether node has children */
+    hasChildren: boolean;
+    /** Whether node is expanded */
+    expanded: boolean;
+    /** Whether node is disabled */
+    disabled: boolean;
+    /** Node id for the li element */
+    id: string;
+    /** Whether node is selected */
+    selected: boolean;
+    /** Whether node is in indeterminate state (partially selected children) */
+    indeterminate: boolean;
+    /** Child TreeNode elements to be rendered inside the group */
+    nodeChildren: ReactNode;
+}
+export declare const TreeNodeProvider: import("react").Provider<TreeNodeContextValue | undefined>;
+export declare function useTreeNodeContext(): TreeNodeContextValue | undefined;

package/dist-types/tree/TreeNode.d.ts

@@ -1,12 +1,25 @@
-import type { HTMLAttributes, MouseEventHandler, ReactNode } from "react";
-export interface TreeNodeProps extends Omit<HTMLAttributes<HTMLLIElement>, "onMouseEnter"> {
+import type { IconProps } from "@salt-ds/icons";
+import { type ComponentType, type ReactNode } from "react";
+export interface TreeNodeProps {
+    /**
+     * Unique value representing this node within the tree
+     */
+    value: string;
+    /**
+     * Label for the node. When provided, TreeNode automatically renders a TreeNodeTrigger.
+     */
+    label?: ReactNode;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: ComponentType<IconProps>;
+    /**
+     * Whether the node is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Child nodes or content.
+     */
     children?: ReactNode;
-    description?: string;
-    highlighted?: boolean;
-    idx?: number;
-    isLeaf?: boolean;
-    label?: string;
-    onMouseEnter?: MouseEventHandler;
-    selected?: boolean;
 }
-export declare const TreeNode: ({ "aria-level": ariaLevel, children, className: classNameProp, description, highlighted, idx, isLeaf, label, onMouseEnter, selected, ...props }: TreeNodeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TreeNode: import("react").ForwardRefExoticComponent<TreeNodeProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist-types/tree/TreeNodeExpansionIcon.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface TreeNodeExpansionIconProps extends ComponentPropsWithoutRef<"span"> {
+}
+export declare const TreeNodeExpansionIcon: import("react").ForwardRefExoticComponent<TreeNodeExpansionIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/tree/TreeNodeLabel.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface TreeNodeLabelProps extends ComponentPropsWithoutRef<"span"> {
+}
+export declare const TreeNodeLabel: import("react").ForwardRefExoticComponent<TreeNodeLabelProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/tree/TreeNodeTrigger.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface TreeNodeTriggerProps extends ComponentPropsWithoutRef<"li"> {
+}
+/**
+ * The forwarded ref points to the inner trigger content span (for tooltip positioning),
+ * while the <li> handles focus, ARIA, and event handling.
+ */
+export declare const TreeNodeTrigger: import("react").ForwardRefExoticComponent<TreeNodeTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/tree/index.d.ts

@@ -1 +1,4 @@
 export * from "./Tree";
+export * from "./TreeNode";
+export * from "./TreeNodeLabel";
+export * from "./TreeNodeTrigger";

package/dist-types/tree/useTree.d.ts

@@ -1,3 +1,79 @@
-import { type SelectionStrategy } from "../common-hooks";
-import type { TreeHookProps, TreeHookResult } from "./treeTypes";
-export declare const useTree: <Item, Selection extends SelectionStrategy = "default">({ collectionHook, containerRef, contentRef, defaultSelected, disabled, onSelect, onSelectionChange, onToggle, onHighlight: onHighlightProp, selected: selectedProp, selectionStrategy, }: TreeHookProps<Item, Selection>) => TreeHookResult<Item, Selection>;
+import { type ReactNode, type SyntheticEvent } from "react";
+export interface UseTreeProps {
+    /**
+     * Default expanded nodes (uncontrolled)
+     */
+    defaultExpanded?: string[];
+    /**
+     * Expanded nodes (controlled)
+     */
+    expanded?: string[];
+    /**
+     * Callback on expanded nodes change
+     */
+    onExpandedChange?: (event: SyntheticEvent, expanded: string[]) => void;
+    /**
+     * Default selected nodes (uncontrolled)
+     */
+    defaultSelected?: string[];
+    /**
+     * Selected nodes
+     */
+    selected?: string[];
+    /**
+     * Callback on selected nodes change
+     */
+    onSelectionChange?: (event: SyntheticEvent, selected: string[]) => void;
+    /**
+     * Sets multiselect mode with checkboxes and allows for multiple node selection
+     */
+    multiselect?: boolean;
+    /**
+     * Sets tree to disabled state, preventing all interaction
+     */
+    disabled?: boolean;
+    /**
+     * Tree children used to build the tree model for traversal an state management
+     */
+    children?: ReactNode;
+}
+export interface TreeNodeMeta {
+    value: string;
+    parentValue: string | undefined;
+    hasChildren: boolean;
+    disabled: boolean;
+}
+export interface TreeModel {
+    /** All nodes indexed by value */
+    nodes: Map<string, TreeNodeMeta>;
+    /** Ordered list of root node values */
+    rootValues: string[];
+    /** Maps parent value to ordered list of child values */
+    childrenOf: Map<string, string[]>;
+}
+export declare function useTree(props: UseTreeProps): {
+    expandedArray: string[];
+    setExpandedArray: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    expandedState: Set<string>;
+    toggleExpanded: (event: SyntheticEvent, value: string) => void;
+    selectedState: string[];
+    selectedSet: Set<string>;
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    select: (event: SyntheticEvent, value: string) => void;
+    multiselect: boolean;
+    disabled: boolean;
+    disabledIdsSet: Set<string>;
+    treeModel: TreeModel;
+    getNodeMeta: (value: string) => TreeNodeMeta | undefined;
+    getParent: (value: string) => string | undefined;
+    getChildren: (parentValue: string) => string[];
+    getDescendants: (value: string) => string[];
+    getAncestors: (value: string) => string[];
+    visibleNodes: string[];
+    tabbableNodeId: string | undefined;
+    registerElement: (value: string, element: HTMLElement) => () => void;
+    getElement: (value: string) => HTMLElement | undefined;
+    activeNode: string | undefined;
+    setActiveNode: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    indeterminateState: Set<string>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.86",
+  "version": "1.0.0-alpha.88",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -21,9 +21,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
-    "@salt-ds/core": "^1.57.0",
+    "@salt-ds/core": "^1.59.0",
     "@salt-ds/date-adapters": "0.1.0-alpha.6",
-    "@salt-ds/icons": "^1.17.1",
+    "@salt-ds/icons": "^1.18.0",
     "@salt-ds/styles": "0.3.0",
     "@salt-ds/window": "0.1.1",
     "@types/react-window": "^1.8.2",

package/dist-cjs/common-hooks/calcPreferredHeight.js

@@ -1,27 +0,0 @@
-'use strict';
-
-const calcPreferredHeight = (props = {}) => {
-  const {
-    borderless,
-    displayedItemCount = 0,
-    itemCount = 0,
-    itemHeight = 0,
-    getItemHeight,
-    gapSize = 1
-  } = props;
-  let preferredHeight = borderless ? 0 : 2;
-  const preferredItemCount = itemCount === 0 ? displayedItemCount : Math.min(displayedItemCount, itemCount);
-  if (typeof getItemHeight === "function") {
-    preferredHeight += Array.from({ length: preferredItemCount }).reduce(
-      (total, _, index) => total + Number(getItemHeight(index)) + gapSize,
-      0
-    ) - // We don't want gap after the last item
-    gapSize;
-  } else {
-    preferredHeight += preferredItemCount * Number(itemHeight) + (preferredItemCount - 1) * gapSize;
-  }
-  return Number.isNaN(preferredHeight) ? void 0 : preferredHeight;
-};
-
-exports.calcPreferredHeight = calcPreferredHeight;
-//# sourceMappingURL=calcPreferredHeight.js.map

package/dist-cjs/common-hooks/calcPreferredHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"calcPreferredHeight.js","sources":["../src/common-hooks/calcPreferredHeight.js"],"sourcesContent":["// TODO refactor this into hook. See useListHeight hook. This code was originally used by List and Tree. List has been refactored,\n// Tree hasn't yet. When Tree is finalised, probably want to share the useListHeight hook, and rename it to make it more generic.\nexport const calcPreferredHeight = (props = {}) => {\n  const {\n    borderless,\n    displayedItemCount = 0,\n    itemCount = 0,\n    itemHeight = 0,\n    getItemHeight,\n    gapSize = 1,\n  } = props;\n\n  let preferredHeight = borderless ? 0 : 2;\n\n  // if there is no item we render with the preferred count\n  const preferredItemCount =\n    itemCount === 0\n      ? displayedItemCount\n      : Math.min(displayedItemCount, itemCount);\n\n  if (typeof getItemHeight === \"function\") {\n    preferredHeight +=\n      Array.from({ length: preferredItemCount }).reduce(\n        (total, _, index) => total + Number(getItemHeight(index)) + gapSize,\n        0,\n      ) -\n      // We don't want gap after the last item\n      gapSize;\n  } else {\n    preferredHeight +=\n      preferredItemCount * Number(itemHeight) +\n      (preferredItemCount - 1) * gapSize;\n  }\n\n  // list height will be undefined if the item height can not be\n  // converted to a number, for example rem or a percentage string\n  return Number.isNaN(preferredHeight) ? undefined : preferredHeight;\n};\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAA,GAAsB,CAAC,KAAA,GAAQ,EAAC,KAAM;AACjD,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,kBAAA,GAAqB,CAAA;AAAA,IACrB,SAAA,GAAY,CAAA;AAAA,IACZ,UAAA,GAAa,CAAA;AAAA,IACb,aAAA;AAAA,IACA,OAAA,GAAU;AAAA,GACZ,GAAI,KAAA;AAEJ,EAAA,IAAI,eAAA,GAAkB,aAAa,CAAA,GAAI,CAAA;AAGvC,EAAA,MAAM,qBACJ,SAAA,KAAc,CAAA,GACV,qBACA,IAAA,CAAK,GAAA,CAAI,oBAAoB,SAAS,CAAA;AAE5C,EAAA,IAAI,OAAO,kBAAkB,UAAA,EAAY;AACvC,IAAA,eAAA,IACE,MAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,kBAAA,EAAoB,CAAA,CAAE,MAAA;AAAA,MACzC,CAAC,OAAO,CAAA,EAAG,KAAA,KAAU,QAAQ,MAAA,CAAO,aAAA,CAAc,KAAK,CAAC,CAAA,GAAI,OAAA;AAAA,MAC5D;AAAA,KACF;AAAA,IAEA,OAAA;AAAA,EACJ,CAAA,MAAO;AACL,IAAA,eAAA,IACE,kBAAA,GAAqB,MAAA,CAAO,UAAU,CAAA,GAAA,CACrC,qBAAqB,CAAA,IAAK,OAAA;AAAA,EAC/B;AAIA,EAAA,OAAO,MAAA,CAAO,KAAA,CAAM,eAAe,CAAA,GAAI,MAAA,GAAY,eAAA;AACrD;;;;"}

package/dist-cjs/common-hooks/useAutoSizer.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var core = require('@salt-ds/core');
-var react = require('react');
-
-function useAutoSizer(props) {
-  const { containerRef: ref, responsive, width, height } = props;
-  const [size, setSize] = react.useState({ width, height });
-  const handleResize = react.useCallback(function handleResize2(contentRect) {
-    if (contentRect.width > 0 && contentRect.height > 0) {
-      setSize({
-        width: contentRect.width,
-        height: contentRect.height
-      });
-    }
-  }, []);
-  core.useIsomorphicLayoutEffect(() => {
-    setSize({ width, height });
-  }, [width, height]);
-  core.useIsomorphicLayoutEffect(() => {
-    if (responsive) {
-      if (ref.current) {
-        handleResize(ref.current.getBoundingClientRect());
-      }
-      return () => {
-      };
-    }
-  }, [handleResize, responsive, ref]);
-  return size;
-}
-
-exports.useAutoSizer = useAutoSizer;
-//# sourceMappingURL=useAutoSizer.js.map

package/dist-cjs/common-hooks/useAutoSizer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAutoSizer.js","sources":["../src/common-hooks/useAutoSizer.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useState } from \"react\";\n\nexport interface ListAutosizerProps {\n  containerRef: RefObject<Element>;\n  responsive: boolean;\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface size {\n  height?: number | string;\n  width?: number | string;\n}\n\nexport function useAutoSizer(props: ListAutosizerProps): size {\n  const { containerRef: ref, responsive, width, height } = props;\n  const [size, setSize] = useState({ width, height });\n\n  const handleResize = useCallback(function handleResize(contentRect: DOMRect) {\n    if (contentRect.width > 0 && contentRect.height > 0) {\n      setSize({\n        width: contentRect.width,\n        height: contentRect.height,\n      });\n    }\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    setSize({ width, height });\n  }, [width, height]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (responsive) {\n      // let observer: ResizeObserver;\n      if (ref.current) {\n        handleResize(ref.current.getBoundingClientRect());\n        // observer = new ResizeObserver(\n        //   ([{ contentRect }]: ResizeObserverEntry[]) => {\n        //     // TODO (currently firing because of scrollbar)\n        //     // handleResize(contentRect);\n        //   },\n        // );\n        // observer.observe(ref.current);\n      }\n      return () => {\n        // if (observer) {\n        //   observer.disconnect();\n        // }\n      };\n    }\n  }, [handleResize, responsive, ref]);\n\n  return size;\n}\n"],"names":["useState","useCallback","handleResize","useIsomorphicLayoutEffect"],"mappings":";;;;;AAeO,SAAS,aAAa,KAAA,EAAiC;AAC5D,EAAA,MAAM,EAAE,YAAA,EAAc,GAAA,EAAK,UAAA,EAAY,KAAA,EAAO,QAAO,GAAI,KAAA;AACzD,EAAA,MAAM,CAAC,MAAM,OAAO,CAAA,GAAIA,eAAS,EAAE,KAAA,EAAO,QAAQ,CAAA;AAElD,EAAA,MAAM,YAAA,GAAeC,iBAAA,CAAY,SAASC,aAAAA,CAAa,WAAA,EAAsB;AAC3E,IAAA,IAAI,WAAA,CAAY,KAAA,GAAQ,CAAA,IAAK,WAAA,CAAY,SAAS,CAAA,EAAG;AACnD,MAAA,OAAA,CAAQ;AAAA,QACN,OAAO,WAAA,CAAY,KAAA;AAAA,QACnB,QAAQ,WAAA,CAAY;AAAA,OACrB,CAAA;AAAA,IACH;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,OAAA,CAAQ,EAAE,KAAA,EAAO,MAAA,EAAQ,CAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,KAAA,EAAO,MAAM,CAAC,CAAA;AAElB,EAAAA,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,UAAA,EAAY;AAEd,MAAA,IAAI,IAAI,OAAA,EAAS;AACf,QAAA,YAAA,CAAa,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAuB,CAAA;AAAA,MAQlD;AACA,MAAA,OAAO,MAAM;AAAA,MAIb,CAAA;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,UAAA,EAAY,GAAG,CAAC,CAAA;AAElC,EAAA,OAAO,IAAA;AACT;;;;"}

package/dist-cjs/kbd/Kbd.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltKbd-primary {\n  --kbd-background: var(--salt-container-primary-background);\n}\n\n.saltKbd-secondary {\n  --kbd-background: var(--salt-container-secondary-background);\n}\n\n.saltKbd-tertiary {\n  --kbd-background: var(--salt-container-tertiary-background);\n}\n\n.saltKbd {\n  display: inline-flex;\n  box-sizing: border-box;\n  width: fit-content;\n  border-radius: var(--salt-palette-corner-weaker);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  background: var(--kbd-background);\n  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  align-items: center;\n  padding: 0 var(--salt-spacing-50);\n  text-transform: capitalize;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-code-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-style: normal;\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Kbd.css.js.map

package/dist-cjs/kbd/Kbd.css.js.map

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

package/dist-cjs/kbd/Kbd.js

@@ -1,34 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var clsx = require('clsx');
-var react = require('react');
-var Kbd$1 = require('./Kbd.css.js');
-
-const withBaseName = core.makePrefixer("saltKbd");
-const Kbd = react.forwardRef(
-  function Kbd2(props, ref) {
-    const { children, className, variant = "primary", ...rest } = props;
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-kbd",
-      css: Kbd$1,
-      window: targetWindow
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "kbd",
-      {
-        ref,
-        className: clsx.clsx(withBaseName(), withBaseName(variant), className),
-        ...rest,
-        children
-      }
-    );
-  }
-);
-
-exports.Kbd = Kbd;
-//# sourceMappingURL=Kbd.js.map

package/dist-cjs/kbd/Kbd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Kbd.js","sources":["../src/kbd/Kbd.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport kbdCss from \"./Kbd.css\";\n\nexport interface KbdProps extends ComponentPropsWithoutRef<\"kbd\"> {\n  /**\n   * The variant of the kbd. Defaults to `\"primary\"`.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltKbd\");\n\nexport const Kbd = forwardRef<HTMLDivElement, KbdProps>(\n  function Kbd(props, ref) {\n    const { children, className, variant = \"primary\", ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-kbd\",\n      css: kbdCss,\n      window: targetWindow,\n    });\n\n    return (\n      <kbd\n        ref={ref}\n        className={clsx(withBaseName(), withBaseName(variant), className)}\n        {...rest}\n      >\n        {children}\n      </kbd>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Kbd","useWindow","useComponentCssInjection","kbdCss","jsx","clsx"],"mappings":";;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,SAAS,CAAA;AAEpC,MAAM,GAAA,GAAMC,gBAAA;AAAA,EACjB,SAASC,IAAAA,CAAI,KAAA,EAAO,GAAA,EAAK;AACvB,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE9D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,UAAA;AAAA,MACR,GAAA,EAAKC,KAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,QAC/D,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/tree/use-tree-keyboard-navigation.js

@@ -1,51 +0,0 @@
-'use strict';
-
-var react = require('react');
-var keyUtils = require('../common-hooks/keyUtils.js');
-
-const getNodeParentPath = ({ id }) => {
-  let pos = id.lastIndexOf("-");
-  if (pos !== -1) {
-    const path = id.slice(pos + 1);
-    const steps = path.split(".");
-    if (steps.length === 1) {
-      return null;
-    }
-    steps.pop();
-    return `${id.slice(0, pos)}-${steps.join(".")}`;
-  }
-  pos = id.lastIndexOf("/");
-  if (pos !== -1) {
-    return id.slice(0, pos);
-  }
-};
-const useKeyboardNavigation = ({
-  collectionHook,
-  highlightedIdx,
-  highlightItemAtIndex
-}) => {
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      if (e.key === keyUtils.ArrowLeft) {
-        const node = collectionHook.data[highlightedIdx];
-        const parentId = getNodeParentPath(node);
-        if (parentId) {
-          highlightItemAtIndex(
-            collectionHook.data.findIndex((item) => item.id === parentId)
-          );
-        }
-      }
-    },
-    [highlightedIdx, highlightItemAtIndex]
-  );
-  const listHandlers = {
-    onKeyDown: handleKeyDown
-  };
-  return {
-    listHandlers
-  };
-};
-
-exports.getNodeParentPath = getNodeParentPath;
-exports.useKeyboardNavigation = useKeyboardNavigation;
-//# sourceMappingURL=use-tree-keyboard-navigation.js.map

package/dist-cjs/tree/use-tree-keyboard-navigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-tree-keyboard-navigation.js","sources":["../src/tree/use-tree-keyboard-navigation.ts"],"sourcesContent":["import { type KeyboardEvent, useCallback } from \"react\";\nimport type { CollectionHookResult, CollectionItem } from \"../common-hooks\";\nimport { ArrowLeft } from \"../common-hooks/keyUtils\";\n\nexport const getNodeParentPath = ({ id }: CollectionItem<any>) => {\n  let pos = id.lastIndexOf(\"-\");\n  if (pos !== -1) {\n    // using the built-in hierarchical id scheme\n    // rootId-n-n.n\n    const path = id.slice(pos + 1);\n    const steps = path.split(\".\");\n    if (steps.length === 1) {\n      return null;\n    }\n    steps.pop();\n    return `${id.slice(0, pos)}-${steps.join(\".\")}`;\n  }\n\n  pos = id.lastIndexOf(\"/\");\n  if (pos !== -1) {\n    // using a path scheme step/step/step\n    return id.slice(0, pos);\n  }\n};\n\ninterface TreeNavigationHookProps<Item> {\n  collectionHook: CollectionHookResult<Item>;\n  highlightedIdx: number;\n  highlightItemAtIndex: (index: number) => void;\n}\n\ninterface TreeNavigationHookResult {\n  listHandlers: {\n    onKeyDown: (evt: KeyboardEvent) => void;\n  };\n}\n\n// we need a way to set highlightedIdx when selection changes\nexport const useKeyboardNavigation = <Item>({\n  collectionHook,\n  highlightedIdx,\n  highlightItemAtIndex,\n}: TreeNavigationHookProps<Item>): TreeNavigationHookResult => {\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === ArrowLeft) {\n        const node = collectionHook.data[highlightedIdx];\n        const parentId = getNodeParentPath(node);\n        if (parentId) {\n          highlightItemAtIndex(\n            collectionHook.data.findIndex((item) => item.id === parentId),\n          );\n        }\n      }\n    },\n    [highlightedIdx, highlightItemAtIndex],\n  );\n\n  const listHandlers = {\n    onKeyDown: handleKeyDown,\n  };\n\n  return {\n    listHandlers,\n  };\n};\n"],"names":["useCallback","ArrowLeft"],"mappings":";;;;;AAIO,MAAM,iBAAA,GAAoB,CAAC,EAAE,EAAA,EAAG,KAA2B;AAChE,EAAA,IAAI,GAAA,GAAM,EAAA,CAAG,WAAA,CAAY,GAAG,CAAA;AAC5B,EAAA,IAAI,QAAQ,EAAA,EAAI;AAGd,IAAA,MAAM,IAAA,GAAO,EAAA,CAAG,KAAA,CAAM,GAAA,GAAM,CAAC,CAAA;AAC7B,IAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,KAAA,CAAM,GAAG,CAAA;AAC5B,IAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,MAAA,OAAO,IAAA;AAAA,IACT;AACA,IAAA,KAAA,CAAM,GAAA,EAAI;AACV,IAAA,OAAO,CAAA,EAAG,EAAA,CAAG,KAAA,CAAM,CAAA,EAAG,GAAG,CAAC,CAAA,CAAA,EAAI,KAAA,CAAM,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,EAC/C;AAEA,EAAA,GAAA,GAAM,EAAA,CAAG,YAAY,GAAG,CAAA;AACxB,EAAA,IAAI,QAAQ,EAAA,EAAI;AAEd,IAAA,OAAO,EAAA,CAAG,KAAA,CAAM,CAAA,EAAG,GAAG,CAAA;AAAA,EACxB;AACF;AAeO,MAAM,wBAAwB,CAAO;AAAA,EAC1C,cAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAA+D;AAC7D,EAAA,MAAM,aAAA,GAAgBA,iBAAA;AAAA,IACpB,CAAC,CAAA,KAAqB;AACpB,MAAA,IAAI,CAAA,CAAE,QAAQC,kBAAA,EAAW;AACvB,QAAA,MAAM,IAAA,GAAO,cAAA,CAAe,IAAA,CAAK,cAAc,CAAA;AAC/C,QAAA,MAAM,QAAA,GAAW,kBAAkB,IAAI,CAAA;AACvC,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,oBAAA;AAAA,YACE,eAAe,IAAA,CAAK,SAAA,CAAU,CAAC,IAAA,KAAS,IAAA,CAAK,OAAO,QAAQ;AAAA,WAC9D;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAgB,oBAAoB;AAAA,GACvC;AAEA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,OAAO;AAAA,IACL;AAAA,GACF;AACF;;;;;"}

package/dist-es/common-hooks/calcPreferredHeight.js

@@ -1,25 +0,0 @@
-const calcPreferredHeight = (props = {}) => {
-  const {
-    borderless,
-    displayedItemCount = 0,
-    itemCount = 0,
-    itemHeight = 0,
-    getItemHeight,
-    gapSize = 1
-  } = props;
-  let preferredHeight = borderless ? 0 : 2;
-  const preferredItemCount = itemCount === 0 ? displayedItemCount : Math.min(displayedItemCount, itemCount);
-  if (typeof getItemHeight === "function") {
-    preferredHeight += Array.from({ length: preferredItemCount }).reduce(
-      (total, _, index) => total + Number(getItemHeight(index)) + gapSize,
-      0
-    ) - // We don't want gap after the last item
-    gapSize;
-  } else {
-    preferredHeight += preferredItemCount * Number(itemHeight) + (preferredItemCount - 1) * gapSize;
-  }
-  return Number.isNaN(preferredHeight) ? void 0 : preferredHeight;
-};
-
-export { calcPreferredHeight };
-//# sourceMappingURL=calcPreferredHeight.js.map

package/dist-es/common-hooks/calcPreferredHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"calcPreferredHeight.js","sources":["../src/common-hooks/calcPreferredHeight.js"],"sourcesContent":["// TODO refactor this into hook. See useListHeight hook. This code was originally used by List and Tree. List has been refactored,\n// Tree hasn't yet. When Tree is finalised, probably want to share the useListHeight hook, and rename it to make it more generic.\nexport const calcPreferredHeight = (props = {}) => {\n  const {\n    borderless,\n    displayedItemCount = 0,\n    itemCount = 0,\n    itemHeight = 0,\n    getItemHeight,\n    gapSize = 1,\n  } = props;\n\n  let preferredHeight = borderless ? 0 : 2;\n\n  // if there is no item we render with the preferred count\n  const preferredItemCount =\n    itemCount === 0\n      ? displayedItemCount\n      : Math.min(displayedItemCount, itemCount);\n\n  if (typeof getItemHeight === \"function\") {\n    preferredHeight +=\n      Array.from({ length: preferredItemCount }).reduce(\n        (total, _, index) => total + Number(getItemHeight(index)) + gapSize,\n        0,\n      ) -\n      // We don't want gap after the last item\n      gapSize;\n  } else {\n    preferredHeight +=\n      preferredItemCount * Number(itemHeight) +\n      (preferredItemCount - 1) * gapSize;\n  }\n\n  // list height will be undefined if the item height can not be\n  // converted to a number, for example rem or a percentage string\n  return Number.isNaN(preferredHeight) ? undefined : preferredHeight;\n};\n"],"names":[],"mappings":"AAEO,MAAM,mBAAA,GAAsB,CAAC,KAAA,GAAQ,EAAC,KAAM;AACjD,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,kBAAA,GAAqB,CAAA;AAAA,IACrB,SAAA,GAAY,CAAA;AAAA,IACZ,UAAA,GAAa,CAAA;AAAA,IACb,aAAA;AAAA,IACA,OAAA,GAAU;AAAA,GACZ,GAAI,KAAA;AAEJ,EAAA,IAAI,eAAA,GAAkB,aAAa,CAAA,GAAI,CAAA;AAGvC,EAAA,MAAM,qBACJ,SAAA,KAAc,CAAA,GACV,qBACA,IAAA,CAAK,GAAA,CAAI,oBAAoB,SAAS,CAAA;AAE5C,EAAA,IAAI,OAAO,kBAAkB,UAAA,EAAY;AACvC,IAAA,eAAA,IACE,MAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,kBAAA,EAAoB,CAAA,CAAE,MAAA;AAAA,MACzC,CAAC,OAAO,CAAA,EAAG,KAAA,KAAU,QAAQ,MAAA,CAAO,aAAA,CAAc,KAAK,CAAC,CAAA,GAAI,OAAA;AAAA,MAC5D;AAAA,KACF;AAAA,IAEA,OAAA;AAAA,EACJ,CAAA,MAAO;AACL,IAAA,eAAA,IACE,kBAAA,GAAqB,MAAA,CAAO,UAAU,CAAA,GAAA,CACrC,qBAAqB,CAAA,IAAK,OAAA;AAAA,EAC/B;AAIA,EAAA,OAAO,MAAA,CAAO,KAAA,CAAM,eAAe,CAAA,GAAI,MAAA,GAAY,eAAA;AACrD;;;;"}

package/dist-es/common-hooks/useAutoSizer.js

@@ -1,31 +0,0 @@
-import { useIsomorphicLayoutEffect } from '@salt-ds/core';
-import { useState, useCallback } from 'react';
-
-function useAutoSizer(props) {
-  const { containerRef: ref, responsive, width, height } = props;
-  const [size, setSize] = useState({ width, height });
-  const handleResize = useCallback(function handleResize2(contentRect) {
-    if (contentRect.width > 0 && contentRect.height > 0) {
-      setSize({
-        width: contentRect.width,
-        height: contentRect.height
-      });
-    }
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    setSize({ width, height });
-  }, [width, height]);
-  useIsomorphicLayoutEffect(() => {
-    if (responsive) {
-      if (ref.current) {
-        handleResize(ref.current.getBoundingClientRect());
-      }
-      return () => {
-      };
-    }
-  }, [handleResize, responsive, ref]);
-  return size;
-}
-
-export { useAutoSizer };
-//# sourceMappingURL=useAutoSizer.js.map

package/dist-es/common-hooks/useAutoSizer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAutoSizer.js","sources":["../src/common-hooks/useAutoSizer.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useState } from \"react\";\n\nexport interface ListAutosizerProps {\n  containerRef: RefObject<Element>;\n  responsive: boolean;\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface size {\n  height?: number | string;\n  width?: number | string;\n}\n\nexport function useAutoSizer(props: ListAutosizerProps): size {\n  const { containerRef: ref, responsive, width, height } = props;\n  const [size, setSize] = useState({ width, height });\n\n  const handleResize = useCallback(function handleResize(contentRect: DOMRect) {\n    if (contentRect.width > 0 && contentRect.height > 0) {\n      setSize({\n        width: contentRect.width,\n        height: contentRect.height,\n      });\n    }\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    setSize({ width, height });\n  }, [width, height]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (responsive) {\n      // let observer: ResizeObserver;\n      if (ref.current) {\n        handleResize(ref.current.getBoundingClientRect());\n        // observer = new ResizeObserver(\n        //   ([{ contentRect }]: ResizeObserverEntry[]) => {\n        //     // TODO (currently firing because of scrollbar)\n        //     // handleResize(contentRect);\n        //   },\n        // );\n        // observer.observe(ref.current);\n      }\n      return () => {\n        // if (observer) {\n        //   observer.disconnect();\n        // }\n      };\n    }\n  }, [handleResize, responsive, ref]);\n\n  return size;\n}\n"],"names":["handleResize"],"mappings":";;;AAeO,SAAS,aAAa,KAAA,EAAiC;AAC5D,EAAA,MAAM,EAAE,YAAA,EAAc,GAAA,EAAK,UAAA,EAAY,KAAA,EAAO,QAAO,GAAI,KAAA;AACzD,EAAA,MAAM,CAAC,MAAM,OAAO,CAAA,GAAI,SAAS,EAAE,KAAA,EAAO,QAAQ,CAAA;AAElD,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,SAASA,aAAAA,CAAa,WAAA,EAAsB;AAC3E,IAAA,IAAI,WAAA,CAAY,KAAA,GAAQ,CAAA,IAAK,WAAA,CAAY,SAAS,CAAA,EAAG;AACnD,MAAA,OAAA,CAAQ;AAAA,QACN,OAAO,WAAA,CAAY,KAAA;AAAA,QACnB,QAAQ,WAAA,CAAY;AAAA,OACrB,CAAA;AAAA,IACH;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,OAAA,CAAQ,EAAE,KAAA,EAAO,MAAA,EAAQ,CAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,KAAA,EAAO,MAAM,CAAC,CAAA;AAElB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,UAAA,EAAY;AAEd,MAAA,IAAI,IAAI,OAAA,EAAS;AACf,QAAA,YAAA,CAAa,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAuB,CAAA;AAAA,MAQlD;AACA,MAAA,OAAO,MAAM;AAAA,MAIb,CAAA;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,UAAA,EAAY,GAAG,CAAC,CAAA;AAElC,EAAA,OAAO,IAAA;AACT;;;;"}

package/dist-es/kbd/Kbd.css.js

@@ -1,4 +0,0 @@
-var css_248z = ".saltKbd-primary {\n  --kbd-background: var(--salt-container-primary-background);\n}\n\n.saltKbd-secondary {\n  --kbd-background: var(--salt-container-secondary-background);\n}\n\n.saltKbd-tertiary {\n  --kbd-background: var(--salt-container-tertiary-background);\n}\n\n.saltKbd {\n  display: inline-flex;\n  box-sizing: border-box;\n  width: fit-content;\n  border-radius: var(--salt-palette-corner-weaker);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  background: var(--kbd-background);\n  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  align-items: center;\n  padding: 0 var(--salt-spacing-50);\n  text-transform: capitalize;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-code-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-style: normal;\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
-
-export { css_248z as default };
-//# sourceMappingURL=Kbd.css.js.map

package/dist-es/kbd/Kbd.css.js.map

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

package/dist-es/kbd/Kbd.js

@@ -1,32 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import css_248z from './Kbd.css.js';
-
-const withBaseName = makePrefixer("saltKbd");
-const Kbd = forwardRef(
-  function Kbd2(props, ref) {
-    const { children, className, variant = "primary", ...rest } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-      testId: "salt-kbd",
-      css: css_248z,
-      window: targetWindow
-    });
-    return /* @__PURE__ */ jsx(
-      "kbd",
-      {
-        ref,
-        className: clsx(withBaseName(), withBaseName(variant), className),
-        ...rest,
-        children
-      }
-    );
-  }
-);
-
-export { Kbd };
-//# sourceMappingURL=Kbd.js.map

package/dist-es/kbd/Kbd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Kbd.js","sources":["../src/kbd/Kbd.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport kbdCss from \"./Kbd.css\";\n\nexport interface KbdProps extends ComponentPropsWithoutRef<\"kbd\"> {\n  /**\n   * The variant of the kbd. Defaults to `\"primary\"`.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltKbd\");\n\nexport const Kbd = forwardRef<HTMLDivElement, KbdProps>(\n  function Kbd(props, ref) {\n    const { children, className, variant = \"primary\", ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-kbd\",\n      css: kbdCss,\n      window: targetWindow,\n    });\n\n    return (\n      <kbd\n        ref={ref}\n        className={clsx(withBaseName(), withBaseName(variant), className)}\n        {...rest}\n      >\n        {children}\n      </kbd>\n    );\n  },\n);\n"],"names":["Kbd","kbdCss"],"mappings":";;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA;AAEpC,MAAM,GAAA,GAAM,UAAA;AAAA,EACjB,SAASA,IAAAA,CAAI,KAAA,EAAO,GAAA,EAAK;AACvB,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE9D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,UAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,QAC/D,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/tree/use-tree-keyboard-navigation.js

@@ -1,48 +0,0 @@
-import { useCallback } from 'react';
-import { ArrowLeft } from '../common-hooks/keyUtils.js';
-
-const getNodeParentPath = ({ id }) => {
-  let pos = id.lastIndexOf("-");
-  if (pos !== -1) {
-    const path = id.slice(pos + 1);
-    const steps = path.split(".");
-    if (steps.length === 1) {
-      return null;
-    }
-    steps.pop();
-    return `${id.slice(0, pos)}-${steps.join(".")}`;
-  }
-  pos = id.lastIndexOf("/");
-  if (pos !== -1) {
-    return id.slice(0, pos);
-  }
-};
-const useKeyboardNavigation = ({
-  collectionHook,
-  highlightedIdx,
-  highlightItemAtIndex
-}) => {
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === ArrowLeft) {
-        const node = collectionHook.data[highlightedIdx];
-        const parentId = getNodeParentPath(node);
-        if (parentId) {
-          highlightItemAtIndex(
-            collectionHook.data.findIndex((item) => item.id === parentId)
-          );
-        }
-      }
-    },
-    [highlightedIdx, highlightItemAtIndex]
-  );
-  const listHandlers = {
-    onKeyDown: handleKeyDown
-  };
-  return {
-    listHandlers
-  };
-};
-
-export { getNodeParentPath, useKeyboardNavigation };
-//# sourceMappingURL=use-tree-keyboard-navigation.js.map