@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

package/dist/components/Slider/components/SliderTicks.js

@@ -1,10 +1,59 @@
-import "react/jsx-runtime";
-import { S } from "../../../SliderTicks-jPoPzYf3.js";
-import "../../../index-cbHCAGLB.js";
-import "react";
-import "../../../enums.js";
-import "../../../helpers/utility/propagateTestid.js";
-import "../../../constants.js";
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import { slider as n } from "../Slider.styles.js";
+import { c as d } from "../../../cx-DN21T1EH.js";
+import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
+import { s as u } from "../../../factory-oPXoMw9H.js";
+const N = (t, s, e, i, a) => {
+  const c = s === 0 ? t - a : t - (e[s - 1]?.value ?? 0);
+  return `${Number(c / (i - a) * 100)}%`;
+}, T = ({
+  allTickLabels: t,
+  "data-testid": s,
+  index: e,
+  max: i,
+  min: a,
+  tickLabel: c
+}) => {
+  const l = n(), { className: m, label: k, value: r, ...p } = c, h = {
+    "--iress-tick-label-width": N(
+      r,
+      e,
+      t,
+      i,
+      a
+    )
+  };
+  return /* @__PURE__ */ v("div", { className: d(l.tickMark), style: h, children: [
+    /* @__PURE__ */ o("option", { value: r, "data-testid": s }),
+    /* @__PURE__ */ o(
+      u.div,
+      {
+        ...p,
+        className: d(l.tickMarkLabel, m),
+        children: k ?? `${r}`
+      }
+    )
+  ] }, r);
+}, g = ({
+  max: t = 10,
+  min: s = 0,
+  tickLabels: e = [],
+  ...i
+}) => {
+  const a = n();
+  return /* @__PURE__ */ o("datalist", { className: a.tickMarkList, ...i, children: e.map((c, l) => /* @__PURE__ */ o(
+    T,
+    {
+      allTickLabels: e,
+      "data-testid": f(i["data-testid"], "option"),
+      index: l,
+      max: t,
+      min: s,
+      tickLabel: c
+    },
+    c.value
+  )) });
+};
 export {
-  S as SliderTicks
+  g as SliderTicks
 };

package/dist/components/Slider/index.js

@@ -1,4 +1,6 @@
-import { G as s } from "../../LoadingSuspense-BtzikVZk.js";
+import { IressSlider as o } from "./Slider.js";
+import { slider as d } from "./Slider.styles.js";
 export {
-  s as IressSlider
+  o as IressSlider,
+  d as slider
 };

package/dist/components/Spinner/Spinner.js

@@ -1,6 +1,22 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import { H as i } from "../../LoadingSuspense-BtzikVZk.js";
+import { jsx as s } from "react/jsx-runtime";
+import { GlobalCSSClass as n } from "../../enums.js";
+import { IressIcon as i } from "../Icon/Icon.js";
+import "../Icon/Icon.styles.js";
+import { spinner as p } from "./Spinner.styles.js";
+import { c as e } from "../../cx-DN21T1EH.js";
+const x = ({
+  className: r,
+  spin: o = "half",
+  ...m
+}) => /* @__PURE__ */ s(
+  i,
+  {
+    ...m,
+    className: e(r, p(), n.Spinner),
+    name: "spinner-third",
+    spin: o
+  }
+);
 export {
-  i as IressSpinner
+  x as IressSpinner
 };

package/dist/components/Spinner/Spinner.styles.js

@@ -0,0 +1,11 @@
+import { c as a } from "../../cva-JiDXAa83.js";
+const o = a({
+  base: {
+    boxSizing: "border-box"
+  },
+  variants: {},
+  defaultVariants: {}
+});
+export {
+  o as spinner
+};

package/dist/components/Spinner/index.js

@@ -1,4 +1,6 @@
-import { H as s } from "../../LoadingSuspense-BtzikVZk.js";
+import { IressSpinner as n } from "./Spinner.js";
+import { spinner as p } from "./Spinner.styles.js";
 export {
-  s as IressSpinner
+  n as IressSpinner,
+  p as spinner
 };

package/dist/components/Stack/Stack.js

