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

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

@@ -0,0 +1,84 @@
+import { s as t } from "../../sva-OmxClA9g.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 b } from "react/jsx-runtime";
-import { createContext as S, useState as f, useEffect as g, useCallback as T, useMemo as y } from "react";
-import { idsLogger as C } from "../../helpers/utility/idsLogger.js";
-const I = S(
+import { jsx as V } from "react/jsx-runtime";
+import { createContext as H, useState as l, useMemo as g, useCallback as M, useEffect as N } from "react";
+import { useControlledState as P } from "../../hooks/useControlledState.js";
+const j = H(
   void 0
-), A = ({
-  children: m,
-  onChange: d,
-  defaultSelected: i,
-  panel: l,
-  selected: c
+), E = ({
+  children: h,
+  defaultSelected: C,
+  onChange: f,
+  panel: v,
+  selected: I
 }) => {
-  const [n, h] = f([]), [p, a] = f(i), u = c ?? p, s = n.find(
-    (e, o) => e.value === u || o === u
-  );
-  g(() => {
-    c !== void 0 && i !== void 0 && C(
-      "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"
-    );
-  }, [c, i]);
-  const v = T((e) => {
-    h((o) => {
-      if (o.some(
-        (r) => r.id === e.id || r.value === e.value
-      ))
-        return o;
-      const t = o.length;
-      return a((r) => r !== void 0 ? r : e.value ?? t), [...o, { ...e, index: t, value: e.value ?? t }];
+  const [w, O] = l(), [o, S] = l(() => /* @__PURE__ */ new Set()), [n, m] = l(
+    () => /* @__PURE__ */ new Map()
+  ), { value: c, setValue: i } = P({
+    component: "IressTabSet",
+    defaultValue: C,
+    propName: "selected",
+    value: I
+  }), d = g(
+    () => [...o].find(
+      (e, t) => n.has(t) && n.get(t) === c || t === c
+    ),
+    [o, c, n]
+  ), x = M(
+    (e, t) => {
+      S((s) => {
+        let r = new Set(s);
+        s.has(e) || (r = new Set(s).add(e));
+        const a = [...r].indexOf(e);
+        return t !== void 0 && m((u) => {
+          const b = new Map(u);
+          return b.set(a, t), b;
+        }), r;
+      });
+    },
+    []
+  ), p = M((e) => {
+    S((t) => {
+      const s = new Set(t), r = [...s].indexOf(e);
+      return s.delete(e), m((a) => {
+        if (!a.has(r)) return a;
+        const u = new Map(a);
+        return u.delete(r), u;
+      }), s;
     });
-  }, []), x = y(
+  }, []);
+  N(() => {
+    c === void 0 && o.size && i(n.get(0) ?? 0);
+  }, [o, c, i, n]);
+  const T = g(
     () => ({
-      items: n,
-      active: s,
-      panel: l,
-      register: v,
-      indexOf: (e, o) => n.findIndex((t) => t.id === e || t.value === o),
-      isActive: (e, o) => s?.id === e || s?.value === o,
-      activate(e, o) {
-        d?.({ index: e, value: o }), a(o ?? e);
-      }
+      active: d,
+      activate(e) {
+        if (!e) return;
+        const t = [...o].indexOf(e), s = n.get(t);
+        f?.({ index: t, value: s }), i(s ?? t);
+      },
+      isActive: (e) => e ? d === e : !1,
+      hover: w,
+      panel: v,
+      register: x,
+      setHover: (e) => {
+        O(e);
+      },
+      unregister: p
     }),
-    [n, s, l, v, d]
+    [
+      d,
+      w,
+      v,
+      x,
+      p,
+      o,
+      n,
+      f,
+      i
+    ]
   );
-  return /* @__PURE__ */ b(I.Provider, { value: x, children: m });
+  return /* @__PURE__ */ V(j.Provider, { value: T, children: h });
 };
 export {
-  I as TabSetItemsContext,
-  A as TabSetProvider
+  j as TabSetContext,
+  E 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,18 +1,76 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import "./Table.types.js";
-import "../../Table.module-DotXvwJq.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 c } from "../../LoadingSuspense-BtzikVZk.js";
-import "./TableProvider.js";
-import "./helpers/hasColumns.js";
-import "./components/TableRows.js";
-import "./hooks/useTable.js";
+import { useIdIfNeeded as w } from "../../hooks/useIdIfNeeded.js";
+import { TableEmpty as E } from "./components/TableEmpty.js";
+import { propagateTestid as a } from "../../helpers/utility/propagateTestid.js";
+import { TableHeader as G } from "./components/TableHeader.js";
+import { T as R } from "../../TableProvider-_4Whj6P5.js";
+import { TableRows as $ } from "./components/TableRows.js";
+import { table as k } from "./Table.styles.js";
+import { c as h } from "../../cx-DN21T1EH.js";
+import { s as q } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as z } from "../../enums.js";
+const U = ({
+  alternate: T = !1,
+  caption: I,
+  children: r,
+  columns: l,
+  compact: x = !1,
+  className: y,
+  "data-testid": e,
+  empty: d,
+  hiddenCaption: N,
+  hiddenHeader: m,
+  hover: g,
+  removeRowBorders: u = !1,
+  rowProps: C,
+  rows: c = [],
+  scope: j,
+  ...n
+}) => {
+  const o = w({ id: n.id }), v = `${o}--caption`, s = (d && l?.length) ?? !!c?.length, S = r ?? s, i = k({
+    alternate: T,
+    compact: x,
+    hover: g,
+    hiddenCaption: N,
+    removeRowBorders: u
+  }), p = a(e, "thead"), b = a(e, "tbody");
+  return S ? /* @__PURE__ */ t("div", { className: i.root, "data-testid": e, children: /* @__PURE__ */ t(R, { columns: l, rows: c, children: /* @__PURE__ */ f(
+    q.table,
+    {
+      ...n,
+      className: h(y, i.table, z.Table),
+      id: o,
+      "data-testid": a(e, "table"),
+      children: [
+        /* @__PURE__ */ t(
+          "caption",
+          {
+            id: v,
+            className: h(i.caption),
+            "data-testid": a(e, "caption"),
+            children: I
+          }
+        ),
+        !m && s && /* @__PURE__ */ t("thead", { "data-testid": p, children: /* @__PURE__ */ t(G, { tableId: o, testId: p }) }),
+        s && /* @__PURE__ */ f("tbody", { "data-testid": b, children: [
+          /* @__PURE__ */ t(
+            $,
+            {
+              testId: b,
+              tableId: o,
+              rowProps: C,
+              scope: j,
+              hiddenHeader: m
+            }
+          ),
+          /* @__PURE__ */ t(E, { children: d })
+        ] }),
+        r
+      ]
+    }
+  ) }) }) : null;
+};
 export {
-  c as IressTable
+  U as IressTable
 };

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

@@ -0,0 +1,103 @@
+import { c as n } from "../../cva-JiDXAa83.js";
+import { m as s, a as l, s as i, i as c } from "../../css-fGu_jDvv.js";
+import { c as p } from "../../create-recipe-C-ASk1Hy.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"
+  ]
+], m = /* @__PURE__ */ d.map(([t, e]) => [t, p(e, r, c(b, t))]), u = s((t = {}) => Object.fromEntries(m.map(([e, o]) => [e, o.recipeFn(t)]))), a = [
+  "alternate",
+  "compact",
+  "hover",
+  "removeRowBorders",
+  "sortButtonNoWrap",
+  "tableBodyOpen",
+  "hiddenCaption"
+], _ = (t) => ({ ...r, ...l(t) }), g = /* @__PURE__ */ Object.assign(u, {
+  __recipe__: !1,
+  __name__: "table",
+  raw: (t) => t,
+  classNameMap: {},
+  variantKeys: a,
+  variantMap: {
+    alternate: [
+      "true"
+    ],
+    compact: [
+      "true"
+    ],
+    hover: [
+      "true"
+    ],
+    removeRowBorders: [
+      "true"
+    ],
+    sortButtonNoWrap: [
+      "true"
+    ],
+    tableBodyOpen: [
+      "true"
+    ],
+    hiddenCaption: [
+      "true"
+    ]
+  },
+  splitVariantProps(t) {
+    return i(t, a);
+  },
+  getVariantProps: _
+}), V = n({
+  base: {
+    textAlign: "start"
+  },
+  variants: {
+    format: {
+      default: { textAlign: "start" },
+      number: { "&&": { textAlign: "end" } },
+      currency: { "&&": { textAlign: "end" } }
+    },
+    divider: {
+      true: {
+        borderInlineEnd: "table"
+      }
+    }
+  },
+  defaultVariants: {
+    format: "default",
+    divider: !1
+  }
+});
+export {
+  g as table,
+  V as tableCell
+};

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

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

package/dist/components/Table/TableFormattedValue/TableFormattedValue.js

@@ -1,17 +1,17 @@
-import { formatPercentage as o } from "../../../helpers/formatting/formatPercentage.js";
-import { formatDate as f, formatShortDate as m } from "../../../helpers/formatting/formatDate.js";
-import { formatCurrency as p } from "../../../helpers/formatting/formatCurrency.js";
-import { formatISODateTime as c, formatRelativeTime as u } from "../../../helpers/formatting/formatDateTime.js";
-const y = ({
-  currencyCode: t = "$",
-  currencyFormatOptions: i,
-  format: e,
-  row: n,
+import { formatPercentage as n } from "../../../helpers/formatting/formatPercentage.js";
+import { formatDate as o, formatShortDate as m } from "../../../helpers/formatting/formatDate.js";
+import { formatCurrency as f } from "../../../helpers/formatting/formatCurrency.js";
+import { formatISODateTime as p, formatRelativeTime as c } from "../../../helpers/formatting/formatDateTime.js";
+const D = ({
+  currencyFormatOptions: e,
+  format: t,
+  row: i,
   value: r
-}) => e ? typeof e == "function" ? e(r, n) : e === "currency" ? `${t}${p({
+}) => t ? typeof t == "function" ? t(r, i) : t === "currency" ? `${f({
   value: r,
-  ...i
-})}` : e === "number" ? typeof r == "number" ? r : Number(r) : e === "date" ? f(r) : e === "shortDate" ? m(r) : e === "isoDateTime" ? c(r) : e === "relativeTime" ? u(r) : e === "percent" ? o(r) : r : r;
+  withSymbol: !0,
+  ...e
+})}` : t === "number" ? typeof r == "number" ? r : Number(r) : t === "date" ? o(r) : t === "shortDate" ? m(r) : t === "isoDateTime" ? p(r) : t === "relativeTime" ? c(r) : t === "percent" ? n(r) : r : r;
 export {
-  y as IressTableFormattedValue
+  D as IressTableFormattedValue
 };