@situaction/traq-ui-ste 1.2.32 → 1.2.33

package/dist/components/tabs/Tabs.js

@@ -1,8 +1,8 @@
-import { jsxs as A, jsx as l } from "react/jsx-runtime";
-import { useState as z, useRef as w, useCallback as B, useEffect as u, useLayoutEffect as E } from "react";
-import { Button as F } from "../button/Button.js";
-import { IconButton as p } from "../icon-button/IconButton.js";
-import '../../styles/Tabs.css';const q = "_underline_1jy9f_82", n = {
+import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { useState as N, useRef as j, useCallback as A, useEffect as u, useLayoutEffect as F } from "react";
+import { Button as q } from "../button/Button.js";
+import { IconButton as L } from "../icon-button/IconButton.js";
+import '../../styles/Tabs.css';const M = "_underline_1jy9f_82", n = {
   "tab-container": "_tab-container_1jy9f_30",
   "tab-container-button": "_tab-container-button_1jy9f_34",
   "tab-container-icon": "_tab-container-icon_1jy9f_39",
@@ -14,56 +14,52 @@ import '../../styles/Tabs.css';const q = "_underline_1jy9f_82", n = {
   "selected-button": "_selected-button_1jy9f_63",
   "noSelect-button": "_noSelect-button_1jy9f_70",
   "selected-text": "_selected-text_1jy9f_74",
-  underline: q,
+  underline: M,
   "flexHorizontal-center": "_flexHorizontal-center_1jy9f_90",
   "flexHorizontal-left": "_flexHorizontal-left_1jy9f_96",
   "flexHorizontal-right": "_flexHorizontal-right_1jy9f_102"
-}, C = (i, o) => {
+}, S = (i, o) => {
   if (!Number.isFinite(i)) return 0;
-  const b = Math.max(0, o);
-  return Math.min(Math.max(i, 0), b);
-}, O = ({
+  const d = Math.max(0, o);
+  return Math.min(Math.max(i, 0), d);
+}, G = ({
   listItems: i,
   type: o,
-  onTabSelect: b,
-  activeTab: d,
-  defaultActiveTab: _ = 0,
-  position: j = "left",
-  fullWidth: R = !1,
-  disabledTabs: x = []
+  onTabSelect: d,
+  activeTab: _,
+  defaultActiveTab: m = 0,
+  position: v = "left",
+  fullWidth: h = !1,
+  disabledTabs: z = []
 }) => {
-  const c = d !== void 0, [N, y] = z(_), m = C(
-    c ? d : N,
+  const l = _ !== void 0, [H, g] = N(m), f = S(
+    l ? _ : H,
     (i.length || 1) - 1
-  ), [S, H] = z({}), a = w(null), g = w([]), h = (t) => {
-    x.includes(t) || (c || y(t), b(i[t], t));
-  }, v = (t) => {
+  ), [$, B] = N({}), a = j(null), w = j([]), R = j([]), x = (t) => {
+    z.includes(t) || (l || g(t), d(i[t], t));
+  }, C = (t) => {
     if (!a.current || !t || o === "button") return;
     const e = a.current.getBoundingClientRect();
     if (e.width === 0) {
-      requestAnimationFrame(() => v(t));
+      requestAnimationFrame(() => C(t));
       return;
     }
     const s = t.getBoundingClientRect();
-    H({
+    B({
       left: `${s.left - e.left}px`,
       width: `${s.width}px`
     });
-  }, r = B(() => {
-    const t = g.current[m] ?? null;
-    requestAnimationFrame(
-      () => requestAnimationFrame(() => v(t))
-    );
-  }, [m, o]);
+  }, r = A(() => {
+    const t = (h ? R.current[f] : null) ?? w.current[f] ?? null;
+    requestAnimationFrame(() => requestAnimationFrame(() => C(t)));
+  }, [f, o, h]);
   u(() => {
-    c && r();
-  }, [c, r, d]), E(() => {
+    l && r();
+  }, [l, r, _]), F(() => {
     r();
-  }, [r, j, i.length]), u(() => {
-    c || y(
-      C(_, (i.length || 1) - 1)
-    );
-  }, [_, i.length, c]), u(() => {
+  }, [r, v, i.length]), u(() => {
+    l || g(S(m, (i.length || 1) - 1));
+  }, [m, i.length, l]), u(() => {
     var t, e;
     (e = (t = document.fonts) == null ? void 0 : t.ready) == null || e.then(() => r());
   }, [r]), u(() => {
@@ -74,65 +70,65 @@ import '../../styles/Tabs.css';const q = "_underline_1jy9f_82", n = {
     const t = new ResizeObserver(() => r());
     return t.observe(a.current), () => t.disconnect();
   }, [r]);
-  const $ = [
-    n[`flexHorizontal-${j}`],
+  const k = [
+    n[`flexHorizontal-${v}`],
     o === "button" ? n["tab-items-button"] : n["tab-items"]
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]} ${R && n["tab-full-width"]}`,
+      className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]} ${h && n["tab-full-width"]}`,
       ref: a,
       children: [
-        /* @__PURE__ */ l("div", { className: $, children: i.map((t, e) => {
-          const s = x.includes(e), f = e === m;
-          return /* @__PURE__ */ l(
+        /* @__PURE__ */ c("div", { className: k, children: i.map((t, e) => {
+          const s = z.includes(e), b = e === f;
+          return /* @__PURE__ */ c(
             "div",
             {
-              ref: (k) => g.current[e] = k,
+              ref: (y) => w.current[e] = y,
               className: [
-                o === "button" && f ? n["selected-button"] : n["noSelect-button"],
+                o === "button" && b ? n["selected-button"] : n["noSelect-button"],
                 typeof t != "string" ? n["noSelect-button"] : "",
                 s ? n["tab-disabled"] : ""
               ].filter(Boolean).join(" "),
-              children: o === "icon" ? /* @__PURE__ */ l(
-                p,
+              children: /* @__PURE__ */ c(
+                "span",
                 {
-                  mode: "icon",
-                  size: "s",
-                  selected: f,
-                  onClick: () => h(e),
-                  disabled: s,
-                  children: t
+                  ref: (y) => R.current[e] = y,
+                  style: { display: "inline-flex" },
+                  children: o === "icon" ? /* @__PURE__ */ c(
+                    L,
+                    {
+                      mode: "icon",
+                      size: "s",
+                      selected: b,
+                      onClick: () => x(e),
+                      disabled: s,
+                      children: t
+                    }
+                  ) : o === "button" ? /* @__PURE__ */ c("div", { className: n["tab-type-button"], onClick: () => x(e), children: t }) : /* @__PURE__ */ c("div", { className: b ? n["selected-text"] : void 0, children: /* @__PURE__ */ c(
+                    q,
+                    {
+                      size: "s",
+                      label: t,
+                      mode: o === "text" ? "text" : "ghost",
+                      selected: b,
+                      onClick: () => x(e),
+                      disabled: s,
+                      fullWidth: !0
+                    }
+                  ) })
                 }
-              ) : o === "button" ? /* @__PURE__ */ l(
-                "div",
-                {
-                  className: n["tab-type-button"],
-                  onClick: () => h(e),
-                  children: t
-                }
-              ) : /* @__PURE__ */ l("div", { className: f ? n["selected-text"] : void 0, children: /* @__PURE__ */ l(
-                F,
-                {
-                  size: "s",
-                  label: t,
-                  mode: o === "text" ? "text" : "ghost",
-                  selected: f,
-                  onClick: () => h(e),
-                  disabled: s,
-                  fullWidth: !0
-                }
-              ) })
+              )
             },
             e
           );
         }) }),
-        o !== "button" && /* @__PURE__ */ l("div", { className: n.underline, style: S })
+        o !== "button" && /* @__PURE__ */ c("div", { className: n.underline, style: $ })
       ]
     }
   );
 };
 export {
-  O as Tabs
+  G as Tabs
 };

package/package.json

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