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

package/dist/tree-view/navigation/get-prev-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 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,27 +5,35 @@ 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,73 +11,82 @@ 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;
-    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") {
+    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();
-        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;
+        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;
 }

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

@@ -2,38 +2,44 @@ 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,10 +1 @@
-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,44 +7,24 @@ 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,69 +7,57 @@ 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) 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();
+    const ctx = useTreeRoot();
+    const [focused, setFocused] = useState(false);
+    const panel = ctx.panel;
+    useEffect(() => {
+        if (!panel)
             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;
+        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;
 }

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

@@ -1,23 +1,17 @@
 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>>;