@1771technologies/lytenyte-pro 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/tree-view/root.js

@@ -5,59 +5,57 @@ import { useCombinedRefs, useEvent } from "@1771technologies/lytenyte-react-hook
 import { getAllIds } from "./navigation/get-all-ids.js";
 import { getIdsBetweenNodes } from "./utils/get-ids-between-nodes.js";
 export const TreeRoot = forwardRef((p, forwarded) => {
-    const [panel, setPanel] = useState(null);
-    const [expansions, onExpansionChange] = useState({});
-    const [selection, setSelections] = useState(() => new Set());
-    const ref = useCombinedRefs(setPanel, forwarded);
-    const selectionPivotRef = useRef(null);
-    const allIds = useEvent((el) => {
-        if (p.getAllIds)
-            return p.getAllIds(el);
-        return getAllIds(el);
-    });
-    const idsBetween = useEvent((left, right, panel) => {
-        if (p.getIdsBetweenNodes)
-            return p.getIdsBetweenNodes(left, right, panel);
-        return getIdsBetweenNodes(left, right, panel);
-    });
-    const onFocusChange = useEvent((el) => {
-        p.onFocusChange?.(el);
-    });
-    const value = useMemo(() => {
-        return {
-            panel,
-            panelRef: ref,
-            selectionMode: p.selectMode ?? "single",
-            transitionEnterMs: p.transitionEnter ?? 0,
-            transitionExitMs: p.transitionExit ?? 0,
-            gridWrappedBranches: p.gridWrappedBranches ?? false,
-            expansions: p.expansions ?? expansions,
-            onExpansionChange: p.onExpansionChange ?? onExpansionChange,
-            selection: p.selection ?? selection,
-            onSelectionChange: p.onSelectionChange ?? setSelections,
-            selectionPivotRef,
-            expansionDefault: p.expansionDefault ?? false,
-            onFocusChange,
-            getAllIds: allIds,
-            getIdsBetweenNodes: idsBetween,
-        };
-    }, [
-        allIds,
-        expansions,
-        idsBetween,
-        onFocusChange,
-        p.expansionDefault,
-        p.expansions,
-        p.gridWrappedBranches,
-        p.onExpansionChange,
-        p.onSelectionChange,
-        p.selectMode,
-        p.selection,
-        p.transitionEnter,
-        p.transitionExit,
-        panel,
-        ref,
-        selection,
-    ]);
-    return _jsx(context.Provider, { value: value, children: p.children });
+  const [panel, setPanel] = useState(null);
+  const [expansions, onExpansionChange] = useState({});
+  const [selection, setSelections] = useState(() => new Set());
+  const ref = useCombinedRefs(setPanel, forwarded);
+  const selectionPivotRef = useRef(null);
+  const allIds = useEvent((el) => {
+    if (p.getAllIds) return p.getAllIds(el);
+    return getAllIds(el);
+  });
+  const idsBetween = useEvent((left, right, panel) => {
+    if (p.getIdsBetweenNodes) return p.getIdsBetweenNodes(left, right, panel);
+    return getIdsBetweenNodes(left, right, panel);
+  });
+  const onFocusChange = useEvent((el) => {
+    p.onFocusChange?.(el);
+  });
+  const value = useMemo(() => {
+    return {
+      panel,
+      panelRef: ref,
+      selectionMode: p.selectMode ?? "single",
+      transitionEnterMs: p.transitionEnter ?? 0,
+      transitionExitMs: p.transitionExit ?? 0,
+      gridWrappedBranches: p.gridWrappedBranches ?? false,
+      expansions: p.expansions ?? expansions,
+      onExpansionChange: p.onExpansionChange ?? onExpansionChange,
+      selection: p.selection ?? selection,
+      onSelectionChange: p.onSelectionChange ?? setSelections,
+      selectionPivotRef,
+      expansionDefault: p.expansionDefault ?? false,
+      onFocusChange,
+      getAllIds: allIds,
+      getIdsBetweenNodes: idsBetween,
+    };
+  }, [
+    allIds,
+    expansions,
+    idsBetween,
+    onFocusChange,
+    p.expansionDefault,
+    p.expansions,
+    p.gridWrappedBranches,
+    p.onExpansionChange,
+    p.onSelectionChange,
+    p.selectMode,
+    p.selection,
+    p.transitionEnter,
+    p.transitionExit,
+    panel,
+    ref,
+    selection,
+  ]);
+  return _jsx(context.Provider, { value: value, children: p.children });
 });

