@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/table/parts/TableCell.js

@@ -1,62 +1,38 @@
-import { jsx as C } from "react/jsx-runtime";
-import { memo as v, forwardRef as g, useMemo as T } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { useTableContext as k } from "../Table.context.js";
-const D = w({
-  base: [
-    "uy:px-200 uy:py-150 uy:text-content-neutral uy:typography-body",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
-  ],
-  variants: {
-    align: {
-      left: "uy:text-left",
-      center: "uy:text-center",
-      right: "uy:text-right"
-    }
-  }
-}), K = v(
-  g(
-    ({
-      children: s,
-      colIndex: t = 0,
-      rowIndex: u = 0,
-      align: o,
-      onKeyDown: i,
-      onFocus: r,
-      className: l,
-      isRowHeader: a = !1,
-      isFocusable: n = !0,
-      ...y
-    }, c) => {
-      const { keyboardNavigation: f } = k(), { isCellFocused: b, handleCellKeyDown: d, handleCellFocus: m } = f, p = T(
-        () => D({ align: o, className: l }),
-        [o, l]
-      ), x = n && b(u, t), h = (e) => {
-        e.key !== "Tab" && (d(e), i?.(e));
-      };
-      return /* @__PURE__ */ C(
-        a ? "th" : "td",
-        {
-          ref: c,
-          role: a ? "rowheader" : "gridcell",
-          "aria-colindex": t + 1,
-          tabIndex: x ? 0 : -1,
-          "data-focusable": n,
-          className: p,
-          onKeyDown: h,
-          onFocus: (e) => {
-            m(e), r?.(e);
-          },
-          "data-dd-privacy": "mask",
-          ...y,
-          children: s
-        }
-      );
-    }
-  )
-);
-K.displayName = "TableCell";
-export {
-  K as TableCell,
-  D as tableCell
-};
+import { useTableContext as e } from "../Table.context.js";
+import { forwardRef as t, memo as n, useMemo as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/table/parts/TableCell.tsx
+var o = i({
+	base: ["uy:px-200 uy:py-150 uy:text-content-neutral uy:typography-body", "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"],
+	variants: { align: {
+		left: "uy:text-left",
+		center: "uy:text-center",
+		right: "uy:text-right"
+	} }
+}), s = n(t(({ children: t, colIndex: n = 0, rowIndex: i = 0, align: s, onKeyDown: c, onFocus: l, className: u, isRowHeader: d = !1, isFocusable: f = !0, ...p }, m) => {
+	let { keyboardNavigation: h } = e(), { isCellFocused: g, handleCellKeyDown: _, handleCellFocus: v } = h, y = r(() => o({
+		align: s,
+		className: u
+	}), [s, u]), b = f && g(i, n);
+	return /* @__PURE__ */ a(d ? "th" : "td", {
+		ref: m,
+		role: d ? "rowheader" : "gridcell",
+		"aria-colindex": n + 1,
+		tabIndex: b ? 0 : -1,
+		"data-focusable": f,
+		className: y,
+		onKeyDown: (e) => {
+			e.key !== "Tab" && (_(e), c?.(e));
+		},
+		onFocus: (e) => {
+			v(e), l?.(e);
+		},
+		"data-dd-privacy": "mask",
+		...p,
+		children: t
+	});
+}));
+s.displayName = "TableCell";
+//#endregion
+export { s as TableCell, o as tableCell };

package/dist/esm/components/table/parts/TableColumnHeader.js

@@ -1,78 +1,62 @@
-import { jsx as n } from "react/jsx-runtime";
-import { memo as x, forwardRef as g } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { Actionable as C } from "../../actionable/Actionable.js";
-import { useTableContext as T } from "../Table.context.js";
-const d = w({
-  base: [
-    "uy:align-middle uy:leading-[1.00]",
-    "uy:px-200 uy:py-100 uy:typography-action uy:text-content-neutral",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
-    "uy:hover:bg-surface-neutral-hover"
-  ],
-  variants: {
-    align: {
-      left: "uy:text-left",
-      center: "uy:text-center",
-      right: "uy:text-right"
-    }
-  }
-}), D = x(
-  g(
-    ({
-      children: r,
-      colIndex: t = 0,
-      rowIndex: m = 0,
-      align: l,
-      onKeyDown: f,
-      onFocus: i,
-      className: u,
-      isFocusable: o = !0,
-      ...a
-    }, s) => {
-      const { keyboardNavigation: b } = T(), { isCellFocused: h, handleCellKeyDown: v, handleCellFocus: c } = b, p = o && h(m, t), y = (e) => {
-        e.key !== "Tab" && (v(e), f?.(
-          e
-        ));
-      };
-      return "onPress" in a ? /* @__PURE__ */ n(
-        "th",
-        {
-          ref: s,
-          role: "columnheader",
-          "aria-colindex": t + 1,
-          "data-focusable": o,
-          className: d({ align: l, className: u }),
-          "data-dd-privacy": "allow",
-          onKeyDown: y,
-          onFocus: (e) => {
-            c(e), i?.(e);
-          },
-          children: /* @__PURE__ */ n(C, { ...a, children: r })
-        }
-      ) : /* @__PURE__ */ n(
-        "th",
-        {
-          ref: s,
-          role: "columnheader",
-          "aria-colindex": t + 1,
-          tabIndex: p ? 0 : -1,
-          "data-focusable": o,
-          className: d({ align: l, className: u }),
-          onKeyDown: y,
-          onFocus: (e) => {
-            c(e), i?.(e);
-          },
-          "data-dd-privacy": "allow",
-          ...a,
-          children: r
-        }
-      );
-    }
-  )
-);
-D.displayName = "TableColumnHeader";
-export {
-  D as TableColumnHeader,
-  d as tableColumnHeader
-};
+import { Actionable as e } from "../../actionable/Actionable.js";
+import { useTableContext as t } from "../Table.context.js";
+import { forwardRef as n, memo as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/table/parts/TableColumnHeader.tsx
+var o = i({
+	base: [
+		"uy:align-middle uy:leading-[1.00]",
+		"uy:px-200 uy:py-100 uy:typography-action uy:text-content-neutral",
+		"uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+		"uy:hover:bg-surface-neutral-hover"
+	],
+	variants: { align: {
+		left: "uy:text-left",
+		center: "uy:text-center",
+		right: "uy:text-right"
+	} }
+}), s = r(n(({ children: n, colIndex: r = 0, rowIndex: i = 0, align: s, onKeyDown: c, onFocus: l, className: u, isFocusable: d = !0, ...f }, p) => {
+	let { keyboardNavigation: m } = t(), { isCellFocused: h, handleCellKeyDown: g, handleCellFocus: _ } = m, v = d && h(i, r), y = (e) => {
+		e.key !== "Tab" && (g(e), c?.(e));
+	};
+	return "onPress" in f ? /* @__PURE__ */ a("th", {
+		ref: p,
+		role: "columnheader",
+		"aria-colindex": r + 1,
+		"data-focusable": d,
+		className: o({
+			align: s,
+			className: u
+		}),
+		"data-dd-privacy": "allow",
+		onKeyDown: y,
+		onFocus: (e) => {
+			_(e), l?.(e);
+		},
+		children: /* @__PURE__ */ a(e, {
+			...f,
+			children: n
+		})
+	}) : /* @__PURE__ */ a("th", {
+		ref: p,
+		role: "columnheader",
+		"aria-colindex": r + 1,
+		tabIndex: v ? 0 : -1,
+		"data-focusable": d,
+		className: o({
+			align: s,
+			className: u
+		}),
+		onKeyDown: y,
+		onFocus: (e) => {
+			_(e), l?.(e);
+		},
+		"data-dd-privacy": "allow",
+		...f,
+		children: n
+	});
+}));
+s.displayName = "TableColumnHeader";
+//#endregion
+export { s as TableColumnHeader, o as tableColumnHeader };

package/dist/esm/components/table/parts/TableEmptyState.js

@@ -1,161 +1,131 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as f, useMemo as d } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
-import { useIntl as b, FormattedMessage as a } from "react-intl";
-import { Button as c } from "../../button/Button.js";
-import { EmptyState as m } from "../../empty-state/EmptyState.js";
-import { EmptyStateActions as u } from "../../empty-state/parts/EmptyStateActions.js";
-import { EmptyStateContent as p } from "../../empty-state/parts/EmptyStateContent.js";
-import { EmptyStateIcon as y } from "../../empty-state/parts/EmptyStateIcon.js";
-import { Spinner as x } from "../../spinner/Spinner.js";
-import { Text as v } from "../../text/Text.js";
-const w = g({
-  slots: {
-    base: "uy:flex uy:flex-col uy:items-center uy:justify-center",
-    wrapper: "uy:max-w-[300px] uy:flex uy:flex-col uy:items-center uy:py-800"
-  }
-}), E = f(
-  (e, n) => {
-    const { variant: r, children: i } = e, s = d(() => {
-      switch (r) {
-        case "title":
-          return "bodyStrong";
-        case "description":
-        default:
-          return "body";
-      }
-    }, [r]), o = d(() => {
-      switch (r) {
-        case "title":
-          return "h6";
-        case "description":
-        default:
-          return "p";
-      }
-    }, [r]);
-    return /* @__PURE__ */ t(
-      v,
-      {
-        variant: s,
-        asElement: o,
-        ref: n,
-        className: "uy:text-center",
-        children: i
-      }
-    );
-  }
-);
-E.displayName = "TableEmptyStateText";
-const h = f(
-  ({ children: e, className: n, ...r }, i) => {
-    const { base: s, wrapper: o } = w();
-    return /* @__PURE__ */ t("div", { "data-dd-privacy": "allow", ...r, ref: i, className: s(), children: /* @__PURE__ */ t("div", { className: o({ className: n }), children: e }) });
-  }
-);
-h.displayName = "TableEmptyState";
-const G = () => {
-  const e = b();
-  return /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
-    x,
-    {
-      size: "medium",
-      label: e.formatMessage({
-        id: "unity:component:table:empty-state:loading:title"
-      })
-    }
-  ) });
-}, q = ({
-  description: e,
-  onButtonPress: n
-}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
-  /* @__PURE__ */ t(y, { icon: "InfoOutlined", variant: "neutral" }),
-  /* @__PURE__ */ t(
-    p,
-    {
-      title: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:empty-state:waiting-for-data:title",
-          defaultMessage: "No available results yet"
-        }
-      ),
-      description: e
-    }
-  ),
-  n && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: n, children: /* @__PURE__ */ t(
-    a,
-    {
-      id: "unity:component:empty-state:waiting-for-data:button-label",
-      defaultMessage: "Enable settings"
-    }
-  ) }) })
-] }), z = ({
-  onButtonPress: e
-}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
-  /* @__PURE__ */ t(y, { icon: "WarningCircleOutlined", variant: "neutral" }),
-  /* @__PURE__ */ t(
-    p,
-    {
-      title: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:error-state:common:main-title",
-          defaultMessage: "Something went wrong"
-        }
-      ),
-      description: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:error-state:common:main-description-component",
-          defaultMessage: "Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible."
-        }
-      )
-    }
-  ),
-  e && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: e, children: /* @__PURE__ */ t(
-    a,
-    {
-      id: "unity:component:error-state:button:label",
-      defaultMessage: "Go to dashboard"
-    }
-  ) }) })
-] }), A = ({
-  onButtonPress: e
-}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
-  /* @__PURE__ */ t(y, { icon: "MagnifyingGlassOutlined", variant: "neutral" }),
-  /* @__PURE__ */ t(
-    p,
-    {
-      title: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:empty-state:no-search-results:title",
-          defaultMessage: "We didn't find any results"
-        }
-      ),
-      description: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:empty-state:no-search-results:description",
-          defaultMessage: "Try adjusting your search or filters to find what you're looking for."
-        }
-      )
-    }
-  ),
-  e && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: e, children: /* @__PURE__ */ t(
-    a,
-    {
-      id: "unity:component:empty-state:no-search-results:button-label",
-      defaultMessage: "Reset filters"
-    }
-  ) }) })
-] });
-export {
-  h as TableEmptyState,
-  z as TableEmptyStateError,
-  G as TableEmptyStateLoading,
-  q as TableEmptyStateNoData,
-  E as TableEmptyStateText,
-  A as TableNoSearchResults,
-  w as tableEmptyState
-};
+import { Spinner as e } from "../../spinner/Spinner.js";
+import { Button as t } from "../../button/Button.js";
+import { Text as n } from "../../text/Text.js";
+import { EmptyState as r } from "../../empty-state/EmptyState.js";
+import { EmptyStateActions as i } from "../../empty-state/parts/EmptyStateActions.js";
+import { EmptyStateContent as a } from "../../empty-state/parts/EmptyStateContent.js";
+import { EmptyStateIcon as o } from "../../empty-state/parts/EmptyStateIcon.js";
+import { forwardRef as s, useMemo as c } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { FormattedMessage as f, useIntl as p } from "react-intl";
+//#region src/components/table/parts/TableEmptyState.tsx
+var m = l({ slots: {
+	base: "uy:flex uy:flex-col uy:items-center uy:justify-center",
+	wrapper: "uy:max-w-[300px] uy:flex uy:flex-col uy:items-center uy:py-800"
+} }), h = s((e, t) => {
+	let { variant: r, children: i } = e;
+	return /* @__PURE__ */ u(n, {
+		variant: c(() => {
+			switch (r) {
+				case "title": return "bodyStrong";
+				default: return "body";
+			}
+		}, [r]),
+		asElement: c(() => {
+			switch (r) {
+				case "title": return "h6";
+				default: return "p";
+			}
+		}, [r]),
+		ref: t,
+		className: "uy:text-center",
+		children: i
+	});
+});
+h.displayName = "TableEmptyStateText";
+var g = s(({ children: e, className: t, ...n }, r) => {
+	let { base: i, wrapper: a } = m();
+	return /* @__PURE__ */ u("div", {
+		"data-dd-privacy": "allow",
+		...n,
+		ref: r,
+		className: i(),
+		children: /* @__PURE__ */ u("div", {
+			className: a({ className: t }),
+			children: e
+		})
+	});
+});
+g.displayName = "TableEmptyState";
+var _ = () => /* @__PURE__ */ u(g, { children: /* @__PURE__ */ u(e, {
+	size: "medium",
+	label: p().formatMessage({ id: "unity:component:table:empty-state:loading:title" })
+}) }), v = ({ description: e, onButtonPress: n }) => /* @__PURE__ */ d(r, {
+	className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300",
+	children: [
+		/* @__PURE__ */ u(o, {
+			icon: "InfoOutlined",
+			variant: "neutral"
+		}),
+		/* @__PURE__ */ u(a, {
+			title: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:waiting-for-data:title",
+				defaultMessage: "No available results yet"
+			}),
+			description: e
+		}),
+		n && /* @__PURE__ */ u(i, { children: /* @__PURE__ */ u(t, {
+			variant: "ghost",
+			onPress: n,
+			children: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:waiting-for-data:button-label",
+				defaultMessage: "Enable settings"
+			})
+		}) })
+	]
+}), y = ({ onButtonPress: e }) => /* @__PURE__ */ d(r, {
+	className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300",
+	children: [
+		/* @__PURE__ */ u(o, {
+			icon: "WarningCircleOutlined",
+			variant: "neutral"
+		}),
+		/* @__PURE__ */ u(a, {
+			title: /* @__PURE__ */ u(f, {
+				id: "unity:component:error-state:common:main-title",
+				defaultMessage: "Something went wrong"
+			}),
+			description: /* @__PURE__ */ u(f, {
+				id: "unity:component:error-state:common:main-description-component",
+				defaultMessage: "Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+			})
+		}),
+		e && /* @__PURE__ */ u(i, { children: /* @__PURE__ */ u(t, {
+			variant: "ghost",
+			onPress: e,
+			children: /* @__PURE__ */ u(f, {
+				id: "unity:component:error-state:button:label",
+				defaultMessage: "Go to dashboard"
+			})
+		}) })
+	]
+}), b = ({ onButtonPress: e }) => /* @__PURE__ */ d(r, {
+	className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300",
+	children: [
+		/* @__PURE__ */ u(o, {
+			icon: "MagnifyingGlassOutlined",
+			variant: "neutral"
+		}),
+		/* @__PURE__ */ u(a, {
+			title: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:no-search-results:title",
+				defaultMessage: "We didn't find any results"
+			}),
+			description: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:no-search-results:description",
+				defaultMessage: "Try adjusting your search or filters to find what you're looking for."
+			})
+		}),
+		e && /* @__PURE__ */ u(i, { children: /* @__PURE__ */ u(t, {
+			variant: "ghost",
+			onPress: e,
+			children: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:no-search-results:button-label",
+				defaultMessage: "Reset filters"
+			})
+		}) })
+	]
+});
+//#endregion
+export { g as TableEmptyState, y as TableEmptyStateError, _ as TableEmptyStateLoading, v as TableEmptyStateNoData, h as TableEmptyStateText, b as TableNoSearchResults, m as tableEmptyState };

