@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,73 @@
+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
+      ]
+    }
+  );
+}
+const E = C(function(o, t) {
+  return w(o, t);
+});
+E.displayName = "DatePickerField";
+export {
+  E as DatePickerField
+};

package/dist/esm/components/date-picker-field/TanstackDatePickerField.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+import { TanstackDatePickerProps } from '../date-picker/TanstackDatePicker.js';
+import { LabelProps } from '../label/Label.js';
+export type TanstackDatePickerFieldProps = TanstackDatePickerProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
+    /** The label for the date picker field. */
+    label: string;
+    /** Helper text to display below the date picker field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the date picker field. */
+    contextualLink?: ReactNode;
+};
+/**
+ * The `TanstackDatePickerField` component renders a full field (label, date picker)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Renders `TanstackDatePicker` with calendar overlay for date selection.
+ * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
+ *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
+ *
+ * Accessibility:
+ * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
+ *   `aria-details` using identifiers from the `a11y` context.
+ *
+ * Key props:
+ * - `label: string` — label text.
+ * - `helperText?: ReactNode` — helper text displayed below the field.
+ * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
+ * - Inherits props from `TanstackDatePicker`.
+ * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
+ *
+ * Example:
+ * ```tsx
+ * import { TanstackDatePickerField } from "@/components/date-picker-field/TanstackDatePickerField"
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ * import { parseDate } from '@internationalized/date'
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     birthDate: z.custom<CalendarDate | null>()
+ *       .refine(date => date !== null, 'Birth date is required'),
+ *  })
+ *
+ *   const form = useTanstackUnityForm({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form>
+ *       <form.AppField name="birthDate">
+ *         {() => (
+ *           <TanstackDatePickerField
+ *             label="Birth Date"
+ *             helperText="Select your date of birth"
+ *           />
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackDatePickerField: import('react').ForwardRefExoticComponent<TanstackDatePickerProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
+    /** The label for the date picker field. */
+    label: string;
+    /** Helper text to display below the date picker field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the date picker field. */
+    contextualLink?: ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackDatePickerField };

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

@@ -0,0 +1,41 @@
+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
+};

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

@@ -0,0 +1,15 @@
+import { PlayCtx } from '../../types/testing.js';
+import { CalendarDate } from '@internationalized/date';
+/**
+ * Factory to get date picker testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsDatePicker: (context: PlayCtx) => {
+    fillCalendarDate: ({ labelText, calendarDate, }: {
+        labelText: string;
+        calendarDate: CalendarDate;
+    }) => Promise<void>;
+    getCalendarDateValue: ({ labelText }: {
+        labelText: string;
+    }) => CalendarDate;
+};

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

@@ -0,0 +1,52 @@
+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
+};

package/dist/esm/components/date-range-calendar/DateRangeCalendar.d.ts

@@ -0,0 +1,22 @@
+import { DateValue } from '@internationalized/date';
+import { RangeCalendarProps as AriaRangeCalendarProps } from 'react-aria-components/RangeCalendar';
+type PropsFromAriaRangeCalendar<TDate extends DateValue> = AriaRangeCalendarProps<TDate>;
+export type DateRangeCalendarProps<TDate extends DateValue> = PropsFromAriaRangeCalendar<TDate>;
+/**
+ * The `DateRangeCalendar` component displays a calendar grid and allows users to select a date range (start and end dates).
+ * @param {DateRangeCalendarProps} props - The props for the `DateRangeCalendar` component
+ * @example
+ * ```tsx
+ * import { DateRangeCalendar } from '@payfit/unity-components'
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * const [range, setRange] = useState({ start: new CalendarDate(2024, 1, 1), end: new CalendarDate(2024, 1, 15) })
+ * <DateRangeCalendar value={range} onChange={setRange} />
+ * ```
+ * @see {@link DateRangeCalendarProps} for all available props
+ */
+declare function DateRangeCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, onChange, onFocusChange, ...props }: DateRangeCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
+declare namespace DateRangeCalendar {
+    var displayName: string;
+}
+export { DateRangeCalendar };

package/dist/esm/components/date-range-calendar/DateRangeCalendar.js

