@1771technologies/lytenyte-pro 1.0.0-beta.36 → 1.0.0-beta.37

package/dist/tree-view/branch/branch.d.ts

@@ -1,22 +1,14 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface TreeBranchProps {
-  readonly itemId: string;
-  readonly labelWrap?: SlotComponent;
-  readonly label?: SlotComponent;
-  readonly expander?: SlotComponent<{
-    expanded: boolean;
-    toggle: () => void;
-  }>;
-  readonly transitionEnterMs?: number;
-  readonly transitionExitMs?: number;
-  readonly gridWrapped?: boolean;
+    readonly itemId: string;
+    readonly labelWrap?: SlotComponent;
+    readonly label?: SlotComponent;
+    readonly expander?: SlotComponent<{
+        expanded: boolean;
+        toggle: () => void;
+    }>;
+    readonly transitionEnterMs?: number;
+    readonly transitionExitMs?: number;
+    readonly gridWrapped?: boolean;
 }
-export declare const TreeBranch: import("react").ForwardRefExoticComponent<
-  Omit<
-    import("react").ClassAttributes<HTMLLIElement> &
-      import("react").LiHTMLAttributes<HTMLLIElement> &
-      TreeBranchProps,
-    "ref"
-  > &
-    import("react").RefAttributes<HTMLLIElement>
->;
+export declare const TreeBranch: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & TreeBranchProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/tree-view/branch/branch.js

@@ -1,115 +1,63 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect } from "react";
 import { depthContext, useDepth } from "../depth-provider.js";
-import { useEvent, useSlot, useTransitionedOpen } from "@1771technologies/lytenyte-react-hooks";
+import { useEvent, useSlot, useTransitionedOpen, } from "@1771technologies/lytenyte-react-hooks";
 import { useTreeRoot } from "../context.js";
 import { useBranchKeys } from "./use-branch-keys.js";
