@payfit/unity-components 2.47.5 → 2.47.7

package/dist/esm/components/date-picker/TanstackDatePicker.js

@@ -1,53 +1,39 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { useFieldContext as b } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as k } from "../form-field/TanstackFormField.context.js";
-import { DatePicker as x } from "./DatePicker.js";
-const y = h(
-  ({
-    onClearButtonPress: i,
-    onBlur: n,
-    onFocus: r,
-    onChange: l,
-    onOpenChange: s,
-    isReadOnly: d,
-    isDisabled: c,
-    ...m
-  }, u) => {
-    const e = b(), a = k(), f = e.state.meta.isTouched && !e.state.meta.isValid, o = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
-    return /* @__PURE__ */ p(
-      x,
-      {
-        ...m,
-        ref: u,
-        id: a.inputId,
-        value: e.state.value,
-        onChange: (t) => {
-          e.handleChange(t), l?.(t);
-        },
-        onBlur: () => {
-          e.handleBlur(), n?.();
-        },
-        onFocus: () => {
-          r?.();
-        },
-        onOpenChange: (t) => {
-          s?.(t);
-        },
-        onClearButtonPress: () => {
-          e.setValue(null), i?.();
-        },
-        isReadOnly: d,
-        isDisabled: c,
-        isInvalid: f,
-        "aria-labelledby": a.labelId,
-        "aria-describedby": o.length > 0 ? o : void 0,
-        "aria-details": a.contextualLinkId
-      }
-    );
-  }
-);
-y.displayName = "TanstackDatePicker";
-export {
-  y as TanstackDatePicker
-};
+import { DatePicker as e } from "./DatePicker.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/date-picker/TanstackDatePicker.tsx
+var a = r(({ onClearButtonPress: r, onBlur: a, onFocus: o, onChange: s, onOpenChange: c, isReadOnly: l, isDisabled: u, ...d }, f) => {
+	let p = t(), m = n(), h = p.state.meta.isTouched && !p.state.meta.isValid, g = [m.helperTextId, m.feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		...d,
+		ref: f,
+		id: m.inputId,
+		value: p.state.value,
+		onChange: (e) => {
+			p.handleChange(e), s?.(e);
+		},
+		onBlur: () => {
+			p.handleBlur(), a?.();
+		},
+		onFocus: () => {
+			o?.();
+		},
+		onOpenChange: (e) => {
+			c?.(e);
+		},
+		onClearButtonPress: () => {
+			p.setValue(null), r?.();
+		},
+		isReadOnly: l,
+		isDisabled: u,
+		isInvalid: h,
+		"aria-labelledby": m.labelId,
+		"aria-describedby": g.length > 0 ? g : void 0,
+		"aria-details": m.contextualLinkId
+	});
+});
+a.displayName = "TanstackDatePicker";
+//#endregion
+export { a as TanstackDatePicker };

package/dist/esm/components/date-picker/parts/DateInput.js

@@ -1,138 +1,104 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useContext as p } from "react";
+import { Icon as e } from "../../icon/Icon.js";
+import { Spinner as t } from "../../spinner/Spinner.js";
+import { CircularIconButton as n } from "../../icon-button/CircularIconButton.js";
+import { useContext as r } from "react";
 import { uyTv as i } from "@payfit/unity-themes";