package/dist/tree-view/utils/get-focusable-nodes.js

@@ -1,5 +1,7 @@
 import { getFocusables, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
 export function getFocusableNodes(panel) {
-    const focusNodes = getFocusables(panel).filter((c) => isHTMLElement(c) && c.getAttribute("data-ln-tree-node") === "true");
-    return focusNodes;
+  const focusNodes = getFocusables(panel).filter(
+    (c) => isHTMLElement(c) && c.getAttribute("data-ln-tree-node") === "true",
+  );
+  return focusNodes;
 }

package/dist/tree-view/utils/get-focused-node.js

@@ -1,14 +1,14 @@
 import { isLastTraversableNode } from "@1771technologies/lytenyte-dom-utils";
 export function getFocusedNode() {
-    if (!document.activeElement)
-        return null;
-    let current = document.activeElement;
-    while (current &&
-        !isLastTraversableNode(current) &&
-        current.getAttribute("data-ln-tree-node") !== "true") {
-        current = current.parentElement;
-    }
-    if (current?.getAttribute("data-ln-tree-node"))
-        return current;
-    return null;
+  if (!document.activeElement) return null;
+  let current = document.activeElement;
+  while (
+    current &&
+    !isLastTraversableNode(current) &&
+    current.getAttribute("data-ln-tree-node") !== "true"
+  ) {
+    current = current.parentElement;
+  }
+  if (current?.getAttribute("data-ln-tree-node")) return current;
+  return null;
 }

package/dist/tree-view/utils/get-ids-between-nodes.d.ts

@@ -1 +1,5 @@
-export declare function getIdsBetweenNodes(start: HTMLElement, end: HTMLElement, panel: HTMLElement): string[];
+export declare function getIdsBetweenNodes(
+  start: HTMLElement,
+  end: HTMLElement,
+  panel: HTMLElement,
+): string[];

package/dist/tree-view/utils/get-ids-between-nodes.js

@@ -1,15 +1,14 @@
 import { getFocusableNodes } from "./get-focusable-nodes.js";
 import { getTreeNodeId } from "./get-tree-node-id.js";
 export function getIdsBetweenNodes(start, end, panel) {
-    const focusables = getFocusableNodes(panel);
-    let startIndex = focusables.indexOf(start);
-    let endIndex = focusables.indexOf(end);
-    if (startIndex == -1 || endIndex == -1)
-        return [];
-    [startIndex, endIndex] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
-    const ids = [];
-    for (let i = startIndex; i <= endIndex; i++) {
-        ids.push(getTreeNodeId(focusables[i]));
-    }
-    return ids;
+  const focusables = getFocusableNodes(panel);
+  let startIndex = focusables.indexOf(start);
+  let endIndex = focusables.indexOf(end);
+  if (startIndex == -1 || endIndex == -1) return [];
+  [startIndex, endIndex] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
+  const ids = [];
+  for (let i = startIndex; i <= endIndex; i++) {
+    ids.push(getTreeNodeId(focusables[i]));
+  }
+  return ids;
 }

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

@@ -1,7 +1,7 @@
 export function getPanel(el) {
-    let current = el;
-    while (current && !current.getAttribute("data-ln-tree-panel")) {
-        current = current.parentElement;
-    }
-    return current;
+  let current = el;
+  while (current && !current.getAttribute("data-ln-tree-panel")) {
+    current = current.parentElement;
+  }
+  return current;
 }

package/dist/tree-view/utils/get-parent-node.js

@@ -1,10 +1,9 @@
 import { isBranchNode } from "./is-branch-node.js";
 export function getParentNode(el) {
-    let current = el.parentElement;
-    while (current && !current.getAttribute("data-ln-tree-panel") && !isBranchNode(current)) {
-        current = current.parentElement;
-    }
-    if (current?.getAttribute("data-ln-tree-panel"))
-        return null;
-    return current;
+  let current = el.parentElement;
+  while (current && !current.getAttribute("data-ln-tree-panel") && !isBranchNode(current)) {
+    current = current.parentElement;
+  }
+  if (current?.getAttribute("data-ln-tree-panel")) return null;
+  return current;
 }

package/dist/tree-view/utils/get-sibling-branches.js

@@ -1,14 +1,12 @@
 import { isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
 import { isBranchNode } from "./is-branch-node.js";
 export function getSiblingBranches(el) {
-    const children = el.parentElement?.children;
-    if (!children)
-        return;
-    const branchSiblings = [];
-    for (let i = 0; i < children.length; i++) {
-        const node = children[i];
-        if (isHTMLElement(node) && isBranchNode(node))
-            branchSiblings.push(node);
-    }
-    return branchSiblings;
+  const children = el.parentElement?.children;
+  if (!children) return;
+  const branchSiblings = [];
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i];
+    if (isHTMLElement(node) && isBranchNode(node)) branchSiblings.push(node);
+  }
+  return branchSiblings;
 }

