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

package/dist/tree-view/navigation/get-prev-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 getPrevNode(el) {
-    const panel = getPanel(el);
-    if (!panel)
-        return;
-    const focusables = getFocusableNodes(panel);
-    const index = focusables.indexOf(el);
-    if (index === -1)
-        return;
-    return focusables[index - 1];
+  const panel = getPanel(el);
+  if (!panel) return;
+  const focusables = getFocusableNodes(panel);
+  const index = focusables.indexOf(el);
+  if (index === -1) return;
+  return focusables[index - 1];
 }

package/dist/tree-view/panel/make-handle-navigation.js

@@ -5,35 +5,27 @@ import { getNextNode } from "../navigation/get-next-node.js";
 import { getPrevNode } from "../navigation/get-prev-node.js";
 import { getFocusedNode } from "../utils/get-focused-node.js";
 export function makeHandleNavigation(ctx) {
-    const acceptedKeys = ["ArrowUp", "ArrowDown", "Home", "End"];
-    return (ev) => {
-        if (!acceptedKeys.includes(ev.key) || ev.shiftKey || ev.ctrlKey || ev.metaKey)
-            return;
-        const current = getFocusedNode();
-        if (!current)
-            return;
-        if (ev.key === "ArrowUp") {
-            const prev = getPrevNode(current);
-            if (!prev)
-                return;
-            const inView = isInView(prev, ctx.panel);
-            if (!inView)
-                prev?.scrollIntoView({ behavior: "instant", block: "start" });
-            prev?.focus();
-        }
-        if (ev.key === "ArrowDown") {
-            const node = getNextNode(current);
-            if (!node)
-                return;
-            const inView = isInView(node, ctx.panel);
-            if (!inView)
-                node?.scrollIntoView({ behavior: "instant", block: "end" });
-            node?.focus();
-        }
-        if (ev.key === "Home")
-            getFirstNode(ctx.panel)?.focus();
-        if (ev.key === "End")
-            getLastNode(ctx.panel)?.focus();
-        ev.preventDefault();
-    };
+  const acceptedKeys = ["ArrowUp", "ArrowDown", "Home", "End"];
+  return (ev) => {
+    if (!acceptedKeys.includes(ev.key) || ev.shiftKey || ev.ctrlKey || ev.metaKey) return;
+    const current = getFocusedNode();
+    if (!current) return;
+    if (ev.key === "ArrowUp") {
+      const prev = getPrevNode(current);
+      if (!prev) return;
+      const inView = isInView(prev, ctx.panel);
+      if (!inView) prev?.scrollIntoView({ behavior: "instant", block: "start" });
+      prev?.focus();
+    }
+    if (ev.key === "ArrowDown") {
+      const node = getNextNode(current);
+      if (!node) return;
+      const inView = isInView(node, ctx.panel);
+      if (!inView) node?.scrollIntoView({ behavior: "instant", block: "end" });
+      node?.focus();
+    }
+    if (ev.key === "Home") getFirstNode(ctx.panel)?.focus();
+    if (ev.key === "End") getLastNode(ctx.panel)?.focus();
+    ev.preventDefault();
+  };
 }

package/dist/tree-view/panel/make-handle-selection.js

