@nexub/react 6.2.0 → 6.4.0

package/dist/components/TreeView/TreeView.js

@@ -0,0 +1,253 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronRight, Minus } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { Spinner } from "../Spinner/Spinner.js";
+const hasKids = (n) => Boolean(n.children?.length || n.hasChildren && !n.children);
+const text = (n) => n.textValue ?? (typeof n.label === "string" ? n.label : "");
+const descendants = (n) => (n.children ?? []).flatMap((c) => [c.id, ...descendants(c)]);
+function TreeView({
+  nodes,
+  expanded: expandedProp,
+  defaultExpanded,
+  onExpandedChange,
+  selected: selectedProp,
+  defaultSelected,
+  onSelectedChange,
+  checkable = false,
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  onLoadChildren,
+  className,
+  ...aria
+}) {
+  const [expanded = [], setExpanded] = useControllableState({
+    value: expandedProp,
+    defaultValue: defaultExpanded ?? [],
+    onChange: onExpandedChange
+  });
+  const [selected = null, setSelected] = useControllableState({
+    value: selectedProp,
+    defaultValue: defaultSelected ?? null,
+    onChange: onSelectedChange
+  });
+  const [checked = [], setChecked] = useControllableState({
+    value: checkedProp,
+    defaultValue: defaultChecked ?? [],
+    onChange: onCheckedChange
+  });
+  const [loading, setLoading] = React.useState(null);
+  const [focused, setFocused] = React.useState(null);
+  const refs = React.useRef(/* @__PURE__ */ new Map());
+  const typed = React.useRef({ text: "", at: 0 });
+  const open = React.useMemo(() => new Set(expanded), [expanded]);
+  const checkedSet = React.useMemo(() => new Set(checked), [checked]);
+  const { all, visible } = React.useMemo(() => {
+    const all2 = /* @__PURE__ */ new Map();
+    const visible2 = [];
+    const walk = (list, level, parent, shown) => {
+      for (const node of list) {
+        const flat = { node, level, parent };
+        all2.set(node.id, flat);
+        if (shown) visible2.push(flat);
+        if (node.children) walk(node.children, level + 1, node.id, shown && open.has(node.id));
+      }
+    };
+    walk(nodes, 1, null, true);
+    return { all: all2, visible: visible2 };
+  }, [nodes, open]);
+  const tabStop = focused && visible.some((f) => f.node.id === focused) && focused || selected && visible.some((f) => f.node.id === selected) && selected || visible[0]?.node.id;
+  const focus = (id) => {
+    if (!id) return;
+    setFocused(id);
+    refs.current.get(id)?.focus();
+  };
+  const toggle = async (node, to = !open.has(node.id)) => {
+    if (!hasKids(node) || to === open.has(node.id)) return;
+    setExpanded(to ? [...expanded, node.id] : expanded.filter((id) => id !== node.id));
+    if (to && node.hasChildren && !node.children && onLoadChildren) {
+      setLoading(node.id);
+      try {
+        await onLoadChildren(node);
+      } finally {
+        setLoading((id) => id === node.id ? null : id);
+      }
+    }
+  };
+  const toggleCheck = (node) => {
+    const next = new Set(checkedSet);
+    const on = !next.has(node.id);
+    for (const id of [node.id, ...descendants(node)]) {
+      if (on) next.add(id);
+      else next.delete(id);
+    }
+    for (let p = all.get(node.id)?.parent; p; p = all.get(p)?.parent ?? null) {
+      const kids = all.get(p).node.children ?? [];
+      if (kids.every((k) => next.has(k.id))) next.add(p);
+      else next.delete(p);
+    }
+    setChecked([...next]);
+  };
+  const activate = (node) => {
+    if (node.disabled) return;
+    if (checkable) toggleCheck(node);
+    else setSelected(node.id);
+  };
+  const onKeyDown = (e, flat) => {
+    const { node } = flat;
+    const i = visible.findIndex((f) => f.node.id === node.id);
+    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+    const flip = { ArrowLeft: "ArrowRight", ArrowRight: "ArrowLeft" };
+    const key = rtl ? flip[e.key] ?? e.key : e.key;
+    let handled = true;
+    switch (key) {
+      case "ArrowDown":
+        focus(visible[i + 1]?.node.id);
+        break;
+      case "ArrowUp":
+        focus(visible[i - 1]?.node.id);
+        break;
+      case "Home":
+        focus(visible[0]?.node.id);
+        break;
+      case "End":
+        focus(visible.at(-1)?.node.id);
+        break;
+      case "ArrowRight":
+        if (hasKids(node) && !open.has(node.id)) void toggle(node, true);
+        else if (open.has(node.id)) focus(node.children?.[0]?.id);
+        break;
+      case "ArrowLeft":
+        if (open.has(node.id)) void toggle(node, false);
+        else focus(flat.parent ?? void 0);
+        break;
+      case "Enter":
+      case " ":
+        activate(node);
+        break;
+      default: {
+        handled = false;
+        if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) break;
+        const now = Date.now();
+        const t = typed.current;
+        t.text = (now - t.at > 500 ? "" : t.text) + e.key.toLowerCase();
+        t.at = now;
+        const order = [...visible.slice(i + 1), ...visible.slice(0, i + 1)];
+        const hit = order.find((f) => text(f.node).toLowerCase().startsWith(t.text));
+        if (hit) {
+          focus(hit.node.id);
+          handled = true;
+        }
+      }
+    }
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  const render = (list, level, parent) => list.map((node, index) => {
+    const kids = hasKids(node);
+    const isOpen = open.has(node.id);
+    const isChecked = checkedSet.has(node.id);
+    const mixed = !isChecked && descendants(node).some((id) => checkedSet.has(id));
+    const flat = { node, level, parent };
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref: (el) => {
+          if (el) refs.current.set(node.id, el);
+          else refs.current.delete(node.id);
+        },
+        role: "treeitem",
+        "aria-level": level,
+        "aria-setsize": list.length,
+        "aria-posinset": index + 1,
+        "aria-expanded": kids ? isOpen : void 0,
+        "aria-selected": checkable ? void 0 : selected === node.id,
+        "aria-checked": checkable ? mixed ? "mixed" : isChecked : void 0,
+        "aria-disabled": node.disabled || void 0,
+        "aria-busy": loading === node.id || void 0,
+        tabIndex: tabStop === node.id ? 0 : -1,
+        onKeyDown: (e) => onKeyDown(e, flat),
+        onFocus: (e) => {
+          if (e.target === e.currentTarget) setFocused(node.id);
+        },
+        className: "outline-none [&:focus-visible>div]:outline [&:focus-visible>div]:outline-2 [&:focus-visible>div]:-outline-offset-2 [&:focus-visible>div]:outline-[var(--color-primary)]",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: (el) => {
+                if (el) el.style.paddingInlineStart = `${(level - 1) * 1.25 + 0.25}rem`;
+              },
+              onClick: () => {
+                focus(node.id);
+                if (kids && !checkable) void toggle(node);
+                activate(node);
+              },
+              className: cn(
+                "flex min-h-control-sm cursor-default items-center gap-1.5 rounded-shape-control pe-2 text-body-md text-[var(--color-on-surface)]",
+                "hover:bg-[var(--color-surface-container-high)]",
+                !checkable && selected === node.id && "bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)] hover:bg-[var(--color-secondary-container)]",
+                node.disabled && "cursor-not-allowed text-[var(--color-text-disabled)] hover:bg-transparent"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    onClick: (e) => {
+                      if (!kids) return;
+                      e.stopPropagation();
+                      focus(node.id);
+                      void toggle(node);
+                    },
+                    className: "inline-flex size-5 shrink-0 items-center justify-center text-[var(--color-on-surface-variant)]",
+                    children: loading === node.id ? /* @__PURE__ */ jsx(Spinner, { size: "xs" }) : kids ? /* @__PURE__ */ jsx(
+                      ChevronRight,
+                      {
+                        size: "xs",
+                        className: cn("transition-transform rtl:-scale-x-100", isOpen && "rotate-90 rtl:-rotate-90")
+                      }
+                    ) : null
+                  }
+                ),
+                checkable && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: cn(
+                      "inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border-2",
+                      isChecked || mixed ? "border-[var(--color-primary)] bg-[var(--color-primary)] text-[var(--color-on-primary)]" : "border-[var(--color-outline)]"
+                    ),
+                    children: isChecked ? /* @__PURE__ */ jsx(Check, { size: "xs" }) : mixed ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : null
+                  }
+                ),
+                node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 text-[var(--color-on-surface-variant)]", children: node.icon }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
+              ]
+            }
+          ),
+          kids && isOpen && node.children && /* @__PURE__ */ jsx("ul", { role: "group", className: "m-0 list-none p-0", children: render(node.children, level + 1, node.id) })
+        ]
+      },
+      node.id
+    );
+  });
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      role: "tree",
+      "aria-multiselectable": checkable || void 0,
+      className: cn("m-0 flex list-none flex-col p-0", className),
+      ...aria,
+      children: render(nodes, 1, null)
+    }
+  );
+}
+export {
+  TreeView
+};

