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

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

@@ -1,17 +1,27 @@
-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,
+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 c, formatRelativeTime as p } from "../../../helpers/formatting/formatDateTime.js";
+const b = [
+  "string",
+  "number",
+  "date",
+  "shortDate",
+  "isoDateTime",
+  "relativeTime",
+  "currency",
+  "percent"
+], y = ({
+  currencyFormatOptions: t,
   format: e,
-  row: n,
+  row: i,
   value: r
-}) => e ? typeof e == "function" ? e(r, n) : e === "currency" ? `${t}${p({
+}) => e ? typeof e == "function" ? e(r, i) : e === "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,
+  ...t
+})}` : e === "number" ? typeof r == "number" ? r : Number(r) : e === "date" ? o(r) : e === "shortDate" ? m(r) : e === "isoDateTime" ? c(r) : e === "relativeTime" ? p(r) : e === "percent" ? n(r) : r : r;
 export {
-  y as IressTableFormattedValue
+  y as IressTableFormattedValue,
+  b as TABLE_CELL_FORMATS
 };

package/dist/components/Table/TableProvider.js

@@ -1,34 +1,10 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useMemo as r } from "react";
-import { composeIDSTableColumnDefs as p } from "./helpers/composeIDSTableColumnDefs.js";
-import { u as f } from "../../index-CtOScEKX.js";
-import { composeIDSTableInitialSorting as g } from "./helpers/composeIDSTableInitialSorting.js";
-import { getTableContext as d } from "./TableContext.js";
-import { findColumnByKey as c } from "./helpers/findColumnByKey.js";
-import { g as u, a as S } from "../../index-CmsyHM_3.js";
-const I = ({
-  children: i,
-  columns: o,
-  rows: e
-}) => {
-  const m = r(() => p(e, o), [o, e]), t = f({
-    columns: m,
-    data: e,
-    getCoreRowModel: S(),
-    getSortedRowModel: u(),
-    initialState: {
-      sorting: g(o)
-    }
-  }), a = r(
-    () => ({
-      api: t,
-      getColumnByKey: (l) => c(l, o)
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- only update when columns and rows change
-    [e, o, t.getState().sorting]
-  ), { Provider: n } = d();
-  return /* @__PURE__ */ s(n, { value: a, children: i });
-};
+import "react/jsx-runtime";
+import "react";
+import { a as m, T as p, g as T } from "../../TableProvider-D8SQKIG8.js";
+import "./helpers/composeTableInitialSorting.js";
+import "../../composeTableColumnDefs-CeWqgpKW.js";
 export {
-  I as IressTableProvider
+  m as TableContext,
+  p as TableProvider,
+  T as getTableContext
 };

package/dist/components/Table/components/TableBodyCell.js

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import { useIDSTableColumnStyles as h } from "../hooks/useIDSTableColumnStyles.js";
+import { useTableColumnStyles as h } from "../hooks/useTableColumnStyles.js";
 const f = ({
   additionalHeaders: t,
   cellApi: o,

package/dist/components/Table/components/TableEmpty.js

@@ -1,12 +1,12 @@
-import { jsx as n } from "react/jsx-runtime";
-import { s } from "../../../Table.module-CdZFi754.js";
-import { useTable as l } from "../hooks/useTable.js";
-const u = ({ children: r }) => {
-  const t = l(), o = t == null ? void 0 : t.api.getSortedRowModel().rows;
-  if (o != null && o.length || !r) return null;
-  const e = t == null ? void 0 : t.api.getVisibleFlatColumns().length;
-  return e ? /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", { className: s.empty, colSpan: e, children: r }) }) : null;
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as l } from "react";
+import { a as m } from "../../../TableProvider-D8SQKIG8.js";
+const p = ({ children: n }) => {
+  const t = l(m), o = t == null ? void 0 : t.api.getSortedRowModel().rows;
+  if (o != null && o.length || !n) return null;
+  const r = t == null ? void 0 : t.api.getVisibleFlatColumns().length;
+  return r ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: r, children: n }) }) : null;
 };
 export {
-  u as TableEmpty
+  p as TableEmpty
 };