@@ -11,82 +11,73 @@ import { selectNode } from "../utils/select-node.js";
 import { toggleAllSelections } from "../utils/toggle-all-selections.js";
 import { toggleSelection } from "../utils/toggle-selection.js";
 export function makeHandleSelection(ctx) {
-    const acceptedKeys = ["Enter", "Home", "End", "ArrowDown", "ArrowUp", "Space", " ", "a"];
-    const make = (ev) => {
-        if (ctx.selectionMode === "none")
-            return;
-        if (!acceptedKeys.includes(ev.key))
-            return;
+  const acceptedKeys = ["Enter", "Home", "End", "ArrowDown", "ArrowUp", "Space", " ", "a"];
+  const make = (ev) => {
+    if (ctx.selectionMode === "none") return;
+    if (!acceptedKeys.includes(ev.key)) return;
+    ev.preventDefault();
+    const pivot = ctx.selectionPivotRef.current;
+    if (ev.key === " " && (ctx.selectionMode === "single" || !ev.shiftKey || !pivot)) {
+      const node = getFocusedNode();
+      toggleSelection(node, ctx);
+      return;
+    }
+    if (ctx.selectionMode !== "multiple") return;
+    const focusables = getFocusableNodes(ctx.panel);
+    const focused = getFocusedNode();
+    const focusedIndex = focusables.indexOf(focused);
+    if (focusedIndex === -1) return;
+    if (ev.ctrlKey || ev.metaKey) {
+      if (ev.key === "a") {
         ev.preventDefault();
-        const pivot = ctx.selectionPivotRef.current;
-        if (ev.key === " " && (ctx.selectionMode === "single" || !ev.shiftKey || !pivot)) {
-            const node = getFocusedNode();
-            toggleSelection(node, ctx);
-            return;
-        }
-        if (ctx.selectionMode !== "multiple")
-            return;
-        const focusables = getFocusableNodes(ctx.panel);
-        const focused = getFocusedNode();
-        const focusedIndex = focusables.indexOf(focused);
-        if (focusedIndex === -1)
-            return;
-        if (ev.ctrlKey || ev.metaKey) {
-            if (ev.key === "a") {
-                ev.preventDefault();
-                toggleAllSelections(ctx);
-                return;
-            }
-        }
-        if (!ev.shiftKey)
-            return;
-        if (ev.key === "ArrowUp" && focusedIndex !== 0) {
-            const node = getPrevNode(focused);
-            if (!isInView(node, ctx.panel))
-                node?.scrollIntoView({ behavior: "instant", block: "start" });
-            selectNode(node, ctx, true);
-            return;
-        }
-        if (ev.key === "ArrowDown" && focusedIndex !== focusables.length) {
-            const node = getNextNode(focused);
-            if (!isInView(node, ctx.panel))
-                node?.scrollIntoView({ behavior: "instant", block: "end" });
-            selectNode(node, ctx, true);
-            return;
-        }
-        if (ev.key === " ") {
-            const pivotNode = focusables.find((c) => getTreeNodeId(c) === pivot);
-            if (!pivotNode)
-                return;
-            const ids = ctx.getIdsBetweenNodes(pivotNode, focused, ctx.panel);
-            const next = new Set(ctx.selection);
-            ids.forEach((c) => next.add(c));
-            ctx.onSelectionChange(next);
-            ctx.selectionPivotRef.current = getTreeNodeId(focused);
-            return;
-        }
-        if (!ev.ctrlKey && !ev.metaKey)
-            return;
-        if (ev.key === "Home") {
-            const firstNode = getFirstNode(ctx.panel);
-            const ids = getIdsBetweenNodes(firstNode, focused, ctx.panel);
-            const next = new Set(ctx.selection);
-            ids.forEach((c) => next.add(c));
-            ctx.onSelectionChange(next);
-            firstNode?.focus();
-            ctx.selectionPivotRef.current = getTreeNodeId(firstNode);
-            return;
-        }
-        if (ev.key === "End") {
-            const lastNode = getLastNode(ctx.panel);
-            const ids = ctx.getIdsBetweenNodes(focused, lastNode, ctx.panel);
-            const next = new Set(ctx.selection);
-            ids.forEach((c) => next.add(c));
-            ctx.onSelectionChange(next);
-            lastNode?.focus();
-            ctx.selectionPivotRef.current = getTreeNodeId(lastNode);
-            return;
-        }
-    };
-    return make;
+        toggleAllSelections(ctx);
+        return;
+      }
+    }
+    if (!ev.shiftKey) return;
+    if (ev.key === "ArrowUp" && focusedIndex !== 0) {
+      const node = getPrevNode(focused);
+      if (!isInView(node, ctx.panel)) node?.scrollIntoView({ behavior: "instant", block: "start" });
+      selectNode(node, ctx, true);
+      return;
+    }
+    if (ev.key === "ArrowDown" && focusedIndex !== focusables.length) {
+      const node = getNextNode(focused);
+      if (!isInView(node, ctx.panel)) node?.scrollIntoView({ behavior: "instant", block: "end" });
+      selectNode(node, ctx, true);
+      return;
+    }
+    if (ev.key === " ") {
+      const pivotNode = focusables.find((c) => getTreeNodeId(c) === pivot);
+      if (!pivotNode) return;
+      const ids = ctx.getIdsBetweenNodes(pivotNode, focused, ctx.panel);
+      const next = new Set(ctx.selection);
+      ids.forEach((c) => next.add(c));
+      ctx.onSelectionChange(next);
+      ctx.selectionPivotRef.current = getTreeNodeId(focused);
+      return;
+    }
+    if (!ev.ctrlKey && !ev.metaKey) return;
+    if (ev.key === "Home") {
+      const firstNode = getFirstNode(ctx.panel);
+      const ids = getIdsBetweenNodes(firstNode, focused, ctx.panel);
+      const next = new Set(ctx.selection);
+      ids.forEach((c) => next.add(c));
+      ctx.onSelectionChange(next);
+      firstNode?.focus();
+      ctx.selectionPivotRef.current = getTreeNodeId(firstNode);
+      return;
+    }
+    if (ev.key === "End") {
+      const lastNode = getLastNode(ctx.panel);
+      const ids = ctx.getIdsBetweenNodes(focused, lastNode, ctx.panel);
+      const next = new Set(ctx.selection);
+      ids.forEach((c) => next.add(c));
+      ctx.onSelectionChange(next);
+      lastNode?.focus();
+      ctx.selectionPivotRef.current = getTreeNodeId(lastNode);
+      return;
+    }
+  };
+  return make;
 }