package/dist/components/TreeView/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeView } from './TreeView.js';
+export type { TreeViewProps, TreeNode } from './TreeView.js';

package/dist/components/TreeView/index.js

@@ -0,0 +1,4 @@
+import { TreeView } from "./TreeView.js";
+export {
+  TreeView
+};

package/dist/index.d.ts

@@ -226,6 +226,14 @@ export { DateTimePicker } from './components/DateTimePicker/index.js';
 export type { DateTimePickerProps } from './components/DateTimePicker/index.js';
 export { EventCalendar } from './components/EventCalendar/index.js';
 export type { EventCalendarProps, EventCalendarView, CalendarEvent, EventTone } from './components/EventCalendar/index.js';
+export { TreeView } from './components/TreeView/index.js';
+export type { TreeViewProps, TreeNode } from './components/TreeView/index.js';
+export { ResizablePanels } from './components/ResizablePanels/index.js';
+export type { ResizablePanelsProps } from './components/ResizablePanels/index.js';
+export { Stepper } from './components/Stepper/index.js';
+export type { StepperProps, StepperStep } from './components/Stepper/index.js';
+export { ActionBar } from './components/ActionBar/index.js';
+export type { ActionBarProps } from './components/ActionBar/index.js';
 export type { OTPInputProps } from './components/OTPInput/index.js';
 export { DatePicker } from './components/DatePicker/index.js';
 export type { DatePickerProps } from './components/DatePicker/index.js';