package/dist/components/Table/components/TableHeader.js

@@ -1,8 +1,45 @@
-import "react/jsx-runtime";
-import "../../../helpers/utility/propagateTestid.js";
-import "../../../index-CtOScEKX.js";
-import { U as i } from "../../../LoadingSuspense-BjzbePWa.js";
-import "../hooks/useTable.js";
+import { jsx as l } from "react/jsx-runtime";
+import { propagateTestid as d } from "../../../helpers/utility/propagateTestid.js";
+import { a as u, f as x } from "../../../TableProvider-D8SQKIG8.js";
+import { TableHeaderCell as g } from "./TableHeaderCell.js";
+import { useContext as s } from "react";
+const w = ({
+  additionalHeaders: p,
+  className: t,
+  setControlViaRef: n,
+  tableId: o,
+  testId: m
+}) => {
+  var c;
+  const i = s(u), a = i == null ? void 0 : i.api.getHeaderGroups();
+  return (c = i == null ? void 0 : i.api.getFlatHeaders()) != null && c.length ? a == null ? void 0 : a.map((e) => /* @__PURE__ */ l(
+    "tr",
+    {
+      "data-testid": d(m, "row", "-"),
+      className: t,
+      id: `${o}--header--${e.id}`,
+      ref: (r) => {
+        const f = `${o}--header--${e.id}`;
+        n == null || n(f)(r);
+      },
+      children: e.headers.map((r) => /* @__PURE__ */ l(
+        g,
+        {
+          additionalHeaders: p,
+          columnApi: r.column,
+          tableId: o,
+          "data-testid": d(
+            m == null ? void 0 : m.replace("thead", "header"),
+            r.id
+          ),
+          children: r.isPlaceholder ? null : x(r.column.columnDef.header, r.getContext())
+        },
+        r.id
+      ))
+    },
+    e.id
+  )) : null;
+};
 export {
-  i as TableHeader
+  w as TableHeader
 };

package/dist/components/Table/components/TableHeaderCell.js

@@ -1,8 +1,35 @@
-import "react/jsx-runtime";
-import "../hooks/useIDSTableColumnStyles.js";
-import "../hooks/useIDSTableColumnSort.js";
-import { ad as a } from "../../../LoadingSuspense-BjzbePWa.js";
-import "../hooks/useTable.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useTableColumnStyles as C } from "../hooks/useTableColumnStyles.js";
+import { useTableColumnSort as b } from "../hooks/useTableColumnSort.js";
+import { TableSortButton as f } from "./TableSortButton.js";
+import { useContext as i } from "react";
+import { a as u } from "../../../TableProvider-D8SQKIG8.js";
+const h = ({
+  additionalHeaders: m,
+  children: e,
+  columnApi: t,
+  tableId: n,
+  ...l
+}) => {
+  var r, s;
+  const o = b({
+    columnApi: t,
+    columnKey: t.id
+  }), d = C({ columnKey: t.id }), p = (s = (r = i(u)) == null ? void 0 : r.getColumnByKey(
+    t.id
+  )) == null ? void 0 : s.noWrap;
+  return /* @__PURE__ */ a(
+    "th",
+    {
+      ...l,
+      id: `${n}__${t.id}`,
+      headers: m,
+      ...o == null ? void 0 : o.columnProps,
+      ...d,
+      children: t.getCanSort() && o ? /* @__PURE__ */ a(f, { ...o == null ? void 0 : o.buttonProps, noWrap: p, children: e }) : e
+    }
+  );
+};
 export {
-  a as TableHeaderCell
+  h as TableHeaderCell
 };

package/dist/components/Table/components/TableRows.js

@@ -1,49 +1,50 @@
 import { jsx as d } from "react/jsx-runtime";