package/dist/esm/components/table/parts/TableHeader.js

@@ -1,37 +1,24 @@
-import { jsx as t } from "react/jsx-runtime";
-import r, { memo as l, forwardRef as s, useMemo as y } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-const b = m({
-  base: [
-    "uy:h-500 uy:bg-surface-neutral-low uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
-    "uy:sticky uy:top-0 uy:z-[1]",
-    "uy:[&_tr]:border-b uy:[&_tr]:border-solid uy:[&_tr]:border-b-border-neutral-enabled"
-  ]
-}), i = l(
-  s(
-    ({ children: o, ...a }, d) => {
-      const u = y(() => r.Children.map(o, (e, n) => r.isValidElement(e) ? r.cloneElement(
-        e,
-        {
-          rowIndex: n,
-          ...e.props
-        }
-      ) : e), [o]);
-      return /* @__PURE__ */ t(
-        "thead",
-        {
-          ref: d,
-          className: b(),
-          "data-dd-privacy": "allow",
-          ...a,
-          children: /* @__PURE__ */ t("tr", { children: u })
-        }
-      );
-    }
-  )
-);
-i.displayName = "TableHeader";
-export {
-  i as TableHeader,
-  b as tableHeader
-};
+import e, { forwardRef as t, memo as n, useMemo as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/table/parts/TableHeader.tsx
+var o = i({ base: [
+	"uy:h-500 uy:bg-surface-neutral-low uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
+	"uy:sticky uy:top-0 uy:z-[1]",
+	"uy:[&_tr]:border-b uy:[&_tr]:border-solid uy:[&_tr]:border-b-border-neutral-enabled"
+] }), s = n(t(({ children: t, ...n }, i) => {
+	let s = r(() => e.Children.map(t, (t, n) => e.isValidElement(t) ? e.cloneElement(t, {
+		rowIndex: n,
+		...t.props
+	}) : t), [t]);
+	return /* @__PURE__ */ a("thead", {
+		ref: i,
+		className: o(),
+		"data-dd-privacy": "allow",
+		...n,
+		children: /* @__PURE__ */ a("tr", { children: s })
+	});
+}));
+s.displayName = "TableHeader";
+//#endregion
+export { s as TableHeader, o as tableHeader };