@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

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

@@ -1,145 +1,162 @@
-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,
+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-CcYfm2kB.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-B0nDXRN6.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,
-  ...n
+  selected: c,
+  ...a
 }) => /* @__PURE__ */ u(
-  U,
+  Y,
   {
     render: (t) => /* @__PURE__ */ u(
       "div",
       {
-        ...n,
+        ...a,
         ...t,
-        "aria-selected": s,
-        onClick: () => i(),
-        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && i(),
+        "aria-selected": c,
+        onClick: () => n(),
+        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && n(),
         ref: (r) => {
           if (!r) return;
-          const m = W(r)[0];
-          m && B(
+          const l = z(r)[0];
+          l && O(
             r,
-            m,
+            l,
             t,
-            s
+            c
           );
         },
         children: e
       }
     )
   }
-), O = ({
-  active: i,
+);
+k.displayName = "TabInsideTabSet";
+const P = ({
+  active: n,
   children: e,
-  className: s,
-  "data-testid": n,
+  className: c,
+  "data-testid": a,
   href: t,
   label: r,
-  type: m = "button",
+  type: l = "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 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) => {
-      w?.(o), f?.(o.currentTarget);
+  ...f
+}, x) => {
+  const d = q({ id: f.id }), s = S(null), o = R(J), { register: A, unregister: y, setHover: p } = o ?? {}, { onMouseEnter: T, onMouseLeave: g } = f, w = S(!0);
+  $(x, () => s.current), j(() => {
+    const i = s.current;
+    if (i)
+      return A?.(i, v), () => y?.(i);
+  }, [A, y, v]);
+  const m = o ? o.isActive(s.current) : n;
+  F(() => {
+    if (m && s.current && o) {
+      if (w.current) {
+        w.current = !1;
+        return;
+      }
+      s.current.scrollIntoView?.({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center"
+      });
+    }
+  }, [m, o]);
+  const I = W(
+    c,
+    V({ active: m, insideTabSet: !!o, tabSetType: o?.type }),
+    B.Tab
+  ), E = C(
+    (i) => {
+      T?.(i), p?.(i.currentTarget);
     },
-    [w, f]
-  ), I = S(
-    (o) => {
-      y?.(o), f?.();
+    [T, p]
+  ), M = C(
+    (i) => {
+      g?.(i), p?.();
     },
-    [y, f]
-  ), C = $(
-    () => K(t ? "a" : "button"),
+    [g, p]
+  ), h = H(
+    () => U(t ? "a" : "button"),
     [t]
   );
-  if (e && t && j(
+  if (e && t && K(
     "IressTab: You should not use `children` with `href` prop, as the `children` will be seen before the page navigates."
-  ), a) {
-    const o = e && p;
-    return /* @__PURE__ */ k(E, { children: [
+  ), o) {
+    const i = e && m;
+    return /* @__PURE__ */ L(N, { children: [
       /* @__PURE__ */ u(
-        J,
+        k,
         {
-          activate: () => a.activate(d.current),
-          selected: p,
+          activate: () => o.activate(s.current),
+          selected: m,
           children: /* @__PURE__ */ u(
-            C,
+            h,
             {
-              className: h,
-              "aria-controls": e ? `${c}--panel` : void 0,
+              className: I,
+              "aria-controls": e ? `${d}--panel` : void 0,
               role: "tab",
-              "data-testid": n,
-              ...b,
+              "data-testid": a,
+              ...f,
               href: t,
-              id: c,
-              onMouseEnter: x,
-              onMouseLeave: I,
-              ref: d,
-              type: m,
+              id: d,
+              onMouseEnter: E,
+              onMouseLeave: M,
+              ref: s,
+              type: l,
               children: r
             }
           )
         }
       ),
-      a.panel && H(
+      o.panel && G(
         /* @__PURE__ */ u(
           "div",
           {
-            "aria-labelledby": c,
-            id: `${c}--panel`,
+            "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
           }
         ),
-        a.panel,
-        `${c}--panel`
+        o.panel,
+        `${d}--panel`
       )
     ] });
   }
   return /* @__PURE__ */ u(
-    C,
+    h,
     {
-      className: h,
-      "data-testid": n,
-      ...b,
+      className: I,
+      "data-testid": a,
+      ...f,
       href: t,
-      id: c,
-      ref: d,
-      type: m,
+      id: d,
+      ref: s,
+      type: l,
       children: r
     }
   );
-}, ae = M(O);
+}, Q = D(P);
+Q.displayName = "IressTab";
 export {
-  ae as IressTab
+  Q as IressTab
 };

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

@@ -0,0 +1,28 @@
+export declare const tab: import('../../../styled-system/types').RecipeRuntimeFn<{
+    active: {
+        true: {
+            borderBottomColor: "colour.neutral.90";
+            backgroundColor: "colour.neutral.30";
+            color: "colour.neutral.90";
+        };
+    };
+    insideTabSet: {
+        true: {
+            borderBottomWidth: "0px";
+            backgroundColor: "transparent";
+            _hover: {
+                bg: "[none]";
+            };
+        };
+    };
+    tabSetType: {
+        primary: {
+            textStyle: "typography.body.md.medium";
+            px: "spacing.4";
+        };
+        secondary: {
+            textStyle: "typography.body.sm.medium";
+            px: "spacing.3";
+        };
+    };
+}>;

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

@@ -1,4 +1,4 @@
-import { c as t } from "../../../cva-JiDXAa83.js";
+import { c as t } from "../../../cva-3iuaj0TL.js";
 const e = t({
   base: {
     alignItems: "center",
@@ -7,18 +7,15 @@ const e = t({
     display: "inline-flex",
     minHeight: "input.height",
     position: "relative",
-    px: "spacing.3",
     py: "spacing.3",
     textOverflow: "ellipsis",
     textDecoration: "none",
-    textStyle: "typography.body.md",
     transition: "all",
     whiteSpace: "nowrap",
     width: "[auto]",
-    _focusVisible: {
-      layerStyle: "elevation.focus",
-      outline: "[none]"
-    },
+    borderRadius: "radius.system.layout",
+    borderBottomRadius: "none",
+    focusable: "inset",
     _hover: {
       bg: "colour.neutral.20"
     },
@@ -29,19 +26,33 @@ const e = t({
   variants: {
     active: {
       true: {
-        borderBottomColor: "colour.primary.text",
-        color: "colour.primary.text",
-        textStyle: "typography.body.md.strong"
+        borderBottomColor: "colour.neutral.90",
+        backgroundColor: "colour.neutral.30",
+        color: "colour.neutral.90"
       }
     },
     insideTabSet: {
       true: {
         borderBottomWidth: "0px",
+        backgroundColor: "transparent",
         _hover: {
           bg: "[none]"
         }
       }
+    },
+    tabSetType: {
+      primary: {
+        textStyle: "typography.body.md.medium",
+        px: "spacing.4"
+      },
+      secondary: {
+        textStyle: "typography.body.sm.medium",
+        px: "spacing.3"
+      }
     }
+  },
+  defaultVariants: {
+    tabSetType: "primary"
   }
 });
 export {

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

@@ -0,0 +1,48 @@
+import { TabSetChangedEventDetail } from './TabSetProvider';
+import { ReactNode } from 'react';
+import { FormControlValue, IressStyledProps } from '../../types';
+import { IressCustomiseSlot } from '../../interfaces';
+export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
+    /**
+     * Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+     */
+    children?: ReactNode;
+    /**
+     * Set the selected tab for uncontrolled tabs.
+     * If the `IressTab` does not have a `value` prop, it will match by index.
+     */
+    defaultSelected?: FormControlValue;
+    /**
+     * Layout options for the positioning of tabs.
+     * @default top-left
+     */
+    layout?: 'top-left' | 'top-center' | 'top-right';
+    /**
+     * Emitted when a tab changes.
+     */
+    onChange?: (event: TabSetChangedEventDetail) => void;
+    /**
+     * Custom style for the panel (the area that contains the tab content).
+     */
+    panelStyle?: IressCustomiseSlot;
+    /**
+     * Set the selected tab for controlled tabs.
+     * If the `IressTab` does not have a `value` prop, it will match by index.
+     */
+    selected?: FormControlValue;
+    /**
+     * Custom style for the tab holder (the area that contains the tabs).
+     */
+    tabHolderStyle?: IressCustomiseSlot;
+    /**
+     * The type of the tabs, which determines their styling.
+     * - `primary`: The default tab style, which is more prominent and suitable for main navigation.
+     * - `secondary`: A more subdued tab style, suitable for secondary level of tabs (within expanders)
+     * @default 'primary'
+     */
+    type?: 'primary' | 'secondary';
+}
+export declare const IressTabSet: {
+    ({ children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, type, ...restProps }: IressTabSetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/TabSet/TabSet.js

@@ -1,96 +1,116 @@
-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;
+import { jsx as t, jsxs as m, 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 { tabSet as k } from "./TabSet.styles.js";
+import { c as p } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as A } from "../../enums.js";
+const F = (r) => {
+  const a = W({}), s = $(O);
+  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 });
+}, G = (r) => {
+  const [a, s] = n({}), e = $(O);
+  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 });
-}, k = ({
+    return () => clearTimeout(i);
+  }, [e?.active, e?.layoutVersion]), /* @__PURE__ */ t("div", { ...r, style: a });
+}, P = ({
   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,
+  type: w,
+  ...S
 }) => {
-  const [S, b] = u(null), i = $({ layout: t });
-  return /* @__PURE__ */ e(
-    y,
+  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 c = () => {
+      const y = f.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"]');
+    return T?.addEventListener("scroll", c), window.addEventListener("resize", c), () => {
+      T?.removeEventListener("scroll", c), window.removeEventListener("resize", c);
+    };
+  }, [r]), /* @__PURE__ */ t(
+    R,
     {
       defaultSelected: s,
-      onChange: c,
-      panel: S,
-      selected: l,
-      children: /* @__PURE__ */ e(
-        n.div,
+      onChange: i,
+      panel: g,
+      selected: d,
+      type: w,
+      children: /* @__PURE__ */ t(
+        v.div,
         {
-          className: m(a, i.root, g.TabSet),
-          ...f,
-          children: r && /* @__PURE__ */ p(N, { children: [
-            /* @__PURE__ */ p(
-              n.div,
+          className: p(a, o.root, A.TabSet),
+          ...S,
+          children: r && /* @__PURE__ */ m(q, { children: [
+            /* @__PURE__ */ m(
+              v.div,
               {
-                ...d,
-                className: m(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,
+                  b && /* @__PURE__ */ t("div", { className: o.overflowStartIndicator }),
+                  x && /* @__PURE__ */ t("div", { className: o.overflowEndIndicator }),
+                  /* @__PURE__ */ m(
+                    z,
                     {
-                      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(G, { className: o.activeIndicator }),
+                        /* @__PURE__ */ t(F, { className: o.hoverIndicator }),
+                        r
+                      ]
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ e(
-              n.div,
+            /* @__PURE__ */ t(
+              v.div,
               {
-                ...o,
-                className: m(i.panel, o?.className),
-                "data-testid": o?.["data-testid"] ?? C(f["data-testid"], "panel"),
-                ref: b
+                ...l,
+                className: p(o.panel, l?.className),
+                "data-testid": l?.["data-testid"] ?? H(S["data-testid"], "panel"),
+                ref: j
               }
             )
           ] })
@@ -99,6 +119,7 @@ const j = (r) => {
     }
   );
 };
+P.displayName = "IressTabSet";
 export {
-  k as IressTabSet
+  P as IressTabSet
 };

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

@@ -0,0 +1,64 @@
+export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root" | "hoverIndicator" | "panel" | "listHolder" | "activeIndicator" | "overflowEndIndicator" | "overflowStartIndicator", {
+    layout: {
+        'top-left': {
+            list: {
+                justifyContent: "flex-start";
+            };
+        };
+        'top-center': {
+            list: {
+                justifyContent: "center";
+            };
+            activeIndicator: {
+                left: "[50%]";
+            };
+        };
+        'top-right': {
+            list: {
+                justifyContent: "flex-end";
+            };
+            activeIndicator: {
+                left: "[100%]";
+            };
+        };
+    };
+    overflowEnd: {
+        true: {
+            overflowEndIndicator: {
+                layerStyle: "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: "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)]";
+            };
+        };
+    };
+    type: {
+        primary: {};
+        secondary: {
+            hoverIndicator: {
+                _after: {
+                    bg: "colour.neutral.50";
+                };
+            };
+        };
+    };
+}>;