package/dist/tree-view/utils/get-tree-node-id.js

@@ -1,3 +1,3 @@
 export function getTreeNodeId(el) {
-    return el.getAttribute("data-ln-tree-id") ?? "";
+  return el.getAttribute("data-ln-tree-id") ?? "";
 }

package/dist/tree-view/utils/is-branch-node.js

@@ -1,3 +1,3 @@
 export function isBranchNode(el) {
-    return el.getAttribute("data-ln-tree-branch") === "true";
+  return el.getAttribute("data-ln-tree-branch") === "true";
 }

package/dist/tree-view/utils/is-leaf-node.js

@@ -1,3 +1,3 @@
 export function isLeafNode(el) {
-    return el.getAttribute("data-ln-tree-leaf") === "true";
+  return el.getAttribute("data-ln-tree-leaf") === "true";
 }

package/dist/tree-view/utils/is-tree-node-disabled.js

@@ -1,3 +1,3 @@
 export function isTreeNodeDisabled(el) {
-    return el.getAttribute("data-ln-tree-node-disabled") === "true";
+  return el.getAttribute("data-ln-tree-node-disabled") === "true";
 }

package/dist/tree-view/utils/select-node.d.ts

@@ -1,2 +1,6 @@
 import type { TreeViewRootContext } from "../context.js";
-export declare function selectNode(node: HTMLElement | null | undefined, ctx: TreeViewRootContext, focus?: boolean): void;
+export declare function selectNode(
+  node: HTMLElement | null | undefined,
+  ctx: TreeViewRootContext,
+  focus?: boolean,
+): void;

package/dist/tree-view/utils/select-node.js

@@ -1,15 +1,12 @@
 import { getTreeNodeId } from "./get-tree-node-id.js";
 import { isTreeNodeDisabled } from "./is-tree-node-disabled.js";
 export function selectNode(node, ctx, focus) {
-    if (!node || isTreeNodeDisabled(node))
-        return;
-    if (focus)
-        node.focus();
-    const id = getTreeNodeId(node);
-    if (ctx.selection.has(id))
-        return;
-    ctx.selectionPivotRef.current = id;
-    const next = new Set(ctx.selection);
-    next.add(id);
-    ctx.onSelectionChange(next);
+  if (!node || isTreeNodeDisabled(node)) return;
+  if (focus) node.focus();
+  const id = getTreeNodeId(node);
+  if (ctx.selection.has(id)) return;
+  ctx.selectionPivotRef.current = id;
+  const next = new Set(ctx.selection);
+  next.add(id);
+  ctx.onSelectionChange(next);
 }

package/dist/tree-view/utils/toggle-all-selections.js

