@iress-oss/ids-components 6.0.0-alpha.17 → 6.0.0-alpha.19

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

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

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

@@ -12,6 +12,9 @@ export declare const tab: import('../../../styled-system/types').RecipeRuntimeFn
             _hover: {
                 bg: "[none]";
             };
+            _focusVisible: {
+                layerStyle: "elevation.focusCompact";
+            };
         };
     };
 }>;

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

@@ -1,5 +1,5 @@
 import { c as t } from "../../../cva-DtPMccE9.js";
-const e = t({
+const o = t({
   base: {
     alignItems: "center",
     borderBottom: "[2px solid transparent]",
@@ -39,11 +39,14 @@ const e = t({
         borderBottomWidth: "0px",
         _hover: {
           bg: "[none]"
+        },
+        _focusVisible: {
+          layerStyle: "elevation.focusCompact"
         }
       }
     }
   }
 });
 export {
-  e as tab
+  o as tab
 };

package/dist/components/TabSet/TabSet.js

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

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

@@ -1,4 +1,4 @@
-export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root" | "panel" | "hoverIndicator" | "listHolder" | "activeIndicator", {
+export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root" | "panel" | "hoverIndicator" | "listHolder" | "activeIndicator" | "overflowEndIndicator" | "overflowStartIndicator", {
     layout: {
         'top-left': {
             list: {
@@ -22,4 +22,33 @@ export declare const tabSet: import('../../styled-system/types').SlotRecipeRunti
             };
         };
     };
+    overflowEnd: {
+        true: {
+            overflowEndIndicator: {
+                layerStyle: "elevation.overflow";
+                position: "absolute";
+                top: "spacing.0";
+                bottom: "spacing.1";
+                right: "spacing.0";
+                width: "input.4";
+                pointerEvents: "[none]";
+                maskImage: "[linear-gradient(to right, transparent 30%, black 100%)]";
+            };
+        };
+    };
+    overflowStart: {
+        true: {
+            overflowStartIndicator: {
+                layerStyle: "elevation.overflow";
+                position: "absolute";
+                top: "spacing.0";
+                bottom: "spacing.1";
+                left: "spacing.0";
+                width: "input.4";
+                pointerEvents: "[none]";
+                maskImage: "[linear-gradient(to right, transparent 30%, black 100%)]";
+                transform: "[rotate(180deg)]";
+            };
+        };
+    };
 }>;

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

@@ -6,26 +6,43 @@ const e = t({
     "listHolder",
     "panel",
     "activeIndicator",
-    "hoverIndicator"
+    "hoverIndicator",
+    "overflowEndIndicator",
+    "overflowStartIndicator"
   ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow overflow)
+      contain: "layout style",
       bg: "colour.neutral.10",
       borderRadius: "radius.system.layout"
     },
-    list: {
-      display: "flex",
-      flexWrap: "wrap",
-      borderBottom: "divider",
-      "& > :has(.ids-badge)": {
-        mr: "spacing.4"
+    listHolder: {
+      position: "relative",
+      overflowX: "clip",
+      overflowY: "visible",
+      pt: "spacing.2",
+      _after: {
+        content: '""',
+        position: "absolute",
+        bottom: "spacing.1",
+        left: "spacing.0",
+        right: "spacing.0",
+        borderBottom: "divider",
+        pointerEvents: "none"
       }
     },
-    listHolder: {
+    list: {
+      display: "flex",
+      flexWrap: "nowrap",
+      scrollable: "x",
+      overflowY: "visible",
+      scrollSnapType: "[x proximity]",
       position: "relative"
     },
     panel: {
       pt: "md",
+      textStyle: "typography.body.md",
       _focusVisible: {
         layerStyle: "elevation.focus",
         outline: "[none]"
@@ -33,20 +50,35 @@ const e = t({
     },
     activeIndicator: {
       position: "absolute",
-      bottom: "[0]",
+      top: "spacing.1",
+      bottom: "spacing.1",
       left: "[0]",
-      height: "[2px]",
-      bg: "colour.primary.text",
-      transition: "all"
+      bg: "colour.neutral.20",
+      transition: "all",
+      borderRadius: "radius.075",
+      borderBottomRadius: "none",
+      pointerEvents: "none",
+      _after: {
+        content: '""',
+        position: "absolute",
+        bottom: "spacing.0",
+        left: "spacing.0",
+        right: "spacing.0",
+        height: "[2px]",
+        bg: "colour.primary.text",
+        transition: "all",
+        zIndex: "[2]"
+      }
     },
     hoverIndicator: {
       position: "absolute",
-      top: "spacing.2",
-      bottom: "spacing.2",
+      top: "spacing.1",
+      bottom: "spacing.1",
       left: "[0]",
-      bg: "colour.neutral.20",
+      bg: "colour.primary.surfaceHover",
       transition: "all",
-      borderRadius: "radius.system.button",
+      borderRadius: "radius.075",
+      borderBottomRadius: "none",
       pointerEvents: "none"
     }
   },
@@ -73,6 +105,35 @@ const e = t({
           left: "[100%]"
         }
       }
+    },
+    overflowEnd: {
+      true: {
+        overflowEndIndicator: {
+          layerStyle: "elevation.overflow",
+          position: "absolute",
+          top: "spacing.0",
+          bottom: "spacing.1",
+          right: "spacing.0",
+          width: "input.4",
+          pointerEvents: "[none]",
+          maskImage: "[linear-gradient(to right, transparent 30%, black 100%)]"
+        }
+      }
+    },
+    overflowStart: {
+      true: {
+        overflowStartIndicator: {
+          layerStyle: "elevation.overflow",
+          position: "absolute",
+          top: "spacing.0",
+          bottom: "spacing.1",
+          left: "spacing.0",
+          width: "input.4",
+          pointerEvents: "[none]",
+          maskImage: "[linear-gradient(to right, transparent 30%, black 100%)]",
+          transform: "[rotate(180deg)]"
+        }
+      }
     }
   },
   defaultVariants: {

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

@@ -20,6 +20,12 @@ export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeF
                 _active: {
                     boxShadow: "color-mix(in srgb, {colors.colour.primary.surface}, transparent 60%) 0px 0px 0px 3px";
                 };
+                _focus: {
+                    outline: "[none]";
+                };
+                _focusVisible: {
+                    layerStyle: "elevation.focus";
+                };
             };
         };
     };