-import { DatePickerStateContext as x, DateInput as g, DateSegment as h } from "react-aria-components/DatePicker";
-import { useIntl as v } from "react-intl";
-import { CircularIconButton as I } from "../../icon-button/CircularIconButton.js";
-import { Icon as D } from "../../icon/Icon.js";
-import { Spinner as C } from "../../spinner/Spinner.js";
-const w = i({
-  base: [
-    //theme: common
-    "uy:group uy:box-content uy:rounded-25 uy:px-25 uy:text-end uy:tabular-nums! uy:outline-none uy:typography-body uy:focus:bg-surface-form-active uy:focus:rounded-25",
-    "uy:data-[disabled]:text-content-form-disabled",
-    //theme: legacy
-    "uy:theme-legacy:focus:text-content-inverted",
-    //theme: rebrand
-    "uy:theme-rebrand:focus:text-content-form-active"
-  ],
-  variants: {
-    isPlaceholder: {
-      true: [
-        //theme: legacy
-        "uy:theme-legacy:text-content-neutral-lowest",
-        // theme: rebrand
-        "uy:theme-rebrand:text-content-neutral-lowest-enabled"
-      ],
-      false: "uy:text-content-form-enabled"
-    },
-    isLiteral: {
-      true: "uy:text-content-neutral-lowest-enabled",
-      false: ""
-    }
-  }
-}), M = i({
-  slots: {
-    base: "uy:flex uy:gap-50 uy:flex-grow uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75",
-    input: "uy:flex uy:gap-25 uy:w-fit uy:grow",
-    state: "uy:flex uy:gap-50 uy:items-center"
-  },
-  variants: {
-    isInvalid: {
-      true: {
-        base: "uy:bg-surface-form-error",
-        state: "uy:text-content-form-error"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "uy:bg-surface-form-disabled uy:text-content-form-disabled"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isInvalid: !1,
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-        state: "uy:text-content-neutral-disabled"
-      }
-    }
-  ]
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useIntl as s } from "react-intl";
+import { DateInput as c, DatePickerStateContext as l, DateSegment as u } from "react-aria-components/DatePicker";
+//#region src/components/date-picker/parts/DateInput.tsx
+var d = i({
+	base: [
+		"uy:group uy:box-content uy:rounded-25 uy:px-25 uy:text-end uy:tabular-nums! uy:outline-none uy:typography-body uy:focus:bg-surface-form-active uy:focus:rounded-25",
+		"uy:data-[disabled]:text-content-form-disabled",
+		"uy:theme-legacy:focus:text-content-inverted",
+		"uy:theme-rebrand:focus:text-content-form-active"
+	],
+	variants: {
+		isPlaceholder: {
+			true: ["uy:theme-legacy:text-content-neutral-lowest", "uy:theme-rebrand:text-content-neutral-lowest-enabled"],
+			false: "uy:text-content-form-enabled"
+		},
+		isLiteral: {
+			true: "uy:text-content-neutral-lowest-enabled",
+			false: ""
+		}
+	}
+}), f = i({
+	slots: {
+		base: "uy:flex uy:gap-50 uy:flex-grow uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75",
+		input: "uy:flex uy:gap-25 uy:w-fit uy:grow",
+		state: "uy:flex uy:gap-50 uy:items-center"
+	},
+	variants: {
+		isInvalid: { true: {
+			base: "uy:bg-surface-form-error",
+			state: "uy:text-content-form-error"
+		} },
+		isReadOnly: { true: { base: "uy:border-border-form-disabled uy:bg-surface-form-disabled" } },
+		isDisabled: { true: { base: "uy:bg-surface-form-disabled uy:text-content-form-disabled" } }
+	},
+	compoundVariants: [{
+		isInvalid: !1,
+		isDisabled: !1,
+		isReadOnly: !1,
+		className: {
+			base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+			state: "uy:text-content-neutral-disabled"
+		}
+	}]
 });
-function N({
-  isLoading: r,
-  isInvalid: o,
-  isReadOnly: n,
-  isDisabled: s,
-  onClearButtonPress: d
-}) {
-  const t = v(), u = p(x), { dateValue: c } = u, { base: m, input: y, state: f } = M({
-    isInvalid: !!o,
-    isReadOnly: !!n,
-    isDisabled: !!s
-  }), b = c && !r && !n && !s;
-  return /* @__PURE__ */ l("div", { className: m(), children: [
-    /* @__PURE__ */ e(g, { className: y(), children: (a) => /* @__PURE__ */ e(
-      h,
-      {
-        segment: a,
-        className: w({
-          isPlaceholder: a.isPlaceholder,
-          isLiteral: a.type === "literal"
-        })
-      }
-    ) }),
-    /* @__PURE__ */ l("div", { className: f(), children: [
-      r && /* @__PURE__ */ e(
-        C,
-        {
-          color: "inherit",
-          size: "small",
-          label: t.formatMessage({
-            id: "unity:component:common:loading:label",
-            defaultMessage: "Loading..."
-          })
-        }
-      ),
-      o && /* @__PURE__ */ e(
-        D,
-        {
-          src: "WarningCircleOutlined",
-          color: "content.form.invalid",
-          alt: t.formatMessage({
-            id: "unity:component:form-field:form-input:error:alt",
-            defaultMessage: "Error"
-          })
-        }
-      ),
-      b && /* @__PURE__ */ e(
-        I,
-        {
-          slot: null,
-          title: t.formatMessage({
-            id: "unity:component:common:clear:title",
-            defaultMessage: "Clear"
-          }),
-          icon: "CloseOutlined",
-          onPress: () => {
-            u?.setValue(null), d?.();
-          }
-        }
-      )
-    ] })
-  ] });
+function p({ isLoading: i, isInvalid: p, isReadOnly: m, isDisabled: h, onClearButtonPress: g }) {
+	let _ = s(), v = r(l), { dateValue: y } = v, { base: b, input: x, state: S } = f({
+		isInvalid: !!p,
+		isReadOnly: !!m,
+		isDisabled: !!h
+	}), C = y && !i && !m && !h;
+	return /* @__PURE__ */ o("div", {
+		className: b(),
+		children: [/* @__PURE__ */ a(c, {
+			className: x(),
+			children: (e) => /* @__PURE__ */ a(u, {
+				segment: e,
+				className: d({
+					isPlaceholder: e.isPlaceholder,
+					isLiteral: e.type === "literal"
+				})
+			})
+		}), /* @__PURE__ */ o("div", {
+			className: S(),
+			children: [
+				i && /* @__PURE__ */ a(t, {
+					color: "inherit",
+					size: "small",
+					label: _.formatMessage({
+						id: "unity:component:common:loading:label",
+						defaultMessage: "Loading..."
+					})
+				}),
+				p && /* @__PURE__ */ a(e, {
+					src: "WarningCircleOutlined",
+					color: "content.form.invalid",
+					alt: _.formatMessage({
+						id: "unity:component:form-field:form-input:error:alt",
+						defaultMessage: "Error"
+					})
+				}),
+				C && /* @__PURE__ */ a(n, {
+					slot: null,
+					title: _.formatMessage({
+						id: "unity:component:common:clear:title",
+						defaultMessage: "Clear"
+					}),
+					icon: "CloseOutlined",
+					onPress: () => {
+						v?.setValue(null), g?.();
+					}
+				})
+			]
+		})]
+	});
 }
-N.displayName = "DateInput";
-export {
-  N as DateInput,
-  M as dateInput,
-  w as dateSegment
-};
+p.displayName = "DateInput";
+//#endregion
+export { p as DateInput, f as dateInput, d as dateSegment };

package/dist/esm/components/date-picker-field/DatePickerField.js

@@ -1,73 +1,54 @@
-import { jsxs as D, jsx as e } from "react/jsx-runtime";
-import { forwardRef as C } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { useFormContext as B } from "react-hook-form";
-import { DatePicker as T } from "../date-picker/DatePicker.js";
-import { FormField as j } from "../form-field/FormField.js";
-import { FormControl as I } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as V } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as g } from "../form-field/parts/FormLabel.js";
-const v = b({
-  base: "uy:flex uy:flex-col uy:gap-100"
-});
-function w({
-  name: r,
-  label: o,
-  defaultValue: t,
-  helperText: i,
-  feedbackText: m,
-  contextualLink: n,
-  isRequired: s,
-  isInvalid: a,
-  isLoading: c,
-  isDisabled: d,
-  isReadOnly: f,
-  requiredVariant: p,
-  ...l
-}, u) {
-  const { control: F, resetField: k, setValue: P } = B(), h = {
-    isRequired: s,
-    isInvalid: a,
-    isLoading: c,
-    isDisabled: d,
-    isReadOnly: f
-  }, x = () => {
-    k(r, {
-      keepTouched: !1,
-      keepDirty: !1,
-      keepError: !1
-    }), P(r, null, { shouldValidate: !1 });
-  }, y = l.onClearButtonPress ?? x;
-  return /* @__PURE__ */ D(
-    j,
-    {
-      control: F,
-      name: r,
-      className: v(),
-      ...h,
-      children: [
-        /* @__PURE__ */ e(g, { requiredVariant: p, children: o }),
-        i && /* @__PURE__ */ e(V, { children: i }),
-        /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
-          T,
-          {
-            ref: u,
-            defaultValue: t,
-            onClearButtonPress: y,
-            ...l
-          }
-        ) }),
-        /* @__PURE__ */ e(N, { children: m }),
-        n
-      ]
-    }
-  );
+import { DatePicker as e } from "../date-picker/DatePicker.js";
+import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
+import { FormField as n } from "../form-field/FormField.js";
+import { FormControl as r } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
+import { FormLabel as a } from "../form-field/parts/FormLabel.js";
+import { forwardRef as o } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useFormContext as u } from "react-hook-form";
+//#region src/components/date-picker-field/DatePickerField.tsx
+var d = s({ base: "uy:flex uy:flex-col uy:gap-100" });
+function f({ name: o, label: s, defaultValue: f, helperText: p, feedbackText: m, contextualLink: h, isRequired: g, isInvalid: _, isLoading: v, isDisabled: y, isReadOnly: b, requiredVariant: x, ...S }, C) {
+	let { control: w, resetField: T, setValue: E } = u(), D = {
+		isRequired: g,
+		isInvalid: _,
+		isLoading: v,
+		isDisabled: y,
+		isReadOnly: b
+	}, O = S.onClearButtonPress ?? (() => {
+		T(o, {
+			keepTouched: !1,
+			keepDirty: !1,
+			keepError: !1
+		}), E(o, null, { shouldValidate: !1 });
+	});
+	return /* @__PURE__ */ l(n, {
+		control: w,
+		name: o,
+		className: d(),
+		...D,
+		children: [
+			/* @__PURE__ */ c(a, {
+				requiredVariant: x,
+				children: s
+			}),
+			p && /* @__PURE__ */ c(t, { children: p }),
+			/* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
+				ref: C,
+				defaultValue: f,
+				onClearButtonPress: O,
+				...S
+			}) }),
+			/* @__PURE__ */ c(i, { children: m }),
+			h
+		]
+	});
 }