-export const TreeBranch = forwardRef(function TreeBranch(
-  {
-    itemId,
-    label,
-    expander,
-    transitionEnterMs,
-    transitionExitMs,
-    gridWrapped,
-    labelWrap,
-    ...props
-  },
-  forwarded,
-) {
-  const depth = useDepth();
-  const root = useTreeRoot();
-  // Manage the open and close state of the branch
-  const expanded = root.expansions[itemId] ?? root.expansionDefault ?? false;
-  const { open, shouldMount, state, toggle } = useTransitionedOpen({
-    initial: expanded,
-    timeEnter: transitionEnterMs ?? root.transitionEnterMs,
-    timeExit: transitionExitMs ?? root.transitionExitMs,
-  });
-  const onExpansionChange = useEvent((b) => {
-    root.onExpansionChange({
-      ...root.expansions,
-      [itemId]: b,
+export const TreeBranch = forwardRef(function TreeBranch({ itemId, label, expander, transitionEnterMs, transitionExitMs, gridWrapped, labelWrap, ...props }, forwarded) {
+    const depth = useDepth();
+    const root = useTreeRoot();
+    // Manage the open and close state of the branch
+    const expanded = root.expansions[itemId] ?? root.expansionDefault ?? false;
+    const { open, shouldMount, state, toggle } = useTransitionedOpen({
+        initial: expanded,
+        timeEnter: transitionEnterMs ?? root.transitionEnterMs,
+        timeExit: transitionExitMs ?? root.transitionExitMs,
     });
-  });
-  useEffect(() => {
-    if (expanded === open) return;
-    toggle(expanded);
-  }, [expanded, open, toggle]);
-  // Component part rendering
-  const labelRendered = useSlot({
-    props: [],
-    slot: label ?? _jsx("div", {}),
-  });
-  const expandedProps = {
-    onClick: (e) => {
-      e.stopPropagation();
-      onExpansionChange(!expanded);
-    },
-  };
-  const expanderRendered = useSlot({
-    props: [expandedProps],
-    slot: expander ?? _jsx("button", { children: ">" }),
-    state: { toggle, expanded },
-  });
-  const wrapped = gridWrapped ?? root.gridWrappedBranches;
-  const labelWrapSlot = useSlot({
-    props: [
-      {
-        "data-tree-branch-label": true,
-        children: _jsxs(_Fragment, { children: [expanderRendered, labelRendered] }),
-      },
-    ],
-    slot: labelWrap ?? _jsx("div", {}),
-  });
-  return _jsx(depthContext.Provider, {
-    value: depth + 1,
-    children: _jsxs("li", {
-      ...props,
-      onKeyDown: useBranchKeys(itemId, root.expansionDefault ?? false, props.onKeyDown),
-      tabIndex: -1,
-      ref: forwarded,
-      role: "treeitem",
-      "aria-expanded": open,
-      "aria-selected": root.selection.has(itemId),
-      "aria-level": depth + 1,
-      "data-ln-selected": root.selection.has(itemId),
-      "data-ln-tree-node": true,
-      "data-ln-tree-branch": true,
-      "data-ln-tree-id": itemId,
-      style: {
-        ...props.style,
-        "--ln-tree-depth": depth,
-      },
-      children: [
-        labelWrapSlot,
-        _jsx("div", {
-          children: _jsx(Wrapped, {
-            wrapped: wrapped,
-            expanded: open,
-            children:
-              shouldMount &&
-              _jsx("ul", {
-                "data-tree-branch-children": true,
-                "data-expanded": open,
-                "data-open-state": state,
-                role: "group",
-                children: props.children,
-              }),
-          }),
-        }),
-      ],
-    }),
-  });
+    const onExpansionChange = useEvent((b) => {
+        root.onExpansionChange({
+            ...root.expansions,
+            [itemId]: b,
+        });
+    });
+    useEffect(() => {
+        if (expanded === open)
+            return;
+        toggle(expanded);
+    }, [expanded, open, toggle]);
+    // Component part rendering
+    const labelRendered = useSlot({
+        props: [],
+        slot: label ?? _jsx("div", {}),
+    });
+    const expandedProps = {
+        onClick: (e) => {
+            e.stopPropagation();
+            onExpansionChange(!expanded);
+        },
+    };
+    const expanderRendered = useSlot({
+        props: [expandedProps],
+        slot: expander ?? _jsx("button", { children: ">" }),
+        state: { toggle, expanded },
+    });
+    const wrapped = gridWrapped ?? root.gridWrappedBranches;
+    const labelWrapSlot = useSlot({
+        props: [
+            {
+                "data-tree-branch-label": true,
+                children: (_jsxs(_Fragment, { children: [expanderRendered, labelRendered] })),
+            },
+        ],
+        slot: labelWrap ?? _jsx("div", {}),
+    });
+    return (_jsx(depthContext.Provider, { value: depth + 1, children: _jsxs("li", { ...props, onKeyDown: useBranchKeys(itemId, root.expansionDefault ?? false, props.onKeyDown), tabIndex: -1, ref: forwarded, role: "treeitem", "aria-expanded": open, "aria-selected": root.selection.has(itemId), "aria-level": depth + 1, "data-ln-selected": root.selection.has(itemId), "data-ln-tree-node": true, "data-ln-tree-branch": true, "data-ln-tree-id": itemId, style: {
+                ...props.style,
+                "--ln-tree-depth": depth,
+            }, children: [labelWrapSlot, _jsx("div", { children: _jsx(Wrapped, { wrapped: wrapped, expanded: open, children: shouldMount && (_jsx("ul", { "data-tree-branch-children": true, "data-expanded": open, "data-open-state": state, role: "group", children: props.children })) }) })] }) }));
 });
 function Wrapped(props) {
-  if (!props.wrapped) return _jsx(_Fragment, { children: props.children });
-  return _jsx("div", {
-    "data-tree-branch-grid-wrapped": true,
-    "data-expanded": props.expanded,
-    children: _jsx("div", {
-      "data-tree-branch-grid-wrapped-content": true,
-      children: props.children,
-    }),
-  });
+    if (!props.wrapped)
+        return _jsx(_Fragment, { children: props.children });
+    return (_jsx("div", { "data-tree-branch-grid-wrapped": true, "data-expanded": props.expanded, children: _jsx("div", { "data-tree-branch-grid-wrapped-content": true, children: props.children }) }));
 }

package/dist/tree-view/branch/use-branch-keys.d.ts

@@ -1,6 +1,2 @@
 import type { KeyboardEvent, KeyboardEventHandler } from "react";
-export declare function useBranchKeys(
-  id: string,
-  defaultExpansion: boolean,
-  current?: KeyboardEventHandler,
-): (ev: KeyboardEvent) => void;
+export declare function useBranchKeys(id: string, defaultExpansion: boolean, current?: KeyboardEventHandler): (ev: KeyboardEvent) => void;

package/dist/tree-view/branch/use-branch-keys.js

@@ -9,76 +9,79 @@ import { getSiblingBranches } from "../utils/get-sibling-branches.js";
 import { getFocusables } from "@1771technologies/lytenyte-dom-utils";
 const accepted = ["ArrowRight", "ArrowLeft", "Enter", "*"];
 export function useBranchKeys(id, defaultExpansion, current) {
-  const ctx = useTreeRoot();
-  const onKeyDown = useEvent((ev) => {
-    current?.(ev);
-    if (!accepted.includes(ev.key)) return;
-    const isExpanded = ctx.expansions[id] ?? defaultExpansion;
-    if (ev.key === "*") {
-      const node = getFocusedNode();
-      const siblings = getSiblingBranches(node);
-      const next = { ...ctx.expansions };
-      siblings?.forEach((c) => {
-        next[getTreeNodeId(c)] = true;
-      });
-      ctx.onExpansionChange(next);
-      ev.stopPropagation();
-      return;
-    }
-    if (ev.key === "Enter") {
-      if (ev.currentTarget !== ev.target) return;
-      const next = { ...ctx.expansions };
-      next[id] = !isExpanded;
-      ctx.onExpansionChange(next);
-      return;
-    }
-    if (ev.key === "ArrowRight") {
-      const branch = getFocusedNode();
-      if (ev.currentTarget !== branch) return;
-      if (!isExpanded) {
-        const next = { ...ctx.expansions };
-        next[id] = !(next[id] ?? defaultExpansion);
-        ctx.onExpansionChange(next);
-        return;
-      }
-      const childNodes = getFocusables(branch.firstElementChild);
-      if (childNodes.length > 1 && childNodes.at(-1) !== document.activeElement) {
-        const current = childNodes.indexOf(document.activeElement);
-        const index = current === -1 || current === 0 ? 1 : current + 1;
-        childNodes[index]?.focus();
-        return;
-      }
-      // Get the first focusable node.
-      const nodes = getFocusableNodes(branch);
-      nodes.at(0)?.focus();
-    }
-    if (ev.key === "ArrowLeft") {
-      const node = getFocusedNode();
-      // We need to collapse this node
-      if (isBranchNode(node) && isExpanded) {
-        // Ensure we don't collapse the node when the event bubbles and the left arrow
-        // was pressed on a child element. Pressing left arrow on the child will focus the
-        // parent, and then run the parent's on keydown handler.
-        if (
-          ev.target !== ev.currentTarget &&
-          !ev.currentTarget.firstElementChild?.contains(document.activeElement)
-        )
-          return;
-        const next = { ...ctx.expansions };
-        const id = getTreeNodeId(node);
-        next[id] = false;
-        ctx.onExpansionChange(next);
-        return;
-      } else {
-        const parent = getParentNode(node);
-        if (!parent) {
-          const focusNodes = getFocusableNodes(ctx.panel);
-          focusNodes.at(0)?.focus();
-        } else {
-          parent.focus();
+    const ctx = useTreeRoot();
+    const onKeyDown = useEvent((ev) => {
+        current?.(ev);
+        if (!accepted.includes(ev.key))
+            return;
+        const isExpanded = ctx.expansions[id] ?? defaultExpansion;
+        if (ev.key === "*") {
+            const node = getFocusedNode();
+            const siblings = getSiblingBranches(node);
+            const next = { ...ctx.expansions };
+            siblings?.forEach((c) => {
+                next[getTreeNodeId(c)] = true;
+            });
+            ctx.onExpansionChange(next);
+            ev.stopPropagation();
+            return;
         }
-      }
-    }
-  });
-  return onKeyDown;
+        if (ev.key === "Enter") {
+            if (ev.currentTarget !== ev.target)
+                return;
+            const next = { ...ctx.expansions };
+            next[id] = !isExpanded;
+            ctx.onExpansionChange(next);
+            return;
+        }
+        if (ev.key === "ArrowRight") {
+            const branch = getFocusedNode();
+            if (ev.currentTarget !== branch)
+                return;
+            if (!isExpanded) {
+                const next = { ...ctx.expansions };
+                next[id] = !(next[id] ?? defaultExpansion);
+                ctx.onExpansionChange(next);
+                return;
+            }
+            const childNodes = getFocusables(branch.firstElementChild);
+            if (childNodes.length > 1 && childNodes.at(-1) !== document.activeElement) {
+                const current = childNodes.indexOf(document.activeElement);
+                const index = current === -1 || current === 0 ? 1 : current + 1;
+                childNodes[index]?.focus();
+                return;
+            }
+            // Get the first focusable node.
+            const nodes = getFocusableNodes(branch);
+            nodes.at(0)?.focus();
+        }
+        if (ev.key === "ArrowLeft") {
+            const node = getFocusedNode();
+            // We need to collapse this node
+            if (isBranchNode(node) && isExpanded) {
+                // Ensure we don't collapse the node when the event bubbles and the left arrow
+                // was pressed on a child element. Pressing left arrow on the child will focus the
+                // parent, and then run the parent's on keydown handler.
+                if (ev.target !== ev.currentTarget &&
+                    !ev.currentTarget.firstElementChild?.contains(document.activeElement))
+                    return;
+                const next = { ...ctx.expansions };
+                const id = getTreeNodeId(node);
+                next[id] = false;
+                ctx.onExpansionChange(next);
+                return;
+            }
+            else {
+                const parent = getParentNode(node);
+                if (!parent) {
+                    const focusNodes = getFocusableNodes(ctx.panel);
+                    focusNodes.at(0)?.focus();
+                }
+                else {
+                    parent.focus();
+                }
+            }
+        }
+    });
+    return onKeyDown;
 }

package/dist/tree-view/context.d.ts

@@ -1,26 +1,22 @@
 import { type Dispatch, type SetStateAction } from "react";
 export interface TreeViewRootContext {
-  readonly panel: HTMLUListElement | null;
-  readonly panelRef: Dispatch<SetStateAction<HTMLUListElement | null>>;
-  readonly expansions: Record<string, boolean>;
-  readonly onExpansionChange: (n: Record<string, boolean>) => void;
-  readonly expansionDefault: boolean;
-  readonly selectionMode: "single" | "multiple" | "none";
-  readonly selection: Set<string>;
-  readonly onSelectionChange: (c: Set<string>) => void;
-  readonly selectionPivotRef: {
-    current: string | null;
-  };
-  readonly transitionEnterMs: number;
-  readonly transitionExitMs: number;
-  readonly gridWrappedBranches: boolean;
-  readonly onFocusChange: (el: HTMLElement | null) => void;
-  readonly getAllIds: (panel: HTMLElement) => Set<string>;
-  readonly getIdsBetweenNodes: (
-    start: HTMLElement,
-    end: HTMLElement,
-    panel: HTMLElement,
-  ) => string[];
+    readonly panel: HTMLUListElement | null;
+    readonly panelRef: Dispatch<SetStateAction<HTMLUListElement | null>>;
+    readonly expansions: Record<string, boolean>;
+    readonly onExpansionChange: (n: Record<string, boolean>) => void;
+    readonly expansionDefault: boolean;
+    readonly selectionMode: "single" | "multiple" | "none";
+    readonly selection: Set<string>;
+    readonly onSelectionChange: (c: Set<string>) => void;
+    readonly selectionPivotRef: {
+        current: string | null;
+    };
+    readonly transitionEnterMs: number;
+    readonly transitionExitMs: number;
+    readonly gridWrappedBranches: boolean;
+    readonly onFocusChange: (el: HTMLElement | null) => void;
+    readonly getAllIds: (panel: HTMLElement) => Set<string>;
+    readonly getIdsBetweenNodes: (start: HTMLElement, end: HTMLElement, panel: HTMLElement) => string[];
 }
 export declare const context: import("react").Context<TreeViewRootContext>;
 export declare const useTreeRoot: () => TreeViewRootContext;

package/dist/tree-view/hooks/use-tree-view-paths.d.ts

@@ -1,8 +1,2 @@
 import { type PathProvidedItem } from "@1771technologies/lytenyte-shared";
-export declare function useTreeViewPaths<T extends PathProvidedItem>(
-  paths: T[],
-  nonAdjacentAreDistinct?: boolean,
-): (
-  | import("@1771technologies/lytenyte-shared").PathBranch<T>
-  | import("@1771technologies/lytenyte-shared").PathLeaf<T>
-)[];
+export declare function useTreeViewPaths<T extends PathProvidedItem>(paths: T[], nonAdjacentAreDistinct?: boolean): (import("@1771technologies/lytenyte-shared").PathBranch<T> | import("@1771technologies/lytenyte-shared").PathLeaf<T>)[];

package/dist/tree-view/hooks/use-tree-view-paths.js

@@ -1,9 +1,9 @@
 import { computePathTree } from "@1771technologies/lytenyte-shared";
 import { useMemo } from "react";
 export function useTreeViewPaths(paths, nonAdjacentAreDistinct) {
-  const tree = useMemo(() => {
-    const result = computePathTree(paths, {}, nonAdjacentAreDistinct);
-    return [...result.children.values()];
-  }, [nonAdjacentAreDistinct, paths]);
-  return tree;
+    const tree = useMemo(() => {
+        const result = computePathTree(paths, {}, nonAdjacentAreDistinct);
+        return [...result.children.values()];
+    }, [nonAdjacentAreDistinct, paths]);
+    return tree;
 }

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

@@ -2,41 +2,13 @@ import { useTreeViewPaths } from "./hooks/use-tree-view-paths.js";
 import { ForceSyncScrolling } from "./virtualized/force-sync-scrolling.js";
 import { useVirtualizedTree } from "./virtualized/use-virtualized-tree.js";
 export declare const Tree: {
-  Leaf: import("react").ForwardRefExoticComponent<
-    Omit<
-      import("react").ClassAttributes<HTMLLIElement> &
-        import("react").LiHTMLAttributes<HTMLLIElement> &
-        import("./leaf.js").TreeLeafProps,
-      "ref"
-    > &
-      import("react").RefAttributes<HTMLLIElement>
-  >;
-  Branch: import("react").ForwardRefExoticComponent<
-    Omit<
-      import("react").ClassAttributes<HTMLLIElement> &
-        import("react").LiHTMLAttributes<HTMLLIElement> &
-        import("./index.js").TreeBranchProps,
-      "ref"
-    > &
-      import("react").RefAttributes<HTMLLIElement>
-  >;
-  Root: import("react").ForwardRefExoticComponent<
-    Omit<import("react").PropsWithChildren<import("./root.js").TreeRootProps>, "ref"> &
-      import("react").RefAttributes<HTMLElement>
-  >;
-  Panel: import("react").ForwardRefExoticComponent<
-    Omit<
-      import("react").DetailedHTMLProps<
-        import("react").HTMLAttributes<HTMLUListElement>,
-        HTMLUListElement
-      >,
-      "ref"
-    > &
-      import("react").RefAttributes<HTMLUListElement>
-  >;
-  usePaths: typeof useTreeViewPaths;
-  useVirtualTree: typeof useVirtualizedTree;
-  ForceSyncScrolling: typeof ForceSyncScrolling;
+    Leaf: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("./leaf.js").TreeLeafProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Branch: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("./index.js").TreeBranchProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").PropsWithChildren<import("./root.js").TreeRootProps>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+    usePaths: typeof useTreeViewPaths;
+    useVirtualTree: typeof useVirtualizedTree;
+    ForceSyncScrolling: typeof ForceSyncScrolling;
 };
 export type { TreeRootProps } from "./root.js";
 export type { TreeBranchProps } from "./branch/branch.js";

package/dist/tree-view/index.js

@@ -6,11 +6,11 @@ import { TreeRoot } from "./root.js";
 import { ForceSyncScrolling } from "./virtualized/force-sync-scrolling.js";
 import { useVirtualizedTree } from "./virtualized/use-virtualized-tree.js";
 export const Tree = {
-  Leaf: TreeLeaf,
-  Branch: TreeBranch,
-  Root: TreeRoot,
-  Panel: TreePanel,
-  usePaths: useTreeViewPaths,
-  useVirtualTree: useVirtualizedTree,
-  ForceSyncScrolling,
+    Leaf: TreeLeaf,
+    Branch: TreeBranch,
+    Root: TreeRoot,
+    Panel: TreePanel,
+    usePaths: useTreeViewPaths,
+    useVirtualTree: useVirtualizedTree,
+    ForceSyncScrolling,
 };

package/dist/tree-view/leaf.d.ts

@@ -1,12 +1,4 @@
 export interface TreeLeafProps {
-  readonly itemId: string;
+    readonly itemId: string;
 }
-export declare const TreeLeaf: import("react").ForwardRefExoticComponent<
-  Omit<
-    import("react").ClassAttributes<HTMLLIElement> &
-      import("react").LiHTMLAttributes<HTMLLIElement> &
-      TreeLeafProps,
-    "ref"
-  > &
-    import("react").RefAttributes<HTMLLIElement>
->;
+export declare const TreeLeaf: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & TreeLeafProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/tree-view/leaf.js

@@ -4,34 +4,25 @@ import { useDepth } from "./depth-provider.js";
 import { useTreeRoot } from "./context.js";
 import { getFocusables } from "@1771technologies/lytenyte-dom-utils";
 export const TreeLeaf = forwardRef(function TreeLeaf({ itemId, ...props }, forwarded) {
-  const depth = useDepth();
-  const root = useTreeRoot();
-  return _jsx("li", {
-    ...props,
-    tabIndex: -1,
-    "data-ln-tree-node": true,
-    "data-ln-tree-leaf": true,
-    "data-ln-selected": root.selection.has(itemId),
-    "data-ln-tree-id": itemId,
-    onKeyDown: (e) => {
-      props.onKeyDown?.(e);
-      if ((e.key !== "ArrowLeft" && e.key !== "ArrowRight") || e.metaKey || e.ctrlKey || e.shiftKey)
-        return;
-      e.preventDefault();
-      const nodes = getFocusables(e.currentTarget);
-      const index = nodes.indexOf(document.activeElement);
-      if (index === -1) {
-        nodes.at(0)?.focus();
-        return;
-      }
-      if (e.key === "ArrowLeft") nodes[index === 0 ? nodes.length - 1 : index - 1].focus();
-      else nodes[index === nodes.length - 1 ? 0 : index + 1].focus();
-    },
-    ref: forwarded,
-    role: "treeitem",
-    "aria-level": depth + 1,
-    "aria-selected": root.selection.has(itemId),
-    style: { ...props.style, "--tree-depth": depth },
-    children: props.children,
-  });
+    const depth = useDepth();
+    const root = useTreeRoot();
+    return (_jsx("li", { ...props, tabIndex: -1, "data-ln-tree-node": true, "data-ln-tree-leaf": true, "data-ln-selected": root.selection.has(itemId), "data-ln-tree-id": itemId, onKeyDown: (e) => {
+            props.onKeyDown?.(e);
+            if ((e.key !== "ArrowLeft" && e.key !== "ArrowRight") ||
+                e.metaKey ||
+                e.ctrlKey ||
+                e.shiftKey)
+                return;
+            e.preventDefault();
+            const nodes = getFocusables(e.currentTarget);
+            const index = nodes.indexOf(document.activeElement);
+            if (index === -1) {
+                nodes.at(0)?.focus();
+                return;
+            }
+            if (e.key === "ArrowLeft")
+                nodes[index === 0 ? nodes.length - 1 : index - 1].focus();
+            else
+                nodes[index === nodes.length - 1 ? 0 : index + 1].focus();
+        }, ref: forwarded, role: "treeitem", "aria-level": depth + 1, "aria-selected": root.selection.has(itemId), style: { ...props.style, "--tree-depth": depth }, children: props.children }));
 });

package/dist/tree-view/navigation/get-all-ids.js

@@ -1,7 +1,7 @@
 import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
 import { getTreeNodeId } from "../utils/get-tree-node-id.js";
 export function getAllIds(panel) {
-  const focusables = getFocusableNodes(panel);
-  const allIds = new Set(focusables.map((c) => getTreeNodeId(c)));
-  return allIds;
+    const focusables = getFocusableNodes(panel);
+    const allIds = new Set(focusables.map((c) => getTreeNodeId(c)));
+    return allIds;
 }

package/dist/tree-view/navigation/get-first-node.js

@@ -1,7 +1,7 @@
 import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
 import { isTreeNodeDisabled } from "../utils/is-tree-node-disabled.js";
 export function getFirstNode(panel) {
-  const focusables = getFocusableNodes(panel);
-  const first = focusables.find((c) => !isTreeNodeDisabled(c));
-  return first;
+    const focusables = getFocusableNodes(panel);
+    const first = focusables.find((c) => !isTreeNodeDisabled(c));
+    return first;
 }

package/dist/tree-view/navigation/get-last-node.js

@@ -1,7 +1,7 @@
 import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
 import { isTreeNodeDisabled } from "../utils/is-tree-node-disabled.js";
 export function getLastNode(panel) {
-  const focusables = getFocusableNodes(panel);
-  const first = focusables.findLast((c) => !isTreeNodeDisabled(c));
-  return first;
+    const focusables = getFocusableNodes(panel);
+    const first = focusables.findLast((c) => !isTreeNodeDisabled(c));
+    return first;
 }

package/dist/tree-view/navigation/get-next-node.js

@@ -2,10 +2,12 @@ import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
 import { getPanel } from "../utils/get-panel.js";
 // Assumes that el is a branch or leaf node
 export function getNextNode(el) {
-  const panel = getPanel(el);
-  if (!panel) return;
-  const focusables = getFocusableNodes(panel);
-  const index = focusables.indexOf(el);
-  if (index === -1) return;
-  return focusables.at(index + 1);
+    const panel = getPanel(el);
+    if (!panel)
+        return;
+    const focusables = getFocusableNodes(panel);
+    const index = focusables.indexOf(el);
+    if (index === -1)
+        return;
+    return focusables.at(index + 1);
 }