-import { f as $ } from "../../../index-CtOScEKX.js";
-import { TableBodyCell as g } from "./TableBodyCell.js";
-import { useTable as x } from "../hooks/useTable.js";
-import { propagateTestid as y } from "../../../helpers/utility/propagateTestid.js";
-const j = ({
+import { g as u, f as g } from "../../../TableProvider-D8SQKIG8.js";
+import { TableBodyCell as x } from "./TableBodyCell.js";
+import { propagateTestid as $ } from "../../../helpers/utility/propagateTestid.js";
+import { useContext as y } from "react";
+import { s } from "../../../factory-DHLOr79I.js";
+const A = ({
   additionalHeaders: a,
-  hiddenHeader: f,
-  rowProps: n = {},
-  setControlViaRef: p,
-  scope: u = "row",
-  tableId: c,
-  testId: o
+  hiddenHeader: t,
+  rowProps: e = {},
+  setControlViaRef: n,
+  scope: f = "row",
+  tableId: p,
+  testId: i
 }) => {
-  const e = x(), m = e == null ? void 0 : e.api.getSortedRowModel().rows;
+  const l = y(u()), m = l == null ? void 0 : l.api.getSortedRowModel().rows;
   return m != null && m.length ? m.map((r) => /* @__PURE__ */ d(
-    "tr",
+    s.tr,
     {
-      "data-testid": o == null ? void 0 : o.replace("tbody", "row"),
-      id: `${c}--rows--${r.id}`,
-      ref: (i) => {
-        const l = `${c}--rows--${r.id}`;
-        p == null || p(l)(i);
+      "data-testid": i == null ? void 0 : i.replace("tbody", "row"),
+      id: `${p}--rows--${r.id}`,
+      ref: (o) => {
+        const c = `${p}--rows--${r.id}`;
+        n == null || n(c)(o);
       },
-      ...typeof n == "function" ? n(r) : n,
-      children: r.getVisibleCells().map((i, l) => /* @__PURE__ */ d(
-        g,
+      ...typeof e == "function" ? e(r) : e,
+      children: r.getVisibleCells().map((o, c) => /* @__PURE__ */ d(
+        x,
         {
           additionalHeaders: a,
-          "data-testid": y(
-            o == null ? void 0 : o.replace("tbody", "cell"),
-            `row_${r.id}__col_${i.column.id}`
+          "data-testid": $(
+            i == null ? void 0 : i.replace("tbody", "cell"),
+            `row_${r.id}__col_${o.column.id}`
           ),
-          cellApi: i,
-          hiddenHeader: f,
-          index: l,
-          scope: u,
-          tableId: c,
-          children: $(i.column.columnDef.cell, i.getContext())
+          cellApi: o,
+          hiddenHeader: t,
+          index: c,
+          scope: f,
+          tableId: p,
+          children: g(o.column.columnDef.cell, o.getContext())
         },
-        i.id
+        o.id
       ))
     },
     r.id
   )) : null;
 };
 export {
-  j as TableRows
+  A as TableRows
 };

package/dist/components/Table/components/TableSortButton.js

@@ -1,7 +1,35 @@
-import "react/jsx-runtime";
-import { ac as a } from "../../../LoadingSuspense-BjzbePWa.js";
-import "../../../Table.module-CdZFi754.js";
-import "../../../index-2QXL0WYc.js";
+import { jsxs as a, jsx as m } from "react/jsx-runtime";
+import { IressIcon as l } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import { table as p } from "../Table.styles.js";
+const x = ({
+  children: e,
+  label: r = "sortable",
+  noWrap: s = !0,
+  sort: o,
+  toggleSorting: n
+}) => {
+  const c = o != null && o.desc ? "sort-down" : "sort-up", t = p({ sortButtonNoWrap: s });
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: t.sortHeader,
+      onClick: n,
+      children: [
+        e,
+        /* @__PURE__ */ m(
+          l,
+          {
+            name: o ? c : "sort",
+            className: t.sortIcon,
+            screenreaderText: r
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  a as TableSortButton
+  x as TableSortButton
 };

package/dist/components/Table/helpers/composeTableColumnDefs.js

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import "../TableFormattedValue/TableFormattedValue.js";
+import "../../../helpers/formatting/formatObjectKey.js";
+import { a as t } from "../../../composeTableColumnDefs-CeWqgpKW.js";
+export {
+  t as composeTableColumnDefs
+};

package/dist/components/Table/helpers/composeTableInitialSorting.js

@@ -0,0 +1,9 @@
+const s = (r) => r ? r.map(
+  (t) => [t.key, t]
+).filter(([, t]) => typeof (t == null ? void 0 : t.sort) == "string").map(([t, e]) => ({
+  id: t,
+  desc: (e == null ? void 0 : e.sort) === "desc"
+})) : [];
+export {
+  s as composeTableInitialSorting
+};

package/dist/components/Table/hooks/useTableColumnSort.js

@@ -0,0 +1,25 @@
+import { useContext as i } from "react";
+import { a as d } from "../../../TableProvider-D8SQKIG8.js";
+const f = ({
+  columnApi: s,
+  columnKey: e
+}) => {
+  const o = i(d), t = o == null ? void 0 : o.getColumnByKey(e), n = (t == null ? void 0 : t.sort) ?? (t == null ? void 0 : t.sortFn);
+  if (!t || !n || !(s != null && s.getCanSort())) return;
+  const r = o == null ? void 0 : o.api.getState().sorting.find((g) => g.id === e), a = r != null && r.desc ? "descending" : "ascending";
+  return {
+    buttonProps: {
+      label: t.sortableText,
+      sort: r,
+      toggleSorting: () => {
+        s.toggleSorting();
+      }
+    },
+    columnProps: {
+      "aria-sort": r ? a : "none"
+    }
+  };
+};
+export {
+  f as useTableColumnSort
+};

package/dist/components/Table/hooks/useTableColumnStyles.js

@@ -0,0 +1,29 @@
+import { tableCell as a } from "../Table.styles.js";
+import { useContext as m } from "react";
+import { a as d } from "../../../TableProvider-D8SQKIG8.js";
+import { c as n } from "../../../cva-B2x59Dph.js";
+import { s as f } from "../../../is-valid-prop-DFFvE05x.js";
+const w = ({
+  columnKey: o
+}) => {
+  var r;
+  const t = (r = m(d)) == null ? void 0 : r.getColumnByKey(o);
+  if (!t) return;
+  const e = t.format === "number" || t.format === "currency" ? t.format : "default", [s] = f(t), { width: l, ...i } = s;
+  return {
+    className: n(
+      a.raw({
+        format: t.textAlign ? void 0 : e,
+        divider: t.divider
+      }),
+      i
+    ),
+    style: {
+      width: t == null ? void 0 : t.width,
+      minWidth: t == null ? void 0 : t.width
+    }
+  };
+};
+export {
+  w as useTableColumnStyles
+};

package/dist/components/Table/index.js

@@ -1,15 +1,12 @@
-import { TABLE_CELL_FORMATS as r, TABLE_COLUMN_ALIGN as l, TABLE_SCOPES as a, TableCellFormat as T, TableColumnAlign as m, TableScope as s } from "./Table.types.js";
-import { J as L } from "../../LoadingSuspense-BjzbePWa.js";
-import { IressTableFormattedValue as A } from "./TableFormattedValue/TableFormattedValue.js";
-import { IressTableBody as C } from "./TableBody/TableBody.js";
+import { IressTable as o } from "./Table.js";
+import { table as t, tableCell as a } from "./Table.styles.js";
+import { IressTableBody as b } from "./TableBody/TableBody.js";
+import { IressTableFormattedValue as T, TABLE_CELL_FORMATS as f } from "./TableFormattedValue/TableFormattedValue.js";
 export {
-  L as IressTable,
-  C as IressTableBody,
-  A as IressTableFormattedValue,
-  r as TABLE_CELL_FORMATS,
-  l as TABLE_COLUMN_ALIGN,
-  a as TABLE_SCOPES,
-  T as TableCellFormat,
-  m as TableColumnAlign,
-  s as TableScope
+  o as IressTable,
+  b as IressTableBody,
+  T as IressTableFormattedValue,
+  f as TABLE_CELL_FORMATS,
+  t as table,
+  a as tableCell
 };

package/dist/components/Tag/Tag.js

@@ -1,8 +1,48 @@
-import "react/jsx-runtime";
-import "react";
-import "../../index-2QXL0WYc.js";
-import { K as s } from "../../LoadingSuspense-BjzbePWa.js";
-import "../../helpers/utility/propagateTestid.js";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { useRef as d } from "react";
+import { propagateTestid as x } from "../../helpers/utility/propagateTestid.js";
+import "../../Button-BXzmntRi.js";
+import { IressCloseButton as C } from "../Button/CloseButton/CloseButton.js";
+import { IressText as g } from "../Text/Text.js";
+import { tag as T } from "./Tag.styles.js";
+import { c as b } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as B } from "../../enums.js";
+const G = ({
+  children: n,
+  className: c,
+  "data-testid": o,
+  deleteButton: e,
+  deleteButtonText: i = "Delete",
+  onDelete: t,
+  onDeleteButtonBlur: p,
+  ...l
+}) => {
+  const a = d(null), r = T({ customDeleteButton: !!e });
+  return /* @__PURE__ */ u(
+    g,
+    {
+      className: b(c, r.root, B.Tag),
+      "data-testid": o,
+      element: "span",
+      ...l,
+      children: [
+        /* @__PURE__ */ s("span", { ref: a, className: r.content, children: n }),
+        /* @__PURE__ */ s("span", { className: r.deleteButton, children: e ?? /* @__PURE__ */ s(
+          C,
+          {
+            "data-testid": x(o, "delete-button__button"),
+            onBlur: p,
+            onClick: (f) => {
+              var m;
+              return t == null ? void 0 : t(((m = a.current) == null ? void 0 : m.textContent) ?? "", f);
+            },
+            screenreaderText: i
+          }
+        ) })
+      ]
+    }
+  );
+};
 export {
-  s as IressTag
+  G as IressTag
 };

package/dist/components/Tag/Tag.styles.js

@@ -0,0 +1,71 @@
+import { s as o } from "../../sva-TRyehFkb.js";
+const t = o({
+  slots: ["root", "content", "deleteButton"],
+  base: {
+    root: {
+      alignItems: "center",
+      bg: "colour.neutral.20",
+      border: "divider",
+      borderRadius: "radius.system.badge",
+      display: "inline-flex",
+      gap: "spacing.100",
+      px: "xs",
+      py: "spacing.050",
+      transition: "colors"
+    },
+    content: {
+      lineHeight: 1
+    },
+    deleteButton: {
+      "& button": {
+        color: "[inherit]",
+        fontSize: "inherit",
+        minWidth: "[0]",
+        minHeight: "[0]",
+        py: "spacing.000",
+        px: "spacing.000",
+        mx: "spacing.050",
+        _after: {
+          display: "none"
+        }
+      }
+    }
+  },
+  variants: {
+    active: {
+      true: {
+        root: {
+          bg: "colour.primary.surface",
+          borderColor: "colour.primary.fill",
+          color: "colour.primary.text"
+        }
+      }
+    },
+    customDeleteButton: {
+      true: {
+        root: {
+          "&:has(button:hover)": {
+            bg: "colour.primary.surface",
+            borderColor: "colour.primary.fill",
+            color: "colour.primary.text"
+          }
+        }
+      },
+      false: {
+        root: {
+          "&:has(button:hover)": {
+            bg: "colour.system.danger.surface",
+            borderColor: "colour.system.danger.fill",
+            color: "colour.system.danger.text"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    customDeleteButton: !1
+  }
+});
+export {
+  t as tag
+};