@godxjp/ui 31.4.0 → 31.6.0

package/dist/components/data-display/index.d.ts

@@ -53,6 +53,8 @@ export { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 export type { ChatBubbleListProp, ChatBubbleListProps, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleProps, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "./chat-bubble.js";
 export { Tree } from "./tree.js";
 export type { TreeNodeProp, TreeProp, TreeProps } from "./tree.js";
+export { OrgChart } from "./org-chart.js";
+export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProps, } from "./org-chart.js";
 export { Welcome } from "./welcome.js";
 export type { WelcomeProp, WelcomeProps, WelcomeVariantProp } from "./welcome.js";
 export { ThoughtChain, ThoughtChainItem } from "./thought-chain.js";

package/dist/components/data-display/index.js

@@ -60,6 +60,7 @@ import { PermissionMatrix } from "./permission-matrix.js";
 import { RangeTimeline } from "./range-timeline.js";
 import { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 import { Tree } from "./tree.js";
+import { OrgChart } from "./org-chart.js";
 import { Welcome } from "./welcome.js";
 import { ThoughtChain, ThoughtChainItem } from "./thought-chain.js";
 export {
@@ -103,6 +104,7 @@ export {
   Legend,
   ListRow,
   Marquee,
+  OrgChart,
   PermissionMatrix,
   Popover,
   PopoverAnchor,

package/dist/components/data-display/org-chart.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { OrgChartProp } from "../../props/components/data-display.prop.js";
+export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProp as OrgChartProps, } from "../../props/components/data-display.prop.js";
+/** `ref` reaches the root `<div>` — the container the breakpoint is measured against. */
+export declare const OrgChart: React.ForwardRefExoticComponent<OrgChartProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/org-chart.js

@@ -0,0 +1,169 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useScrollsHorizontally } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Tree } from "./tree.js";
+function flatten(nodes) {
+  const out = [];
+  const walk = (list, depth, parent) => {
+    for (const node of list) {
+      const index = out.length;
+      out.push({ node, depth, parent, firstChild: null });
+      if (node.children?.length) {
+        out[index].firstChild = out.length;
+        walk(node.children, depth + 1, index);
+      }
+    }
+  };
+  walk(nodes, 0, null);
+  return out;
+}
+function toTreeData(nodes) {
+  return nodes.map((node) => ({
+    value: node.key,
+    label: node.name,
+    children: node.children?.length ? toTreeData(node.children) : void 0
+  }));
+}
+function isRtl(element) {
+  return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+}
+function OrgChartRoot({
+  data,
+  renderNode,
+  label,
+  className,
+  id,
+  forwardedRef,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const reactId = React.useId();
+  const baseId = id ?? `${reactId}-org-chart`;
+  const treeLabel = label ?? t("dataDisplay.orgChart.label");
+  const flat = React.useMemo(() => flatten(data), [data]);
+  const indexByKey = React.useMemo(
+    () => new Map(flat.map((entry, index) => [entry.node.key, index])),
+    [flat]
+  );
+  const scrollRef = React.useRef(null);
+  const scrolls = useScrollsHorizontally(scrollRef, true);
+  const [activeKey, setActiveKey] = React.useState(null);
+  const rovingKey = (activeKey && indexByKey.has(activeKey) ? activeKey : null) ?? flat[0]?.node.key ?? null;
+  const nodeRefs = React.useRef(/* @__PURE__ */ new Map());
+  const moveTo = (index) => {
+    if (index == null) return;
+    const entry = flat[index];
+    if (!entry) return;
+    setActiveKey(entry.node.key);
+    nodeRefs.current.get(entry.node.key)?.focus();
+  };
+  const onKeyDown = (event, index) => {
+    const entry = flat[index];
+    const rtl = isRtl(event.currentTarget);
+    const inward = rtl ? "ArrowLeft" : "ArrowRight";
+    const outward = rtl ? "ArrowRight" : "ArrowLeft";
+    let target;
+    if (event.key === "ArrowDown") target = index + 1 < flat.length ? index + 1 : null;
+    else if (event.key === "ArrowUp") target = index > 0 ? index - 1 : null;
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = flat.length - 1;
+    else if (event.key === inward) target = entry.firstChild;
+    else if (event.key === outward) target = entry.parent;
+    else return;
+    event.preventDefault();
+    moveTo(target ?? null);
+  };
+  const renderBranch = (nodes) => nodes.map((node, position) => {
+    const index = indexByKey.get(node.key);
+    const { depth } = flat[index];
+    const nodeId = `${baseId}-n${index}`;
+    const groupId = `${nodeId}-group`;
+    const hasChildren = Boolean(node.children?.length);
+    const isAgent = node.variant === "agent";
+    const labelledBy = renderNode ? void 0 : [
+      `${nodeId}-name`,
+      node.title ? `${nodeId}-title` : null,
+      isAgent ? `${nodeId}-kind` : null
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("li", { role: "none", className: "ui-org-chart-branch", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (element) => {
+            nodeRefs.current.set(node.key, element);
+          },
+          id: nodeId,
+          role: "treeitem",
+          "aria-level": depth + 1,
+          "aria-setsize": nodes.length,
+          "aria-posinset": position + 1,
+          "aria-labelledby": labelledBy,
+          "aria-describedby": !renderNode && node.extra ? `${nodeId}-extra` : void 0,
+          "aria-owns": hasChildren ? groupId : void 0,
+          tabIndex: rovingKey === node.key ? 0 : -1,
+          "data-key": node.key,
+          "data-variant": isAgent ? "agent" : "person",
+          className: "ui-org-chart-node ui-focus-ring",
+          onFocus: () => setActiveKey(node.key),
+          onKeyDown: (event) => onKeyDown(event, index),
+          children: [
+            renderNode ? renderNode(node) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              node.avatar ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-org-chart-avatar", children: node.avatar }) : null,
+              /* @__PURE__ */ jsxs("span", { className: "ui-org-chart-text", children: [
+                /* @__PURE__ */ jsx("span", { id: `${nodeId}-name`, className: "ui-org-chart-name", children: node.name }),
+                node.title ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-title`, className: "ui-org-chart-title", children: node.title }) : null,
+                node.extra ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-extra`, className: "ui-org-chart-extra", children: node.extra }) : null
+              ] })
+            ] }),
+            isAgent ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-kind`, className: "sr-only", children: t("dataDisplay.orgChart.agent") }) : null
+          ]
+        }
+      ),
+      hasChildren ? /* @__PURE__ */ jsx("ul", { id: groupId, role: "group", className: "ui-org-chart-children", children: renderBranch(node.children) }) : null
+    ] }, node.key);
+  });
+  const treeData = React.useMemo(() => toTreeData(data), [data]);
+  const nodeByKey = React.useMemo(
+    () => new Map(flat.map((entry) => [entry.node.key, entry.node])),
+    [flat]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...rest, ref: forwardedRef, id, className: cn("ui-org-chart", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "ui-org-chart-scroll",
+        ...scrolls ? { role: "region", "aria-label": t("dataDisplay.orgChart.scrollRegion"), tabIndex: 0 } : {},
+        children: /* @__PURE__ */ jsx("ul", { role: "tree", "aria-label": treeLabel, className: "ui-org-chart-tree", children: renderBranch(data) })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "ui-org-chart-list", children: /* @__PURE__ */ jsx(
+      Tree,
+      {
+        "aria-label": treeLabel,
+        treeData,
+        defaultExpandAll: true,
+        titleRender: (treeNode) => {
+          const node = nodeByKey.get(treeNode.value);
+          if (!node) return treeNode.label;
+          if (renderNode) return renderNode(node);
+          return /* @__PURE__ */ jsxs("span", { className: "ui-org-chart-list-row", children: [
+            node.avatar ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-org-chart-avatar", children: node.avatar }) : null,
+            /* @__PURE__ */ jsx("span", { className: "ui-org-chart-name", children: node.name }),
+            node.title ? /* @__PURE__ */ jsx("span", { className: "ui-org-chart-title", children: node.title }) : null,
+            node.variant === "agent" ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.orgChart.agent") }) : null,
+            node.extra ? /* @__PURE__ */ jsx("span", { className: "ui-org-chart-extra", children: node.extra }) : null
+          ] });
+        }
+      }
+    ) })
+  ] });
+}
+const OrgChart = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(OrgChartRoot, { ...props, forwardedRef: ref }));
+OrgChart.displayName = "OrgChart";
+export {
+  OrgChart
+};

package/dist/components/data-display/range-timeline.d.ts

@@ -53,6 +53,16 @@ export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
     defaultExpandedValues?: readonly string[];
     /** Fires with the next expanded parent ids, for controlled and uncontrolled timelines alike. */
     onExpandedValuesChange?: (values: string[]) => void;
+    /**
+     * Keep the axis header (bands + ticks) on screen while the PAGE scrolls a long schedule — antd
+     * Table `sticky`. `offsetHeader` is the distance in px from the top of the scrolling viewport,
+     * e.g. the height of a fixed app topbar. The header then scrolls horizontally with the body.
+     * Needs no clipping ancestor (e.g. `Card`, which is `overflow: hidden`) between it and the page
+     * scroller. antd's `offsetScroll` / `getContainer` (a sticky horizontal scrollbar) are not ported.
+     */
+    sticky?: boolean | {
+        offsetHeader?: number;
+    };
 };
 /** A horizontal range axis. Units and labels are data; the design system owns all geometry. */
 export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
@@ -94,4 +104,14 @@ export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAt
     defaultExpandedValues?: readonly string[];
     /** Fires with the next expanded parent ids, for controlled and uncontrolled timelines alike. */
     onExpandedValuesChange?: (values: string[]) => void;
+    /**
+     * Keep the axis header (bands + ticks) on screen while the PAGE scrolls a long schedule — antd
+     * Table `sticky`. `offsetHeader` is the distance in px from the top of the scrolling viewport,
+     * e.g. the height of a fixed app topbar. The header then scrolls horizontally with the body.
+     * Needs no clipping ancestor (e.g. `Card`, which is `overflow: hidden`) between it and the page
+     * scroller. antd's `offsetScroll` / `getContainer` (a sticky horizontal scrollbar) are not ported.
+     */
+    sticky?: boolean | {
+        offsetHeader?: number;
+    };
 } & React.RefAttributes<HTMLElement>>;