@godxjp/ui 31.4.0 → 31.6.0

package/dist/components/data-display/range-timeline.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { ChevronDown, ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
@@ -19,6 +19,7 @@ const RangeTimeline = React.forwardRef(
     expandedValues,
     defaultExpandedValues,
     onExpandedValuesChange,
+    sticky = false,
     className,
     ...props
   }, ref) {
@@ -69,6 +70,8 @@ const RangeTimeline = React.forwardRef(
       columns.reduce((sum, column) => sum + column.units, 0)
     );
     const track = React.useRef(null);
+    const stickyHeader = React.useRef(null);
+    const bodyScroller = React.useRef(null);
     const drag = React.useRef(null);
     const [preview, setPreview] = React.useState(null);
     const deltaAt = (x) => drag.current ? Math.round((x - drag.current.x) * units * drag.current.direction / drag.current.width) : 0;
@@ -86,213 +89,230 @@ const RangeTimeline = React.forwardRef(
       const bounded = current.edge === "start" ? Math.min(delta, row.end - row.start) : Math.max(delta, row.start - row.end);
       if (bounded) onRangeChange?.(row.id, current.edge, bounded);
     };
-    return /* @__PURE__ */ jsx(
-      "section",
-      {
-        ...props,
-        ref,
-        className: cn("ui-range-timeline", className),
-        "data-bordered": bordered ? "true" : void 0,
-        "data-density": density === "default" ? void 0 : density,
-        "aria-label": label,
-        tabIndex: 0,
-        children: /* @__PURE__ */ jsxs(
+    const canvasStyle = {
+      "--range-timeline-columns": Math.max(1, columns.length),
+      "--range-timeline-units": units
+    };
+    const header = /* @__PURE__ */ jsxs(Fragment, { children: [
+      bands && bands.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: bands.map((band, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ui-range-timeline-column",
+            style: { gridColumn: `span ${band.units}` },
+            children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", children: band.label })
+          },
+          index
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: /* @__PURE__ */ jsx(Text, { weight: "bold", children: label }) }),
+        /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", ref: track, children: columns.map((column, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ui-range-timeline-column",
+            style: { gridColumn: `span ${column.units}` },
+            children: /* @__PURE__ */ jsx(Text, { size: "xs", children: column.label })
+          },
+          index
+        )) })
+      ] })
+    ] });
+    const body = /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", role: nested ? "list" : void 0, children: [
+      (bordered || columns.some((column) => column.muted)) && // Decorative: the same unit tracks as the header columns, laid once behind every row so
+      // each vertical rule runs the full body height exactly under its header column.
+      /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-grid", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("div", {}),
+        /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: columns.map((column, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ui-range-timeline-grid-column",
+            "data-muted": column.muted ? "true" : void 0,
+            style: { gridColumn: `span ${column.units}` }
+          },
+          index
+        )) })
+      ] }),
+      visibleRows.map((row, index) => {
+        const idBase = `${reactId}-row-${rows.indexOf(row)}`;
+        const delta = preview?.id === row.id ? preview.delta : 0;
+        const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
+        const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
+        const left = Math.max(0, start), right = Math.min(units, end + 1);
+        return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "ui-range-timeline-canvas",
-            style: {
-              "--range-timeline-columns": Math.max(1, columns.length),
-              "--range-timeline-units": units
+            className: "ui-range-timeline-row",
+            ...nested && {
+              role: "listitem",
+              "aria-level": depthOf(row) + 1,
+              "aria-setsize": siblingsOf(index).size,
+              "aria-posinset": siblingsOf(index).position
             },
             children: [
-              bands && bands.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
-                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: bands.map((band, index) => /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "ui-range-timeline-column",
-                    style: { gridColumn: `span ${band.units}` },
-                    children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", children: band.label })
-                  },
-                  index
-                )) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
-                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: /* @__PURE__ */ jsx(Text, { weight: "bold", children: label }) }),
-                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", ref: track, children: columns.map((column, index) => /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "ui-range-timeline-column",
-                    style: { gridColumn: `span ${column.units}` },
-                    children: /* @__PURE__ */ jsx(Text, { size: "xs", children: column.label })
-                  },
-                  index
-                )) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", role: nested ? "list" : void 0, children: [
-                (bordered || columns.some((column) => column.muted)) && // Decorative: the same unit tracks as the header columns, laid once behind every row so
-                // each vertical rule runs the full body height exactly under its header column.
-                /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-grid", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsx("div", {}),
-                  /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: columns.map((column, index) => /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "ui-range-timeline-grid-column",
-                      "data-muted": column.muted ? "true" : void 0,
-                      style: { gridColumn: `span ${column.units}` }
-                    },
-                    index
-                  )) })
-                ] }),
-                visibleRows.map((row, index) => {
-                  const idBase = `${reactId}-row-${rows.indexOf(row)}`;
-                  const delta = preview?.id === row.id ? preview.delta : 0;
-                  const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
-                  const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
-                  const left = Math.max(0, start), right = Math.min(units, end + 1);
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: "ui-range-timeline-row",
-                      ...nested && {
-                        role: "listitem",
-                        "aria-level": depthOf(row) + 1,
-                        "aria-setsize": siblingsOf(index).size,
-                        "aria-posinset": siblingsOf(index).position
-                      },
-                      children: [
-                        nested ? /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            className: "ui-range-timeline-label",
-                            "data-nested": "true",
-                            style: { "--range-timeline-depth": depthOf(row) },
-                            children: [
-                              parents.includes(row.id) ? /* @__PURE__ */ jsxs(
-                                Button,
-                                {
-                                  variant: "ghost",
-                                  size: "icon-xs",
-                                  className: "ui-range-timeline-disclosure",
-                                  "aria-expanded": isExpanded(row.id),
-                                  "aria-labelledby": `${idBase}-toggle ${idBase}-label`,
-                                  onClick: () => toggleRow(row.id),
-                                  children: [
-                                    /* @__PURE__ */ jsx("span", { id: `${idBase}-toggle`, hidden: true, children: t("rangeTimeline.childRows") }),
-                                    isExpanded(row.id) ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
-                                      ChevronRight,
-                                      {
-                                        "aria-hidden": "true",
-                                        className: "ui-range-timeline-disclosure-collapsed"
-                                      }
-                                    )
-                                  ]
-                                }
-                              ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-range-timeline-disclosure-spacer" }),
-                              /* @__PURE__ */ jsx("div", { id: `${idBase}-label`, className: "ui-range-timeline-label-content", children: row.label })
-                            ]
-                          }
-                        ) : /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
-                        /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
-                          today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
-                            "span",
+              nested ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "ui-range-timeline-label",
+                  "data-nested": "true",
+                  style: { "--range-timeline-depth": depthOf(row) },
+                  children: [
+                    parents.includes(row.id) ? /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-xs",
+                        className: "ui-range-timeline-disclosure",
+                        "aria-expanded": isExpanded(row.id),
+                        "aria-labelledby": `${idBase}-toggle ${idBase}-label`,
+                        onClick: () => toggleRow(row.id),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { id: `${idBase}-toggle`, hidden: true, children: t("rangeTimeline.childRows") }),
+                          isExpanded(row.id) ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+                            ChevronRight,
                             {
                               "aria-hidden": "true",
-                              className: "ui-range-timeline-today",
-                              style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
-                            }
-                          ),
-                          right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
-                            /* @__PURE__ */ jsx(
-                              ChevronLeft,
-                              {
-                                "aria-hidden": "true",
-                                className: "ui-range-timeline-outside-icon"
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
-                          ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
-                            /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
-                            /* @__PURE__ */ jsx(
-                              ChevronRight,
-                              {
-                                "aria-hidden": "true",
-                                className: "ui-range-timeline-outside-icon"
-                              }
-                            )
-                          ] })),
-                          right > left && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              className: "ui-range-timeline-bar",
-                              style: {
-                                insetInlineStart: `${left / units * 100}%`,
-                                inlineSize: `${(right - left) / units * 100}%`
-                              },
-                              children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
-                                (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
-                              ).map((edge) => /* @__PURE__ */ jsx(
-                                Button,
-                                {
-                                  variant: "ghost",
-                                  size: "icon-xs",
-                                  className: "ui-range-timeline-handle",
-                                  "data-edge": edge,
-                                  "aria-label": edge === "start" ? row.startLabel : row.endLabel,
-                                  onPointerDown: (event) => {
-                                    const width = track.current?.getBoundingClientRect().width ?? 0;
-                                    if (!width || event.button !== 0) return;
-                                    event.currentTarget.setPointerCapture(event.pointerId);
-                                    drag.current = {
-                                      id: row.id,
-                                      edge,
-                                      x: event.clientX,
-                                      width,
-                                      direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
-                                    };
-                                  },
-                                  onPointerMove: (event) => {
-                                    if (drag.current)
-                                      setPreview({
-                                        id: drag.current.id,
-                                        edge: drag.current.edge,
-                                        delta: deltaAt(event.clientX)
-                                      });
-                                  },
-                                  onPointerUp: complete,
-                                  onPointerCancel: cancel,
-                                  onLostPointerCapture: cancel,
-                                  onKeyDown: (event) => {
-                                    if (event.key === "Escape") {
-                                      cancel();
-                                      return;
-                                    }
-                                    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
-                                    if (!step) return;
-                                    event.preventDefault();
-                                    const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
-                                    const delta2 = step * direction;
-                                    if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
-                                      onRangeChange(row.id, edge, delta2);
-                                  },
-                                  children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
-                                },
-                                edge
-                              ))
+                              className: "ui-range-timeline-disclosure-collapsed"
                             }
                           )
