npm - @payfit/unity-components - Versions diffs - 2.47.5 → 2.47.6 - Mend

@payfit/unity-components 2.47.5 → 2.47.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (446) hide show

package/dist/esm/components/data-table/parts/DataTableBulkActions.js CHANGED Viewed

@@ -1,150 +1,97 @@
-import { jsx as o, jsxs as m, Fragment as A } from "react/jsx-runtime";
-import { useRef as d, useState as S, useCallback as k } from "react";
-import { useHotkeys as f } from "react-hotkeys-hook";
-import { useIntl as v, FormattedMessage as c } from "react-intl";
-import { ActionBar as I } from "../../action-bar/ActionBar.js";
-import { ActionBarButton as P } from "../../action-bar/parts/ActionBarButton.js";
-import { ActionBarIconButton as R } from "../../action-bar/parts/ActionBarIconButton.js";
-import { ActionBarRoot as w } from "../../action-bar/parts/ActionBarRoot.js";
-import { Button as x } from "../../button/Button.js";
-function F({
-  selectionCount: t,
-  onClearSelection: a,
-  renderSelectionText: r,
-  hasKeyshortcuts: s,
-  keyShortcuts: n
-}) {
-  return /* @__PURE__ */ m(A, { children: [
-    /* @__PURE__ */ m(
-      "div",
-      {
-        className: "uy:typography-body uy:whitespace-nowrap! uy:sr-only uy:md:not-sr-only",
-        role: "status",
-        "aria-live": "polite",
-        "aria-atomic": "true",
-        children: [
-          r ? r(t) : /* @__PURE__ */ o(
-            c,
-            {
-              id: "unity:component:action-bar:selection-count-text",
-              defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
-              values: { selectionCount: t }
-            }
-          ),
-          s && /* @__PURE__ */ o("span", { className: "uy:sr-only", children: /* @__PURE__ */ o(
-            c,
-            {
-              id: "unity:component:action-bar:key-shortcuts-text",
-              defaultMessage: "Use {keyShortcuts} to focus the action bar",
-              values: {
-                keyShortcuts: n
-              }
-            }
-          ) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ o(x, { color: "inverted", variant: "ghost", onPress: a, children: /* @__PURE__ */ o(
-      c,
-      {
-        id: "unity:component:action-bar:clear-selection-button",
-        defaultMessage: "Clear selection"
-      }
-    ) })
-  ] });
+import { Button as e } from "../../button/Button.js";
+import { ActionBarButton as t } from "../../action-bar/parts/ActionBarButton.js";
+import { ActionBarIconButton as n } from "../../action-bar/parts/ActionBarIconButton.js";
+import { ActionBar as r } from "../../action-bar/ActionBar.js";
+import { ActionBarRoot as i } from "../../action-bar/parts/ActionBarRoot.js";
+import { useCallback as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { FormattedMessage as d, useIntl as f } from "react-intl";
+import { useHotkeys as p } from "react-hotkeys-hook";
+//#region src/components/data-table/parts/DataTableBulkActions.tsx
+function m({ selectionCount: t, onClearSelection: n, renderSelectionText: r, hasKeyshortcuts: i, keyShortcuts: a }) {
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
+		className: "uy:typography-body uy:whitespace-nowrap! uy:sr-only uy:md:not-sr-only",
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: [r ? r(t) : /* @__PURE__ */ l(d, {
+			id: "unity:component:action-bar:selection-count-text",
+			defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
+			values: { selectionCount: t }
+		}), i && /* @__PURE__ */ l("span", {
+			className: "uy:sr-only",
+			children: /* @__PURE__ */ l(d, {
+				id: "unity:component:action-bar:key-shortcuts-text",
+				defaultMessage: "Use {keyShortcuts} to focus the action bar",
+				values: { keyShortcuts: a }
+			})
+		})]
+	}), /* @__PURE__ */ l(e, {
+		color: "inverted",
+		variant: "ghost",
+		onPress: n,
+		children: /* @__PURE__ */ l(d, {
+			id: "unity:component:action-bar:clear-selection-button",
+			defaultMessage: "Clear selection"
+		})
+	})] });
 }
-const C = (t) => t.type === "icon-button";
-function M({
-  table: t,
-  actions: a,
-  renderSelectionText: r
-}) {
-  const s = d(null), n = d(null), [g, i] = S(!1), p = v(), l = "f6";
-  f(
-    l,
-    () => {
-      if ((t.getIsAllPageRowsSelected() || t.getIsSomePageRowsSelected()) && s.current) {
-        const u = s.current.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        n.current = document.activeElement, u.length > 0 && (u[0].focus(), i(!0));
-      }
-    },
-    {
-      enableOnFormTags: !0
-    }
-  ), f(
-    "esc",
-    () => {
-      g && n.current && (n.current.focus(), i(!1));
-    },
-    {
-      enableOnFormTags: !0
-    }
-  );
-  const b = t.getIsAllPageRowsSelected() || t.getIsSomePageRowsSelected(), y = t.getSelectedRowModel().rows.length, h = t.getPageCount() > 0, B = k(() => {
-    t.resetRowSelection();
-  }, [t]);
-  return /* @__PURE__ */ o(
-    w,
-    {
-      isVisible: b,
-      offsetBottom: h ? "$600" : 0,
-      children: /* @__PURE__ */ o(
-        I,
-        {
-          ref: s,
-          actions: a,
-          prefixContent: /* @__PURE__ */ o(
-            F,
-            {
-              selectionCount: y,
-              onClearSelection: B,
-              renderSelectionText: r,
-              hasKeyshortcuts: !0,
-              keyShortcuts: l
-            }
-          ),
-          onFocus: () => {
-            i(!0);
-          },
-          onBlur: () => {
-            i(!1);
-          },
-          "aria-keyshortcuts": l,
-          "aria-label": p.formatMessage({
-            id: "unity:component:action-bar:toolbar-label",
-            defaultMessage: "Bulk actions toolbar"
-          }),
-          children: (e) => C(e) ? /* @__PURE__ */ o(
-            R,
-            {
-              icon: e.meta.icon,
-              label: e.label,
-              variant: e.variant,
-              onPress: e.meta.onPress,
-              isDisabled: e.meta.isDisabled,
-              isLoading: e.meta.isLoading
-            },
-            e.id
-          ) : /* @__PURE__ */ o(
-            P,
-            {
-              variant: e.variant,
-              onPress: e.meta?.onPress,
-              prefixIcon: e.meta?.prefixIcon,
-              isDisabled: e.meta?.isDisabled,
-              isLoading: e.meta?.isLoading,
-              children: e.label
-            },
-            e.id
-          )
-        }
-      )
-    }
-  );
+var h = (e) => e.type === "icon-button";
+function g({ table: e, actions: c, renderSelectionText: u }) {
+	let d = o(null), g = o(null), [_, v] = s(!1), y = f();
+	p("f6", () => {
+		if ((e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected()) && d.current) {
+			let e = d.current.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
+			g.current = document.activeElement, e.length > 0 && (e[0].focus(), v(!0));
+		}
+	}, { enableOnFormTags: !0 }), p("esc", () => {
+		_ && g.current && (g.current.focus(), v(!1));
+	}, { enableOnFormTags: !0 });
+	let b = e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(), x = e.getSelectedRowModel().rows.length, S = e.getPageCount() > 0, C = a(() => {
+		e.resetRowSelection();
+	}, [e]);
+	return /* @__PURE__ */ l(i, {
+		isVisible: b,
+		offsetBottom: S ? "$600" : 0,
+		children: /* @__PURE__ */ l(r, {
+			ref: d,
+			actions: c,
+			prefixContent: /* @__PURE__ */ l(m, {
+				selectionCount: x,
+				onClearSelection: C,
+				renderSelectionText: u,
+				hasKeyshortcuts: !0,
+				keyShortcuts: "f6"
+			}),
+			onFocus: () => {
+				v(!0);
+			},
+			onBlur: () => {
+				v(!1);
+			},
+			"aria-keyshortcuts": "f6",
+			"aria-label": y.formatMessage({
+				id: "unity:component:action-bar:toolbar-label",
+				defaultMessage: "Bulk actions toolbar"
+			}),
+			children: (e) => h(e) ? /* @__PURE__ */ l(n, {
+				icon: e.meta.icon,
+				label: e.label,
+				variant: e.variant,
+				onPress: e.meta.onPress,
+				isDisabled: e.meta.isDisabled,
+				isLoading: e.meta.isLoading
+			}, e.id) : /* @__PURE__ */ l(t, {
+				variant: e.variant,
+				onPress: e.meta?.onPress,
+				prefixIcon: e.meta?.prefixIcon,
+				isDisabled: e.meta?.isDisabled,
+				isLoading: e.meta?.isLoading,
+				children: e.label
+			}, e.id)
+		})
+	});
 }
-M.displayName = "DataTableBulkActions";
-export {
-  M as DataTableBulkActions
-};
+g.displayName = "DataTableBulkActions";
+//#endregion
+export { g as DataTableBulkActions };

package/dist/esm/components/data-table/parts/DataTableRoot.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-const i = m({
-  base: ["uy:relative uy:overflow-hidden"]
-}), l = r(
-  ({ children: o, ...a }, t) => /* @__PURE__ */ e("div", { ref: t, className: i(), ...a, children: o })
-);
-l.displayName = "DataTableRoot";
-export {
-  l as DataTableRoot,
-  i as dataTableRoot
-};
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/data-table/parts/DataTableRoot.tsx
+var r = t({ base: ["uy:relative uy:overflow-hidden"] }), i = e(({ children: e, ...t }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: r(),
+	...t,
+	children: e
+}));
+i.displayName = "DataTableRoot";
+//#endregion
+export { i as DataTableRoot, r as dataTableRoot };

package/dist/esm/components/date-calendar/DateCalendar.js CHANGED Viewed

@@ -1,176 +1,123 @@
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { today as k, getLocalTimeZone as f, isToday as F } from "@internationalized/date";
-import { useUnityTheme as R, uyTv as P } from "@payfit/unity-themes";
-import { Calendar as U, Heading as W, CalendarGrid as Z, CalendarGridHeader as $, CalendarHeaderCell as q, CalendarGridBody as w, CalendarCell as z } from "react-aria-components/Calendar";
-import { useIntl as A } from "react-intl";
-import { IconButton as C } from "../icon-button/IconButton.js";
-import { calendarBase as E } from "./DateCalendar.variants.js";
-import { useMonthsList as J } from "./hooks/useMonthsList.js";
-import { useYearsList as K } from "./hooks/useYearsList.js";
-import { DateSegmentSelect as v } from "./parts/DateSegmentSelect.js";
-const Q = P({
-  extend: E,
-  slots: {
-    calendarGrid: "uy:border-spacing-25",
-    calendarCell: [
-      // selected cells
-      //theme: common
-      "uy:data-[selected]:bg-surface-form-active",
-      //theme: legacy
-      "uy:theme-legacy:data-[selected]:text-content-inverted",
-      "uy:theme-legacy:data-[today]:data-[selected]:after:bg-content-inverted",
-      //theme:rebrand
-      "uy:theme-rebrand:data-[selected]:text-content-form-active",
-      "uy:theme-rebrand:data-[today]:data-[selected]:after:bg-border-form-active"
-    ]
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selected]:text-content-neutral-disabled"
-      }
-    }
-  }
+import { IconButton as e } from "../icon-button/IconButton.js";
+import { calendarBase as t } from "./DateCalendar.variants.js";
+import { useMonthsList as n } from "./hooks/useMonthsList.js";
+import { useYearsList as r } from "./hooks/useYearsList.js";
+import { DateSegmentSelect as i } from "./parts/DateSegmentSelect.js";
+import { useState as a } from "react";
+import { useUnityTheme as o, uyTv as s } from "@payfit/unity-themes";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIntl as u } from "react-intl";
+import { getLocalTimeZone as d, isToday as f, today as p } from "@internationalized/date";
+import { Calendar as m, CalendarCell as h, CalendarGrid as g, CalendarGridBody as _, CalendarGridHeader as v, CalendarHeaderCell as y, Heading as b } from "react-aria-components/Calendar";
+//#region src/components/date-calendar/DateCalendar.tsx
+var x = s({
+	extend: t,
+	slots: {
+		calendarGrid: "uy:border-spacing-25",
+		calendarCell: [
+			"uy:data-[selected]:bg-surface-form-active",
+			"uy:theme-legacy:data-[selected]:text-content-inverted",
+			"uy:theme-legacy:data-[today]:data-[selected]:after:bg-content-inverted",
+			"uy:theme-rebrand:data-[selected]:text-content-form-active",
+			"uy:theme-rebrand:data-[today]:data-[selected]:after:bg-border-form-active"
+		]
+	},
+	variants: { isDisabled: { true: { calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selected]:text-content-neutral-disabled" } } }
 });
-function X({
-  value: c,
-  defaultValue: d,
-  minValue: r,
-  maxValue: n,
-  onChange: p,
-  onFocusChange: D,
-  ...t
-}) {
-  const m = A(), { theme: y } = R(), N = k(f()), x = J(), G = K({
-    startYear: r?.year,
-    endYear: n?.year
-  }), [H, L] = b(c ?? d ?? null), [o, i] = b(() => {
-    const e = c ?? d ?? N;
-    return r && e.compare(r) < 0 ? r : n && e.compare(n) > 0 ? n : e;
-  }), M = (e) => {
-    i(
-      (l) => l.set({ month: parseInt(e, 10) })
-    );
-  }, S = (e) => {
-    i(
-      (l) => l.set({ year: parseInt(e, 10) })
-    );
-  }, {
-    base: B,
-    calendarWrapper: I,
-    dialogHeader: T,
-    dialogHeaderGroup: u,
-    calendarGrid: Y,
-    calendarHeaderCell: O,
-    calendarCell: j
-  } = Q({
-    isDisabled: t.isDisabled,
-    isInteractive: !t.isDisabled && !t.isReadOnly
-  }), h = y === "rebrand" ? "outlined" : "ghost", g = y === "rebrand" ? "primary" : "neutral";
-  return /* @__PURE__ */ a("div", { className: B(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-    U,
-    {
-      ...t,
-      minValue: r,
-      maxValue: n,
-      value: H,
-      defaultValue: d,
-      onChange: (e) => {
-        L(e), p?.(e);
-      },
-      focusedValue: o,
-      onFocusChange: (e) => {
-        i(e), D?.(e);
-      },
-      children: /* @__PURE__ */ s("div", { className: I(), children: [
-        /* @__PURE__ */ s("header", { className: T(), children: [
-          /* @__PURE__ */ a(W, { className: "uy:sr-only" }),
-          /* @__PURE__ */ s(
-            "div",
-            {
-              className: u({
-                className: "uy:pl-100 uy:gap-200"
-              }),
-              children: [
-                /* @__PURE__ */ a(
-                  v,
-                  {
-                    type: "month",
-                    items: x,
-                    value: o.month.toString(),
-                    onChange: M,
-                    isDisabled: t.isDisabled
-                  }
-                ),
-                /* @__PURE__ */ a(
-                  v,
-                  {
-                    type: "year",
-                    items: G,
-                    value: o.year.toString(),
-                    onChange: S,
-                    isDisabled: t.isDisabled
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ s(
-            "div",
-            {
-              className: u({
-                className: "uy:ml-auto uy:gap-100"
-              }),
-              children: [
-                /* @__PURE__ */ a(
-                  C,
-                  {
-                    slot: "previous",
-                    icon: "CaretLeftOutlined",
-                    color: g,
-                    label: m.formatMessage({
-                      id: "unity:component:common:previous",
-                      defaultMessage: "Previous"
-                    }),
-                    variant: h,
-                    isDisabled: t.isDisabled
-                  }
-                ),
-                /* @__PURE__ */ a(
-                  C,
-                  {
-                    slot: "next",
-                    icon: "CaretRightOutlined",
-                    color: g,
-                    label: m.formatMessage({
-                      id: "unity:component:common:next",
-                      defaultMessage: "Next"
-                    }),
-                    variant: h,
-                    isDisabled: t.isDisabled
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ s(Z, { className: Y(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ a($, { children: (e) => /* @__PURE__ */ a(q, { className: O(), children: e }) }),
-          /* @__PURE__ */ a(w, { children: (e) => /* @__PURE__ */ a(
-            z,
-            {
-              date: e,
-              "data-today": F(e, f()) ? !0 : void 0,
-              className: j()
-            }
-          ) })
-        ] })
-      ] })
-    }
-  ) });
+function S({ value: t, defaultValue: s, minValue: S, maxValue: C, onChange: w, onFocusChange: T, ...E }) {
+	let D = u(), { theme: O } = o(), k = p(d()), A = n(), j = r({
+		startYear: S?.year,
+		endYear: C?.year
+	}), [M, N] = a(t ?? s ?? null), [P, F] = a(() => {
+		let e = t ?? s ?? k;
+		return S && e.compare(S) < 0 ? S : C && e.compare(C) > 0 ? C : e;
+	}), I = (e) => {
+		F((t) => t.set({ month: parseInt(e, 10) }));
+	}, L = (e) => {
+		F((t) => t.set({ year: parseInt(e, 10) }));
+	}, { base: R, calendarWrapper: z, dialogHeader: B, dialogHeaderGroup: V, calendarGrid: H, calendarHeaderCell: U, calendarCell: W } = x({
+		isDisabled: E.isDisabled,
+		isInteractive: !E.isDisabled && !E.isReadOnly
+	}), G = O === "rebrand" ? "outlined" : "ghost", K = O === "rebrand" ? "primary" : "neutral";
+	return /* @__PURE__ */ c("div", {
+		className: R(),
+		"data-dd-privacy": "mask",
+		children: /* @__PURE__ */ c(m, {
+			...E,
+			minValue: S,
+			maxValue: C,
+			value: M,
+			defaultValue: s,
+			onChange: (e) => {
+				N(e), w?.(e);
+			},
+			focusedValue: P,
+			onFocusChange: (e) => {
+				F(e), T?.(e);
+			},
+			children: /* @__PURE__ */ l("div", {
+				className: z(),
+				children: [/* @__PURE__ */ l("header", {
+					className: B(),
+					children: [
+						/* @__PURE__ */ c(b, { className: "uy:sr-only" }),
+						/* @__PURE__ */ l("div", {
+							className: V({ className: "uy:pl-100 uy:gap-200" }),
+							children: [/* @__PURE__ */ c(i, {
+								type: "month",
+								items: A,
+								value: P.month.toString(),
+								onChange: I,
+								isDisabled: E.isDisabled
+							}), /* @__PURE__ */ c(i, {
+								type: "year",
+								items: j,
+								value: P.year.toString(),
+								onChange: L,
+								isDisabled: E.isDisabled
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							className: V({ className: "uy:ml-auto uy:gap-100" }),
+							children: [/* @__PURE__ */ c(e, {
+								slot: "previous",
+								icon: "CaretLeftOutlined",
+								color: K,
+								label: D.formatMessage({
+									id: "unity:component:common:previous",
+									defaultMessage: "Previous"
+								}),
+								variant: G,
+								isDisabled: E.isDisabled
+							}), /* @__PURE__ */ c(e, {
+								slot: "next",
+								icon: "CaretRightOutlined",
+								color: K,
+								label: D.formatMessage({
+									id: "unity:component:common:next",
+									defaultMessage: "Next"
+								}),
+								variant: G,
+								isDisabled: E.isDisabled
+							})]
+						})
+					]
+				}), /* @__PURE__ */ l(g, {
+					className: H(),
+					weekdayStyle: "short",
+					children: [/* @__PURE__ */ c(v, { children: (e) => /* @__PURE__ */ c(y, {
+						className: U(),
+						children: e
+					}) }), /* @__PURE__ */ c(_, { children: (e) => /* @__PURE__ */ c(h, {
+						date: e,
+						"data-today": f(e, d()) ? !0 : void 0,
+						className: W()
+					}) })]
+				})]
+			})
+		})
+	});
 }
-X.displayName = "DateCalendar";
-export {
-  X as DateCalendar
-};
+S.displayName = "DateCalendar";
+//#endregion
+export { S as DateCalendar };