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

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

@@ -0,0 +1,84 @@
+import { s as t } from "../../sva-TRyehFkb.js";
+const e = t({
+  slots: [
+    "root",
+    "list",
+    "listHolder",
+    "panel",
+    "activeIndicator",
+    "hoverIndicator"
+  ],
+  base: {
+    root: {
+      bg: "colour.neutral.10",
+      borderRadius: "radius.system.layout"
+    },
+    list: {
+      display: "flex",
+      flexWrap: "wrap",
+      borderBottom: "divider",
+      "& > :has(.ids-badge)": {
+        mr: "spacing.350"
+      }
+    },
+    listHolder: {
+      position: "relative"
+    },
+    panel: {
+      pt: "md",
+      _focusVisible: {
+        layerStyle: "elevation.focus",
+        outline: "[none]"
+      }
+    },
+    activeIndicator: {
+      position: "absolute",
+      bottom: "[0]",
+      left: "[0]",
+      height: "[2px]",
+      bg: "colour.primary.text",
+      transition: "all"
+    },
+    hoverIndicator: {
+      position: "absolute",
+      top: "spacing.150",
+      bottom: "spacing.150",
+      left: "[0]",
+      bg: "colour.primary.surfaceHover",
+      transition: "all",
+      borderRadius: "radius.system.button",
+      pointerEvents: "none"
+    }
+  },
+  variants: {
+    layout: {
+      "top-left": {
+        list: {
+          justifyContent: "flex-start"
+        }
+      },
+      "top-center": {
+        list: {
+          justifyContent: "center"
+        },
+        activeIndicator: {
+          left: "[50%]"
+        }
+      },
+      "top-right": {
+        list: {
+          justifyContent: "flex-end"
+        },
+        activeIndicator: {
+          left: "[100%]"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    layout: "top-left"
+  }
+});
+export {
+  e as tabSet
+};

package/dist/components/TabSet/TabSetProvider.js

@@ -1,50 +1,85 @@
-import { jsx as h } from "react/jsx-runtime";
-import { createContext as S, useState as a, useEffect as T, useCallback as y, useMemo as I } from "react";
-import { idsLogger as j } from "../../helpers/utility/idsLogger.js";
-const k = S(
+import { jsx as P } from "react/jsx-runtime";
+import { createContext as j, useState as f, useMemo as M, useCallback as I, useEffect as k } from "react";
+import { useControlledState as z } from "../../hooks/useControlledState.js";
+const A = j(
   void 0
-), L = ({
-  children: m,
-  onChange: i,
-  defaultSelected: l,
-  panel: c,
-  selected: n
+), q = ({
+  children: O,
+  defaultSelected: T,
+  onChange: a,
+  panel: v,
+  selected: V
 }) => {
-  const [d, p] = a([]), [x, u] = a(l), f = n ?? x, t = d.find(
-    (e, o) => e.value === f || o === f
-  );
-  T(() => {
-    n !== void 0 && l !== void 0 && j(
-      "IressTabSet: Please use either the defaultSelected prop for uncontrolled components, or the selected prop for controlled components, rather than both. If you use both, the selected tab may become unpredictable.",
-      "warn"
-    );
-  }, [n, l]);
-  const v = y((e) => {
-    p((o) => {
-      if (o.some(
-        (s) => s.id === e.id || s.value === e.value
-      ))
-        return o;
-      const r = o.length;
-      return u((s) => s !== void 0 ? s : e.value ?? r), [...o, { ...e, index: r, value: e.value ?? r }];
+  const [w, H] = f(), [n, S] = f(() => /* @__PURE__ */ new Set()), [o, m] = f(
+    () => /* @__PURE__ */ new Map()
+  ), { value: c, setValue: u } = z({
+    component: "IressTabSet",
+    defaultValue: T,
+    propName: "selected",
+    value: V
+  }), l = M(
+    () => [...n].find(
+      (e, t) => o.has(t) && o.get(t) === c || t === c
+    ),
+    [n, c, o]
+  ), x = I(
+    (e, t) => {
+      S((s) => {
+        let r = new Set(s);
+        s.has(e) || (r = new Set(s).add(e));
+        const i = [...r].indexOf(e);
+        return t !== void 0 && m((d) => {
+          const b = new Map(d);
+          return b.set(i, t), b;
+        }), r;
+      });
+    },
+    []
+  ), p = I((e) => {
+    S((t) => {
+      const s = new Set(t), r = [...s].indexOf(e);
+      return s.delete(e), m((i) => {
+        if (!i.has(r)) return i;
+        const d = new Map(i);
+        return d.delete(r), d;
+      }), s;
     });
-  }, []), b = I(
+  }, []);
+  k(() => {
+    c === void 0 && n.size && u(o.get(0) ?? 0);
+  }, [n, c, u, o]);
+  const N = M(
     () => ({
-      items: d,
-      active: t,
-      panel: c,
-      register: v,
-      indexOf: (e, o) => d.findIndex((r) => r.id === e || r.value === o),
-      isActive: (e, o) => (t == null ? void 0 : t.id) === e || (t == null ? void 0 : t.value) === o,
-      activate(e, o) {
-        i == null || i({ index: e, value: o }), u(o ?? e);
-      }
+      active: l,
+      activate(e) {
+        if (!e) return;
+        const t = [...n].indexOf(e), s = o.get(t);
+        a == null || a({ index: t, value: s }), u(s ?? t);
+      },
+      isActive: (e) => e ? l === e : !1,
+      hover: w,
+      panel: v,
+      register: x,
+      setHover: (e) => {
+        H(e);
+      },
+      unregister: p
     }),
-    [d, t, c, v, i]
+    [
+      l,
+      w,
+      v,
+      x,
+      p,
+      n,
+      o,
+      a,
+      u
+    ]
   );
-  return /* @__PURE__ */ h(k.Provider, { value: b, children: m });
+  return /* @__PURE__ */ P(A.Provider, { value: N, children: O });
 };
 export {
-  k as TabSetItemsContext,
-  L as TabSetProvider
+  A as TabSetContext,
+  q as TabSetProvider
 };

package/dist/components/TabSet/index.js

@@ -1,11 +1,10 @@
-import { IressTab as e } from "./Tab/Tab.js";
-import { TAB_SET_LAYOUTS as T, TabSetLayout as a } from "./TabSet.types.js";
-import { IressTabSet as p } from "./TabSet.js";
-import { mapTabs as b } from "./helpers/mapTabs.js";
+import { IressTabSet as o } from "./TabSet.js";
+import { tabSet as a } from "./TabSet.styles.js";
+import { IressTab as f } from "./Tab/Tab.js";
+import { tab as p } from "./Tab/Tab.styles.js";
 export {
-  e as IressTab,
-  p as IressTabSet,
-  T as TAB_SET_LAYOUTS,
-  a as TabSetLayout,
-  b as mapTabs
+  f as IressTab,
+  o as IressTabSet,
+  p as tab,
+  a as tabSet
 };

package/dist/components/Table/Table.js

@@ -1,17 +1,76 @@
-import "react/jsx-runtime";
-import "../../index-2QXL0WYc.js";
-import "./Table.types.js";
-import "../../Table.module-BgIez5R-.js";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import "react";
-import "../../helpers/utility/idsLogger.js";
-import "../../hooks/useIdIfNeeded.js";
-import "./components/TableEmpty.js";
-import "../../enums.js";
-import "../../helpers/utility/propagateTestid.js";
-import { J as T } from "../../LoadingSuspense-D0TO0TDT.js";
-import "./TableProvider.js";
-import "./helpers/hasColumns.js";
-import "./components/TableRows.js";
+import { useIdIfNeeded as G } from "../../hooks/useIdIfNeeded.js";
+import { TableEmpty as R } from "./components/TableEmpty.js";
+import { propagateTestid as d } from "../../helpers/utility/propagateTestid.js";
+import { TableHeader as $ } from "./components/TableHeader.js";
+import { T as k } from "../../TableProvider-D8SQKIG8.js";
+import { TableRows as q } from "./components/TableRows.js";
+import { table as z } from "./Table.styles.js";
+import { c as h } from "../../cx-DN21T1EH.js";
+import { s as A } from "../../factory-DHLOr79I.js";
+import { GlobalCSSClass as B } from "../../enums.js";
+const W = ({
+  alternate: T = !1,
+  caption: I,
+  children: l,
+  columns: a,
+  compact: x = !1,
+  className: y,
+  "data-testid": e,
+  empty: m,
+  hiddenCaption: N,
+  hiddenHeader: c,
+  hover: g,
+  removeRowBorders: C = !1,
+  rowProps: j,
+  rows: o = [],
+  scope: v,
+  ...n
+}) => {
+  const i = G({ id: n.id }), S = `${i}--caption`, r = (m && (a == null ? void 0 : a.length)) ?? !!(o != null && o.length), E = l ?? r, s = z({
+    alternate: T,
+    compact: x,
+    hover: g,
+    hiddenCaption: N,
+    removeRowBorders: C
+  }), p = d(e, "thead"), b = d(e, "tbody");
+  return E ? /* @__PURE__ */ t("div", { className: s.root, "data-testid": e, children: /* @__PURE__ */ t(k, { columns: a, rows: o, children: /* @__PURE__ */ f(
+    A.table,
+    {
+      ...n,
+      className: h(y, s.table, B.Table),
+      id: i,
+      "data-testid": d(e, "table"),
+      children: [
+        /* @__PURE__ */ t(
+          "caption",
+          {
+            id: S,
+            className: h(s.caption),
+            "data-testid": d(e, "caption"),
+            children: I
+          }
+        ),
+        !c && r && /* @__PURE__ */ t("thead", { "data-testid": p, children: /* @__PURE__ */ t($, { tableId: i, testId: p }) }),
+        r && /* @__PURE__ */ f("tbody", { "data-testid": b, children: [
+          /* @__PURE__ */ t(
+            q,
+            {
+              testId: b,
+              tableId: i,
+              rowProps: j,
+              scope: v,
+              hiddenHeader: c
+            }
+          ),
+          /* @__PURE__ */ t(R, { children: m })
+        ] }),
+        l
+      ]
+    }
+  ) }) }) : null;
+};
 export {
-  T as IressTable
+  W as IressTable
 };

package/dist/components/Table/Table.styles.js

@@ -0,0 +1,101 @@
+import { m as n, b as s, s as l, j as i, a as c } from "../../cva-B2x59Dph.js";
+import { c as p } from "../../create-recipe-BqEnhJ30.js";
+const r = {
+  compact: !1,
+  hover: !1,
+  sortButtonNoWrap: !1,
+  tableBodyOpen: !1
+}, b = [], d = [
+  [
+    "root",
+    "table__root"
+  ],
+  [
+    "table",
+    "table__table"
+  ],
+  [
+    "caption",
+    "table__caption"
+  ],
+  [
+    "sortHeader",
+    "table__sortHeader"
+  ],
+  [
+    "sortIcon",
+    "table__sortIcon"
+  ],
+  [
+    "activator",
+    "table__activator"
+  ],
+  [
+    "rowGroupHeader",
+    "table__rowGroupHeader"
+  ]
+], u = /* @__PURE__ */ d.map(([t, e]) => [t, p(e, r, i(b, t))]), m = n((t = {}) => Object.fromEntries(u.map(([e, o]) => [e, o.recipeFn(t)]))), a = [
+  "alternate",
+  "compact",
+  "hover",
+  "removeRowBorders",
+  "sortButtonNoWrap",
+  "tableBodyOpen",
+  "hiddenCaption"
+], _ = (t) => ({ ...r, ...s(t) }), B = /* @__PURE__ */ Object.assign(m, {
+  __recipe__: !1,
+  __name__: "table",
+  raw: (t) => t,
+  variantKeys: a,
+  variantMap: {
+    alternate: [
+      "true"
+    ],
+    compact: [
+      "true"
+    ],
+    hover: [
+      "true"
+    ],
+    removeRowBorders: [
+      "true"
+    ],
+    sortButtonNoWrap: [
+      "true"
+    ],
+    tableBodyOpen: [
+      "true"
+    ],
+    hiddenCaption: [
+      "true"
+    ]
+  },
+  splitVariantProps(t) {
+    return l(t, a);
+  },
+  getVariantProps: _
+}), g = c({
+  base: {
+    textAlign: "start"
+  },
+  variants: {
+    format: {
+      default: { textAlign: "start" },
+      number: { "&&": { textAlign: "end" } },
+      currency: { "&&": { textAlign: "end" } }
+    },
+    divider: {
+      true: {
+        borderInlineEnd: "table"
+      }
+    }
+  },
+  defaultVariants: {
+    format: "default",
+    divider: !1
+  }
+});
+export {
+  B as table,
+  g as tableCell
+};

package/dist/components/Table/TableBody/TableBody.js

@@ -1,125 +1,111 @@
-import { jsx as t, jsxs as y, Fragment as B } from "react/jsx-runtime";
-import { propagateTestid as T } from "../../../helpers/utility/propagateTestid.js";
-import { c as C } from "../../../index-2QXL0WYc.js";
-import { TableEmpty as F } from "../components/TableEmpty.js";
-import { U as G } from "../../../LoadingSuspense-D0TO0TDT.js";
-import { IressTableProvider as V } from "../TableProvider.js";
-import { s as f } from "../../../Table.module-BgIez5R-.js";
-import { useState as j, useEffect as k } from "react";
-import { useIdIfNeeded as w } from "../../../hooks/useIdIfNeeded.js";
-import { hasColumns as A } from "../helpers/hasColumns.js";
-import { useTable as N } from "../hooks/useTable.js";
-import { TableRows as E } from "../components/TableRows.js";
-import { useAriaRelationship as O } from "../../../hooks/useAriaRelationship.js";
-import { GlobalCSSClass as U } from "../../../enums.js";
-const q = ({
-  caption: l,
-  hiddenCaption: e,
-  onChange: i,
-  open: o,
+import { jsx as t, jsxs as g, Fragment as F } from "react/jsx-runtime";
+import { propagateTestid as y } from "../../../helpers/utility/propagateTestid.js";
+import { TableEmpty as N } from "../components/TableEmpty.js";
+import { TableHeader as S } from "../components/TableHeader.js";
+import { useState as V, useEffect as j, useContext as T } from "react";
+import { useIdIfNeeded as k } from "../../../hooks/useIdIfNeeded.js";
+import { TableRows as A } from "../components/TableRows.js";
+import { useAriaRelationship as E } from "../../../hooks/useAriaRelationship.js";
+import { table as O } from "../Table.styles.js";
+import { T as w, a as I } from "../../../TableProvider-D8SQKIG8.js";
+import { s as x } from "../../../factory-DHLOr79I.js";
+const G = ({
+  caption: s,
+  hiddenCaption: o,
+  onChange: r,
+  open: e,
   setController: n,
-  tableId: a
+  tableId: i
 }) => {
-  const r = N(), m = r == null ? void 0 : r.api.getVisibleFlatColumns().length;
-  return m ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
-    "th",
+  const a = T(I), c = a == null ? void 0 : a.api.getVisibleFlatColumns().length;
+  if (!c) return null;
+  const d = O({ tableBodyOpen: e });
+  return /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
+    x.th,
     {
-      "aria-expanded": e ? void 0 : o,
-      colSpan: m,
-      className: C(f.rowGroupHeader, {
-        [U.SROnly]: e
-      }),
-      id: `${a}--caption`,
-      onClick: i,
+      "aria-expanded": o ? void 0 : e,
+      colSpan: c,
+      className: d.rowGroupHeader,
+      id: `${i}--caption`,
+      onClick: r,
       scope: "rowgroup",
+      srOnly: o,
       ref: n,
-      children: /* @__PURE__ */ t("button", { className: f.activator, type: "button", children: l })
+      children: /* @__PURE__ */ t("button", { className: d.activator, type: "button", children: s })
     }
-  ) }) : null;
-}, z = ({
-  children: l,
-  setControlViaRef: e,
-  tableId: i
+  ) });
+}, q = ({
+  children: s,
+  setControlViaRef: o,
+  tableId: r
 }) => {
-  const o = N(), n = o == null ? void 0 : o.api.getVisibleFlatColumns().length;
-  if (!l) return null;
-  const a = `${i}--children`;
-  return /* @__PURE__ */ t("tr", { id: a, ref: (r) => e(a)(r), children: /* @__PURE__ */ t("td", { colSpan: n, children: l }) });
-}, et = ({
-  caption: l,
-  children: e,
-  columns: i,
-  className: o,
-  "data-testid": n,
-  empty: a,
-  hiddenCaption: r,
-  hiddenHeader: m,
-  onOpened: p,
-  onClosed: u,
+  const e = T(I), n = e == null ? void 0 : e.api.getVisibleFlatColumns().length;
+  if (!s) return null;
+  const i = `${r}--children`;
+  return /* @__PURE__ */ t("tr", { id: i, ref: (a) => o(i)(a), children: /* @__PURE__ */ t("td", { colSpan: n, children: s }) });
+}, Y = ({
+  caption: s,
+  children: o,
+  columns: r,
+  "data-testid": e,
+  empty: n,
+  hiddenCaption: i,
+  hiddenHeader: a,
+  onOpened: c,
+  onClosed: d,
   open: b = !1,
-  rowProps: S,
-  rows: c = [],
-  scope: H,
-  ...I
+  rowProps: C,
+  rows: m = [],
+  scope: $,
+  ...u
 }) => {
-  const [d, g] = j(b), { setController: R, setControlViaRef: h } = O("aria-controls"), s = w({ id: I.id }), $ = e ?? (a && A(i)) ?? !!(c != null && c.length);
-  if (k(() => {
-    g(b);
-  }, [b]), !$)
+  const [f, h] = V(b), { setController: v, setControlViaRef: p } = E("aria-controls"), l = k({ id: u.id }), B = o ?? (n && (r == null ? void 0 : r.length)) ?? !!(m != null && m.length);
+  if (j(() => {
+    h(b);
+  }, [b]), !B)
     return null;
-  const v = () => {
-    g(!d), d ? u == null || u() : p == null || p();
-  }, x = d || r;
-  return /* @__PURE__ */ t(V, { columns: i, rows: c, children: /* @__PURE__ */ y(
-    "tbody",
-    {
-      "aria-labelledby": `${s}--caption`,
-      ...I,
-      className: C(o, {
-        [f.hiddenHeader]: m
-      }),
-      children: [
-        /* @__PURE__ */ t(
-          q,
-          {
-            setController: R,
-            caption: l,
-            hiddenCaption: r,
-            onChange: v,
-            open: d,
-            tableId: s
-          }
-        ),
-        x && /* @__PURE__ */ y(B, { children: [
-          !m && /* @__PURE__ */ t(
-            G,
-            {
-              additionalHeaders: `${s}--caption`,
-              className: f.rowGroupColumnHeaders,
-              setControlViaRef: h,
-              tableId: s,
-              testId: T(n, "thead")
-            }
-          ),
-          /* @__PURE__ */ t(
-            E,
-            {
-              additionalHeaders: `${s}--caption`,
-              tableId: s,
-              rowProps: S,
-              setControlViaRef: h,
-              scope: H,
-              hiddenHeader: m,
-              testId: T(n, "tbody")
-            }
-          ),
-          /* @__PURE__ */ t(F, { children: a }),
-          /* @__PURE__ */ t(z, { setControlViaRef: h, tableId: s, children: e })
-        ] })
-      ]
-    }
-  ) });
+  const H = () => {
+    h(!f), f ? d == null || d() : c == null || c();
+  }, R = f || i;
+  return /* @__PURE__ */ t(w, { columns: r, rows: m, children: /* @__PURE__ */ g(x.tbody, { "aria-labelledby": `${l}--caption`, ...u, children: [
+    /* @__PURE__ */ t(
+      G,
+      {
+        setController: v,
+        caption: s,
+        hiddenCaption: i,
+        onChange: H,
+        open: f,
+        tableId: l
+      }
+    ),
+    R && /* @__PURE__ */ g(F, { children: [
+      !a && /* @__PURE__ */ t(
+        S,
+        {
+          additionalHeaders: `${l}--caption`,
+          setControlViaRef: p,
+          tableId: l,
+          testId: y(e, "thead")
+        }
+      ),
+      /* @__PURE__ */ t(
+        A,
+        {
+          additionalHeaders: `${l}--caption`,
+          tableId: l,
+          rowProps: C,
+          setControlViaRef: p,
+          scope: $,
+          hiddenHeader: a,
+          testId: y(e, "tbody")
+        }
+      ),
+      /* @__PURE__ */ t(N, { children: n }),
+      /* @__PURE__ */ t(q, { setControlViaRef: p, tableId: l, children: o })
+    ] })
+  ] }) });
 };
 export {
-  et as IressTableBody
+  Y as IressTableBody
 };