@@ -0,0 +1,213 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { useState as S } from "react";
+import { today as B, getLocalTimeZone as f, isToday as T } from "@internationalized/date";
+import { useUnityTheme as Y, uyTv as O } from "@payfit/unity-themes";
+import { Heading as j } from "react-aria-components/Heading";
+import { RangeCalendar as k, CalendarGrid as F, CalendarGridHeader as P, CalendarHeaderCell as U, CalendarGridBody as W, CalendarCell as Z } from "react-aria-components/RangeCalendar";
+import { useIntl as $ } from "react-intl";
+import { calendarBase as q } from "../date-calendar/DateCalendar.variants.js";
+import { useMonthsList as z } from "../date-calendar/hooks/useMonthsList.js";
+import { useYearsList as A } from "../date-calendar/hooks/useYearsList.js";
+import { DateSegmentSelect as g } from "../date-calendar/parts/DateSegmentSelect.js";
+import { IconButton as v } from "../icon-button/IconButton.js";
+const E = O({
+  extend: q,
+  slots: {
+    calendarGrid: [
+      //theme:  common
+      "uy:border-spacing-y-25 uy:border-spacing-x-0",
+      // All <td> with selected cells need relative positioning for pseudo-elements
+      "uy:[&_td:has(>[data-selected])]:relative",
+      // Middle cells: full background on the <td>
+      "uy:[&_td:has(>[data-selection-start])]:bg-transparent uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:content-[''] uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:absolute uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:top-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:right-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:w-1/2 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:h-full uy:theme-legacy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:bg-surface-primary-lowest",
+      "uy:[&_td:has(>[data-selection-end])]:bg-transparent",
+      // Single day range — no band at all
+      "uy:[&_td:has(>[data-selection-start][data-selection-end])]:bg-transparent",
+      //theme: legacy
+      "uy:theme-legacy:[&_td:has(>[data-selected])]:bg-surface-primary-lowest",
+      //theme: rebrand
+      // Start td: no bg, use :before for right-half band
+      "uy:theme-rebrand:[&_td:has(>[data-selected])]:bg-surface-form-selected",
+      "uy:theme-rebrand:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:bg-surface-form-selected",
+      // End td: no bg, use :before for left-half band
+      "uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:content-[''] uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:absolute uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:top-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:left-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:w-1/2 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:h-full uy:theme-legacy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:bg-surface-primary-lowest uy:theme-rebrand:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:bg-surface-form-selected"
+    ],
+    calendarHeaderCell: "uy:text-center",
+    calendarCell: [
+      //theme: common
+      "uy:data-[selected]:rounded-none",
+      "uy:data-[selection-start]:bg-surface-form-active uy:data-[selection-start]:rounded-circle",
+      "uy:data-[selection-end]:bg-surface-form-active",
+      "uy:data-[selection-end]:rounded-circle",
+      //theme: legacy
+      "uy:theme-legacy:data-[selection-start]:text-content-inverted",
+      "uy:theme-legacy:data-[selection-end]:text-content-inverted",
+      "uy:theme-legacy:data-[today]:data-[selection-start]:after:bg-content-inverted",
+      "uy:theme-legacy:data-[today]:data-[selection-end]:after:bg-content-inverted",
+      //theme: rebrand
+      "uy:theme-rebrand:data-[selection-start]:text-content-form-active",
+      "uy:theme-rebrand:data-[selection-end]:text-content-form-active",
+      "uy:theme-rebrand:data-[today]:data-[selection-start]:after:bg-border-form-active",
+      "uy:theme-rebrand:data-[today]:data-[selection-end]:after:bg-border-form-active"
+    ]
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        calendarGrid: "uy:[&_td]:bg-transparent uy:[&_td]:before:hidden",
+        calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selection-start]:bg-transparent uy:data-[selection-start]:text-content-neutral-disabled uy:data-[selection-end]:bg-transparent uy:data-[selection-end]:text-content-neutral-disabled uy:cursor-not-allowed"
+      }
+    },
+    isInteractive: {
+      true: {
+        calendarCell: [
+          //theme: common
+          "uy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:rounded-circle",
+          //theme: legacy
+          "uy:theme-legacy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-primary-lowest-hover",
+          //theme: rebrand
+          "uy:theme-rebrand:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-neutral-hover"
+        ]
+      }
+    }
+  }
+});
+function J({
+  value: c,
+  defaultValue: i,
+  minValue: n,
+  maxValue: r,
+  onChange: p,
+  onFocusChange: C,
+  ...a
+}) {
+  const u = $(), { theme: y } = Y(), _ = B(f()), D = z(), N = A({
+    startYear: n?.year,
+    endYear: r?.year
+  }), [s, o] = S(() => {
+    const e = c?.start ?? i?.start ?? _;
+    return n && e.compare(n) < 0 ? n : r && e.compare(r) > 0 ? r : e;
+  }), x = (e) => {
+    o(
+      (l) => l.set({ month: parseInt(e, 10) })
+    );
+  }, w = (e) => {
+    o(
+      (l) => l.set({ year: parseInt(e, 10) })
+    );
+  }, {
+    base: G,
+    calendarWrapper: H,
+    dialogHeader: I,
+    dialogHeaderGroup: m,
+    calendarGrid: L,
+    calendarHeaderCell: M,
+    calendarCell: R
+  } = E({
+    isDisabled: a.isDisabled,
+    isInteractive: !a.isDisabled && !a.isReadOnly
+  }), h = y === "rebrand" ? "outlined" : "ghost", b = y === "rebrand" ? "primary" : "neutral";
+  return /* @__PURE__ */ t("div", { className: G(), "data-dd-privacy": "mask", children: /* @__PURE__ */ t(
+    k,
+    {
+      ...a,
+      minValue: n,
+      maxValue: r,
+      value: c,
+      defaultValue: i,
+      onChange: p,
+      focusedValue: s,
+      onFocusChange: (e) => {
+        o(e), C?.(e);
+      },
+      children: /* @__PURE__ */ d("div", { className: H(), children: [
+        /* @__PURE__ */ d("header", { className: I(), children: [
+          /* @__PURE__ */ t(j, { className: "uy:sr-only" }),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: m({
+                className: "uy:pl-100 uy:gap-200"
+              }),
+              children: [
+                /* @__PURE__ */ t(
+                  g,
+                  {
+                    type: "month",
+                    items: D,
+                    value: s.month.toString(),
+                    onChange: x,
+                    isDisabled: a.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  g,
+                  {
+                    type: "year",
+                    items: N,
+                    value: s.year.toString(),
+                    onChange: w,
+                    isDisabled: a.isDisabled
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: m({
+                className: "uy:ml-auto uy:gap-100"
+              }),
+              children: [
+                /* @__PURE__ */ t(
+                  v,
+                  {
+                    slot: "previous",
+                    icon: "CaretLeftOutlined",
+                    color: b,
+                    label: u.formatMessage({
+                      id: "unity:component:common:previous",
+                      defaultMessage: "Previous"
+                    }),
+                    variant: h,
+                    isDisabled: a.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  v,
+                  {
+                    slot: "next",
+                    icon: "CaretRightOutlined",
+                    color: b,
+                    label: u.formatMessage({
+                      id: "unity:component:common:next",
+                      defaultMessage: "Next"
+                    }),
+                    variant: h,
+                    isDisabled: a.isDisabled
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ d(F, { className: L(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ t(P, { children: (e) => /* @__PURE__ */ t(U, { className: M(), children: e }) }),
+          /* @__PURE__ */ t(W, { children: (e) => /* @__PURE__ */ t(
+            Z,
+            {
+              date: e,
+              "data-today": T(e, f()) ? !0 : void 0,
+              className: R()
+            }
+          ) })
+        ] })
+      ] })
+    }
+  ) });
+}
+J.displayName = "DateRangeCalendar";
+export {
+  J as DateRangeCalendar
+};

package/dist/esm/components/date-range-picker/DateRangePicker.d.ts

@@ -0,0 +1,68 @@
+import { CalendarDate } from '@internationalized/date';
+import { DateRangePickerProps as AriaDateRangePickerProps } from 'react-aria-components/DateRangePicker';
+type DateRange = {
+    start: CalendarDate;
+    end: CalendarDate;
+};
+export interface DateRangePickerProps extends Pick<AriaDateRangePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'> {
+    /** The currently selected date range */
+    value?: DateRange | null;
+    /** The default selected date range (uncontrolled) */
+    defaultValue?: DateRange | null;
+    /** The minimum allowed date */
+    minValue?: CalendarDate;
+    /** The maximum allowed date */
+    maxValue?: CalendarDate;
+    /** Callback fired when the date range value changes */
+    onChange?: (value: DateRange | null) => void;
+    /** Callback fired when the clear button is clicked */
+    onClearButtonPress?: () => void;
+    /** Callback fired when the picker loses focus */
+    onBlur?: () => void;
+    /** Callback fired when the picker gains focus */
+    onFocus?: () => void;
+    /** Callback fired when the calendar overlay's open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Whether the picker is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the picker is in a loading state */
+    isLoading?: boolean;
+    /** Whether the picker is disabled */
+    isDisabled?: boolean;
+    /** Whether the picker is read-only */
+    isReadOnly?: boolean;
+    /** Function to determine if a date should be disabled */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** Whether to force leading zeros for days and months */
+    shouldForceLeadingZeros?: boolean;
+    /** Whether to close the calendar after a date range is selected */
+    shouldCloseOnSelect?: boolean;
+    /** Whether to open the calendar by default */
+    defaultOpen?: boolean;
+}
+/**
+ * The DateRangePicker component allows users to select a date range either by typing it in directly or choosing from a calendar overlay.
+ * @param {DateRangePickerProps} props - Props for configuring the DateRangePicker's behavior and appearance
+ * @see {@link DateRangePickerProps} for all available props
+ * @example
+ * ```tsx
+ * import { DateRangePicker } from '@payfit/unity-components'
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * function Example() {
+ *   const [range, setRange] = useState<{ start: CalendarDate; end: CalendarDate }>()
+ *
+ *   return (
+ *     <DateRangePicker
+ *       value={range}
+ *       onChange={setRange}
+ *       minValue={new CalendarDate(2024, 1, 1)}
+ *     />
+ *   )
+ * }
+ * ```
+ * @note
+ * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
+ */
+declare const DateRangePicker: import('react').ForwardRefExoticComponent<DateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DateRangePicker };