-const E = C(function(o, t) {
-  return w(o, t);
+var p = o(function(e, t) {
+	return f(e, t);
 });
-E.displayName = "DatePickerField";
-export {
-  E as DatePickerField
-};
+p.displayName = "DatePickerField";
+//#endregion
+export { p as DatePickerField };

package/dist/esm/components/date-picker-field/TanstackDatePickerField.js

@@ -1,41 +1,28 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { TanstackDatePicker as f } from "../date-picker/TanstackDatePicker.js";
-import { TanstackFormFeedbackText as l } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as F } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as T } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackFormField as P } from "../form-field/TanstackFormField.js";
-const x = d(
-  ({
-    label: m,
-    helperText: o,
-    contextualLink: a,
-    isRequired: t,
-    isLoading: e,
-    isDisabled: c,
-    isReadOnly: i,
-    requiredVariant: n,
-    ...s
-  }, k) => /* @__PURE__ */ p(P, { children: [
-    /* @__PURE__ */ r(
-      T,
-      {
-        requiredVariant: n,
-        isRequired: t,
-        children: m
-      }
-    ),
-    o && /* @__PURE__ */ r(F, { children: o }),
-    /* @__PURE__ */ r(f, { ref: k, ...{
-      isLoading: e,
-      isDisabled: c,
-      isReadOnly: i
-    }, ...s }),
-    /* @__PURE__ */ r(l, {}),
-    a
-  ] })
-);
-x.displayName = "TanstackDatePickerField";
-export {
-  x as TanstackDatePickerField
-};
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackDatePicker as n } from "../date-picker/TanstackDatePicker.js";
+import { TanstackFormHelperText as r } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as i } from "../form-field/parts/TanstackFormLabel.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/date-picker-field/TanstackDatePickerField.tsx
+var c = a(({ label: a, helperText: c, contextualLink: l, isRequired: u, isLoading: d, isDisabled: f, isReadOnly: p, requiredVariant: m, ...h }, g) => /* @__PURE__ */ s(t, { children: [
+	/* @__PURE__ */ o(i, {
+		requiredVariant: m,
+		isRequired: u,
+		children: a
+	}),
+	c && /* @__PURE__ */ o(r, { children: c }),
+	/* @__PURE__ */ o(n, {
+		ref: g,
+		isLoading: d,
+		isDisabled: f,
+		isReadOnly: p,
+		...h
+	}),
+	/* @__PURE__ */ o(e, {}),
+	l
+] }));
+c.displayName = "TanstackDatePickerField";
+//#endregion
+export { c as TanstackDatePickerField };

