@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/error-state/parts/Collapsible.js

@@ -0,0 +1,68 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useContext as l } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import { Button as c } from "react-aria-components/Button";
+import { Disclosure as d, DisclosurePanel as y, DisclosureStateContext as f, Heading as m } from "react-aria-components/Disclosure";
+import { FormattedMessage as p } from "react-intl";
+import { Icon as h } from "../../icon/Icon.js";
+import { Text as b } from "../../text/Text.js";
+const n = u({
+  slots: {
+    base: [
+      "uy:w-full uy:rounded-50",
+      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-2",
+      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-solid",
+      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-offset-2",
+      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-utility-focus-ring"
+    ],
+    heading: "uy:w-full",
+    button: [
+      "uy:flex uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer",
+      "uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"
+    ],
+    title: "uy:flex uy:grow uy:text-left uy:items-center uy:justify-center",
+    icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center",
+    content: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top-left uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0"
+  },
+  variants: {
+    isExpanded: {
+      true: {
+        icon: "uy:rotate-180"
+      },
+      false: {
+        icon: "uy:rotate-0"
+      }
+    }
+  }
+}), v = () => {
+  const e = l(f), { button: i, title: o, icon: a, heading: r } = n({
+    isExpanded: e?.isExpanded
+  });
+  return /* @__PURE__ */ t(m, { "data-dd-privacy": "allow", className: r(), children: /* @__PURE__ */ t(c, { className: i(), slot: "trigger", children: /* @__PURE__ */ s(b, { variant: "bodyStrong", className: o(), children: [
+    /* @__PURE__ */ t(
+      h,
+      {
+        src: "CaretDownOutlined",
+        className: a(),
+        role: "presentation"
+      }
+    ),
+    /* @__PURE__ */ t(
+      p,
+      {
+        id: "unity:component:error-state:collapsible:title",
+        defaultMessage: "Show details"
+      }
+    )
+  ] }) }) });
+}, w = ({ children: e, ...i }) => {
+  const { base: o, content: a } = n();
+  return /* @__PURE__ */ s(d, { "data-dd-privacy": "allow", ...i, className: o(), children: [
+    /* @__PURE__ */ t(v, {}),
+    /* @__PURE__ */ t(y, { "data-dd-privacy": "allow", className: a(), children: /* @__PURE__ */ t("div", { className: "uy:ml-400 uy:typography-body", children: e }) })
+  ] });
+};
+w.displayName = "Collapsible";
+export {
+  w as Collapsible
+};

package/dist/esm/components/fieldset/Fieldset.d.ts

@@ -0,0 +1,117 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren, ReactNode } from 'react';
+export declare const fieldset: import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fieldset>> {
+    /**
+     * The legend of the fieldset.
+     */
+    legend: ReactNode;
+    /**
+     * An optional description of the fieldset.
+     */
+    description?: string;
+    /**
+     * Whether to hide the legend of the fieldset.
+     */
+    isLegendHidden?: boolean;
+    /**
+     * Whether to disable the end margin of the fieldset.
+     */
+    disableEndMargin?: boolean;
+}
+/**
+ * The `Fieldset` component groups related form fields together with an accessible structure.
+ * It provides visual organization and semantic HTML for form sections, making forms more understandable and navigable.
+ * @param {FieldsetProps} props - The props for the `Fieldset` component
+ * @see {@link FieldsetProps} for all available props
+ * @example
+ * ```tsx
+ * import { Fieldset } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset
+ *       legend="Personal Information"
+ *       description="Please provide your contact details"
+ *       isLegendHidden={false}
+ *     >
+ *       <TextField name="firstName" label="First name" />
+ *       <TextField name="lastName" label="Last name" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+export { Fieldset };

package/dist/esm/components/fieldset/Fieldset.js

@@ -0,0 +1,72 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { useId as x } from "react-aria/useId";
+const h = b({
+  slots: {
+    base: "uy:p-0 uy:m-0 uy:[&+&]:mt-500 uy:[&:last-of-type]:mb-500",
+    legend: "uy:typography-h3 uy:text-content-neutral",
+    description: "uy:block uy:typography-body uy:mt-100 uy:text-content-neutral",
+    fieldsContainer: "uy:flex uy:flex-col uy:gap-250"
+  },
+  variants: {
+    isLegendHidden: {
+      true: {
+        legend: "uy:sr-only",
+        description: "uy:sr-only",
+        fieldsContainer: "uy:mt-0"
+      },
+      false: {
+        legend: "uy:block",
+        description: "uy:block",
+        fieldsContainer: "uy:mt-300"
+      }
+    },
+    disableEndMargin: {
+      true: {
+        base: "uy:[&:last-of-type]:mb-0"
+      }
+    }
+  },
+  defaultVariants: {
+    isLegendHidden: !1,
+    disableEndMargin: !1
+  }
+}), v = g(
+  ({ children: t, ...d }, n) => {
+    const i = x(), { legend: l, description: e, isLegendHidden: a, disableEndMargin: r, ...o } = d, {
+      base: y,
+      legend: c,
+      description: u,
+      fieldsContainer: p
+    } = h({ isLegendHidden: a, disableEndMargin: r }), f = e ? `${i}-fieldset-description` : void 0;
+    return /* @__PURE__ */ m(
+      "fieldset",
+      {
+        "data-dd-privacy": "allow",
+        ...o,
+        ref: n,
+        className: y(),
+        "aria-describedby": f,
+        children: [
+          /* @__PURE__ */ s("legend", { className: c(), children: l }),
+          e && /* @__PURE__ */ s(
+            "span",
+            {
+              id: `${i}-fieldset-description`,
+              "data-fieldset-slot": "description",
+              className: u(),
+              children: e
+            }
+          ),
+          /* @__PURE__ */ s("div", { className: p(), children: t })
+        ]
+      }
+    );
+  }
+);
+v.displayName = "Fieldset";
+export {
+  v as Fieldset,
+  h as fieldset
+};

