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

package/dist/components/Table/TableProvider.js

@@ -1,38 +1,10 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as f, useMemo as r, useImperativeHandle as p } from "react";
-import { composeIDSTableColumnDefs as g } from "./helpers/composeIDSTableColumnDefs.js";
-import { u as c } from "../../index-DLnR8XTt.js";
-import { composeIDSTableInitialSorting as u } from "./helpers/composeIDSTableInitialSorting.js";
-import { getTableContext as S } from "./TableContext.js";
-import { findColumnByKey as b } from "./helpers/findColumnByKey.js";
-import { g as C, a as R } from "../../index-BaVtNOfa.js";
-const T = ({ children: i, columns: e, rows: o }, a) => {
-  const m = r(() => g(o, e), [e, o]), t = c({
-    columns: m,
-    data: o,
-    getCoreRowModel: R(),
-    getSortedRowModel: C(),
-    initialState: {
-      sorting: u(e)
-    }
-  }), n = r(
-    () => ({
-      api: t,
-      getColumnByKey: (s) => b(s, e)
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- only update when columns and rows change
-    [o, e, t.getState().sorting]
-  );
-  p(
-    a,
-    () => ({
-      api: t
-    }),
-    [t]
-  );
-  const { Provider: l } = S();
-  return /* @__PURE__ */ d(l, { value: n, children: i });
-}, B = f(T);
+import "react/jsx-runtime";
+import "react";
+import { a as m, T as p, g as T } from "../../TableProvider-_4Whj6P5.js";
+import "./helpers/composeTableInitialSorting.js";
+import "../../composeTableColumnDefs-Hmd6yfdj.js";
 export {
-  B 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 r } from "react/jsx-runtime";
-import { s } from "../../../Table.module-DotXvwJq.js";
-import { useTable as l } from "../hooks/useTable.js";
-const p = ({ children: t }) => {
-  const o = l();
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as n } from "react";
+import { a as l } from "../../../TableProvider-_4Whj6P5.js";
+const u = ({ children: t }) => {
+  const o = n(l);
   if (o?.api.getSortedRowModel().rows?.length || !t) return null;
-  const e = o?.api.getVisibleFlatColumns().length;
-  return e ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { className: s.empty, colSpan: e, children: t }) }) : null;
+  const r = o?.api.getVisibleFlatColumns().length;
+  return r ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: r, children: t }) }) : null;
 };
 export {
-  p as TableEmpty
+  u as TableEmpty
 };

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

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

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

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

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

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

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

@@ -1,7 +1,35 @@
-import "react/jsx-runtime";
-import { ac as a } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../../Table.module-DotXvwJq.js";
-import "../../../index-cbHCAGLB.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: r,
+  label: s = "sortable",
+  noWrap: e = !0,
+  sort: o,
+  toggleSorting: n
+}) => {
+  const c = o?.desc ? "sort-down" : "sort-up", t = p({ sortButtonNoWrap: e });
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: t.sortHeader,
+      onClick: n,
+      children: [
+        r,
+        /* @__PURE__ */ m(
+          l,
+          {
+            name: o ? c : "sort",
+            className: t.sortIcon,
+            screenreaderText: s
+          }
+        )
+      ]
+    }
+  );
+};
 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-Hmd6yfdj.js";
+export {
+  t as composeTableColumnDefs
+};

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

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

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

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

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

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

package/dist/components/Table/index.js

@@ -1,15 +1,11 @@
-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-BtzikVZk.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 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,
+  f as IressTableFormattedValue,
+  t as table,
+  a as tableCell
 };

package/dist/components/Tag/Tag.js

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

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

@@ -0,0 +1,70 @@
+import { s as o } from "../../sva-OmxClA9g.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",
+      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
+};

package/dist/components/Tag/TagInput/TagInput.js

