@iress-oss/ids-components 0.0.1-dev.14 → 0.0.1-dev.16

package/dist/components/TabSet/TabSetProvider.js

@@ -0,0 +1,50 @@
+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(
+  void 0
+), L = ({
+  children: m,
+  onChange: i,
+  defaultSelected: l,
+  panel: c,
+  selected: n
+}) => {
+  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 }];
+    });
+  }, []), b = I(
+    () => ({
+      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);
+      }
+    }),
+    [d, t, c, v, i]
+  );
+  return /* @__PURE__ */ h(k.Provider, { value: b, children: m });
+};
+export {
+  k as TabSetItemsContext,
+  L as TabSetProvider
+};

package/dist/components/TabSet/components/TabSetItem.js

@@ -0,0 +1,45 @@
+import { jsx as u } from "react/jsx-runtime";
+import { s as A } from "../../../TabSet.module-FRUnHgA1.js";
+import { a as d } from "../../../floating-ui.react-nmA48tb2.js";
+import { focusableElements as f } from "../../../helpers/dom/focusableElements.js";
+const m = (i, t, e, a) => {
+  var o;
+  const r = i.querySelector("[id]"), b = r == null ? void 0 : r.getAttribute("id");
+  r == null || r.removeAttribute("id"), i.removeAttribute("tabindex"), i.removeAttribute("data-active"), i.removeAttribute("aria-selected"), (o = e.ref) == null || o.call(e, t), t.tabIndex = a ? 0 : -1, a ? t.setAttribute("data-active", "") : t.removeAttribute("data-active"), b && t.setAttribute("id", b), t.setAttribute("aria-selected", String(a));
+}, x = ({
+  children: i,
+  handleSelection: t,
+  index: e,
+  selected: a,
+  value: r,
+  ...b
+}) => /* @__PURE__ */ u(
+  d,
+  {
+    render: (o) => /* @__PURE__ */ u(
+      "div",
+      {
+        ...b,
+        ...o,
+        "aria-selected": a,
+        className: A.listItem,
+        onClick: () => t(e, r),
+        onKeyDown: (s) => ["Space", "Enter"].includes(s.key) && t(e, r),
+        ref: (s) => {
+          if (!s) return;
+          const c = f(s)[0];
+          c && m(
+            s,
+            c,
+            o,
+            a
+          );
+        },
+        children: i
+      }
+    )
+  }
+);
+export {
+  x as TabSetItem
+};

package/dist/components/TabSet/helpers/mapTabs.js

@@ -0,0 +1,33 @@
+import { jsx as a } from "react/jsx-runtime";
+import { idsLogger as s } from "../../../helpers/utility/idsLogger.js";
+import { LoggerLevels as t } from "../../../enums.js";
+import { IressTab as c } from "../Tab/Tab.js";
+import "../TabSet.js";
+const y = (r) => (s(
+  "IressTabs: mapTabs has been deprecated and will be removed in a future version of IDS, please map and render the items array directly in your application instead.",
+  t.Warn
+), r != null && r.length ? r.map(
+  ({
+    tabName: e,
+    active: d,
+    tabButtonText: m,
+    tabButtonTestId: n,
+    tabButtonOnClick: p,
+    tabPanelContent: i,
+    tabPanelTestId: o
+  }, l) => /* @__PURE__ */ a(
+    c,
+    {
+      value: e,
+      active: d,
+      "data-testid": n,
+      onClick: p,
+      label: m,
+      children: o ? /* @__PURE__ */ a("div", { "data-testid": o, children: i }) : i
+    },
+    e || l
+  )
+) : null);
+export {
+  y as mapTabs
+};

package/dist/components/TabSet/hooks/useTabSetItems.js

@@ -0,0 +1,6 @@
+import { useContext as t } from "react";
+import { TabSetItemsContext as e } from "../TabSetProvider.js";
+const r = () => t(e);
+export {
+  r as useTabSetItems
+};

package/dist/components/TabSet/index.js

@@ -0,0 +1,11 @@
+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";
+export {
+  e as IressTab,
+  p as IressTabSet,
+  T as TAB_SET_LAYOUTS,
+  a as TabSetLayout,
+  b as mapTabs
+};

package/dist/components/Table/Table.js

@@ -0,0 +1,18 @@
+import "react/jsx-runtime";
+import "../../index-2QXL0WYc.js";
+import "./Table.types.js";
+import "../../Table.module-r-RfIeLI.js";
+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-BwlrIicY.js";
+import "./TableProvider.js";
+import "./helpers/hasColumns.js";
+import "./components/TableRows.js";
+import "./hooks/useTable.js";
+export {
+  c as IressTable
+};

package/dist/components/Table/Table.types.js

