@payfit/unity-components 2.21.12 → 2.21.14

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';
+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 };

package/dist/esm/components/date-range-picker/DateRangePicker.js

@@ -0,0 +1,174 @@
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { DateRangePicker as U, Group as B, Button as j, Popover as E, Dialog as M } from "react-aria-components";
+import { useIntl as G } from "react-intl";
+import { DateRangeCalendar as T } from "../date-range-calendar/DateRangeCalendar.js";
+import { Icon as $ } from "../icon/Icon.js";
+import { DateRangeInput as q } from "./parts/DateRangeInput.js";
+const z = b({
+  slots: {
+    base: [
+      "uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
+      "uy:active:border-border-form-active uy:data-[focus-visible=true]:border-border-form-active"
+    ],
+    inputWrapper: [
+      "uy:flex uy:grow uy:rounded-100 uy:sm:rounded-75 uy:outline-none",
+      // Show focus styles when input wrapper is focused AND button is not focused
+      "uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-3",
+      // Hide focus styles when button is focused
+      "uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
+    ],
+    suffix: [
+      "uy:flex-grow-0 uy:content-center uy:p-125 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:text-content-neutral-low",
+      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:not-group-data-[open=true]:border-border-form-active",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-3"
+    ]
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy:border-border-form-error uy:bg-surface-form-error",
+        suffix: "uy:bg-surface-form-error uy:border-border-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+        suffix: "uy:bg-surface-form-disabled uy:border-border-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",
+        suffix: "uy:border-border-form-enabled uy:bg-surface-neutral uy:text-content-neutral-low"
+      }
+    }
+  ]
+}), A = b({
+  base: "uy:overflow-auto uy:shadow-300 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
+  variants: {
+    isEntering: {
+      true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-200 uy:ease-out"
+    },
+    isExiting: {
+      true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in"
+    }
+  }
+}), H = I(
+  ({
+    value: i,
+    defaultValue: n,
+    isInvalid: t,
+    isLoading: y,
+    isDisabled: o,
+    isReadOnly: u,
+    onClearButtonPress: c,
+    onBlur: d,
+    onFocus: s,
+    onChange: m,
+    onOpenChange: g,
+    id: p,
+    "aria-label": h,
+    "aria-labelledby": v,
+    "aria-describedby": x,
+    "aria-details": D,
+    ...e
+  }, w) => {
+    const k = G(), { base: C, inputWrapper: R, suffix: P } = z({
+      isInvalid: !!t,
+      isReadOnly: !!u,
+      isDisabled: !!o
+    }), l = (r) => {
+      m?.(r);
+    }, V = (r) => {
+      g?.(r), r ? s?.() : d?.();
+    }, N = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, O = () => {
+      c?.();
+    };
+    return /* @__PURE__ */ f(
+      U,
+      {
+        ref: w,
+        "data-dd-privacy": "mask",
+        ...e,
+        className: C(),
+        value: i,
+        defaultValue: n,
+        minValue: e.minValue,
+        maxValue: e.maxValue,
+        isReadOnly: !!u,
+        isDisabled: !!o,
+        onChange: l,
+        onFocus: s,
+        onBlur: d,
+        onOpenChange: V,
+        isInvalid: !!t,
+        isDateUnavailable: N,
+        "aria-label": h,
+        "aria-labelledby": v,
+        "aria-describedby": x,
+        "aria-details": D,
+        children: [
+          /* @__PURE__ */ f(B, { className: R(), id: p, children: [
+            /* @__PURE__ */ a(
+              q,
+              {
+                isLoading: y,
+                isDisabled: o,
+                isReadOnly: u,
+                isInvalid: t,
+                onClearButtonPress: O
+              }
+            ),
+            /* @__PURE__ */ a(j, { className: P(), isDisabled: u || o, children: /* @__PURE__ */ a(
+              $,
+              {
+                src: "CalendarBlankOutlined",
+                color: "inherit",
+                alt: k.formatMessage({
+                  id: "unity:component:form-field:date-range-picker:calendar-button",
+                  defaultMessage: "Open Calendar"
+                })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ a(
+            E,
+            {
+              className: ({ isEntering: r, isExiting: W }) => A({ isEntering: r, isExiting: W }),
+              children: /* @__PURE__ */ a(M, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+                T,
+                {
+                  value: i,
+                  defaultValue: n,
+                  minValue: e.minValue,
+                  maxValue: e.maxValue,
+                  onChange: l,
+                  firstDayOfWeek: e.firstDayOfWeek
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+H.displayName = "DateRangePicker";
+export {
+  H as DateRangePicker
+};

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

@@ -0,0 +1,22 @@
+import { DateRangePickerProps } from './DateRangePicker.js';
+export type TanstackDateRangePickerProps = Omit<DateRangePickerProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackDateRangePicker` is a controlled date range picker wired to the TanStack Form field context.
+ * It is based on the Unity `DateRangePicker` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ period: DateRange | null }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="period">
+ *         {() => <TanstackDateRangePicker />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackDateRangePicker: import('react').ForwardRefExoticComponent<TanstackDateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackDateRangePicker };

package/dist/esm/components/date-range-picker/TanstackDateRangePicker.js

@@ -0,0 +1,53 @@
+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 g } from "../form-field/TanstackFormField.context.js";
+import { DateRangePicker as k } from "./DateRangePicker.js";
+const x = h(
+  ({
+    onClearButtonPress: o,
+    onBlur: i,
+    onFocus: r,
+    onChange: l,
+    onOpenChange: s,
+    isReadOnly: d,
+    isDisabled: c,
+    ...m
+  }, u) => {
+    const e = b(), a = g(), f = e.state.meta.isTouched && !e.state.meta.isValid, n = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ p(
+      k,
+      {
+        ...m,
+        ref: u,
+        id: a.inputId,
+        value: e.state.value,
+        onChange: (t) => {
+          e.handleChange(t), l?.(t);
+        },
+        onBlur: () => {
+          e.handleBlur(), i?.();
+        },
+        onFocus: () => {
+          r?.();
+        },
+        onOpenChange: (t) => {
+          s?.(t);
+        },
+        onClearButtonPress: () => {
+          e.setValue(null), o?.();
+        },
+        isReadOnly: d,
+        isDisabled: c,
+        isInvalid: f,
+        "aria-labelledby": a.labelId,
+        "aria-describedby": n.length > 0 ? n : void 0,
+        "aria-details": a.contextualLinkId
+      }
+    );
+  }
+);
+x.displayName = "TanstackDateRangePicker";
+export {
+  x as TanstackDateRangePicker
+};

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

@@ -0,0 +1,16 @@
+export interface DateRangeInputProps {
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Clear button click handler */
+    onClearButtonPress?: () => void;
+}
+export declare function DateRangeInput({ isLoading, isInvalid, isReadOnly, isDisabled, onClearButtonPress, }: DateRangeInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DateRangeInput {
+    var displayName: string;
+}

package/dist/esm/components/date-range-picker/parts/DateRangeInput.js

@@ -0,0 +1,98 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useContext as x } from "react";
+import { uyTv as N } from "@payfit/unity-themes";
+import { DateRangePickerStateContext as I, DateInput as m, DateSegment as u } from "react-aria-components";
+import { useIntl as b } from "react-intl";
+import { dateInput as v, dateSegment as d } from "../../date-picker/parts/DateInput.js";
+import { CircularIconButton as C } from "../../icon-button/CircularIconButton.js";
+import { Icon as P } from "../../icon/Icon.js";
+import { Spinner as D } from "../../spinner/Spinner.js";
+const M = N({
+  base: "uy:px-50 uy:flex uy:items-center",
+  variants: {
+    isDisabled: {
+      true: "uy:text-content-form-disabled",
+      false: "uy:text-content-neutral-lowest-enabled"
+    }
+  }
+});
+function S({
+  isLoading: n,
+  isInvalid: r,
+  isReadOnly: s,
+  isDisabled: a,
+  onClearButtonPress: p
+}) {
+  const l = b(), i = x(I), { value: c } = i, { base: f, input: y, state: g } = v({
+    isInvalid: !!r,
+    isReadOnly: !!s,
+    isDisabled: !!a
+  }), h = c?.start && c?.end && !n && !s && !a;
+  return /* @__PURE__ */ o("div", { className: f(), children: [
+    /* @__PURE__ */ o("div", { className: y(), children: [
+      /* @__PURE__ */ e(m, { slot: "start", className: "uy:flex uy:gap-25", children: (t) => /* @__PURE__ */ e(
+        u,
+        {
+          segment: t,
+          className: d({
+            isPlaceholder: t.isPlaceholder,
+            isLiteral: t.type === "literal"
+          })
+        }
+      ) }),
+      /* @__PURE__ */ e("span", { className: M({ isDisabled: !!a }), children: "→" }),
+      /* @__PURE__ */ e(m, { slot: "end", className: "uy:flex uy:gap-25", children: (t) => /* @__PURE__ */ e(
+        u,
+        {
+          segment: t,
+          className: d({
+            isPlaceholder: t.isPlaceholder,
+            isLiteral: t.type === "literal"
+          })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ o("div", { className: g(), children: [
+      n && /* @__PURE__ */ e(
+        D,
+        {
+          color: "inherit",
+          size: "small",
+          label: l.formatMessage({
+            id: "unity:component:common:loading:label",
+            defaultMessage: "Loading..."
+          })
+        }
+      ),
+      r && /* @__PURE__ */ e(
+        P,
+        {
+          src: "WarningCircleOutlined",
+          color: "content.form.invalid",
+          alt: l.formatMessage({
+            id: "unity:component:form-field:form-input:error:alt",
+            defaultMessage: "Error"
+          })
+        }
+      ),
+      h && /* @__PURE__ */ e(
+        C,
+        {
+          slot: null,
+          title: l.formatMessage({
+            id: "unity:component:common:clear:title",
+            defaultMessage: "Clear"
+          }),
+          icon: "CloseOutlined",
+          onPress: () => {
+            i?.setValue(null), p?.();
+          }
+        }
+      )
+    ] })
+  ] });
+}
+S.displayName = "DateRangeInput";
+export {
+  S as DateRangeInput
+};

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

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { TanstackDateRangePickerProps } from '../date-range-picker/TanstackDateRangePicker.js';
+import { LabelProps } from '../label/Label.js';
+export type TanstackDateRangePickerFieldProps = TanstackDateRangePickerProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
+    /** The label for the date range picker field. */
+    label: string;
+    /** Helper text to display below the date range picker field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the date range picker field. */
+    contextualLink?: ReactNode;
+};
+/**
+ * The `TanstackDateRangePickerField` component renders a full field (label, date range picker)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Renders `TanstackDateRangePicker` with calendar overlay for date range 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.
+ *
+ * Example:
+ * ```tsx
+ * import { TanstackDateRangePickerField } from "@payfit/unity-components"
+ * import { useTanstackUnityForm } from "@payfit/unity-components"
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * function Example() {
+ *   const schema = z.object({
+ *     period: z.custom<{ start: CalendarDate; end: CalendarDate } | null>()
+ *       .refine(range => range !== null, 'Date range is required'),
+ *   })
+ *
+ *   const form = useTanstackUnityForm({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form>
+ *       <form.AppField name="period">
+ *         {() => (
+ *           <TanstackDateRangePickerField
+ *             label="Period"
+ *             helperText="Select a date range"
+ *           />
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackDateRangePickerField: import('react').ForwardRefExoticComponent<TanstackDateRangePickerProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
+    /** The label for the date range picker field. */
+    label: string;
+    /** Helper text to display below the date range picker field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the date range picker field. */
+    contextualLink?: ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackDateRangePickerField };

package/dist/esm/components/date-range-picker-field/TanstackDateRangePickerField.js

@@ -0,0 +1,41 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { TanstackDateRangePicker as f } from "../date-range-picker/TanstackDateRangePicker.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: a,
+    helperText: o,
+    contextualLink: e,
+    isRequired: m,
+    isLoading: t,
+    isDisabled: c,
+    isReadOnly: n,
+    requiredVariant: i,
+    ...s
+  }, k) => /* @__PURE__ */ p(P, { children: [
+    /* @__PURE__ */ r(
+      T,
+      {
+        requiredVariant: i,
+        isRequired: m,
+        children: a
+      }
+    ),
+    o && /* @__PURE__ */ r(F, { children: o }),
+    /* @__PURE__ */ r(f, { ref: k, ...{
+      isLoading: t,
+      isDisabled: c,
+      isReadOnly: n
+    }, ...s }),
+    /* @__PURE__ */ r(l, {}),
+    e
+  ] })
+);
+x.displayName = "TanstackDateRangePickerField";
+export {
+  x as TanstackDateRangePickerField
+};

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

@@ -0,0 +1,19 @@
+import { PlayCtx } from '../../types/testing.js';
+import { CalendarDate } from '@internationalized/date';
+/**
+ * Factory to get date range picker testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsDateRangePicker: (context: PlayCtx) => {
+    fillCalendarDateRange: ({ labelText, startDate, endDate, }: {
+        labelText: string;
+        startDate: CalendarDate;
+        endDate: CalendarDate;
+    }) => Promise<void>;
+    getCalendarDateRangeValue: ({ labelText }: {
+        labelText: string;
+    }) => {
+        start: CalendarDate;
+        end: CalendarDate;
+    };
+};

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

@@ -0,0 +1,66 @@
+import { CalendarDate as l } from "@internationalized/date";
+import { within as c, userEvent as r } from "storybook/test";
+const m = (i) => {
+  const s = (e) => {
+    const t = c(i.canvasElement).getAllByLabelText(
+      e,
+      {
+        exact: !1,
+        selector: "span"
+      }
+    );
+    if (t.length !== 6)
+      throw new Error(
+        `Date range field for ${e} not found. Expected 6 segments, got ${t.length}`
+      );
+    return {
+      start: t.slice(0, 3),
+      end: t.slice(3, 6)
+    };
+  }, g = async (e, t) => {
+    await r.type(
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      e.find((a) => a.getAttribute("data-type") === "day"),
+      String(t.day)
+    ), await r.type(
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      e.find((a) => a.getAttribute("data-type") === "month"),
+      String(t.month)
+    ), await r.type(
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      e.find((a) => a.getAttribute("data-type") === "year"),
+      String(t.year)
+    );
+  }, d = (e) => {
+    const t = (a) => parseInt(
+      e.find((n) => n.getAttribute("data-type") === a)?.textContent ?? ""
+    );
+    return new l(
+      t("year"),
+      t("month"),
+      t("day")
+    );
+  };
+  return {
+    fillCalendarDateRange: async ({
+      labelText: e,
+      startDate: t,
+      endDate: a
+    }) => {
+      await i.step(`Fill date range picker ${e}`, async () => {
+        const { start: n, end: o } = s(e);
+        await g(n, t), await g(o, a);
+      });
+    },
+    getCalendarDateRangeValue: ({ labelText: e }) => {
+      const { start: t, end: a } = s(e);
+      return {
+        start: d(t),
+        end: d(a)
+      };
+    }
+  };
+};
+export {
+  m as getTestingUtilsDateRangePicker
+};