@payfit/unity-components 2.2.0 → 2.2.1

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

@@ -1,4 +1,4 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { jsx as o, jsxs as p } 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";
@@ -28,7 +28,7 @@ const T = f({
       "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:group/dialog", "uy:outline-none uy:relative"],
+    content: ["uy:group/dialog", "uy:outline-none"],
     dismissIcon: ["uy:absolute uy:right-200 uy:top-200 uy:z-20"]
   },
   variants: {
@@ -62,7 +62,7 @@ function B({
   size: n = "md",
   ...d
 }) {
-  const m = z(), u = w(), { overlay: y, wrapper: s, content: g, dismissIcon: p } = T({ size: n });
+  const m = z(), u = w(), { overlay: y, wrapper: s, content: g, dismissIcon: c } = T({ size: n });
   return /* @__PURE__ */ o(
     x,
     {
@@ -70,34 +70,35 @@ function B({
       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
-          }
-        ) })
-      ] })
+      children: /* @__PURE__ */ o(v, { className: s(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(h.Provider, { value: { "aria-describedby": u }, children: /* @__PURE__ */ p(
+        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: [
+            r && /* @__PURE__ */ o(
+              I,
+              {
+                icon: "CloseOutlined",
+                color: "content.neutral.low",
+                title: m.formatMessage({
+                  id: "unity:component:common:close:label"
+                }),
+                className: c(),
+                slot: "close",
+                size: "large",
+                asElement: "button"
+              }
+            ),
+            e
+          ]
+        }
+      ) }) })
     }
   );
 }

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

@@ -1,12 +1,14 @@
+import { IntlShape } from 'react-intl';
 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.
+ * @param globalIntl The global intl instance to use for localization.
  * @returns An object of helpers: `findDialog`, `closeDialog`, `assertDialogIsClosed`, `assertElementExistsInDialog`, and `triggerPrimaryAction`.
  */
-export declare const getTestingUtilsDialog: (context: PlayCtx) => {
+export declare const getTestingUtilsDialog: (context: PlayCtx, globalIntl: IntlShape) => {
     findDialog: ({ title }: {
         title: string;
     }) => Promise<HTMLElement>;
@@ -14,6 +16,10 @@ export declare const getTestingUtilsDialog: (context: PlayCtx) => {
         title: string;
         closeButtonLabel: string;
     }) => Promise<void>;
+    closeDialogWithDismissButton: ({ title, dismissButtonLabel, }: {
+        title: string;
+        dismissButtonLabel?: string;
+    }) => Promise<void>;
     assertDialogIsClosed: (dialog: HTMLElement) => Promise<void>;
     assertElementExistsInDialog: ({ title, content, primaryActionLabel, secondaryActionLabel, }: {
         title: string;

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

@@ -1,31 +1,42 @@
-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 });
+import { userEvent as r, within as s, expect as n, waitFor as w, screen as y } from "storybook/test";
+const p = (e, m) => {
+  const o = async ({ title: a }) => await w(() => {
+    const t = y.queryByRole("dialog", { name: a }) ?? y.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", {
+  }), c = async (a, t) => {
+    await r.click(
+      s(a).getByRole("button", {
         name: t
       }),
       { delay: 100 }
     );
   };
   return {
-    findDialog: s,
+    findDialog: o,
     closeDialog: async ({
       title: a,
       closeButtonLabel: t
     }) => {
-      await i.step("Close dialog", async () => {
-        const e = await s({ title: a });
-        await y(e, t);
+      await e.step("Close dialog", async () => {
+        const i = await o({ title: a });
+        await c(i, t);
+      });
+    },
+    closeDialogWithDismissButton: async ({
+      title: a,
+      dismissButtonLabel: t = m.formatMessage({
+        id: "unity:component:common:close:label"
+      })
+    }) => {
+      await e.step("Close dialog", async () => {
+        const i = await o({ title: a });
+        await c(i, t);
       });
     },
     assertDialogIsClosed: async (a) => {
-      await r(
+      await w(
         async () => {
           await n(a).not.toBeInTheDocument();
         },
@@ -35,24 +46,24 @@ const f = (i) => {
     assertElementExistsInDialog: async ({
       title: a,
       content: t,
-      primaryActionLabel: e,
-      secondaryActionLabel: g
+      primaryActionLabel: i,
+      secondaryActionLabel: l
     }) => {
-      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`,
+      const g = await o({ title: a });
+      t && await e.step(`Check if "${t}" is in the dialog`, async () => {
+        await n(s(g).getByText(t)).toBeInTheDocument();
+      }), i && await e.step(
+        `Check if "${i}" is in the dialog`,
         async () => {
           await n(
-            o(l).getByRole("button", { name: e })
+            s(g).getByRole("button", { name: i })
           ).toBeInTheDocument();
         }
-      ), g && await i.step(
-        `Check if "${g}" is in the dialog`,
+      ), l && await e.step(
+        `Check if "${l}" is in the dialog`,
         async () => {
           await n(
-            o(l).getByRole("button", { name: g })
+            s(g).getByRole("button", { name: l })
           ).toBeInTheDocument();
         }
       );
@@ -61,12 +72,12 @@ const f = (i) => {
       title: a,
       primaryActionLabel: t
     }) => {
-      const e = await s({ title: a });
-      await i.step(
+      const i = await o({ title: a });
+      await e.step(
         `Trigger the primary action "${t}" of the dialog`,
         async () => {
-          await c.click(
-            o(e).getByRole("button", { name: t })
+          await r.click(
+            s(i).getByRole("button", { name: t })
           );
         }
       );
@@ -74,5 +85,5 @@ const f = (i) => {
   };
 };
 export {
-  f as getTestingUtilsDialog
+  p as getTestingUtilsDialog
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.10.0",
-    "@payfit/unity-illustrations": "2.2.0",
+    "@payfit/unity-illustrations": "2.2.1",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.25.6",
@@ -70,8 +70,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.2.0",
-    "@payfit/unity-themes": "2.2.0",
+    "@payfit/unity-icons": "2.2.1",
+    "@payfit/unity-themes": "2.2.1",
     "@storybook/react-vite": "^10.2.0",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -90,9 +90,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.2.0",
-    "@payfit/unity-illustrations": "2.2.0",
-    "@payfit/unity-themes": "2.2.0",
+    "@payfit/unity-icons": "2.2.1",
+    "@payfit/unity-illustrations": "2.2.1",
+    "@payfit/unity-themes": "2.2.1",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.2.0",
     "@storybook/addon-docs": "10.2.0",