@@ -1,26 +1,26 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as a } from "../../index-cbHCAGLB.js";
-import { StackCssClass as s } from "./Stack.types.js";
-import { getResponsiveLayoutModifiers as i } from "../../helpers/responsive/getResponsiveLayoutModifiers.js";
-import { GutterSize as p } from "../../enums.js";
-const c = ({
-  children: o,
-  className: t,
-  gutter: r = "none",
-  ...e
-}) => /* @__PURE__ */ m(
-  "div",
-  {
-    className: a(
-      t,
-      s.Base,
-      i(s.Gutter, r, "none")
-    ),
-    ...e,
-    children: o
-  }
-);
-c.Gutter = p;
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { stack as c } from "./Stack.styles.js";
+import { s as i } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as p } from "../../enums.js";
+import { c as f } from "../../cx-DN21T1EH.js";
+const n = ({
+  className: r,
+  element: o,
+  ...s
+}) => {
+  const m = a(
+    () => i(o ?? "div", c),
+    [o]
+  );
+  return /* @__PURE__ */ t(
+    m,
+    {
+      ...s,
+      className: f(r, p.Stack)
+    }
+  );
+};
 export {
-  c as IressStack
+  n as IressStack
 };

package/dist/components/Stack/Stack.styles.js

@@ -0,0 +1,27 @@
+import { c as e } from "../../cva-JiDXAa83.js";
+const i = e({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    "& > :not(.ids-field)": {
+      marginBlock: "spacing.000"
+      // If you stick it in a stack, you should be using gap instead of margin to space the items inside the stack
+    }
+  },
+  variants: {
+    horizontalAlign: {
+      center: {
+        alignItems: "center"
+      },
+      left: {
+        alignItems: "flex-start"
+      },
+      right: {
+        alignItems: "flex-end"
+      }
+    }
+  }
+});
+export {
+  i as stack
+};

package/dist/components/Stack/index.js

@@ -1,6 +1,6 @@
-import { StackCssClass as o } from "./Stack.types.js";
-import { IressStack as a } from "./Stack.js";
+import { stack as t } from "./Stack.styles.js";
+import { IressStack as s } from "./Stack.js";
 export {
-  a as IressStack,
-  o as StackCssClass
+  s as IressStack,
+  t as stack
 };

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