package/dist/tree-view/panel/make-handle-typeahead.js

@@ -2,44 +2,38 @@ import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
 import { getFocusedNode } from "../utils/get-focused-node.js";
 import { isBranchNode } from "../utils/is-branch-node.js";
 export function makeHandleTypeahead() {
-    let typeaheadCapture = [];
-    let typeaheadTimeout = null;
-    const handleTypeahead = (panel, ev) => {
-        if (ev.ctrlKey || ev.shiftKey || ev.metaKey)
-            return;
-        if (ev.key.length === 1 && ev.key.match(/[\S\s]/) && ev.key != " ") {
-            // Begin the typeahead.
-            typeaheadCapture.push(ev.key);
-            if (typeaheadTimeout)
-                clearTimeout(typeaheadTimeout);
-            typeaheadTimeout = setTimeout(() => {
-                const text = typeaheadCapture.join("");
-                const nodes = getFocusableNodes(panel);
-                const focused = getFocusedNode();
-                if (!focused)
-                    return;
-                const index = nodes.indexOf(focused);
-                if (index === -1)
-                    return;
-                const nodesAfterCurrent = nodes.slice(index);
-                const nodeToFocus = nodesAfterCurrent.find((c) => {
-                    let textContent = "";
-                    if (isBranchNode(c)) {
-                        // On a branch node the text content of the expanded should not be included. We should simply
-                        // look at the text content of the node.
-                        textContent = c.firstElementChild?.lastElementChild?.textContent ?? "";
-                    }
-                    else {
-                        textContent = c.textContent ?? "";
-                    }
-                    return textContent?.toLowerCase()?.startsWith(text);
-                });
-                if (nodeToFocus)
-                    nodeToFocus.focus();
-                typeaheadCapture = [];
-                typeaheadTimeout = null;
-            }, 300);
-        }
-    };
-    return handleTypeahead;
+  let typeaheadCapture = [];
+  let typeaheadTimeout = null;
+  const handleTypeahead = (panel, ev) => {
+    if (ev.ctrlKey || ev.shiftKey || ev.metaKey) return;
+    if (ev.key.length === 1 && ev.key.match(/[\S\s]/) && ev.key != " ") {
+      // Begin the typeahead.
+      typeaheadCapture.push(ev.key);
+      if (typeaheadTimeout) clearTimeout(typeaheadTimeout);
+      typeaheadTimeout = setTimeout(() => {
+        const text = typeaheadCapture.join("");
+        const nodes = getFocusableNodes(panel);
+        const focused = getFocusedNode();
+        if (!focused) return;
+        const index = nodes.indexOf(focused);
+        if (index === -1) return;
+        const nodesAfterCurrent = nodes.slice(index);
+        const nodeToFocus = nodesAfterCurrent.find((c) => {
+          let textContent = "";
+          if (isBranchNode(c)) {
+            // On a branch node the text content of the expanded should not be included. We should simply
+            // look at the text content of the node.
+            textContent = c.firstElementChild?.lastElementChild?.textContent ?? "";
+          } else {
+            textContent = c.textContent ?? "";
+          }
+          return textContent?.toLowerCase()?.startsWith(text);
+        });
+        if (nodeToFocus) nodeToFocus.focus();
+        typeaheadCapture = [];
+        typeaheadTimeout = null;
+      }, 300);
+    }
+  };
+  return handleTypeahead;
 }

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

@@ -1 +1,10 @@
-export declare const TreePanel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+export declare const TreePanel: import("react").ForwardRefExoticComponent<
+  Omit<
+    import("react").DetailedHTMLProps<
+      import("react").HTMLAttributes<HTMLUListElement>,
+      HTMLUListElement
+    >,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLUListElement>
+>;

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

