@situaction/traq-ui-ste 1.2.25 → 1.2.26

package/dist/components/stepper/Stepper.d.ts

@@ -24,6 +24,10 @@ export interface StepperProps {
     autoStatusFromActive?: boolean;
     /** Optional: force some steps disabled without setting status on each item */
     disabledIds?: string[];
+    /** If false, render only the dots/connectors (no item.content). */
+    showContent?: boolean;
+    /** Optional accessible label for each dot. */
+    getDotAriaLabel?: (item: StepITem, index: number, status: StepStatus) => string;
 }
 /** Stepper layout: dots + absolute connectors between each dot */
 export declare const Stepper: FC<StepperProps>;

package/dist/components/stepper/Stepper.js

@@ -1,82 +1,86 @@
-import { jsx as _, jsxs as D } from "react/jsx-runtime";
-import { useMemo as h, useRef as M, useState as T, useLayoutEffect as U } from "react";
-import '../../styles/Stepper.css';const V = "_wrapper_187j3_30", W = "_steps_187j3_35", X = "_row_187j3_42", Z = "_connectorAbs_187j3_50", tt = "_connectorProgress_187j3_60", et = "_connectorGradient_187j3_64", nt = "_connectorDefault_187j3_69", ot = "_dotButton_187j3_75", st = "_dotButtonDisabled_187j3_90", rt = "_dotOuter_187j3_96", ct = "_dotInner_187j3_103", o = {
-  wrapper: V,
-  steps: W,
-  row: X,
-  connectorAbs: Z,
-  connectorProgress: tt,
-  connectorGradient: et,
-  connectorDefault: nt,
-  dotButton: ot,
-  dotButtonDisabled: st,
-  dotOuter: rt,
-  dotInner: ct,
-  "dotButton--upcoming": "_dotButton--upcoming_187j3_108",
-  "dotButton--active": "_dotButton--active_187j3_120",
-  "dotButton--completed": "_dotButton--completed_187j3_142",
-  "dotButton--disabled": "_dotButton--disabled_187j3_153"
-}, dt = (n, d) => {
+import { jsx as _, jsxs as E } from "react/jsx-runtime";
+import { useMemo as h, useRef as G, useState as W, useLayoutEffect as X } from "react";
+import '../../styles/Stepper.css';const Z = "_wrapper_1fl3r_30", L = "_steps_1fl3r_35", tt = "_row_1fl3r_42", et = "_connectorAbs_1fl3r_50", nt = "_connectorProgress_1fl3r_60", ot = "_connectorGradient_1fl3r_64", rt = "_connectorDefault_1fl3r_69", st = "_dotButton_1fl3r_75", ct = "_dotButtonDisabled_1fl3r_90", dt = "_dotOuter_1fl3r_96", it = "_dotInner_1fl3r_103", at = "_rowNoContent_1fl3r_165", lt = "_content_1fl3r_170", o = {
+  wrapper: Z,
+  steps: L,
+  row: tt,
+  connectorAbs: et,
+  connectorProgress: nt,
+  connectorGradient: ot,
+  connectorDefault: rt,
+  dotButton: st,
+  dotButtonDisabled: ct,
+  dotOuter: dt,
+  dotInner: it,
+  "dotButton--upcoming": "_dotButton--upcoming_1fl3r_108",
+  "dotButton--active": "_dotButton--active_1fl3r_120",
+  "dotButton--completed": "_dotButton--completed_1fl3r_142",
+  "dotButton--disabled": "_dotButton--disabled_1fl3r_153",
+  rowNoContent: at,
+  content: lt
+}, ut = (n, d) => {
   if (n === d) return !0;
   if (n.length !== d.length) return !1;
   for (let u = 0; u < n.length; u++) {
-    const l = n[u], i = d[u];
-    if (l.key !== i.key || l.leftPx !== i.leftPx || l.topPx !== i.topPx || l.heightPx !== i.heightPx || l.variant !== i.variant)
+    const f = n[u], i = d[u];
+    if (f.key !== i.key || f.leftPx !== i.leftPx || f.topPx !== i.topPx || f.heightPx !== i.heightPx || f.variant !== i.variant)
       return !1;
   }
   return !0;
-}, ut = ({
+}, _t = ({
   items: n,
   onDotClick: d,
   dotOffsetPx: u = 18,
-  dotsClickable: l = !0,
+  dotsClickable: f = !0,
   activeId: i,
-  autoStatusFromActive: v = !0,
-  disabledIds: b = []
+  autoStatusFromActive: P = !0,
+  disabledIds: m = [],
+  showContent: y = !0,
+  getDotAriaLabel: w
 }) => {
-  const S = h(
+  const I = h(
     () => ({ "--flowline-dot-offset": `${u}px` }),
     [u]
-  ), E = h(() => b.join("|"), [b]), B = h(() => {
-    var a, r;
-    const t = new Set(b), s = i ?? ((a = n.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : a.id) ?? ((r = n[0]) == null ? void 0 : r.id), p = n.findIndex((e) => e.id === s);
-    return n.map((e, f) => e.status === "disabled" || t.has(e.id) ? "disabled" : v ? f < p ? "completed" : f === p ? "active" : "upcoming" : e.status ?? "upcoming");
-  }, [n, i, v, E]), G = h(() => B.join("|"), [B]), I = h(() => n.map((t) => t.id).join("|"), [n]), w = M(null), x = M(/* @__PURE__ */ new Map()), Y = h(() => (t) => (s) => {
-    x.current.set(t, s);
-  }, []), [z, K] = T([]);
-  return U(() => {
-    const t = w.current;
+  ), C = h(() => m.join("|"), [m]), B = h(() => {
+    var l, s;
+    const t = new Set(m), r = i ?? ((l = n.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : l.id) ?? ((s = n[0]) == null ? void 0 : s.id), a = n.findIndex((e) => e.id === r);
+    return n.map((e, p) => e.status === "disabled" || t.has(e.id) ? "disabled" : P ? p < a ? "completed" : p === a ? "active" : "upcoming" : e.status ?? "upcoming");
+  }, [n, i, P, C]), Y = h(() => B.join("|"), [B]), z = h(() => n.map((t) => t.id).join("|"), [n]), N = G(null), x = G(/* @__PURE__ */ new Map()), K = h(() => (t) => (r) => {
+    x.current.set(t, r);
+  }, []), [q, D] = W([]);
+  return X(() => {
+    const t = N.current;
     if (!t) return;
-    let s = null;
-    const p = () => {
-      const e = t.getBoundingClientRect(), f = [], j = n.map((c) => c.id);
-      for (let c = 0; c < j.length - 1; c++) {
-        const P = j[c], y = j[c + 1], A = x.current.get(P), N = x.current.get(y);
-        if (!A || !N) continue;
-        const g = A.getBoundingClientRect(), m = N.getBoundingClientRect(), L = Math.round(g.left + g.width / 2 - e.left), q = g.top + g.height / 2 - e.top, k = m.top + m.height / 2 - e.top, C = g.height / 2, F = m.height / 2, R = 2, O = Math.round(q + C + R), H = Math.round(k - F - R), J = Math.max(0, H - O), $ = B[c], Q = $ === "completed" ? "progress" : $ === "active" ? "gradient" : "default";
-        f.push({
-          key: `${P}__${y}`,
-          leftPx: L,
-          topPx: O,
-          heightPx: J,
-          variant: Q
+    let r = null;
+    const a = () => {
+      const e = t.getBoundingClientRect(), p = [], v = n.map((c) => c.id);
+      for (let c = 0; c < v.length - 1; c++) {
+        const R = v[c], j = v[c + 1], O = x.current.get(R), $ = x.current.get(j);
+        if (!O || !$) continue;
+        const g = O.getBoundingClientRect(), b = $.getBoundingClientRect(), k = Math.round(g.left + g.width / 2 - e.left), F = g.top + g.height / 2 - e.top, H = b.top + b.height / 2 - e.top, J = g.height / 2, Q = b.height / 2, A = 2, M = Math.round(F + J + A), T = Math.round(H - Q - A), U = Math.max(0, T - M), S = B[c], V = S === "completed" ? "progress" : S === "active" ? "gradient" : "default";
+        p.push({
+          key: `${R}__${j}`,
+          leftPx: k,
+          topPx: M,
+          heightPx: U,
+          variant: V
         });
       }
-      K((c) => dt(c, f) ? c : f);
-    }, a = () => {
-      s == null && (s = requestAnimationFrame(() => {
-        s = null, p();
+      D((c) => ut(c, p) ? c : p);
+    }, l = () => {
+      r == null && (r = requestAnimationFrame(() => {
+        r = null, a();
       }));
     };
-    a();
-    const r = new ResizeObserver(a);
-    return r.observe(t), x.current.forEach((e) => {
-      e && r.observe(e);
-    }), window.addEventListener("resize", a), () => {
-      s != null && cancelAnimationFrame(s), r.disconnect(), window.removeEventListener("resize", a);
+    l();
+    const s = new ResizeObserver(l);
+    return s.observe(t), x.current.forEach((e) => {
+      e && s.observe(e);
+    }), window.addEventListener("resize", l), () => {
+      r != null && cancelAnimationFrame(r), s.disconnect(), window.removeEventListener("resize", l);
     };
-  }, [I, G]), /* @__PURE__ */ _("div", { className: o.wrapper, style: S, children: /* @__PURE__ */ D("div", { ref: w, className: o.steps, children: [
-    z.map((t) => /* @__PURE__ */ _(
+  }, [z, Y]), /* @__PURE__ */ _("div", { className: o.wrapper, style: I, children: /* @__PURE__ */ E("div", { ref: N, className: o.steps, children: [
+    q.map((t) => /* @__PURE__ */ _(
       "span",
       {
         className: [
@@ -92,31 +96,41 @@ import '../../styles/Stepper.css';const V = "_wrapper_187j3_30", W = "_steps_187
       },
       t.key
     )),
-    n.map((t, s) => {
-      const p = B[s], r = l && !(p === "disabled") && !!d;
-      return /* @__PURE__ */ D("div", { className: o.row, children: [
-        /* @__PURE__ */ _(
-          "button",
-          {
-            type: "button",
-            className: [
-              o.dotButton,
-              o[`dotButton--${p}`],
-              r ? "" : o.dotButtonDisabled
-            ].filter(Boolean).join(" "),
-            onClick: () => {
-              r && (d == null || d(t.id));
-            },
-            "aria-label": `Open step ${t.id}`,
-            disabled: !r,
-            children: /* @__PURE__ */ _("span", { ref: Y(t.id), className: o.dotOuter, children: /* @__PURE__ */ _("span", { className: o.dotInner }) })
-          }
-        ),
-        /* @__PURE__ */ _("div", { className: o.content, children: t.content })
-      ] }, t.id);
+    n.map((t, r) => {
+      const a = B[r], s = f && !(a === "disabled") && !!d;
+      return /* @__PURE__ */ E(
+        "div",
+        {
+          className: [
+            o.row,
+            y ? "" : o.rowNoContent
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ _(
+              "button",
+              {
+                type: "button",
+                className: [
+                  o.dotButton,
+                  o[`dotButton--${a}`],
+                  s ? "" : o.dotButtonDisabled
+                ].filter(Boolean).join(" "),
+                onClick: () => {
+                  s && (d == null || d(t.id));
+                },
+                "aria-label": (w == null ? void 0 : w(t, r, a)) ?? `Open step ${t.id}`,
+                disabled: !s,
+                children: /* @__PURE__ */ _("span", { ref: K(t.id), className: o.dotOuter, children: /* @__PURE__ */ _("span", { className: o.dotInner }) })
+              }
+            ),
+            y ? /* @__PURE__ */ _("div", { className: o.content, children: t.content }) : null
+          ]
+        },
+        t.id
+      );
     })
   ] }) });
 };
 export {
-  ut as Stepper
+  _t as Stepper
 };

package/dist/styles/Stepper.css

@@ -1 +1 @@
-._wrapper_187j3_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_187j3_35{position:relative;display:flex;flex-direction:column;gap:var(--spacing-xs-3)}._row_187j3_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;column-gap:var(--spacing-xs-3);align-items:start}._connectorAbs_187j3_50{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_187j3_60{background:var(--flow-point-line-active)}._connectorGradient_187j3_64{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_187j3_69{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_187j3_75{margin-top:.625rem;width:var(--stepper-dot-button);height:var(--stepper-dot-button);padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:1}._dotButtonDisabled_187j3_90{cursor:default;opacity:.5}._dotOuter_187j3_96{display:flex;align-items:center;justify-content:center;border-radius:999px}._dotInner_187j3_103{border-radius:999px}._dotButton--upcoming_187j3_108 ._dotOuter_187j3_96{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_187j3_108 ._dotInner_187j3_103{display:none}._dotButton--active_187j3_120 ._dotOuter_187j3_96{width:16px;height:16px;border-radius:999px;border:1px solid var(--flow-point-line-active);background:transparent;padding:1px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}._dotButton--active_187j3_120 ._dotInner_187j3_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_187j3_142 ._dotOuter_187j3_96{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_187j3_142 ._dotInner_187j3_103{display:none}._dotButton--disabled_187j3_153 ._dotOuter_187j3_96{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_187j3_153 ._dotInner_187j3_103{display:none}
+._wrapper_1fl3r_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_1fl3r_35{position:relative;display:flex;flex-direction:column;gap:var(--spacing-xs-3)}._row_1fl3r_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;column-gap:var(--spacing-xs-3);align-items:start}._connectorAbs_1fl3r_50{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_1fl3r_60{background:var(--flow-point-line-active)}._connectorGradient_1fl3r_64{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_1fl3r_69{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_1fl3r_75{margin-top:.625rem;width:var(--stepper-dot-button);height:var(--stepper-dot-button);padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:1}._dotButtonDisabled_1fl3r_90{cursor:default;opacity:.5}._dotOuter_1fl3r_96{display:flex;align-items:center;justify-content:center;border-radius:999px}._dotInner_1fl3r_103{border-radius:999px}._dotButton--upcoming_1fl3r_108 ._dotOuter_1fl3r_96{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_1fl3r_108 ._dotInner_1fl3r_103{display:none}._dotButton--active_1fl3r_120 ._dotOuter_1fl3r_96{width:16px;height:16px;border-radius:999px;border:1px solid var(--flow-point-line-active);background:transparent;padding:1px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}._dotButton--active_1fl3r_120 ._dotInner_1fl3r_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_1fl3r_142 ._dotOuter_1fl3r_96{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_1fl3r_142 ._dotInner_1fl3r_103{display:none}._dotButton--disabled_1fl3r_153 ._dotOuter_1fl3r_96{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_1fl3r_153 ._dotInner_1fl3r_103{display:none}._rowNoContent_1fl3r_165{grid-template-columns:var(--stepper-left-col);column-gap:0}._rowNoContent_1fl3r_165 ._content_1fl3r_170{display:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.2.25",
+  "version": "1.2.26",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",