@iress-oss/ids-components 6.0.0-alpha.34 → 6.0.0-alpha.35

package/dist/components/TabSet/TabSet.js

@@ -1,11 +1,11 @@
-import { jsx as t, jsxs as m, Fragment as q } from "react/jsx-runtime";
+import { jsx as t, jsxs as v, Fragment as q } from "react/jsx-runtime";
 import { C as z } from "../../floating-ui.react-B0nDXRN6.js";
 import { propagateTestid as H } from "../../helpers/utility/propagateTestid.js";
 import { TabSetProvider as R, TabSetContext as O } from "./TabSetProvider.js";
-import { useState as n, useRef as W, useEffect as u, useContext as $ } from "react";
-import { s as v } from "../../factory-CcYfm2kB.js";
+import { useState as d, useRef as W, useEffect as h, useContext as $ } from "react";
+import { s as p } from "../../factory-CcYfm2kB.js";
 import { tabSet as k } from "./TabSet.styles.js";
-import { c as p } from "../../cx-DN21T1EH.js";
+import { c as u } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as A } from "../../enums.js";
 const F = (r) => {
   const a = W({}), s = $(O);
@@ -23,22 +23,23 @@ const F = (r) => {
       ...a.current,
       opacity: 0
     };
-  return u(() => {
+  return h(() => {
     s?.hover && (a.current = e);
   }, [s?.hover, e]), /* @__PURE__ */ t("div", { ...r, style: e });
 }, G = (r) => {
-  const [a, s] = n({}), e = $(O);
-  return u(() => {
-    const i = setTimeout(() => {
-      if (e?.active) {
-        const { offsetLeft: l, scrollWidth: d } = e.active;
+  const [a, s] = d({}), e = $(O);
+  return h(() => {
+    const i = e?.active, l = setTimeout(() => {
+      if (i) {
+        const { offsetLeft: f, scrollWidth: n } = i;
         s({
-          left: `${l}px`,
-          width: `${d}px`
+          left: `${f}px`,
+          width: `${n}px`
         });
-      }
+      } else
+        s({});
     }, 150);
-    return () => clearTimeout(i);
+    return () => clearTimeout(l);
   }, [e?.active, e?.layoutVersion]), /* @__PURE__ */ t("div", { ...r, style: a });
 }, P = ({
   children: r,
@@ -47,22 +48,22 @@ const F = (r) => {
   layout: e = "top-left",
   onChange: i,
   panelStyle: l,
-  selected: d,
-  tabHolderStyle: h,
+  selected: f,
+  tabHolderStyle: n,
   type: w,
   ...S
 }) => {
-  const [g, j] = n(null), [b, N] = n(!1), [x, E] = n(!1), f = W(null), o = k({ layout: e, overflowStart: b, overflowEnd: x, type: w });
-  return u(() => {
+  const [g, j] = d(null), [b, N] = d(!1), [x, E] = d(!1), m = W(null), o = k({ layout: e, overflowStart: b, overflowEnd: x, type: w });
+  return h(() => {
     const c = () => {
-      const y = f.current?.querySelector('[role="tablist"]');
+      const y = m.current?.querySelector('[role="tablist"]');
       if (y) {
         const { scrollWidth: I, clientWidth: L, scrollLeft: C } = y;
         I > L ? (N(C > 1), E(C < I - L - 1)) : (N(!1), E(!1));
       }
     };
     c();
-    const T = f.current?.querySelector('[role="tablist"]');
+    const T = m.current?.querySelector('[role="tablist"]');
     return T?.addEventListener("scroll", c), window.addEventListener("resize", c), () => {
       T?.removeEventListener("scroll", c), window.removeEventListener("resize", c);
     };
@@ -72,24 +73,24 @@ const F = (r) => {
       defaultSelected: s,
       onChange: i,
       panel: g,
-      selected: d,
+      selected: f,
       type: w,
       children: /* @__PURE__ */ t(
-        v.div,
+        p.div,
         {
-          className: p(a, o.root, A.TabSet),
+          className: u(a, o.root, A.TabSet),
           ...S,
-          children: r && /* @__PURE__ */ m(q, { children: [
-            /* @__PURE__ */ m(
-              v.div,
+          children: r && /* @__PURE__ */ v(q, { children: [
+            /* @__PURE__ */ v(
+              p.div,
               {
-                ...h,
-                ref: f,
-                className: p(o.listHolder, h?.className),
+                ...n,
+                ref: m,
+                className: u(o.listHolder, n?.className),
                 children: [
                   b && /* @__PURE__ */ t("div", { className: o.overflowStartIndicator }),
                   x && /* @__PURE__ */ t("div", { className: o.overflowEndIndicator }),
-                  /* @__PURE__ */ m(
+                  /* @__PURE__ */ v(
                     z,
                     {
                       render: /* @__PURE__ */ t("div", { className: o.list, role: "tablist" }),
@@ -105,10 +106,10 @@ const F = (r) => {
               }
             ),
             /* @__PURE__ */ t(
-              v.div,
+              p.div,
               {
                 ...l,
-                className: p(o.panel, l?.className),
+                className: u(o.panel, l?.className),
                 "data-testid": l?.["data-testid"] ?? H(S["data-testid"], "panel"),
                 ref: j
               }

package/dist/components/TabSet/TabSet.styles.d.ts

@@ -9,17 +9,11 @@ export declare const tabSet: import('../../styled-system/types').SlotRecipeRunti
             list: {
                 justifyContent: "center";
             };
-            activeIndicator: {
-                left: "[50%]";
-            };
         };
         'top-right': {
             list: {
                 justifyContent: "flex-end";
             };
-            activeIndicator: {
-                left: "[100%]";
-            };
         };
     };
     overflowEnd: {

package/dist/components/TabSet/TabSet.styles.js

@@ -102,17 +102,11 @@ const e = t({
       "top-center": {
         list: {
           justifyContent: "center"
-        },
-        activeIndicator: {
-          left: "[50%]"
         }
       },
       "top-right": {
         list: {
           justifyContent: "flex-end"
-        },
-        activeIndicator: {
-          left: "[100%]"
         }
       }
     },

package/dist/components/TabSet/TabSetProvider.js

@@ -1,91 +1,101 @@
-import { jsx as y } from "react/jsx-runtime";
-import { createContext as H, useState as d, useMemo as T, useCallback as h, useEffect as j } from "react";
-import { useControlledState as k } from "../../hooks/useControlledState.js";
-const z = H(
+import { jsx as j } from "react/jsx-runtime";
+import { createContext as k, useState as l, useMemo as T, useCallback as h, useEffect as z } from "react";
+import { useControlledState as A } from "../../hooks/useControlledState.js";
+const E = k(
   void 0
-), A = ({
+), H = ({
   children: C,
-  defaultSelected: I,
-  onChange: f,
-  panel: v,
-  selected: N,
-  type: w
+  defaultSelected: N,
+  onChange: x,
+  panel: m,
+  selected: P,
+  type: v
 }) => {
-  const [S, O] = d(), [r, m] = d(() => /* @__PURE__ */ new Set()), [n, x] = d(
+  const [S, V] = l(), [o, b] = l(() => /* @__PURE__ */ new Set()), [n, f] = l(
     () => /* @__PURE__ */ new Map()
-  ), [b, p] = d(0), { value: i, setValue: u } = k({
+  ), [p, M] = l(0), { value: c, setValue: d } = A({
     component: "IressTabSet",
-    defaultValue: I,
+    defaultValue: N,
     propName: "selected",
-    value: N
-  }), l = T(
-    () => [...r].find(
-      (e, t) => n.has(t) && n.get(t) === i || t === i
+    value: P
+  }), w = T(
+    () => [...o].find(
+      (t, e) => n.has(e) && n.get(e) === c || e === c
     ),
-    [r, i, n]
-  ), V = h(
-    (e, t) => {
-      m((s) => {
-        let a = new Set(s);
-        s.has(e) || (a = new Set(s).add(e), p((c) => c + 1));
-        const o = [...a].indexOf(e);
-        return t !== void 0 && x((c) => {
-          const M = new Map(c);
-          return M.set(o, t), M;
+    [o, c, n]
+  ), g = h(
+    (t, e) => {
+      b((s) => {
+        if (s.has(t)) {
+          if (e !== void 0) {
+            const r = [...s].indexOf(t);
+            f((u) => {
+              const O = new Map(u);
+              return O.set(r, e), O;
+            });
+          }
+          return s;
+        }
+        const a = new Set(s).add(t), i = [...a].indexOf(t);
+        return e !== void 0 && f((r) => {
+          const u = new Map(r);
+          return u.set(i, e), u;
         }), a;
-      });
+      }), M((s) => s + 1);
     },
     []
-  ), g = h((e) => {
-    m((t) => {
-      const s = new Set(t), a = [...s].indexOf(e);
-      return s.delete(e), p((o) => o + 1), x((o) => {
-        if (!o.has(a)) return o;
-        const c = new Map(o);
-        return c.delete(a), c;
+  ), I = h((t) => {
+    b((e) => {
+      const s = new Set(e), a = [...s].indexOf(t);
+      return s.delete(t), f((i) => {
+        if (!i.has(a)) return i;
+        const r = new Map(i);
+        return r.delete(a), r;
       }), s;
-    });
+    }), M((e) => e + 1), V(
+      (e) => e === t ? void 0 : e
+    );
   }, []);
-  j(() => {
-    i === void 0 && r.size && u(n.get(0) ?? 0);
-  }, [r, i, u, n]);
-  const P = T(
+  z(() => {
+    c === void 0 && o.size && d(n.get(0) ?? 0);
+  }, [o, c, d, n]);
+  const y = T(
     () => ({
-      active: l,
-      activate(e) {
-        if (!e) return;
-        const t = [...r].indexOf(e), s = n.get(t);
-        f?.({ index: t, value: s }), u(s ?? t);
+      active: w,
+      activate(t) {
+        if (!t) return;
+        const e = [...o].indexOf(t), s = n.get(e);
+        x?.({ index: e, value: s }), d(s ?? e);
       },
-      isActive: (e) => e ? l === e : !1,
+      isActive: (t) => t ? w === t : !1,
       hover: S,
-      layoutVersion: b,
-      panel: v,
-      register: V,
-      setHover: (e) => {
-        O(e);
+      layoutVersion: p,
+      panel: m,
+      register: g,
+      setHover: (t) => {
+        V(t);
       },
-      unregister: g,
-      type: w
+      unregister: I,
+      type: v
     }),
     [
-      l,
+      w,
       S,
-      b,
-      v,
-      V,
+      p,
+      m,
       g,
-      w,
-      r,
+      I,
+      v,
+      o,
       n,
-      f,
-      u
+      x,
+      d
     ]
   );
-  return /* @__PURE__ */ y(z.Provider, { value: P, children: C });
+  return /* @__PURE__ */ j(E.Provider, { value: y, children: C });
 };
-A.displayName = "TabSetProvider";
+H.displayName = "TabSetProvider";
 export {
-  z as TabSetContext,
-  A as TabSetProvider
+  E as TabSetContext,
+  H as TabSetProvider
 };