@iress-oss/ids-components 6.0.0-alpha.0 → 6.0.0-alpha.2

package/dist/components/TabSet/Tab/Tab.js

@@ -1,145 +1,145 @@
-import { jsxs as I, Fragment as L, jsx as m } from "react/jsx-runtime";
-import { forwardRef as D, useRef as M, useContext as N, useImperativeHandle as R, useLayoutEffect as $, useCallback as g, useMemo as j } from "react";
-import { idsLogger as F } from "../../../helpers/utility/idsLogger.js";
-import { useIdIfNeeded as K } from "../../../hooks/useIdIfNeeded.js";
-import { createPortal as q } from "react-dom";
-import { s as G } from "../../../factory-DHLOr79I.js";
-import { tab as U } from "./Tab.styles.js";
-import { c as Y } from "../../../cx-DN21T1EH.js";
-import { a as h } from "../../../floating-ui.react-CPN4oQCc.js";
-import { focusableElements as z } from "../../../helpers/dom/focusableElements.js";
-import { GlobalCSSClass as B } from "../../../enums.js";
-import { TabSetContext as J } from "../TabSetProvider.js";
-const O = (a, e, i, n) => {
-  var s;
-  const t = a.querySelector("[id]"), r = t == null ? void 0 : t.getAttribute("id");
-  t == null || t.removeAttribute("id"), a.removeAttribute("tabindex"), a.removeAttribute("data-active"), a.removeAttribute("aria-selected"), (s = i.ref) == null || s.call(i, e), e.tabIndex = n ? 0 : -1, n ? e.setAttribute("data-active", "") : e.removeAttribute("data-active"), r && e.setAttribute("id", r), e.setAttribute("aria-selected", String(n));
-}, Q = ({
-  activate: a,
+import { jsxs as k, Fragment as E, jsx as u } from "react/jsx-runtime";
+import { forwardRef as M, useRef as L, useContext as D, useImperativeHandle as N, useLayoutEffect as R, useCallback as S, useMemo as $ } from "react";
+import { idsLogger as j } from "../../../helpers/utility/idsLogger.js";
+import { useIdIfNeeded as F } from "../../../hooks/useIdIfNeeded.js";
+import { createPortal as H } from "react-dom";
+import { s as K } from "../../../factory-oPXoMw9H.js";
+import { tab as q } from "./Tab.styles.js";
+import { c as G } from "../../../cx-DN21T1EH.js";
+import { a as U } from "../../../floating-ui.react-BetVZ099.js";
+import { focusableElements as W } from "../../../helpers/dom/focusableElements.js";
+import { GlobalCSSClass as Y } from "../../../enums.js";
+import { TabSetContext as z } from "../TabSetProvider.js";
+const B = (i, e, s, n) => {
+  const t = i.querySelector("[id]"), r = t?.getAttribute("id");
+  t?.removeAttribute("id"), i.removeAttribute("tabindex"), i.removeAttribute("data-active"), i.removeAttribute("aria-selected"), s.ref?.(e), e.tabIndex = n ? 0 : -1, n ? e.setAttribute("data-active", "") : e.removeAttribute("data-active"), r && e.setAttribute("id", r), e.setAttribute("aria-selected", String(n));
+}, J = ({
+  activate: i,
   children: e,
-  selected: i,
+  selected: s,
   ...n
-}) => /* @__PURE__ */ m(
-  h,
+}) => /* @__PURE__ */ u(
+  U,
   {
-    render: (t) => /* @__PURE__ */ m(
+    render: (t) => /* @__PURE__ */ u(
       "div",
       {
         ...n,
         ...t,
-        "aria-selected": i,
-        onClick: () => a(),
-        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && a(),
+        "aria-selected": s,
+        onClick: () => i(),
+        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && i(),
         ref: (r) => {
           if (!r) return;
-          const s = z(r)[0];
-          s && O(
+          const m = W(r)[0];
+          m && B(
             r,
-            s,
+            m,
             t,
-            i
+            s
           );
         },
         children: e
       }
     )
   }
-), V = ({
-  active: a,
+), O = ({
+  active: i,
   children: e,
-  className: i,
+  className: s,
   "data-testid": n,
   href: t,
   label: r,
-  type: s = "button",
-  value: C,
-  ...l
-}, x) => {
-  const u = K({ id: l.id }), b = M(null), c = N(J), { register: p, unregister: A, setHover: d } = c ?? {}, { onMouseEnter: v, onMouseLeave: w } = l;
-  R(x, () => b.current), $(() => {
-    const o = b.current;
+  type: m = "button",
+  value: v,
+  ...b
+}, T) => {
+  const c = F({ id: b.id }), d = L(null), a = D(z), { register: A, unregister: g, setHover: f } = a ?? {}, { onMouseEnter: w, onMouseLeave: y } = b;
+  N(T, () => d.current), R(() => {
+    const o = d.current;
     if (o)
-      return p == null || p(o, C), () => A == null ? void 0 : A(o);
-  }, [p, A, C]);
-  const y = c ? c.isActive(b.current) : a, S = Y(
-    i,
-    U({ active: y, insideTabSet: !!c }),
-    B.Tab
-  ), k = g(
+      return A?.(o, v), () => g?.(o);
+  }, [A, g, v]);
+  const p = a ? a.isActive(d.current) : i, h = G(
+    s,
+    q({ active: p, insideTabSet: !!a }),
+    Y.Tab
+  ), x = S(
     (o) => {
-      v == null || v(o), d == null || d(o.currentTarget);
+      w?.(o), f?.(o.currentTarget);
     },
-    [v, d]
-  ), E = g(
+    [w, f]
+  ), I = S(
     (o) => {
-      w == null || w(o), d == null || d();
+      y?.(o), f?.();
     },
-    [w, d]
-  ), T = j(
-    () => G(t ? "a" : "button"),
+    [y, f]
+  ), C = $(
+    () => K(t ? "a" : "button"),
     [t]
   );
-  if (e && t && F(
+  if (e && t && j(
     "IressTab: You should not use `children` with `href` prop, as the `children` will be seen before the page navigates."
-  ), c) {
-    const o = e && y;
-    return /* @__PURE__ */ I(L, { children: [
-      /* @__PURE__ */ m(
-        Q,
+  ), a) {
+    const o = e && p;
+    return /* @__PURE__ */ k(E, { children: [
+      /* @__PURE__ */ u(
+        J,
         {
-          activate: () => c.activate(b.current),
-          selected: y,
-          children: /* @__PURE__ */ m(
-            T,
+          activate: () => a.activate(d.current),
+          selected: p,
+          children: /* @__PURE__ */ u(
+            C,
             {
-              className: S,
-              "aria-controls": e ? `${u}--panel` : void 0,
+              className: h,
+              "aria-controls": e ? `${c}--panel` : void 0,
               role: "tab",
               "data-testid": n,
-              ...l,
+              ...b,
               href: t,
-              id: u,
-              onMouseEnter: k,
-              onMouseLeave: E,
-              ref: b,
-              type: s,
+              id: c,
+              onMouseEnter: x,
+              onMouseLeave: I,
+              ref: d,
+              type: m,
               children: r
             }
           )
         }
       ),
-      o && c.panel && q(
-        /* @__PURE__ */ m(
+      a.panel && H(
+        /* @__PURE__ */ u(
           "div",
           {
-            "aria-labelledby": u,
-            id: `${u}--panel`,
+            "aria-labelledby": c,
+            id: `${c}--panel`,
             role: "tabpanel",
-            onKeyDown: (f) => {
-              (f.key === "ArrowLeft" || f.key === "ArrowRight" || f.key === "ArrowUp" || f.key === "ArrowDown") && f.stopPropagation();
+            onKeyDown: (l) => {
+              (l.key === "ArrowLeft" || l.key === "ArrowRight" || l.key === "ArrowUp" || l.key === "ArrowDown") && l.stopPropagation();
             },
+            hidden: !o,
             children: e
           }
         ),
-        c.panel,
-        `${u}--panel`
+        a.panel,
+        `${c}--panel`
       )
     ] });
   }
-  return /* @__PURE__ */ m(
-    T,
+  return /* @__PURE__ */ u(
+    C,
     {
-      className: S,
+      className: h,
       "data-testid": n,
-      ...l,
+      ...b,
       href: t,
-      id: u,
-      ref: b,
-      type: s,
+      id: c,
+      ref: d,
+      type: m,
       children: r
     }
   );
-}, nt = D(V);
+}, ae = M(O);
 export {
-  nt as IressTab
+  ae as IressTab
 };

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

@@ -1,4 +1,4 @@
-import { a as t } from "../../../cva-B2x59Dph.js";
+import { c as t } from "../../../cva-JiDXAa83.js";
 const e = t({
   base: {
     alignItems: "center",
@@ -7,8 +7,8 @@ const e = t({
     display: "inline-flex",
     minHeight: "input.height",
     position: "relative",
-    px: "spacing.250",
-    py: "spacing.300",
+    px: "spacing.3",
+    py: "spacing.3",
     textOverflow: "ellipsis",
     textDecoration: "none",
     textStyle: "typography.body.md",

package/dist/components/TabSet/TabSet.js

@@ -1,83 +1,96 @@
-import { jsx as e, jsxs as m, Fragment as u } from "react/jsx-runtime";
-import { C as x } from "../../floating-ui.react-CPN4oQCc.js";
-import { propagateTestid as y } from "../../helpers/utility/propagateTestid.js";
-import { TabSetProvider as T, TabSetContext as d } from "./TabSetProvider.js";
-import { useState as n, useContext as f, useEffect as p } from "react";
-import { s as C } from "../../factory-DHLOr79I.js";
-import { tabSet as N } from "./TabSet.styles.js";
-import { c as I } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as S } from "../../enums.js";
-const $ = (s) => {
-  const [a, r] = n({}), t = f(d);
-  return p(() => {
-    if (t != null && t.hover) {
-      const { offsetLeft: o, scrollWidth: l } = t.hover;
-      r({
-        opacity: 1,
-        left: `${o}px`,
-        width: `${l}px`
-      });
-    } else
-      r((o) => ({
-        ...o,
-        opacity: 0
-      }));
-  }, [t == null ? void 0 : t.hover]), /* @__PURE__ */ e("div", { ...s, style: a });
-}, g = (s) => {
-  const [a, r] = n({}), t = f(d);
-  return p(() => {
-    const o = setTimeout(() => {
-      if (t != null && t.active) {
-        const { offsetLeft: l, scrollWidth: c } = t.active;
-        r({
-          left: `${l}px`,
-          width: `${c}px`
+import { jsx as e, jsxs as p, Fragment as N } from "react/jsx-runtime";
+import { C as T } from "../../floating-ui.react-BetVZ099.js";
+import { propagateTestid as C } from "../../helpers/utility/propagateTestid.js";
+import { TabSetProvider as y, TabSetContext as v } from "./TabSetProvider.js";
+import { useState as u, useContext as h, useEffect as x, useRef as I } from "react";
+import { s as n } from "../../factory-oPXoMw9H.js";
+import { tabSet as $ } from "./TabSet.styles.js";
+import { c as m } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as g } from "../../enums.js";
+const j = (r) => {
+  const a = I({}), s = h(v);
+  let t;
+  if (s?.hover) {
+    const { offsetLeft: c, scrollWidth: o } = s.hover;
+    t = {
+      opacity: 1,
+      left: `${c}px`,
+      width: `${o}px`
+    };
+  } else
+    t = {
+      // eslint-disable-next-line react-hooks/refs -- we want to persist the previous style
+      ...a.current,
+      opacity: 0
+    };
+  return x(() => {
+    s?.hover && (a.current = t);
+  }, [s?.hover, t]), /* @__PURE__ */ e("div", { ...r, style: t });
+}, w = (r) => {
+  const [a, s] = u({}), t = h(v);
+  return x(() => {
+    const c = setTimeout(() => {
+      if (t?.active) {
+        const { offsetLeft: o, scrollWidth: l } = t.active;
+        s({
+          left: `${o}px`,
+          width: `${l}px`
         });
       }
     }, 150);
-    return () => clearTimeout(o);
-  }, [t == null ? void 0 : t.active]), /* @__PURE__ */ e("div", { ...s, style: a });
-}, G = ({
-  children: s,
+    return () => clearTimeout(c);
+  }, [t?.active]), /* @__PURE__ */ e("div", { ...r, style: a });
+}, k = ({
+  children: r,
   className: a,
-  defaultSelected: r,
+  defaultSelected: s,
   layout: t = "top-left",
-  onChange: o,
+  onChange: c,
+  panelStyle: o,
   selected: l,
-  ...c
+  tabHolderStyle: d,
+  ...f
 }) => {
-  const [v, h] = n(null), i = N({ layout: t });
+  const [S, b] = u(null), i = $({ layout: t });
   return /* @__PURE__ */ e(
-    T,
+    y,
     {
-      defaultSelected: r,
-      onChange: o,
-      panel: v,
+      defaultSelected: s,
+      onChange: c,
+      panel: S,
       selected: l,
       children: /* @__PURE__ */ e(
-        C.div,
+        n.div,
         {
-          className: I(a, i.root, S.TabSet),
-          ...c,
-          children: s && /* @__PURE__ */ m(u, { children: [
-            /* @__PURE__ */ m("div", { className: i.listHolder, children: [
-              /* @__PURE__ */ e(g, { className: i.activeIndicator }),
-              /* @__PURE__ */ e($, { className: i.hoverIndicator }),
-              /* @__PURE__ */ e(
-                x,
-                {
-                  render: /* @__PURE__ */ e("div", { className: i.list, role: "tablist" }),
-                  loop: !1,
-                  children: s
-                }
-              )
-            ] }),
+          className: m(a, i.root, g.TabSet),
+          ...f,
+          children: r && /* @__PURE__ */ p(N, { children: [
+            /* @__PURE__ */ p(
+              n.div,
+              {
+                ...d,
+                className: m(i.listHolder, d?.className),
+                children: [
+                  /* @__PURE__ */ e(w, { className: i.activeIndicator }),
+                  /* @__PURE__ */ e(j, { className: i.hoverIndicator }),
+                  /* @__PURE__ */ e(
+                    T,
+                    {
+                      render: /* @__PURE__ */ e("div", { className: i.list, role: "tablist" }),
+                      loop: !1,
+                      children: r
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ e(
-              "div",
+              n.div,
               {
-                className: i.panel,
-                "data-testid": y(c["data-testid"], "panel"),
-                ref: h
+                ...o,
+                className: m(i.panel, o?.className),
+                "data-testid": o?.["data-testid"] ?? C(f["data-testid"], "panel"),
+                ref: b
               }
             )
           ] })
@@ -87,5 +100,5 @@ const $ = (s) => {
   );
 };
 export {
-  G as IressTabSet
+  k as IressTabSet
 };

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

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-TRyehFkb.js";
+import { s as t } from "../../sva-OmxClA9g.js";
 const e = t({
   slots: [
     "root",
@@ -18,7 +18,7 @@ const e = t({
       flexWrap: "wrap",
       borderBottom: "divider",
       "& > :has(.ids-badge)": {
-        mr: "spacing.350"
+        mr: "spacing.4"
       }
     },
     listHolder: {
@@ -41,8 +41,8 @@ const e = t({
     },
     hoverIndicator: {
       position: "absolute",
-      top: "spacing.150",
-      bottom: "spacing.150",
+      top: "spacing.2",
+      bottom: "spacing.2",
       left: "[0]",
       bg: "colour.primary.surfaceHover",
       transition: "all",

package/dist/components/TabSet/TabSetProvider.js

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