@@ -1,9 +1,7 @@
 import { getAllIds } from "../navigation/get-all-ids.js";
 export function toggleAllSelections(ctx) {
-    const allIds = getAllIds(ctx.panel);
-    const selection = ctx.selection;
-    if (allIds.isSubsetOf(selection))
-        ctx.onSelectionChange(new Set());
-    else
-        ctx.onSelectionChange(allIds);
+  const allIds = getAllIds(ctx.panel);
+  const selection = ctx.selection;
+  if (allIds.isSubsetOf(selection)) ctx.onSelectionChange(new Set());
+  else ctx.onSelectionChange(allIds);
 }

package/dist/tree-view/utils/toggle-selection.js

@@ -1,21 +1,18 @@
 import { getTreeNodeId } from "./get-tree-node-id.js";
 export function toggleSelection(el, ctx) {
-    const id = getTreeNodeId(el);
-    if (ctx.selectionMode === "single") {
-        if (ctx.selection.has(id))
-            ctx.onSelectionChange(new Set());
-        else
-            ctx.onSelectionChange(new Set([id]));
-        return;
-    }
-    const next = new Set(ctx.selection);
-    if (next.has(id)) {
-        next.delete(id);
-        ctx.selectionPivotRef.current = null;
-    }
-    else {
-        next.add(id);
-        ctx.selectionPivotRef.current = id;
-    }
-    ctx.onSelectionChange(next);
+  const id = getTreeNodeId(el);
+  if (ctx.selectionMode === "single") {
+    if (ctx.selection.has(id)) ctx.onSelectionChange(new Set());
+    else ctx.onSelectionChange(new Set([id]));
+    return;
+  }
+  const next = new Set(ctx.selection);
+  if (next.has(id)) {
+    next.delete(id);
+    ctx.selectionPivotRef.current = null;
+  } else {
+    next.add(id);
+    ctx.selectionPivotRef.current = id;
+  }
+  ctx.onSelectionChange(next);
 }

package/dist/tree-view/virtualized/force-sync-scrolling.d.ts

@@ -1,2 +1,4 @@
 import { type PropsWithChildren } from "react";
-export declare function ForceSyncScrolling(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function ForceSyncScrolling(
+  props: PropsWithChildren,
+): import("react/jsx-runtime").JSX.Element;

package/dist/tree-view/virtualized/force-sync-scrolling.js

@@ -2,22 +2,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTreeRoot } from "../context.js";
 export function ForceSyncScrolling(props) {
-    const [scroll, setScroll] = useState(0);
-    const ctx = useTreeRoot();
-    useEffect(() => {
-        if (!ctx.panel)
-            return;
-        const controller = new AbortController();
-        ctx.panel.addEventListener("scroll", () => {
-            setScroll(Math.max(0, ctx.panel.scrollTop));
-        }, { signal: controller.signal });
-        return () => controller.abort();
-    }, [ctx.panel]);
-    return (_jsx("div", { style: {
-            position: "sticky",
-            top: 0,
-            height: 0,
-            width: "100%",
-            transform: `translate3d(0px, -${scroll}px, 0px)`,
-        }, children: props.children }));
+  const [scroll, setScroll] = useState(0);
+  const ctx = useTreeRoot();
+  useEffect(() => {
+    if (!ctx.panel) return;
+    const controller = new AbortController();
+    ctx.panel.addEventListener(
+      "scroll",
+      () => {
+        setScroll(Math.max(0, ctx.panel.scrollTop));
+      },
+      { signal: controller.signal },
+    );
+    return () => controller.abort();
+  }, [ctx.panel]);
+  return _jsx("div", {
+    style: {
+      position: "sticky",
+      top: 0,
+      height: 0,
+      width: "100%",
+      transform: `translate3d(0px, -${scroll}px, 0px)`,
+    },
+    children: props.children,
+  });
 }

package/dist/tree-view/virtualized/get-virtual-tree-paths.d.ts

@@ -1,2 +1,4 @@
 import type { PathBranch, PathLeaf, PathProvidedItem } from "@1771technologies/lytenyte-shared";