package/dist/esm/components/fieldset/parts/FieldGroup.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The `FieldGroup` component arranges form fields in a responsive grid layout within a Fieldset.
+ * It optimizes space by displaying fields side-by-side on larger screens while stacking them on mobile devices.
+ * @param {PropsWithChildren<object>} props - The props for the `FieldGroup` component
+ * @example
+ * ```tsx
+ * import { Fieldset, FieldGroup } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset legend="Personal Information">
+ *       <FieldGroup>
+ *         <TextField name="firstName" label="First name" />
+ *         <TextField name="lastName" label="Last name" />
+ *       </FieldGroup>
+ *       <TextField name="email" label="Email" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset-fieldgroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const FieldGroup: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { FieldGroup };

package/dist/esm/components/fieldset/parts/FieldGroup.js

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+const u = p(
+  ({ children: r, ...o }, d) => /* @__PURE__ */ i(
+    "div",
+    {
+      ...o,
+      ref: d,
+      role: "group",
+      className: "uy:grid uy:grid-cols-1 uy:gap-y-250 uy:md:grid-cols-2 uy:md:gap-x-200",
+      children: r
+    }
+  )
+);
+u.displayName = "FieldGroup";
+export {
+  u as FieldGroup
+};

package/dist/esm/components/filter/Filter.controls.d.ts

@@ -0,0 +1,192 @@
+import { Selection } from 'react-aria-components/GridList';
+import { SelectListProps } from '../select-list/SelectList.js';
+import { FilterProps } from './Filter.types.js';
+/**
+ * Represents a single selectable item in a filter.
+ *
+ * Use this type to define the data structure for individual options in your filter.
+ * Each item must have a unique `id` and a human-readable `label`.
+ * @example
+ * ```tsx
+ * const statusItems: FilterItem[] = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ * ```
+ */
+export interface FilterItem {
+    /**
+     * Unique identifier for the item. Used as the value in selections.
+     */
+    id: string;
+    /**
+     * Human-readable label displayed to users.
+     */
+    label: string;
+}
+/**
+ * Represents a group of related filter items.
+ *
+ * Use this type to organize filter options into logical categories, improving UX when
+ * dealing with many options. Groups are rendered with a header label and contain multiple
+ * child items.
+ * @example
+ * ```tsx
+ * const departmentGroups: FilterItemGroup[] = [
+ *   {
+ *     id: 'business',
+ *     label: 'Business',
+ *     children: [
+ *       { id: 'sales', label: 'Sales' },
+ *       { id: 'marketing', label: 'Marketing' },
+ *     ],
+ *   },
+ *   {
+ *     id: 'tech',
+ *     label: 'Tech',
+ *     children: [
+ *       { id: 'engineering', label: 'Engineering' },
+ *       { id: 'product', label: 'Product' },
+ *     ],
+ *   },
+ * ]
+ * ```
+ */
+export interface FilterItemGroup {
+    /**
+     * Unique identifier for the group.
+     */
+    id: string;
+    /**
+     * Label for the group header.
+     */
+    label: string;
+    /**
+     * Array of items belonging to this group.
+     */
+    children: FilterItem[];
+}
+/**
+ * Creates a pre-configured SelectList control for use with the Filter component.
+ *
+ * This helper function simplifies the most common filter use case: selecting items from a list.
+ * It handles the rendering of SelectList with proper multi-select behavior, keyboard navigation,
+ * and support for both flat lists and grouped items. Use this function to quickly create filter
+ * controls without manually managing SelectList configuration.
+ *
+ * The function returns a render function compatible with the Filter component's `renderControl` prop.
+ * It automatically configures the SelectList with sensible defaults: multiple selection, selected items
+ * sorted first, and proper accessibility attributes.
+ * @template TFilterType - The type of the filter value (defaults to Selection from React Aria)
+ * @template TItemType - The type of items in the list (FilterItem or FilterItemGroup)
+ * @param items - An iterable collection of items or item groups to display in the list
+ * @param props - Additional props to pass to the SelectList component (excluding items, value,
+ *                onChange, and children which are managed internally)
+ * @returns A render function that creates a SelectList with the provided items and configuration
+ * @example
+ * ```tsx
+ * import { Filter, selectListFilter } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * // Simple flat list
+ * const statusItems = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ *
+ * function StatusFilter() {
+ *   const [value, setValue] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Status"
+ *       value={value}
+ *       onChange={setValue}
+ *       renderControl={selectListFilter(statusItems, {})}
+ *     />
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Grouped list with custom aria-label
+ * const departmentGroups = [
+ *   {
+ *     id: 'business',
+ *     label: 'Business',
+ *     children: [
+ *       { id: 'sales', label: 'Sales' },
+ *       { id: 'marketing', label: 'Marketing' },
+ *     ],
+ *   },
+ *   {
+ *     id: 'tech',
+ *     label: 'Tech',
+ *     children: [
+ *       { id: 'engineering', label: 'Engineering' },
+ *       { id: 'product', label: 'Product' },
+ *     ],
+ *   },
+ * ]
+ *
+ * function DepartmentFilter() {
+ *   const [value, setValue] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Departments"
+ *       value={value}
+ *       onChange={setValue}
+ *       renderControl={selectListFilter(departmentGroups, {
+ *         'aria-label': 'Select departments',
+ *       })}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The returned SelectList is configured with `selectionMode="multiple"` by default
+ * - Selected items are automatically sorted to the top of the list using `sortSelectedFirst`
+ * - The escape key behavior is set to `"none"` to prevent closing the filter popover accidentally
+ * - A maximum height of 300px is applied with scrolling enabled for long lists
+ * - Both flat lists (FilterItem[]) and grouped lists (FilterItemGroup[]) are supported
+ */
+export declare function selectListFilter<TFilterType extends Selection = Selection, TItemType extends FilterItem | FilterItemGroup = FilterItem | FilterItemGroup>(items: Iterable<TItemType>, props: Omit<SelectListProps<TItemType>, 'items' | 'value' | 'onChange' | 'children'>): (value: TFilterType, onChange: FilterProps<TFilterType>["onChange"]) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Render the label of a filter that uses the default SelectList component.
+ * This function will extract all the labels of all the selected items, and
+ * create a comma-separated string from them.
+ * @param items the array of items used in the select list
+ * @return A curried function that flattens items into a comma-separated string
+ * @example
+ * ```tsx
+ * import { Filter, selectListFilter, selectListLabel } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * // Simple flat list
+ * const statusItems = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ *
+ * function StatusFilter() {
+ *   const [value, setValue] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Status"
+ *       value={value}
+ *       onChange={setValue}
+ *       renderControl={selectListFilter(statusItems, {})}
+ *       renderLabel={selectListLabel(items)}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Both flat lists (FilterItem[]) and grouped lists (FilterItemGroup[]) are supported
+ */
+export declare function selectListLabel(items: Array<FilterItem | FilterItemGroup>): (value: Selection) => string;

package/dist/esm/components/filter/Filter.controls.js

@@ -0,0 +1,45 @@
+import { jsx as c } from "react/jsx-runtime";
+import { SelectListOptGroup as u } from "../select-list/parts/SelectListOptGroup.js";
+import { SelectListOption as a } from "../select-list/parts/SelectListOption.js";
+import { SelectList as p } from "../select-list/SelectList.js";
+function s(l) {
+  return "children" in l && l.children.length > 0;
+}
+function m(l, n) {
+  const t = (r) => /* @__PURE__ */ c(u, { items: r.children, label: r.label, children: (i) => /* @__PURE__ */ c(a, { id: i.id, textValue: i.label, children: i.label }) }), e = (r) => /* @__PURE__ */ c(a, { id: r.id, textValue: r.label, children: r.label });
+  return (r, i) => /* @__PURE__ */ c(
+    p,
+    {
+      ...n,
+      items: l,
+      value: r,
+      selectionMode: "multiple",
+      onChange: (o) => {
+        i(o);
+      },
+      escapeKeyBehavior: "none",
+      sortSelectedFirst: !0,
+      className: "uy:scroll-pb-500",
+      children: (o) => s(o) ? t(o) : e(o)
+    }
+  );
+}
+function L(l) {
+  return (n) => {
+    if (n === "all")
+      return l.flatMap((e) => s(e) ? e.children : e).map((e) => e.label).join(", ");
+    const t = [];
+    for (const e of l) {
+      if (s(e)) {
+        t.push(...e.children.filter((r) => n.has(r.id)));
+        continue;
+      }
+      n.has(e.id) && t.push(e);
+    }
+    return t.map((e) => e.label).join(", ");
+  };
+}
+export {
+  m as selectListFilter,
+  L as selectListLabel
+};