@@ -0,0 +1,23 @@
+var t = /* @__PURE__ */ ((r) => (r.Row = "row", r.Col = "col", r))(t || {});
+const c = ["row", "col"];
+var e = /* @__PURE__ */ ((r) => (r.Left = "left", r.Right = "right", r.Center = "center", r))(e || {});
+const i = ["left", "right", "center"];
+var n = /* @__PURE__ */ ((r) => (r.String = "string", r.Number = "number", r.Date = "date", r.Currency = "currency", r.Percent = "percent", r))(n || {});
+const L = [
+  "string",
+  "number",
+  "date",
+  "shortDate",
+  "isoDateTime",
+  "relativeTime",
+  "currency",
+  "percent"
+];
+export {
+  L as TABLE_CELL_FORMATS,
+  i as TABLE_COLUMN_ALIGN,
+  c as TABLE_SCOPES,
+  n as TableCellFormat,
+  e as TableColumnAlign,
+  t as TableScope
+};

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

@@ -0,0 +1,125 @@
+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-BwlrIicY.js";
+import { IressTableProvider as V } from "../TableProvider.js";
+import { s as f } from "../../../Table.module-r-RfIeLI.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,
+  setController: n,
+  tableId: a
+}) => {
+  const r = N(), m = r == null ? void 0 : r.api.getVisibleFlatColumns().length;
+  return m ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
+    "th",
+    {
+      "aria-expanded": e ? void 0 : o,
+      colSpan: m,
+      className: C(f.rowGroupHeader, {
+        [U.SROnly]: e
+      }),
+      id: `${a}--caption`,
+      onClick: i,
+      scope: "rowgroup",
+      ref: n,
+      children: /* @__PURE__ */ t("button", { className: f.activator, type: "button", children: l })
+    }
+  ) }) : null;
+}, z = ({
+  children: l,
+  setControlViaRef: e,
+  tableId: i
+}) => {
+  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,
+  open: b = !1,
+  rowProps: S,
+  rows: c = [],
+  scope: H,
+  ...I
+}) => {
+  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]), !$)
+    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 })
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  et as IressTableBody
+};

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

@@ -0,0 +1 @@
+

package/dist/components/Table/TableContext.js

@@ -0,0 +1,11 @@
+import { createContext as t } from "react";
+function e() {
+  return t(void 0);
+}
+function r() {
+  return n;
+}
+const n = e();
+export {
+  r as getTableContext
+};

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