package/dist/esm/components/date-picker-field/test-utils.js

@@ -1,52 +1,27 @@
-import { CalendarDate as o } from "@internationalized/date";
-import { userEvent as r, within as l } from "storybook/test";
-const c = (i) => {
-  const d = (e) => {
-    const t = l(i.canvasElement).getAllByLabelText(
-      e,
-      {
-        exact: !1,
-        selector: "span"
-      }
-    );
-    if (t.length !== 3)
-      throw new Error(`Date field for ${e} not found`);
-    return t;
-  };
-  return {
-    fillCalendarDate: async ({
-      labelText: e,
-      calendarDate: t
-    }) => {
-      await i.step(`Fill date picker ${e}`, async () => {
-        const a = d(e);
-        await r.type(
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          a.find((n) => n.getAttribute("data-type") === "day"),
-          String(t.day)
-        ), await r.type(
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          a.find((n) => n.getAttribute("data-type") === "month"),
-          String(t.month)
-        ), await r.type(
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          a.find((n) => n.getAttribute("data-type") === "year"),
-          String(t.year)
-        );
-      });
-    },
-    getCalendarDateValue: ({ labelText: e }) => {
-      const t = d(e), a = (n) => parseInt(
-        t.find((s) => s.getAttribute("data-type") === n)?.textContent ?? ""
-      );
-      return new o(
-        a("year"),
-        a("month"),
-        a("day")
-      );
-    }
-  };
-};
-export {
-  c as getTestingUtilsDatePicker
+import { CalendarDate as e } from "@internationalized/date";
+import { userEvent as t, within as n } from "storybook/test";
+//#region src/components/date-picker-field/test-utils.ts
+var r = (r) => {
+	let i = (e) => {
+		let t = n(r.canvasElement).getAllByLabelText(e, {
+			exact: !1,
+			selector: "span"
+		});
+		if (t.length !== 3) throw Error(`Date field for ${e} not found`);
+		return t;
+	};
+	return {
+		fillCalendarDate: async ({ labelText: e, calendarDate: n }) => {
+			await r.step(`Fill date picker ${e}`, async () => {
+				let r = i(e);
+				await t.type(r.find((e) => e.getAttribute("data-type") === "day"), String(n.day)), await t.type(r.find((e) => e.getAttribute("data-type") === "month"), String(n.month)), await t.type(r.find((e) => e.getAttribute("data-type") === "year"), String(n.year));
+			});
+		},
+		getCalendarDateValue: ({ labelText: t }) => {
+			let n = i(t), r = (e) => parseInt(n.find((t) => t.getAttribute("data-type") === e)?.textContent ?? "");
+			return new e(r("year"), r("month"), r("day"));
+		}
+	};
 };
+//#endregion
+export { r as getTestingUtilsDatePicker };