@@ -7,24 +7,44 @@ import { useTreeNavigation } from "./use-tree-navigation.js";
 import { getFocusedNode } from "../utils/get-focused-node.js";
 import { getFirstNode } from "../navigation/get-first-node.js";
 export const TreePanel = forwardRef(function TreePanel(props, forwarded) {
-    const ctx = useTreeRoot();
-    const ref = useForkRef(ctx.panelRef, forwarded);
-    const focused = useTreeNavigation();
-    const focusTime = useRef(null);
-    return (_jsxs(depthContext.Provider, { value: 0, children: [_jsx("ul", { ...props, role: "tree", ref: ref, tabIndex: focused ? -1 : 0, "aria-multiselectable": ctx.selectionMode === "multiple", "aria-orientation": "vertical", "data-ln-tree-panel": true, onFocus: () => {
-                    if (focusTime.current) {
-                        clearTimeout(focusTime.current);
-                        focusTime.current = null;
-                    }
-                    ctx.onFocusChange(getFocusedNode());
-                }, onBlur: () => {
-                    if (focusTime.current)
-                        return;
-                    focusTime.current = setTimeout(() => {
-                        ctx.onFocusChange(null);
-                        focusTime.current = null;
-                    }, 20);
-                }, children: props.children }), _jsx("div", { role: "presentation", tabIndex: focused ? -1 : 0, onFocus: () => {
-                    getFirstNode(ctx.panel)?.focus();
-                } })] }));
+  const ctx = useTreeRoot();
+  const ref = useForkRef(ctx.panelRef, forwarded);
+  const focused = useTreeNavigation();
+  const focusTime = useRef(null);
+  return _jsxs(depthContext.Provider, {
+    value: 0,
+    children: [
+      _jsx("ul", {
+        ...props,
+        role: "tree",
+        ref: ref,
+        tabIndex: focused ? -1 : 0,
+        "aria-multiselectable": ctx.selectionMode === "multiple",
+        "aria-orientation": "vertical",
+        "data-ln-tree-panel": true,
+        onFocus: () => {
+          if (focusTime.current) {
+            clearTimeout(focusTime.current);
+            focusTime.current = null;
+          }
+          ctx.onFocusChange(getFocusedNode());
+        },
+        onBlur: () => {
+          if (focusTime.current) return;
+          focusTime.current = setTimeout(() => {
+            ctx.onFocusChange(null);
+            focusTime.current = null;
+          }, 20);
+        },
+        children: props.children,
+      }),
+      _jsx("div", {
+        role: "presentation",
+        tabIndex: focused ? -1 : 0,
+        onFocus: () => {
+          getFirstNode(ctx.panel)?.focus();
+        },
+      }),
+    ],
+  });
 });

package/dist/tree-view/panel/use-tree-navigation.js