-                        ] })
-                      ]
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-range-timeline-disclosure-spacer" }),
+                    /* @__PURE__ */ jsx("div", { id: `${idBase}-label`, className: "ui-range-timeline-label-content", children: row.label })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
+              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
+                today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "ui-range-timeline-today",
+                    style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
+                  }
+                ),
+                right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
+                  /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "ui-range-timeline-outside-icon" }),
+                  /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
+                ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
+                  /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "ui-range-timeline-outside-icon" })
+                ] })),
+                right > left && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ui-range-timeline-bar",
+                    style: {
+                      insetInlineStart: `${left / units * 100}%`,
+                      inlineSize: `${(right - left) / units * 100}%`
                     },
-                    row.id
-                  );
-                })
+                    children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
+                      (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
+                    ).map((edge) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-xs",
+                        className: "ui-range-timeline-handle",
+                        "data-edge": edge,
+                        "aria-label": edge === "start" ? row.startLabel : row.endLabel,
+                        onPointerDown: (event) => {
+                          const width = track.current?.getBoundingClientRect().width ?? 0;
+                          if (!width || event.button !== 0) return;
+                          event.currentTarget.setPointerCapture(event.pointerId);
+                          drag.current = {
+                            id: row.id,
+                            edge,
+                            x: event.clientX,
+                            width,
+                            direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                          };
+                        },
+                        onPointerMove: (event) => {
+                          if (drag.current)
+                            setPreview({
+                              id: drag.current.id,
+                              edge: drag.current.edge,
+                              delta: deltaAt(event.clientX)
+                            });
+                        },
+                        onPointerUp: complete,
+                        onPointerCancel: cancel,
+                        onLostPointerCapture: cancel,
+                        onKeyDown: (event) => {
+                          if (event.key === "Escape") {
+                            cancel();
+                            return;
+                          }
+                          const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                          if (!step) return;
+                          event.preventDefault();
+                          const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                          const delta2 = step * direction;
+                          if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
+                            onRangeChange(row.id, edge, delta2);
+                        },
+                        children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                      },
+                      edge
+                    ))
+                  }
+                )
               ] })
             ]