@@ -1,8 +1,141 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../hooks/useControlledState.js";
-import { L as s } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../../helpers/form/getValueAsEvent.js";
+import { jsxs as y, jsx as d } from "react/jsx-runtime";
+import { forwardRef as $, useState as b, useCallback as z } from "react";
+import { IressInput as F } from "../../Input/Input.js";
+import "../../Input/Input.styles.js";
+import { useControlledState as G } from "../../../hooks/useControlledState.js";
+import { getValueAsEvent as p } from "../../../helpers/form/getValueAsEvent.js";
+import { IressTag as h } from "../Tag.js";
+import { propagateTestid as v } from "../../../helpers/utility/propagateTestid.js";
+import "../../Inline/Inline.styles.js";
+import { IressInline as H } from "../../Inline/Inline.js";
+import { tagInput as J } from "./TagInput.styles.js";
+const L = ({
+  "data-testid": s,
+  onTagDelete: c,
+  onTagDeleteAll: u,
+  onTagDeleteButtonBlur: i,
+  selectedOptionsTagText: n,
+  tags: r = [],
+  tagLimit: m = 5
+}) => r.length ? r.length <= m ? r.map((l) => /* @__PURE__ */ d(
+  h,
+  {
+    deleteButtonText: `Delete ${l}`,
+    onDelete: c,
+    onDeleteButtonBlur: i,
+    "data-testid": v(s, "tag"),
+    ml: "xs",
+    children: l
+  },
+  l
+)) : /* @__PURE__ */ y(
+  h,
+  {
+    onDelete: u,
+    onDeleteButtonBlur: i,
+    "data-testid": v(s, "tag"),
+    ml: "xs",
+    py: "none",
+    children: [
+      String(r.length) || "0",
+      " ",
+      n
+    ]
+  }
+) : null, M = $(
+  ({
+    className: s,
+    defaultValue: c,
+    name: u,
+    onBlur: i,
+    onChange: n,
+    onExistingTag: r,
+    onKeyDown: m,
+    onTagDelete: l,
+    onTagDeleteAll: w,
+    onTagDeleteButtonBlur: B,
+    selectedOptionsTagText: x = "selected",
+    style: k,
+    tagLimit: j = 5,
+    width: A = "100perc",
+    value: S,
+    ...f
+  }, E) => {
+    const [D, g] = b(""), { value: a, setValue: o } = G({
+      component: "IressTagInput",
+      defaultValue: c,
+      value: S
+    }), K = J(), I = z(
+      (e = "") => {
+        if (!e)
+          return;
+        if (a?.includes(e)) {
+          r?.(e);
+          return;
+        }
+        const t = [...a ?? [], e];
+        n?.(p(t), t), o(t);
+      },
+      [n, r, o, a]
+    ), N = (e) => {
+      i?.(e), I(e.currentTarget.value), g("");
+    }, V = (e) => {
+      if (m?.(e), e.key === "Backspace" && !D) {
+        const t = a?.slice(0, -1);
+        n?.(p(t), t), o(t);
+      } else if (e.key === "Enter") {
+        const t = e.currentTarget;
+        t.value && (e.preventDefault(), I(t.value), g(""));
+      }
+    }, q = (e, t) => {
+      t.stopPropagation(), l?.(e, t);
+      const T = a?.filter((R) => R !== e);
+      n?.(p(T), T), o(T);
+    }, Q = (e, t) => {
+      t.stopPropagation(), w?.(e, t), n?.(p([]), []), o([]);
+    };
+    return /* @__PURE__ */ y(H, { gap: "sm", className: s, style: k, children: [
+      /* @__PURE__ */ d(
+        F,
+        {
+          ...f,
+          className: K.input,
+          onBlur: N,
+          onChange: (e) => g(e.currentTarget.value),
+          onKeyDown: V,
+          prepend: /* @__PURE__ */ d(
+            L,
+            {
+              "data-testid": f["data-testid"],
+              onTagDelete: q,
+              onTagDeleteAll: Q,
+              onTagDeleteButtonBlur: B,
+              selectedOptionsTagText: x,
+              tags: a ?? [],
+              tagLimit: j
+            }
+          ),
+          ref: E,
+          width: A,
+          value: D
+        }
+      ),
+      u && /* @__PURE__ */ d(
+        "input",
+        {
+          type: "hidden",
+          value: (a ?? []).join(", "),
+          name: u,
+          "data-testid": v(
+            f["data-testid"],
+            "hidden-input"
+          )
+        }
+      )
+    ] });
+  }
+);
+M.displayName = "IressTagInput";
 export {
-  s as IressTagInput
+  M as IressTagInput
 };