@@ -1,100 +1,145 @@
-import { jsx as r, jsxs as h, Fragment as A } from "react/jsx-runtime";
-import { c as l } from "../../../index-cbHCAGLB.js";
-import { forwardRef as w, useEffect as x } from "react";
-import { useIdIfNeeded as I } from "../../../hooks/useIdIfNeeded.js";
-import { useTabSetItems as g } from "../hooks/useTabSetItems.js";
-import { TabSetItem as k } from "../components/TabSetItem.js";
-import { createPortal as u } from "react-dom";
-const N = "ids-tab-v5202", S = "ids-tab--active-v5202", b = {
-  tab: N,
-  active: S
-}, v = w(
-  ({ className: d, type: a = "button", ...s }, n) => /* @__PURE__ */ r(
-    "button",
-    {
-      className: l(d, b.tab),
-      ...s,
-      type: a,
-      ref: n
-    }
-  )
-), T = ({
-  active: d,
-  children: 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-CmSaAiNF.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: s,
+  ...n
+}) => /* @__PURE__ */ u(
+  U,
+  {
+    render: (t) => /* @__PURE__ */ u(
+      "div",
+      {
+        ...n,
+        ...t,
+        "aria-selected": s,
+        onClick: () => i(),
+        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && i(),
+        ref: (r) => {
+          if (!r) return;
+          const m = W(r)[0];
+          m && B(
+            r,
+            m,
+            t,
+            s
+          );
+        },
+        children: e
+      }
+    )
+  }
+), O = ({
+  active: i,
+  children: e,
   className: s,
   "data-testid": n,
-  label: f,
-  value: o,
-  ...m
-}, p) => {
-  const t = I(m), e = g();
-  x(() => {
-    e?.register({
-      id: t,
-      value: o
-    });
-  }, [t, e, o]);
-  const c = e ? e.isActive(t, o) : d;
-  if (e) {
-    const y = a && c;
-    return /* @__PURE__ */ h(A, { children: [
-      /* @__PURE__ */ r(
-        k,
+  href: t,
+  label: r,
+  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 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);
+    },
+    [w, f]
+  ), I = S(
+    (o) => {
+      y?.(o), f?.();
+    },
+    [y, f]
+  ), C = $(
+    () => K(t ? "a" : "button"),
+    [t]
+  );
+  if (e && t && j(
+    "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: [
+      /* @__PURE__ */ u(
+        J,
         {
-          index: e.indexOf(t, o),
-          handleSelection: e.activate,
-          selected: c,
-          value: o,
-          children: /* @__PURE__ */ r(
-            v,
+          activate: () => a.activate(d.current),
+          selected: p,
+          children: /* @__PURE__ */ u(
+            C,
             {
-              className: l(s, {
-                [b.active]: c
-              }),
-              "aria-controls": a ? `${t}--panel` : void 0,
+              className: h,
+              "aria-controls": e ? `${c}--panel` : void 0,
               role: "tab",
               "data-testid": n,
-              ...m,
-              id: t,
-              ref: p,
-              children: f
+              ...b,
+              href: t,
+              id: c,
+              onMouseEnter: x,
+              onMouseLeave: I,
+              ref: d,
+              type: m,
+              children: r
             }
           )
         }
       ),
-      e.panel && u(
-        /* @__PURE__ */ r(
+      a.panel && H(
+        /* @__PURE__ */ u(
           "div",
           {
-            "aria-labelledby": t,
-            id: `${t}--panel`,
+            "aria-labelledby": c,
+            id: `${c}--panel`,
             role: "tabpanel",
-            onKeyDown: (i) => {
-              (i.key === "ArrowLeft" || i.key === "ArrowRight" || i.key === "ArrowUp" || i.key === "ArrowDown") && i.stopPropagation();
+            onKeyDown: (l) => {
+              (l.key === "ArrowLeft" || l.key === "ArrowRight" || l.key === "ArrowUp" || l.key === "ArrowDown") && l.stopPropagation();
             },
-            hidden: !y,
-            children: a
+            hidden: !o,
+            children: e
           }
         ),
-        e.panel,
-        `${t}--panel`
+        a.panel,
+        `${c}--panel`
       )
     ] });
   }
-  return /* @__PURE__ */ r(
-    v,
+  return /* @__PURE__ */ u(
+    C,
     {
-      className: l(s, {
-        [b.active]: c
-      }),
+      className: h,
       "data-testid": n,
-      ...m,
-      id: t,
-      ref: p,
-      children: f
+      ...b,
+      href: t,
+      id: c,
+      ref: d,
+      type: m,
+      children: r
     }
   );
-}, K = w(T);
+}, ae = M(O);
 export {
-  K as IressTab
+  ae as IressTab
 };

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

@@ -0,0 +1,49 @@
+import { c as t } from "../../../cva-JiDXAa83.js";
+const e = t({
+  base: {
+    alignItems: "center",
+    borderBottom: "[2px solid transparent]",
+    cursor: "pointer",
+    display: "inline-flex",
+    minHeight: "input.height",
+    position: "relative",
+    px: "spacing.250",
+    py: "spacing.300",
+    textOverflow: "ellipsis",
+    textDecoration: "none",
+    textStyle: "typography.body.md",
+    transition: "all",
+    whiteSpace: "nowrap",
+    width: "[auto]",
+    _focusVisible: {
+      layerStyle: "elevation.focus",
+      outline: "[none]"
+    },
+    _hover: {
+      bg: "colour.neutral.20"
+    },
+    _moreContrast: {
+      outline: "[inset 4px transparent]"
+    }
+  },
+  variants: {
+    active: {
+      true: {
+        borderBottomColor: "colour.primary.text",
+        color: "colour.primary.text",
+        textStyle: "typography.body.md.strong"
+      }
+    },
+    insideTabSet: {
+      true: {
+        borderBottomWidth: "0px",
+        _hover: {
+          bg: "[none]"
+        }
+      }
+    }
+  }
+});
+export {
+  e as tab
+};

package/dist/components/TabSet/TabSet.js

@@ -1,59 +1,101 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { c as n } from "../../index-cbHCAGLB.js";
-import { s as a } from "../../TabSet.module-D1hz6nN2.js";
-import { C as c } from "../../floating-ui.react-DYBeYtOf.js";
-import { propagateTestid as b } from "../../helpers/utility/propagateTestid.js";
-import { TabSetLayout as u } from "./TabSet.types.js";
-import { TabSetProvider as S } from "./TabSetProvider.js";
-import { useState as v } from "react";
-const N = ({
-  children: e,
-  className: r,
-  defaultSelected: m,
-  layout: s = "top-left",
-  onChange: i,
+import { jsx as e, jsxs as v, Fragment as N } from "react/jsx-runtime";
+import { C as T } from "../../floating-ui.react-CmSaAiNF.js";
+import { propagateTestid as C } from "../../helpers/utility/propagateTestid.js";
+import { TabSetProvider as y, TabSetContext as h } from "./TabSetProvider.js";
+import { useState as d, useContext as u, useEffect as x } from "react";
+import { s as m } from "../../factory-oPXoMw9H.js";
+import { tabSet as I } from "./TabSet.styles.js";
+import { c as n } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as $ } from "../../enums.js";
+const g = (a) => {
+  const [c, r] = d({}), t = u(h);
+  return x(() => {
+    if (t?.hover) {
+      const { offsetLeft: s, scrollWidth: o } = t.hover;
+      r({
+        opacity: 1,
+        left: `${s}px`,
+        width: `${o}px`
+      });
+    } else
+      r((s) => ({
+        ...s,
+        opacity: 0
+      }));
+  }, [t?.hover]), /* @__PURE__ */ e("div", { ...a, style: c });
+}, j = (a) => {
+  const [c, r] = d({}), t = u(h);
+  return x(() => {
+    const s = setTimeout(() => {
+      if (t?.active) {
+        const { offsetLeft: o, scrollWidth: l } = t.active;
+        r({
+          left: `${o}px`,
+          width: `${l}px`
+        });
+      }
+    }, 150);
+    return () => clearTimeout(s);
+  }, [t?.active]), /* @__PURE__ */ e("div", { ...a, style: c });
+}, k = ({
+  children: a,
+  className: c,
+  defaultSelected: r,
+  layout: t = "top-left",
+  onChange: s,
+  panelStyle: o,
   selected: l,
-  ...o
+  tabHolderStyle: f,
+  ...p
 }) => {
-  const [p, f] = v(null);
-  return /* @__PURE__ */ t(
-    S,
+  const [S, b] = d(null), i = I({ layout: t });
+  return /* @__PURE__ */ e(
+    y,
     {
-      onChange: i,
-      defaultSelected: m,
-      panel: p,
+      defaultSelected: r,
+      onChange: s,
+      panel: S,
       selected: l,
-      children: /* @__PURE__ */ d(
-        "div",
+      children: /* @__PURE__ */ e(
+        m.div,
         {
-          className: n(r, a.tabSet, {
-            [a[`layout--${s}`]]: !!s
-          }),
-          ...o,
-          children: [
-            e && /* @__PURE__ */ t(
-              c,
+          className: n(c, i.root, $.TabSet),
+          ...p,
+          children: a && /* @__PURE__ */ v(N, { children: [
+            /* @__PURE__ */ v(
+              m.div,
               {
-                render: /* @__PURE__ */ t("div", { className: a.list, role: "tablist" }),
-                loop: !1,
-                children: e
+                ...f,
+                className: n(i.listHolder, f?.className),
+                children: [
+                  /* @__PURE__ */ e(j, { className: i.activeIndicator }),
+                  /* @__PURE__ */ e(g, { className: i.hoverIndicator }),
+                  /* @__PURE__ */ e(
+                    T,
+                    {
+                      render: /* @__PURE__ */ e("div", { className: i.list, role: "tablist" }),
+                      loop: !1,
+                      children: a
+                    }
+                  )
+                ]
               }
             ),
-            e && /* @__PURE__ */ t(
-              "div",
+            /* @__PURE__ */ e(
+              m.div,
               {
-                className: a.panel,
-                "data-testid": b(o?.["data-testid"], "panel"),
-                ref: f
+                ...o,
+                className: n(i.panel, o?.className),
+                "data-testid": o?.["data-testid"] ?? C(p["data-testid"], "panel"),
+                ref: b
               }
             )
-          ]
+          ] })
         }
       )
     }
   );
 };
-N.Layout = u;
 export {
-  N as IressTabSet
+  k as IressTabSet
 };