package/dist/index.js

@@ -127,6 +127,10 @@ import { InlineEdit } from "./components/InlineEdit/index.js";
 import { TimePicker } from "./components/TimePicker/index.js";
 import { DateTimePicker } from "./components/DateTimePicker/index.js";
 import { EventCalendar } from "./components/EventCalendar/index.js";
+import { TreeView } from "./components/TreeView/index.js";
+import { ResizablePanels } from "./components/ResizablePanels/index.js";
+import { Stepper } from "./components/Stepper/index.js";
+import { ActionBar } from "./components/ActionBar/index.js";
 import { DatePicker } from "./components/DatePicker/index.js";
 import { DateRangePicker } from "./components/DateRangePicker/index.js";
 import { todayIn } from "./components/DateRangePicker/index.js";
@@ -134,6 +138,7 @@ import { ThemeProvider, ThemeScript, useTheme } from "./components/ThemeProvider
 import { Fade, Slide, Scale, Collapse, ListTransition, SkeletonSwap, usePrefersReducedMotion, Reveal, Float, Marquee } from "./components/Motion/index.js";
 export {
   Accordion,
+  ActionBar,
   Alert,
   AlertDialog,
   Amount,
@@ -238,6 +243,7 @@ export {
   RadioCardGroup,
   RadioGroup,
   Rating,
+  ResizablePanels,
   Reveal,
   SavedViews,
   Scale,
@@ -261,6 +267,7 @@ export {
   Spinner,
   SplitButton,
   Stack,
+  Stepper,
   StreamingText,
   Switch,
   Table,
@@ -281,6 +288,7 @@ export {
   Tooltip,
   Provider as TooltipProvider,
   TopNav,
+  TreeView,
   VisuallyHidden,
   addonVariants,
   alertVariants,