@@ -7,57 +7,69 @@ import { makeHandleSelection } from "./make-handle-selection.js";
 import { getTreeNodeId } from "../utils/get-tree-node-id.js";
 import { getTabbables } from "@1771technologies/lytenyte-dom-utils";
 export function useTreeNavigation() {
-    const ctx = useTreeRoot();
-    const [focused, setFocused] = useState(false);
-    const panel = ctx.panel;
-    useEffect(() => {
-        if (!panel)
+  const ctx = useTreeRoot();
+  const [focused, setFocused] = useState(false);
+  const panel = ctx.panel;
+  useEffect(() => {
+    if (!panel) return;
+    const controller = new AbortController();
+    panel.addEventListener(
+      "focus",
+      () => {
+        const focusNodes = getFocusableNodes(panel);
+        if (ctx.selectionMode !== "none" && ctx.selection.size > 0) {
+          const node = focusNodes.find((c) => ctx.selection.has(getTreeNodeId(c)));
+          if (node) {
+            node.focus();
             return;
-        const controller = new AbortController();
-        panel.addEventListener("focus", () => {
-            const focusNodes = getFocusableNodes(panel);
-            if (ctx.selectionMode !== "none" && ctx.selection.size > 0) {
-                const node = focusNodes.find((c) => ctx.selection.has(getTreeNodeId(c)));
-                if (node) {
-                    node.focus();
-                    return;
-                }
-            }
-            focusNodes.at(0)?.focus();
-        }, { signal: controller.signal });
-        panel.addEventListener("focusin", () => {
-            setFocused(true);
-        }, { signal: controller.signal });
-        panel.addEventListener("focusout", () => {
-            setFocused(false);
-        }, { signal: controller.signal });
-        const handleTypeahead = makeHandleTypeahead();
-        const handleNavigation = makeHandleNavigation(ctx);
-        const handleSelection = makeHandleSelection(ctx);
-        panel.addEventListener("keydown", (ev) => {
-            handleTypeahead(panel, ev);
-            handleNavigation(ev);
-            handleSelection(ev);
-            if (ev.key === "Tab") {
-                const els = getTabbables(panel);
-                if (!els.length)
-                    return;
-                const original = els.map((el) => {
-                    const o = el.getAttribute("tabindex");
-                    el.tabIndex = -1;
-                    return o;
-                });
-                requestAnimationFrame(() => {
-                    els.forEach((el, i) => {
-                        if (original[i] == null)
-                            el.removeAttribute("tabindex");
-                        else
-                            el.setAttribute("tabindex", original[i]);
-                    });
-                });
-            }
-        }, { signal: controller.signal });
-        return () => controller.abort();
-    }, [ctx, focused, panel]);
-    return focused;
+          }
+        }
+        focusNodes.at(0)?.focus();
+      },
+      { signal: controller.signal },
+    );
+    panel.addEventListener(
+      "focusin",
+      () => {
+        setFocused(true);
+      },
+      { signal: controller.signal },
+    );
+    panel.addEventListener(
+      "focusout",
+      () => {
+        setFocused(false);
+      },
+      { signal: controller.signal },
+    );
+    const handleTypeahead = makeHandleTypeahead();
+    const handleNavigation = makeHandleNavigation(ctx);
+    const handleSelection = makeHandleSelection(ctx);
+    panel.addEventListener(
+      "keydown",
+      (ev) => {
+        handleTypeahead(panel, ev);
+        handleNavigation(ev);
+        handleSelection(ev);
+        if (ev.key === "Tab") {
+          const els = getTabbables(panel);
+          if (!els.length) return;
+          const original = els.map((el) => {
+            const o = el.getAttribute("tabindex");
+            el.tabIndex = -1;
+            return o;
+          });
+          requestAnimationFrame(() => {
+            els.forEach((el, i) => {
+              if (original[i] == null) el.removeAttribute("tabindex");
+              else el.setAttribute("tabindex", original[i]);
+            });
+          });
+        }
+      },
+      { signal: controller.signal },
+    );
+    return () => controller.abort();
+  }, [ctx, focused, panel]);
+  return focused;
 }

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

@@ -1,17 +1,23 @@
 import { type PropsWithChildren, type Ref } from "react";
 export interface TreeRootProps {
-    readonly transitionEnter?: number;
-    readonly transitionExit?: number;
-    readonly gridWrappedBranches?: boolean;
-    readonly expansions?: Record<string, boolean>;
-    readonly expansionDefault?: boolean;
-    readonly onExpansionChange?: (n: Record<string, boolean>) => void;
-    readonly selectMode?: "single" | "multiple" | "none";
-    readonly selection?: Set<string>;
-    readonly onSelectionChange?: (c: Set<string>) => void;
-    readonly onFocusChange?: (el: HTMLElement | null) => void;
-    readonly getAllIds?: (panel: HTMLElement) => Set<string>;
-    readonly getIdsBetweenNodes?: (start: HTMLElement, end: HTMLElement, panel: HTMLElement) => string[];
-    readonly ref?: Ref<HTMLElement | null>;
+  readonly transitionEnter?: number;
+  readonly transitionExit?: number;
+  readonly gridWrappedBranches?: boolean;
+  readonly expansions?: Record<string, boolean>;
+  readonly expansionDefault?: boolean;
+  readonly onExpansionChange?: (n: Record<string, boolean>) => void;
+  readonly selectMode?: "single" | "multiple" | "none";
+  readonly selection?: Set<string>;
+  readonly onSelectionChange?: (c: Set<string>) => void;
+  readonly onFocusChange?: (el: HTMLElement | null) => void;
+  readonly getAllIds?: (panel: HTMLElement) => Set<string>;
+  readonly getIdsBetweenNodes?: (
+    start: HTMLElement,
+    end: HTMLElement,
+    panel: HTMLElement,
+  ) => string[];
+  readonly ref?: Ref<HTMLElement | null>;
 }
-export declare const TreeRoot: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TreeRootProps>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const TreeRoot: import("react").ForwardRefExoticComponent<
+  Omit<PropsWithChildren<TreeRootProps>, "ref"> & import("react").RefAttributes<HTMLElement>
+>;