@@ -0,0 +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,
+  value: r
+}) => e ? typeof e == "function" ? e(r, n) : e === "currency" ? `${t}${p({
+  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;
+export {
+  y as IressTableFormattedValue
+};

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

@@ -0,0 +1 @@
+

package/dist/components/Table/TableProvider.js

@@ -0,0 +1,38 @@
+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-Dms7F5NM.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-BQfnxwrU.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);
+export {
+  B as IressTableProvider
+};

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

@@ -0,0 +1,31 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useIDSTableColumnStyles as h } from "../hooks/useIDSTableColumnStyles.js";
+const f = ({
+  additionalHeaders: t,
+  cellApi: o,
+  children: m,
+  hiddenHeader: u,
+  index: i,
+  scope: r = "row",
+  tableId: e,
+  ...d
+}) => {
+  const l = h({
+    columnKey: o.column.id
+  }), s = i === 0 && r === "row", n = u ? [] : [`${e}__${o.column.id}`];
+  return !s && r === "row" && n.push(`${e}__${o.row.getVisibleCells()[0].id}`), t && n.push(t), /* @__PURE__ */ c(
+    s ? "th" : "td",
+    {
+      ...d,
+      "data-column": o.column.id,
+      headers: n.length ? n.join(" ") : void 0,
+      id: `${e}__${o.id}`,
+      scope: s ? "row" : void 0,
+      ...l,
+      children: m
+    }
+  );
+};
+export {
+  f as TableBodyCell
+};

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

@@ -0,0 +1,12 @@
+import { jsx as n } from "react/jsx-runtime";
+import { s } from "../../../Table.module-r-RfIeLI.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;
+};
+export {
+  u as TableEmpty
+};

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

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "../../../helpers/utility/propagateTestid.js";
+import "../../../index-Dms7F5NM.js";
+import { U as i } from "../../../LoadingSuspense-BwlrIicY.js";
+import "../hooks/useTable.js";
+export {
+  i as TableHeader
+};

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

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "../hooks/useIDSTableColumnStyles.js";
+import "../hooks/useIDSTableColumnSort.js";
+import { ad as a } from "../../../LoadingSuspense-BwlrIicY.js";
+import "../hooks/useTable.js";
+export {
+  a as TableHeaderCell
+};

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

@@ -0,0 +1,49 @@
+import { jsx as d } from "react/jsx-runtime";
+import { f as $ } from "../../../index-Dms7F5NM.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 = ({
+  additionalHeaders: a,
+  hiddenHeader: f,
+  rowProps: n = {},
+  setControlViaRef: p,
+  scope: u = "row",
+  tableId: c,
+  testId: o
+}) => {
+  const e = x(), m = e == null ? void 0 : e.api.getSortedRowModel().rows;
+  return m != null && m.length ? m.map((r) => /* @__PURE__ */ d(
+    "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);
+      },
+      ...typeof n == "function" ? n(r) : n,
+      children: r.getVisibleCells().map((i, l) => /* @__PURE__ */ d(
+        g,
+        {
+          additionalHeaders: a,
+          "data-testid": y(
+            o == null ? void 0 : o.replace("tbody", "cell"),
+            `row_${r.id}__col_${i.column.id}`
+          ),
+          cellApi: i,
+          hiddenHeader: f,
+          index: l,
+          scope: u,
+          tableId: c,
+          children: $(i.column.columnDef.cell, i.getContext())
+        },
+        i.id
+      ))
+    },
+    r.id
+  )) : null;
+};
+export {
+  j as TableRows
+};

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

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import { ac as a } from "../../../LoadingSuspense-BwlrIicY.js";
+import "../../../Table.module-r-RfIeLI.js";
+import "../../../index-2QXL0WYc.js";
+export {
+  a as TableSortButton
+};

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

@@ -0,0 +1,42 @@
+import { jsx as o } from "react/jsx-runtime";
+import { IressTableFormattedValue as b } from "../TableFormattedValue/TableFormattedValue.js";
+import { formatObjectKey as g } from "../../../helpers/formatting/formatObjectKey.js";
+import { getFormatFromValue as d } from "./getFormatFromValue.js";
+import { c as F } from "../../../index-BQfnxwrU.js";
+const h = (p, a) => {
+  const s = F();
+  return a ? (Array.isArray(a) ? a.map((e) => [
+    e.key,
+    e
+  ]) : Object.entries(a)).map(([e, r]) => {
+    const f = !!(r != null && r.sort) || !!(r != null && r.sortFn), i = {
+      id: e,
+      cell: (t) => /* @__PURE__ */ o(
+        b,
+        {
+          currencyCode: r == null ? void 0 : r.currencyCode,
+          format: (r == null ? void 0 : r.format) ?? d(t.getValue()),
+          value: t.getValue(),
+          row: t.row.original
+        }
+      ),
+      header: () => r == null ? void 0 : r.label,
+      enableSorting: f
+    };
+    return r != null && r.sortFn && (i.sortingFn = r.sortFn), s.accessor(
+      (t) => t[e],
+      i
+      // The typing is weird, cannot get it to work without the never cast, its typed properly above anyway
+    );
+  }) : Object.keys(p[0] ?? {}).map(
+    (e) => s.accessor((r) => r[e], {
+      id: e,
+      cell: (r) => r.getValue(),
+      header: () => g(e),
+      enableSorting: !1
+    })
+  );
+};
+export {
+  h as composeIDSTableColumnDefs
+};

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

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

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

@@ -0,0 +1,4 @@
+const n = (e, r = []) => Array.isArray(r) ? r.find((i) => i.key === e) : r[e];
+export {
+  n as findColumnByKey
+};

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

@@ -0,0 +1,11 @@
+const t = (r) => {
+  if (typeof r == "number")
+    return "number";
+  if (typeof r == "string")
+    return "string";
+  if (r instanceof Date)
+    return "date";
+};
+export {
+  t as getFormatFromValue
+};

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

@@ -0,0 +1,4 @@
+const e = (r) => r ? Array.isArray(r) ? r.length > 0 : Object.keys(r).length > 0 : !1;
+export {
+  e as hasColumns
+};

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

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

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

@@ -0,0 +1,25 @@
+import { s as r } from "../../../Table.module-r-RfIeLI.js";
+import { c as s } from "../../../index-2QXL0WYc.js";
+import { useTable as a } from "./useTable.js";
+const b = ({
+  columnKey: i
+}) => {
+  var t;
+  const e = (t = a()) == null ? void 0 : t.getColumnByKey(i);
+  if (e)
+    return {
+      className: s({
+        [r[`cell--${e == null ? void 0 : e.align}`]]: e == null ? void 0 : e.align,
+        [r.divider]: e == null ? void 0 : e.divider,
+        [r["cell--number"]]: (e == null ? void 0 : e.format) === "number",
+        [r["cell--currency"]]: (e == null ? void 0 : e.format) === "currency"
+      }),
+      style: {
+        width: e == null ? void 0 : e.width,
+        minWidth: e == null ? void 0 : e.width
+      }
+    };
+};
+export {
+  b as useIDSTableColumnStyles
+};

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

@@ -0,0 +1,6 @@
+import { useContext as t } from "react";
+import { getTableContext as e } from "../TableContext.js";
+const m = () => t(e());
+export {
+  m as useTable
+};