@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/dialog/Dialog.js

@@ -1,72 +1,110 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Children as i, isValidElement as t } from "react";
-import { uyTv as s } from "@payfit/unity-themes";
-import { useId as g } from "react-aria";
-import { ModalOverlay as p, Modal as f, DialogContext as c, Dialog as b, DialogTrigger as x } from "react-aria-components";
-import { DialogTrigger as E } from "react-aria-components";
-import { DialogActions as D } from "./parts/DialogActions.js";
-import { DialogButton as v } from "./parts/DialogActions/DialogButton.js";
-const w = s({
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { Children as l, isValidElement as i } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { useId as w } from "react-aria";
+import { ModalOverlay as x, Modal as v, DialogContext as h, Dialog as b, DialogTrigger as D } from "react-aria-components";
+import { DialogTrigger as H } from "react-aria-components";
+import { useIntl as z } from "react-intl";
+import { CircularIconButton as I } from "../icon-button/CircularIconButton.js";
+import { DialogActions as N } from "./parts/DialogActions.js";
+import { DialogButton as C } from "./parts/DialogActions/DialogButton.js";
+const T = f({
   slots: {
     overlay: [
+      "uy:@container",
       "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
-      "uy:flex uy:min-h-full uy:items-center uy:justify-center uy:text-center",
-      "uy:backdrop-blur-sm uy:bg-utility-backdrop"
+      "uy:min-h-full",
+      "uy:flex uy:items-end uy:md:items-center uy:md:justify-center uy:md:text-center",
+      "uy:bg-utility-backdrop",
+      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
     ],
     wrapper: [
-      "uy:w-full uy:md:max-w-[640px]",
-      "uy:m-400 uy:md:m-0",
-      "uy:overflow-hidden uy:rounded-200 uy:bg-white uy:p-300 uy:md:p-400",
+      "uy:w-full uy:max-h-[95dvh] uy:md:max-h-[82dvh] uy:relative uy:isolate",
+      "uy:m-0",
+      "uy:rounded-t-300 uy:md:rounded-200",
+      "uy:overflow-hidden uy:bg-white uy:p-300 uy:pt-400 uy:md:p-400",
       "uy:text-left uy:align-middle uy:shadow-floating",
-      "uy:bg-surface-neutral"
+      "uy:bg-surface-neutral",
+      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out",
+      "uy:md:[animation-delay:100ms] uy:md:data-[entering]:animate-zoom-in uy:md:data-[exiting]:animate-zoom-out"
     ],
-    content: [
-      "uy:outline-none uy:relative uy:flex uy:flex-col uy:gap-300 uy:md:gap-400"
-    ]
+    content: ["uy:group/dialog", "uy:outline-none uy:relative"],
+    dismissIcon: ["uy:absolute uy:right-200 uy:top-200 uy:z-20"]
+  },
+  variants: {
+    size: {
+      sm: {
+        wrapper: "uy:md:w-4/12 uy:md:max-w-62.5"
+      },
+      md: {
+        wrapper: "uy:md:w-5/12 uy:md:max-w-80"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
   }
-}), h = (e) => {
-  const a = i.toArray(e).find(
-    (r) => t(r) && r.type === D
+}), j = (e) => {
+  const t = l.toArray(e).find(
+    (a) => i(a) && a.type === N
   );
-  return t(a) ? i.toArray(a.props.children).some(
-    (r) => t(
-      r
-    ) && r.type === v && r.props.variant === "danger"
+  return i(t) ? l.toArray(t.props.children).some(
+    (a) => i(
+      a
+    ) && a.type === C && a.props.variant === "danger"
   ) : !1;
 };
-function N({
+function B({
   children: e,
-  isOpen: a,
-  onOpenChange: r,
-  isDismissable: u = !0,
-  ...y
+  isOpen: t,
+  onOpenChange: a,
+  isDismissable: r = !0,
+  size: n = "md",
+  ...d
 }) {
-  const l = g(), { overlay: n, wrapper: d, content: m } = w();
+  const m = z(), u = w(), { overlay: y, wrapper: s, content: g, dismissIcon: p } = T({ size: n });
   return /* @__PURE__ */ o(
-    p,
+    x,
     {
-      isDismissable: u,
-      isOpen: a,
-      onOpenChange: r,
-      className: n(),
-      children: /* @__PURE__ */ o(f, { className: d(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(c.Provider, { value: { "aria-describedby": l }, children: /* @__PURE__ */ o(
-        b,
-        {
-          role: h(e) ? "alertdialog" : "dialog",
-          "aria-modal": "true",
-          className: m(),
-          "aria-label": y["aria-label"],
-          "aria-describedby": l,
-          children: e
-        }
-      ) }) })
+      isDismissable: r,
+      isOpen: t,
+      onOpenChange: a,
+      className: y(),
+      children: /* @__PURE__ */ c(v, { className: s(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: [
+        r && /* @__PURE__ */ o(
+          I,
+          {
+            icon: "CloseOutlined",
+            color: "content.neutral.low",
+            title: m.formatMessage({
+              id: "unity:component:common:close:label"
+            }),
+            className: p(),
+            slot: "close",
+            size: "large"
+          }
+        ),
+        /* @__PURE__ */ o(h.Provider, { value: { "aria-describedby": u }, children: /* @__PURE__ */ o(
+          b,
+          {
+            role: j(e) ? "alertdialog" : "dialog",
+            "aria-modal": "true",
+            className: g(),
+            "aria-label": d["aria-label"],
+            "aria-describedby": u,
+            "data-unity-slot": "dialog",
+            "data-unity-size": n,
+            children: e
+          }
+        ) })
+      ] })
     }
   );
 }
-N.displayName = "Dialog";
-x.displayName = "DialogTrigger";
+B.displayName = "Dialog";
+D.displayName = "DialogTrigger";
 export {
-  N as Dialog,
-  E as DialogTrigger,
-  w as dialog
+  B as Dialog,
+  H as DialogTrigger,
+  T as dialog
 };

package/dist/esm/components/dialog/parts/DialogActions.js

@@ -1,13 +1,13 @@
-import { jsx as a } from "react/jsx-runtime";
-const s = ({ children: t }) => /* @__PURE__ */ a(
+import { jsx as t } from "react/jsx-runtime";
+const a = ({ children: e }) => /* @__PURE__ */ t(
   "div",
   {
-    className: "uy:flex uy:justify-end uy:items-start uy:gap-100 uy:self-stretch",
+    className: "uy:flex uy:flex-col-reverse uy:md:flex-row uy:md:justify-end uy:md:items-start uy:gap-150 uy:md:gap-100 uy:self-stretch uy:mt-500",
     "data-dd-privacy": "allow",
-    children: t
+    children: e
   }
 );
-s.displayName = "DialogActions";
+a.displayName = "DialogActions";
 export {
-  s as DialogActions
+  a as DialogActions
 };

package/dist/esm/components/dialog/parts/DialogTitle.js

@@ -1,7 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { Heading as o } from "react-aria-components";
-const i = ({ children: a }) => /* @__PURE__ */ t(o, { slot: "title", className: "uy:typography-h2", "data-dd-privacy": "allow", children: a });
-i.displayName = "DialogTitle";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Heading as i } from "react-aria-components";
+const l = a({
+  base: ["uy:typography-h2 uy:md:typography-h3", "uy:mb-200"]
+}), r = ({ children: o }) => /* @__PURE__ */ t(i, { slot: "title", className: l(), "data-dd-privacy": "allow", children: o });
+r.displayName = "DialogTitle";
 export {
-  i as DialogTitle
+  r as DialogTitle
 };

package/dist/esm/components/dialog/test-utils.d.ts

@@ -0,0 +1,28 @@
+import { PlayCtx } from '../../types/testing.js';
+/**
+ * Factory function returning a set of helpers to test Unity Dialog components.
+ * It wires Storybook's `Play` context with convenient utilities to query,
+ * assert, and interact with dialogs rendered on the canvas.
+ * @param context The Storybook play context used to group steps and actions.
+ * @returns An object of helpers: `findDialog`, `closeDialog`, `assertDialogIsClosed`, `assertElementExistsInDialog`, and `triggerPrimaryAction`.
+ */
+export declare const getTestingUtilsDialog: (context: PlayCtx) => {
+    findDialog: ({ title }: {
+        title: string;
+    }) => Promise<HTMLElement>;
+    closeDialog: ({ title, closeButtonLabel, }: {
+        title: string;
+        closeButtonLabel: string;
+    }) => Promise<void>;
+    assertDialogIsClosed: (dialog: HTMLElement) => Promise<void>;
+    assertElementExistsInDialog: ({ title, content, primaryActionLabel, secondaryActionLabel, }: {
+        title: string;
+        content?: string;
+        primaryActionLabel?: string;
+        secondaryActionLabel?: string;
+    }) => Promise<void>;
+    triggerPrimaryAction: ({ title, primaryActionLabel, }: {
+        title: string;
+        primaryActionLabel: string;
+    }) => Promise<void>;
+};

package/dist/esm/components/dialog/test-utils.js

@@ -0,0 +1,78 @@
+import { userEvent as c, within as o, expect as n, waitFor as r, screen as w } from "storybook/test";
+const f = (i) => {
+  const s = async ({ title: a }) => await r(() => {
+    const t = w.queryByRole("dialog", { name: a }) ?? w.queryByRole("alertdialog", { name: a });
+    if (!t)
+      throw new Error(`Dialog with title: "${a}" not found in the page`);
+    return t;
+  }), y = async (a, t) => {
+    await c.click(
+      o(a).getByRole("button", {
+        name: t
+      }),
+      { delay: 100 }
+    );
+  };
+  return {
+    findDialog: s,
+    closeDialog: async ({
+      title: a,
+      closeButtonLabel: t
+    }) => {
+      await i.step("Close dialog", async () => {
+        const e = await s({ title: a });
+        await y(e, t);
+      });
+    },
+    assertDialogIsClosed: async (a) => {
+      await r(
+        async () => {
+          await n(a).not.toBeInTheDocument();
+        },
+        { timeout: 1e3 }
+      );
+    },
+    assertElementExistsInDialog: async ({
+      title: a,
+      content: t,
+      primaryActionLabel: e,
+      secondaryActionLabel: g
+    }) => {
+      const l = await s({ title: a });
+      t && await i.step(`Check if "${t}" is in the dialog`, async () => {
+        await n(o(l).getByText(t)).toBeInTheDocument();
+      }), e && await i.step(
+        `Check if "${e}" is in the dialog`,
+        async () => {
+          await n(
+            o(l).getByRole("button", { name: e })
+          ).toBeInTheDocument();
+        }
+      ), g && await i.step(
+        `Check if "${g}" is in the dialog`,
+        async () => {
+          await n(
+            o(l).getByRole("button", { name: g })
+          ).toBeInTheDocument();
+        }
+      );
+    },
+    triggerPrimaryAction: async ({
+      title: a,
+      primaryActionLabel: t
+    }) => {
+      const e = await s({ title: a });
+      await i.step(
+        `Trigger the primary action "${t}" of the dialog`,
+        async () => {
+          await c.click(
+            o(e).getByRole("button", { name: t })
+          );
+        }
+      );
+    }
+  };
+};
+export {
+  f as getTestingUtilsDialog
+};

package/dist/esm/components/error-state/ErrorState.js

@@ -77,7 +77,7 @@ const ee = W({
   ] });
 }, te = (t, n) => {
   const i = t.backButtonLabel ?? n?.backButtonLabel;
-  return /* @__PURE__ */ e("div", { className: "uy:mt-200", children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: "uy:mt-200 uy:@section:block uy:hidden", children: /* @__PURE__ */ e(
     h,
     {
       onClick: () => {
@@ -114,7 +114,7 @@ const ee = W({
     h2: P,
     h3: z,
     h4: Q
-  } = ee(), l = V(), q = _(l), y = K(null), { level: p } = X({ ref: y }), A = O(
+  } = ee(), l = V(), q = _(l), y = K(null), { level: d } = X({ ref: y }), A = O(
     (c) => {
       y.current = c, n && (typeof n == "function" ? n(c) : n.current = c);
     },
@@ -122,19 +122,19 @@ const ee = W({
   );
   let a = m === "404" ? "404" : "unknown";
   m === "generic" && C && (a = "known");
-  const o = q.get(a), d = b ?? o?.illustration, f = i ?? o?.icon, F = g ?? o?.buttonLabel, s = x ?? o?.mainTitle, G = k ?? o?.mainDescription, H = w ?? o?.mainDescriptionComponent;
+  const o = q.get(a), p = b ?? o?.illustration, f = i ?? o?.icon, F = g ?? o?.buttonLabel, s = x ?? o?.mainTitle, G = k ?? o?.mainDescription, H = w ?? o?.mainDescriptionComponent;
   return /* @__PURE__ */ e(
     "div",
     {
       role: N,
       className: E(),
       ref: A,
-      "data-container-level": p,
+      "data-container-level": d,
       children: /* @__PURE__ */ e("div", { className: B(), children: /* @__PURE__ */ u("div", { className: D(), children: [
-        d && /* @__PURE__ */ e(
+        p && /* @__PURE__ */ e(
           U,
           {
-            src: d,
+            src: p,
             variant: "picture",
             alt: l.formatMessage({
               id: "unity:component:error-state:common:illustration:alt",
@@ -176,7 +176,7 @@ const ee = W({
         /* @__PURE__ */ e(
           h,
           {
-            variant: p === "component" ? "ghost" : "primary",
+            variant: d === "component" ? "ghost" : "primary",
             onPress: v,
             children: F
           }

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

@@ -0,0 +1,192 @@
+import { Selection } from 'react-aria-components';
+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, t) {
+  const n = (r) => /* @__PURE__ */ c(u, { items: r.children, label: r.label, children: (o) => /* @__PURE__ */ c(a, { id: o.id, textValue: o.label, children: o.label }) }), e = (r) => /* @__PURE__ */ c(a, { id: r.id, textValue: r.label, children: r.label });
+  return (r, o) => /* @__PURE__ */ c(
+    p,
+    {
+      ...t,
+      items: l,
+      value: r,
+      selectionMode: "multiple",
+      onChange: (i) => {
+        o(i);
+      },
+      escapeKeyBehavior: "none",
+      sortSelectedFirst: !0,
+      className: "uy:overflow-y-auto uy:scroll-pb-500",
+      children: (i) => s(i) ? n(i) : e(i)
+    }
+  );
+}
+function L(l) {
+  return (t) => {
+    if (t === "all")
+      return l.flatMap((e) => s(e) ? e.children : e).map((e) => e.label).join(", ");
+    const n = [];
+    for (const e of l) {
+      if (s(e)) {
+        n.push(...e.children.filter((r) => t.has(r.id)));
+        continue;
+      }
+      t.has(e.id) && n.push(e);
+    }
+    return n.map((e) => e.label).join(", ");
+  };
+}
+export {
+  m as selectListFilter,
+  L as selectListLabel
+};