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

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

@@ -1,10 +1,60 @@
-import "react/jsx-runtime";
-import { S } from "../../../SliderTicks-Dfw5LJ8X.js";
-import "../../../index-2QXL0WYc.js";
-import "react";
-import "../../../enums.js";
-import "../../../helpers/utility/propagateTestid.js";
-import "../../../constants.js";
+import { jsx as d, jsxs as v } from "react/jsx-runtime";
+import { slider as m } from "../Slider.styles.js";
+import { c as n } from "../../../cx-DN21T1EH.js";
+import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
+import { s as u } from "../../../factory-DHLOr79I.js";
+const N = (t, s, e, i, a) => {
+  var r;
+  const c = s === 0 ? t - a : t - (((r = e[s - 1]) == null ? void 0 : r.value) ?? 0);
+  return `${Number(c / (i - a) * 100)}%`;
+}, T = ({
+  allTickLabels: t,
+  "data-testid": s,
+  index: e,
+  max: i,
+  min: a,
+  tickLabel: c
+}) => {
+  const l = m(), { className: r, label: k, value: o, ...p } = c, h = {
+    "--iress-tick-label-width": N(
+      o,
+      e,
+      t,
+      i,
+      a
+    )
+  };
+  return /* @__PURE__ */ v("div", { className: n(l.tickMark), style: h, children: [
+    /* @__PURE__ */ d("option", { value: o, "data-testid": s }),
+    /* @__PURE__ */ d(
+      u.div,
+      {
+        ...p,
+        className: n(l.tickMarkLabel, r),
+        children: k ?? `${o}`
+      }
+    )
+  ] }, o);
+}, g = ({
+  max: t = 10,
+  min: s = 0,
+  tickLabels: e = [],
+  ...i
+}) => {
+  const a = m();
+  return /* @__PURE__ */ d("datalist", { className: a.tickMarkList, ...i, children: e.map((c, l) => /* @__PURE__ */ d(
+    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-D0TO0TDT.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-2QXL0WYc.js";
-import { H as i } from "../../LoadingSuspense-D0TO0TDT.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 { a } from "../../cva-B2x59Dph.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-D0TO0TDT.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-2QXL0WYc.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-DHLOr79I.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 { a as e } from "../../cva-B2x59Dph.js";
+const a = 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 {
+  a 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,88 +1,145 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import { c as m } from "../../../index-2QXL0WYc.js";
-import { forwardRef as v, useEffect as N } from "react";
-import { useIdIfNeeded as T } from "../../../hooks/useIdIfNeeded.js";
-import { useTabSetItems as h } from "../hooks/useTabSetItems.js";
-import { TabSetItem as I } from "../components/TabSetItem.js";
-import { createPortal as $ } from "react-dom";
-const j = "ids-tab-v5160", w = "ids-tab--active-v5160", l = {
-  tab: j,
-  active: w
-}, p = v(
-  ({ className: r, type: a = "button", ...i }, s) => /* @__PURE__ */ n(
-    "button",
-    {
-      className: m(r, l.tab),
-      ...i,
-      type: a,
-      ref: s
-    }
-  )
-), y = ({
-  active: r,
-  children: a,
-  className: i,
-  "data-testid": s,
-  label: b,
-  value: o,
-  ...d
-}, f) => {
-  const e = T(d), t = h();
-  N(() => {
-    t == null || t.register({
-      id: e,
-      value: o
-    });
-  }, [e, t, o]);
-  const c = t ? t.isActive(e, o) : r;
-  if (t) {
-    const x = a && c;
-    return /* @__PURE__ */ u(
-      I,
+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,
+  children: e,
+  selected: i,
+  ...n
+}) => /* @__PURE__ */ m(
+  h,
+  {
+    render: (t) => /* @__PURE__ */ m(
+      "div",
       {
-        index: t.indexOf(e, o),
-        handleSelection: t.activate,
-        selected: c,
-        value: o,
-        children: [
-          /* @__PURE__ */ n(
-            p,
+        ...n,
+        ...t,
+        "aria-selected": i,
+        onClick: () => a(),
+        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && a(),
+        ref: (r) => {
+          if (!r) return;
+          const s = z(r)[0];
+          s && O(
+            r,
+            s,
+            t,
+            i
+          );
+        },
+        children: e
+      }
+    )
+  }
+), V = ({
+  active: a,
+  children: e,
+  className: i,
+  "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;
+    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(
+    (o) => {
+      v == null || v(o), d == null || d(o.currentTarget);
+    },
+    [v, d]
+  ), E = g(
+    (o) => {
+      w == null || w(o), d == null || d();
+    },
+    [w, d]
+  ), T = j(
+    () => G(t ? "a" : "button"),
+    [t]
+  );
+  if (e && t && F(
+    "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,
+        {
+          activate: () => c.activate(b.current),
+          selected: y,
+          children: /* @__PURE__ */ m(
+            T,
             {
-              className: m(i, {
-                [l.active]: c
-              }),
-              "aria-controls": a ? `${e}--panel` : void 0,
+              className: S,
+              "aria-controls": e ? `${u}--panel` : void 0,
               role: "tab",
-              "data-testid": s,
-              ...d,
-              id: e,
-              ref: f,
-              children: b
+              "data-testid": n,
+              ...l,
+              href: t,
+              id: u,
+              onMouseEnter: k,
+              onMouseLeave: E,
+              ref: b,
+              type: s,
+              children: r
             }
-          ),
-          x && t.panel && $(
-            /* @__PURE__ */ n("div", { "aria-labelledby": e, id: `${e}--panel`, role: "tabpanel", children: a }),
-            t.panel,
-            `${e}--panel`
           )
-        ]
-      }
-    );
+        }
+      ),
+      o && c.panel && q(
+        /* @__PURE__ */ m(
+          "div",
+          {
+            "aria-labelledby": u,
+            id: `${u}--panel`,
+            role: "tabpanel",
+            onKeyDown: (f) => {
+              (f.key === "ArrowLeft" || f.key === "ArrowRight" || f.key === "ArrowUp" || f.key === "ArrowDown") && f.stopPropagation();
+            },
+            children: e
+          }
+        ),
+        c.panel,
+        `${u}--panel`
+      )
+    ] });
   }
-  return /* @__PURE__ */ n(
-    p,
+  return /* @__PURE__ */ m(
+    T,
     {
-      className: m(i, {
-        [l.active]: c
-      }),
-      "data-testid": s,
-      ...d,
-      id: e,
-      ref: f,
-      children: b
+      className: S,
+      "data-testid": n,
+      ...l,
+      href: t,
+      id: u,
+      ref: b,
+      type: s,
+      children: r
     }
   );
-}, k = v(y);
+}, nt = D(V);
 export {
-  k as IressTab
+  nt as IressTab
 };

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

@@ -0,0 +1,49 @@
+import { a as t } from "../../../cva-B2x59Dph.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,91 @@
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import { c as n } from "../../index-2QXL0WYc.js";
-import { s as e } from "../../TabSet.module-yK1UoG-L.js";
-import { C as c } from "../../floating-ui.react-nmA48tb2.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: o,
-  className: s,
-  defaultSelected: i,
-  layout: m = "top-left",
-  onChange: l,
-  selected: r,
-  ...t
+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`
+        });
+      }
+    }, 150);
+    return () => clearTimeout(o);
+  }, [t == null ? void 0 : t.active]), /* @__PURE__ */ e("div", { ...s, style: a });
+}, G = ({
+  children: s,
+  className: a,
+  defaultSelected: r,
+  layout: t = "top-left",
+  onChange: o,
+  selected: l,
+  ...c
 }) => {
-  const [p, f] = v(null);
-  return /* @__PURE__ */ a(
-    S,
+  const [v, h] = n(null), i = N({ layout: t });
+  return /* @__PURE__ */ e(
+    T,
     {
-      onChange: l,
-      defaultSelected: i,
-      panel: p,
-      selected: r,
-      children: /* @__PURE__ */ d(
-        "div",
+      defaultSelected: r,
+      onChange: o,
+      panel: v,
+      selected: l,
+      children: /* @__PURE__ */ e(
+        C.div,
         {
-          className: n(s, e.tabSet, {
-            [e[`layout--${m}`]]: !!m
-          }),
-          ...t,
-          children: [
-            o && /* @__PURE__ */ a(
-              c,
-              {
-                render: /* @__PURE__ */ a("div", { className: e.list, role: "tablist" }),
-                loop: !1,
-                children: o
-              }
-            ),
-            o && /* @__PURE__ */ a(
+          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
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
               "div",
               {
-                className: e.panel,
-                "data-testid": b(t == null ? void 0 : t["data-testid"], "panel"),
-                ref: f
+                className: i.panel,
+                "data-testid": y(c["data-testid"], "panel"),
+                ref: h
               }
             )
-          ]
+          ] })
         }
       )
     }
   );
 };
-N.Layout = u;
 export {
-  N as IressTabSet
+  G as IressTabSet
 };