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

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,7 +6,9 @@ const e = t({
     "listHolder",
     "panel",
     "activeIndicator",
-    "hoverIndicator"
+    "hoverIndicator",
+    "overflowEndIndicator",
+    "overflowStartIndicator"
   ],
   base: {
     root: {
@@ -15,19 +17,32 @@ const e = t({
       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]"
@@ -35,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"
     }
   },
@@ -75,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/{index-Bm5rQqn5.js → index-0AvnPY9d.js}

@@ -8,7 +8,7 @@ const s = {
     variable: "var(--borders-divider)"
   },
   "borders.input": {
-    value: "1px solid var(--iress-colour-neutral-70, #5D6C7E)",
+    value: "1px solid var(--iress-colour-neutral-70, #6D7278)",
     variable: "var(--borders-input)"
   },
   "borders.placeholder": {
@@ -16,7 +16,7 @@ const s = {
     variable: "var(--borders-placeholder)"
   },
   "borders.hover": {
-    value: "1px solid var(--iress-colour-primary-fill, #1D1F4B)",
+    value: "1px solid var(--iress-colour-primary-fill, #003271)",
     variable: "var(--borders-hover)"
   },
   "borders.table": {
@@ -24,11 +24,11 @@ const s = {
     variable: "var(--borders-table)"
   },
   "colors.colour.primary.fill": {
-    value: "var(--iress-colour-primary-fill, #1D1F4B)",
+    value: "var(--iress-colour-primary-fill, #003271)",
     variable: "var(--colors-colour\\.primary\\.fill)"
   },
   "colors.colour.primary.fillHover": {
-    value: "var(--iress-colour-primary-fill-hover, #0D0E24)",
+    value: "var(--iress-colour-primary-fill-hover, #002352)",
     variable: "var(--colors-colour\\.primary\\.fill-hover)"
   },
   "colors.colour.primary.onFill": {
@@ -36,15 +36,15 @@ const s = {
     variable: "var(--colors-colour\\.primary\\.on-fill)"
   },
   "colors.colour.primary.surface": {
-    value: "var(--iress-colour-primary-surface, #E9E9ED)",
+    value: "var(--iress-colour-primary-surface, #EBF3FF)",
     variable: "var(--colors-colour\\.primary\\.surface)"
   },
   "colors.colour.primary.surfaceHover": {
-    value: "var(--iress-colour-primary-surface-hover, #D2D2DB)",
+    value: "var(--iress-colour-primary-surface-hover, #DCEAFE)",
     variable: "var(--colors-colour\\.primary\\.surface-hover)"
   },
   "colors.colour.primary.text": {
-    value: "var(--iress-colour-primary-text, #141F4D)",
+    value: "var(--iress-colour-primary-text, #003271)",
     variable: "var(--colors-colour\\.primary\\.text)"
   },
   "colors.colour.neutral.10": {
@@ -72,7 +72,7 @@ const s = {
     variable: "var(--colors-colour\\.neutral\\.60)"
   },
   "colors.colour.neutral.70": {
-    value: "var(--iress-colour-neutral-70, #5D6C7E)",
+    value: "var(--iress-colour-neutral-70, #6D7278)",
     variable: "var(--colors-colour\\.neutral\\.70)"
   },
   "colors.colour.neutral.80": {
@@ -80,7 +80,7 @@ const s = {
     variable: "var(--colors-colour\\.neutral\\.80)"
   },
   "colors.colour.neutral.90": {
-    value: "var(--iress-colour-neutral-90, #13213F)",
+    value: "var(--iress-colour-neutral-90, #141F4D)",
     variable: "var(--colors-colour\\.neutral\\.90)"
   },
   "colors.colour.accent.1": {
@@ -112,7 +112,7 @@ const s = {
     variable: "var(--colors-colour\\.system\\.success\\.surface-hover)"
   },
   "colors.colour.system.success.text": {
-    value: "var(--iress-colour-system-success-text, #0A2E25)",
+    value: "var(--iress-colour-system-success-text, #124d3d)",
     variable: "var(--colors-colour\\.system\\.success\\.text)"
   },
   "colors.colour.system.danger.fill": {
@@ -136,7 +136,7 @@ const s = {
     variable: "var(--colors-colour\\.system\\.danger\\.surface-hover)"
   },
   "colors.colour.system.danger.text": {
-    value: "var(--iress-colour-system-danger-text, #2D0909)",
+    value: "var(--iress-colour-system-danger-text, #8a1f1f)",
     variable: "var(--colors-colour\\.system\\.danger\\.text)"
   },
   "colors.colour.system.warning.fill": {
@@ -156,7 +156,7 @@ const s = {
     variable: "var(--colors-colour\\.system\\.warning\\.surface)"
   },
   "colors.colour.system.warning.text": {
-    value: "var(--iress-colour-system-warning-text, #2B1F00)",
+    value: "var(--iress-colour-system-warning-text, #6b4700)",
     variable: "var(--colors-colour\\.system\\.warning\\.text)"
   },
   "colors.colour.system.warning.surfaceHover": {
@@ -180,7 +180,7 @@ const s = {
     variable: "var(--colors-colour\\.system\\.info\\.surface)"
   },
   "colors.colour.system.info.text": {
-    value: "var(--iress-colour-system-info-text, #121D33)",
+    value: "var(--iress-colour-system-info-text, #203a75)",
     variable: "var(--colors-colour\\.system\\.info\\.text)"
   },
   "colors.colour.system.info.surfaceHover": {
@@ -188,7 +188,7 @@ const s = {
     variable: "var(--colors-colour\\.system\\.info\\.surface-hover)"
   },
   "colors.colour.system.backdrop.fill": {
-    value: "var(--iress-colour-system-backdrop-fill, #393F46CC)",
+    value: "var(--iress-colour-system-backdrop-fill, #61656bcc)",
     variable: "var(--colors-colour\\.system\\.backdrop\\.fill)"
   },
   "colors.colour.data.subtle.10": {
@@ -276,7 +276,7 @@ const s = {
     variable: "var(--colors-alt)"
   },
   "colors.muted": {
-    value: "var(--iress-colour-neutral-70, #5D6C7E)",
+    value: "var(--iress-colour-neutral-70, #6D7278)",
     variable: "var(--colors-muted)"
   },
   "colors.text": {