-export declare function buildVirtualTreePartial<T extends PathProvidedItem>(items: (PathBranch<T> | PathLeaf<T>)[]): [string[], PathBranch<T> | PathLeaf<T>][];
+export declare function buildVirtualTreePartial<T extends PathProvidedItem>(
+  items: (PathBranch<T> | PathLeaf<T>)[],
+): [string[], PathBranch<T> | PathLeaf<T>][];

package/dist/tree-view/virtualized/get-virtual-tree-paths.js

@@ -1,14 +1,13 @@
 export function buildVirtualTreePartial(items) {
-    const paths = items.map((c) => {
-        if (c.kind === "leaf") {
-            const parent = c.parent;
-            if (parent.kind === "root")
-                return ["", c];
-            const path = parent.id.split("#");
-            return [path, c];
-        }
-        const path = c.id.split("#");
-        return [path, c];
-    });
-    return paths;
+  const paths = items.map((c) => {
+    if (c.kind === "leaf") {
+      const parent = c.parent;
+      if (parent.kind === "root") return ["", c];
+      const path = parent.id.split("#");
+      return [path, c];
+    }
+    const path = c.id.split("#");
+    return [path, c];
+  });
+  return paths;
 }

package/dist/tree-view/virtualized/make-virtual-tree.d.ts

@@ -1,31 +1,36 @@
 import type { PathBranch, PathLeaf, PathProvidedItem } from "@1771technologies/lytenyte-shared";
 import type { CSSProperties } from "react";
 export interface TreeVirtualBranch<T extends PathProvidedItem> {
-    readonly kind: "branch";
-    readonly path: string;
-    readonly branch: PathBranch<T>;
-    readonly children: TreeVirtualItem<T>[];
-    readonly rowIndex: number;
-    readonly attrs: {
-        readonly style: CSSProperties;
-        "data-ln-row-index": number;
-        readonly "aria-posinset": number;
-        readonly "aria-setsize": number;
-    };
+  readonly kind: "branch";
+  readonly path: string;
+  readonly branch: PathBranch<T>;
+  readonly children: TreeVirtualItem<T>[];
+  readonly rowIndex: number;
+  readonly attrs: {
+    readonly style: CSSProperties;
+    "data-ln-row-index": number;
+    readonly "aria-posinset": number;
+    readonly "aria-setsize": number;
+  };
 }
 export interface TreeVirtualLeaf<T extends PathProvidedItem> {
-    readonly kind: "leaf";
-    readonly leaf: PathLeaf<T>;
-    readonly rowIndex: number;
-    readonly attrs: {
-        readonly style: CSSProperties;
-        "data-ln-row-index": number;
-        readonly "aria-posinset": number;
-        readonly "aria-setsize": number;
-    };
+  readonly kind: "leaf";
+  readonly leaf: PathLeaf<T>;
+  readonly rowIndex: number;
+  readonly attrs: {
+    readonly style: CSSProperties;
+    "data-ln-row-index": number;
+    readonly "aria-posinset": number;
+    readonly "aria-setsize": number;
+  };
 }
 export type TreeVirtualItem<T extends PathProvidedItem> = TreeVirtualBranch<T> | TreeVirtualLeaf<T>;
 type Path = string[];
 type PathEntry<T extends PathProvidedItem> = [Path | "", PathBranch<T> | PathLeaf<T>];
-export declare function makeVirtualTree<T extends PathProvidedItem>(paths: PathEntry<T>[], nodeToIndex: Map<PathBranch<T> | PathLeaf<T>, number>, itemHeight: number, nonAdjacentPathTrees: boolean): TreeVirtualItem<T>[];
+export declare function makeVirtualTree<T extends PathProvidedItem>(
+  paths: PathEntry<T>[],
+  nodeToIndex: Map<PathBranch<T> | PathLeaf<T>, number>,
+  itemHeight: number,
+  nonAdjacentPathTrees: boolean,
+): TreeVirtualItem<T>[];
 export {};