-          }
-        )
-      }
-    );
+          },
+          row.id
+        );
+      })
+    ] });
+    const sectionProps = {
+      ...props,
+      ref,
+      className: cn("ui-range-timeline", className),
+      "data-bordered": bordered ? "true" : void 0,
+      // Only a NON-default step scopes the unit-width knob, so a theme that narrows
+      // --range-timeline-unit-width globally still owns the default timeline (gh#730).
+      "data-density": density === "default" ? void 0 : density,
+      "aria-label": label
+    };
+    if (!sticky) {
+      return /* @__PURE__ */ jsx("section", { ...sectionProps, tabIndex: 0, children: /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-canvas", style: canvasStyle, children: [
+        header,
+        body
+      ] }) });
+    }
+    const offsetHeader = typeof sticky === "object" ? sticky.offsetHeader ?? 0 : 0;
+    return /* @__PURE__ */ jsxs("section", { ...sectionProps, "data-sticky": "true", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: stickyHeader,
+          className: "ui-range-timeline-sticky-header",
+          style: { "--range-timeline-sticky-offset": `${offsetHeader}px` },
+          onWheel: (event) => {
+            if (bodyScroller.current && event.deltaX)
+              bodyScroller.current.scrollLeft += event.deltaX;
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-canvas", style: canvasStyle, children: header })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: bodyScroller,
+          className: "ui-range-timeline-scroller",
+          role: "group",
+          "aria-label": label,
+          tabIndex: 0,
+          onScroll: (event) => {
+            if (stickyHeader.current)
+              stickyHeader.current.scrollLeft = event.currentTarget.scrollLeft;
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-canvas", style: canvasStyle, children: body })
+        }
+      )
+    ] });
   }
 );
 export {