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

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

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

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

@@ -3,13 +3,13 @@ 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,
+  children: r,
+  label: s = "sortable",
+  noWrap: e = !0,
   sort: o,
   toggleSorting: n
 }) => {
-  const c = o != null && o.desc ? "sort-down" : "sort-up", t = p({ sortButtonNoWrap: s });
+  const c = o?.desc ? "sort-down" : "sort-up", t = p({ sortButtonNoWrap: e });
   return /* @__PURE__ */ a(
     "button",
     {
@@ -17,13 +17,13 @@ const x = ({
       className: t.sortHeader,
       onClick: n,
       children: [
-        e,
+        r,
         /* @__PURE__ */ m(
           l,
           {
             name: o ? c : "sort",
             className: t.sortIcon,
-            screenreaderText: r
+            screenreaderText: s
           }
         )
       ]

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

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

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

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

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

@@ -1,25 +1,25 @@
-import { useContext as i } from "react";
-import { a as d } from "../../../TableProvider-D8SQKIG8.js";
-const f = ({
-  columnApi: s,
-  columnKey: e
+import { useContext as g } from "react";
+import { a as c } from "../../../TableProvider-bdUNuoG-.js";
+const S = ({
+  columnApi: r,
+  columnKey: n
 }) => {
-  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";
+  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: r,
+      sort: o,
       toggleSorting: () => {
-        s.toggleSorting();
+        r.toggleSorting();
       }
     },
     columnProps: {
-      "aria-sort": r ? a : "none"
+      "aria-sort": o ? a : "none"
     }
   };
 };
 export {
-  f as useTableColumnSort
+  S as useTableColumnSort
 };

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

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

package/dist/components/Table/index.js

@@ -1,12 +1,11 @@
 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";
+import { IressTableFormattedValue as f } from "./TableFormattedValue/TableFormattedValue.js";
 export {
   o as IressTable,
   b as IressTableBody,
-  T as IressTableFormattedValue,
-  f as TABLE_CELL_FORMATS,
+  f as IressTableFormattedValue,
   t as table,
   a as tableCell
 };

package/dist/components/Tag/Tag.js

@@ -1,42 +1,39 @@
-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 = ({
+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-mmhMLwp9.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: c,
+  className: a,
   "data-testid": o,
-  deleteButton: e,
-  deleteButtonText: i = "Delete",
-  onDelete: t,
-  onDeleteButtonBlur: p,
-  ...l
+  deleteButton: r,
+  deleteButtonText: m = "Delete",
+  onDelete: l,
+  onDeleteButtonBlur: c,
+  ...i
 }) => {
-  const a = d(null), r = T({ customDeleteButton: !!e });
-  return /* @__PURE__ */ u(
-    g,
+  const s = u(null), t = g({ customDeleteButton: !!r });
+  return /* @__PURE__ */ f(
+    C,
     {
-      className: b(c, r.root, B.Tag),
+      className: T(a, t.root, b.Tag),
       "data-testid": o,
       element: "span",
-      ...l,
+      ...i,
       children: [
-        /* @__PURE__ */ s("span", { ref: a, className: r.content, children: n }),
-        /* @__PURE__ */ s("span", { className: r.deleteButton, children: e ?? /* @__PURE__ */ s(
-          C,
+        /* @__PURE__ */ e("span", { ref: s, className: t.content, children: n }),
+        /* @__PURE__ */ e("span", { className: t.deleteButton, children: r ?? /* @__PURE__ */ e(
+          x,
           {
-            "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
+            "data-testid": d(o, "delete-button__button"),
+            onBlur: c,
+            onClick: (p) => l?.(s.current?.textContent ?? "", p),
+            screenreaderText: m
           }
         ) })
       ]
@@ -44,5 +41,5 @@ const G = ({
   );
 };
 export {
-  G as IressTag
+  k as IressTag
 };

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

@@ -1,4 +1,4 @@
-import { s as o } from "../../sva-TRyehFkb.js";
+import { s as o } from "../../sva-OmxClA9g.js";
 const t = o({
   slots: ["root", "content", "deleteButton"],
   base: {
@@ -8,9 +8,8 @@ const t = o({
       border: "divider",
       borderRadius: "radius.system.badge",
       display: "inline-flex",
-      gap: "spacing.100",
+      gap: "spacing.1",
       px: "xs",
-      py: "spacing.050",
       transition: "colors"
     },
     content: {
@@ -22,9 +21,9 @@ const t = o({
         fontSize: "inherit",
         minWidth: "[0]",
         minHeight: "[0]",
-        py: "spacing.000",
-        px: "spacing.000",
-        mx: "spacing.050",
+        py: "spacing.0",
+        px: "spacing.0",
+        mx: "spacing.1",
         _after: {
           display: "none"
         }

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

@@ -1,125 +1,141 @@
-import { jsx as o, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as z, useState as F, useCallback as G } from "react";
-import { IressInput as H } from "../../Input/Input.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 J } from "../../../hooks/useControlledState.js";
-import { getValueAsEvent as a } from "../../../helpers/form/getValueAsEvent.js";
-import { IressTag as w } from "../Tag.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 L } from "../../Inline/Inline.js";
-const M = ({
-  "data-testid": u,
-  onTagDelete: d,
-  onTagDeleteAll: e,
-  onTagDeleteButtonBlur: c,
-  selectedOptionsTagText: i,
-  tags: p = [],
-  tagLimit: l = 5
-}) => p.length ? p.length <= l ? /* @__PURE__ */ o(
-  L,
+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,
   {
-    gap: "sm",
-    pl: "xs",
-    "data-testid": v(u, "items"),
-    children: p.map((m) => /* @__PURE__ */ o(
-      w,
-      {
-        deleteButtonText: `Delete ${m}`,
-        onDelete: d,
-        onDeleteButtonBlur: c,
-        "data-testid": v(u, "tag"),
-        children: m
-      },
-      m
-    ))
-  }
-) : /* @__PURE__ */ x(
-  w,
+    deleteButtonText: `Delete ${l}`,
+    onDelete: c,
+    onDeleteButtonBlur: i,
+    "data-testid": v(s, "tag"),
+    ml: "xs",
+    children: l
+  },
+  l
+)) : /* @__PURE__ */ y(
+  h,
   {
-    onDelete: e,
-    onDeleteButtonBlur: c,
-    "data-testid": v(u, "tag"),
+    onDelete: u,
+    onDeleteButtonBlur: i,
+    "data-testid": v(s, "tag"),
+    ml: "xs",
+    py: "none",
     children: [
-      String(p.length) || "0",
+      String(r.length) || "0",
       " ",
-      i
+      n
     ]
   }
-) : null, O = z(
+) : null, M = $(
   ({
-    defaultValue: u,
-    onBlur: d,
-    onChange: e,
-    onExistingTag: c,
-    onKeyDown: i,
-    onTagDelete: p,
-    onTagDeleteAll: l,
-    onTagDeleteButtonBlur: m,
-    selectedOptionsTagText: B = "selected",
-    tagLimit: V = 5,
-    value: q,
-    ...y
-  }, N) => {
-    const [S, I] = F(""), { value: s, setValue: f } = J({
+    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: u,
-      value: q
-    }), j = G(
-      (t = "") => {
-        if (!t)
+      defaultValue: c,
+      value: S
+    }), K = J(), I = z(
+      (e = "") => {
+        if (!e)
           return;
-        if (s != null && s.includes(t)) {
-          c == null || c(t);
+        if (a?.includes(e)) {
+          r?.(e);
           return;
         }
-        const r = [...s ?? [], t];
-        e == null || e(a(r), r), f(r);
+        const t = [...a ?? [], e];
+        n?.(p(t), t), o(t);
       },
-      [e, c, f, s]
-    ), P = (t) => {
-      d == null || d(t), j(t.currentTarget.value), I("");
-    }, Q = (t) => {
-      if (i == null || i(t), t.key === "Backspace" && !S) {
-        const r = s == null ? void 0 : s.slice(0, -1);
-        e == null || e(a(r), r), f(r);
-      } else if (t.key === "Enter") {
-        const r = t.currentTarget;
-        r.value && (t.preventDefault(), j(r.value), I(""));
+      [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(""));
       }
-    }, R = (t, r) => {
-      r.stopPropagation(), p == null || p(t, r);
-      const k = s == null ? void 0 : s.filter((b) => b !== t);
-      e == null || e(a(k), k), f(k);
-    }, $ = (t, r) => {
-      r.stopPropagation(), l == null || l(t, r), e == null || e(a([]), []), f([]);
+    }, 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__ */ o(
-      H,
-      {
-        ...y,
-        onBlur: P,
-        onChange: (t) => I(t.currentTarget.value),
-        onKeyDown: Q,
-        prepend: /* @__PURE__ */ o(
-          M,
-          {
-            "data-testid": y["data-testid"],
-            onTagDelete: R,
-            onTagDeleteAll: $,
-            onTagDeleteButtonBlur: m,
-            selectedOptionsTagText: B,
-            tags: s ?? [],
-            tagLimit: V
-          }
-        ),
-        ref: N,
-        value: S
-      }
-    );
+    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"
+          )
+        }
+      )
+    ] });
   }
 );
-O.displayName = "IressTagInput";
+M.displayName = "IressTagInput";
 export {
-  O as IressTagInput
+  M as IressTagInput
 };

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

@@ -0,0 +1,26 @@
+import { s as t } from "../../../sva-OmxClA9g.js";
+const s = t({
+  slots: ["input", "tag"],
+  base: {
+    input: {
+      flexWrap: "wrap",
+      rowGap: "xs",
+      py: "xs",
+      "& > :first-child": {
+        display: "contents",
+        minHeight: "[0px]"
+      },
+      "& > input": {
+        width: "auto",
+        minHeight: "[calc({sizes.input.height} - {spacing.xs} * 2.5)]",
+        py: "none"
+      }
+    },
+    tag: {
+      marginLeft: "xs"
+    }
+  }
+});
+export {
+  s as tagInput
+};