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

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

@@ -1,14 +1,22 @@
 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,63 +1,115 @@
 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,
+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,
     });
-    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 })) }) })] }) }));
+  });
+  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,2 +1,6 @@
 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,79 +9,76 @@ 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;
+  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();
         }
-        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;
+      }
+    }
+  });
+  return onKeyDown;
 }

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

@@ -1,22 +1,26 @@
 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,2 +1,8 @@
 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,13 +2,41 @@ 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,4 +1,12 @@
 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,25 +4,34 @@ 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,12 +2,10 @@ 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);
 }