@payfit/unity-components 2.1.4 → 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/dist/esm/components/inline-field-group/InlineFieldGroup.context.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from 'react';
+export type InlineFieldGroupMode = 'read' | 'edit';
+export interface InlineFieldGroupContextValue {
+    /** Current mode: read or edit */
+    mode: InlineFieldGroupMode;
+    /** Switch to edit mode */
+    enterEditMode: () => void;
+    /** Exit edit mode (cancel or save) */
+    exitEditMode: () => void;
+    /** Unique ID for the field group (for aria attributes) */
+    groupId: string;
+    /** ID for the header title (for aria-labelledby) */
+    headerId: string;
+    /** ID for the edit view container (for aria-controls) */
+    editViewId: string;
+    /** Whether the component is in a loading state */
+    isLoading?: boolean;
+    /** Ref to the edit button for focus management */
+    editButtonRef?: RefObject<HTMLButtonElement>;
+    /** Ref to the edit view container for focus management */
+    editViewRef?: RefObject<HTMLFieldSetElement>;
+}
+export declare const InlineFieldGroupContext: import('react').Context<InlineFieldGroupContextValue | undefined>;

package/dist/esm/components/inline-field-group/InlineFieldGroup.context.js

@@ -0,0 +1,6 @@
+import { createContext as e } from "react";
+const o = e(void 0);
+o.displayName = "InlineFieldGroupContext";
+export {
+  o as InlineFieldGroupContext
+};

package/dist/esm/components/inline-field-group/InlineFieldGroup.d.ts

@@ -0,0 +1,119 @@
+import { default as React, PropsWithChildren } from 'react';
+import { InlineFieldGroupMode } from './InlineFieldGroup.context.js';
+/**
+ * Imperative handle for InlineFieldGroup component.
+ * Provides methods for programmatic control when needed for advanced use cases.
+ */
+export interface InlineFieldGroupHandle {
+    /**
+     * Focuses the first invalid field in the edit view.
+     * Useful for custom validation error handling.
+     */
+    focusFirstInvalidField: () => void;
+    /**
+     * Exits edit mode programmatically.
+     */
+    exitEditMode: () => void;
+    /**
+     * Enters edit mode programmatically.
+     */
+    enterEditMode: () => void;
+}
+export interface InlineFieldGroupProps extends PropsWithChildren {
+    /**
+     * Controlled mode value. When provided, the component operates in controlled mode.
+     */
+    mode?: InlineFieldGroupMode;
+    /**
+     * Default mode value for uncontrolled mode.
+     * @default 'read'
+     */
+    defaultMode?: InlineFieldGroupMode;
+    /**
+     * Callback fired when mode changes.
+     */
+    onModeChange?: (mode: InlineFieldGroupMode) => void;
+    /**
+     * Callback to intercept and potentially prevent mode changes.
+     * Return `false` to prevent the mode transition.
+     * Return `true` or `undefined` to allow the transition.
+     */
+    shouldModeChange?: (fromMode: InlineFieldGroupMode, toMode: InlineFieldGroupMode) => boolean | undefined;
+    /**
+     * Whether the component is in a loading state (e.g., during async save).
+     */
+    isLoading?: boolean;
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+    /**
+     * Optional aria-label for the form element.
+     * If not provided, aria-labelledby will reference the header title.
+     */
+    'aria-label'?: string;
+    /**
+     * Success message to announce when save succeeds.
+     * If not provided, no success announcement is made.
+     */
+    successMessage?: string;
+    /**
+     * Error message to announce when save or validation fails.
+     * If not provided, generic validation errors are announced.
+     */
+    errorMessage?: string;
+}
+/**
+ * InlineFieldGroup enables group-level inline editing with read/edit mode switching.
+ * It integrates with TanStack Form for validation and state management, providing
+ * a complete pattern for displaying data in read mode and editing it in edit mode.
+ * The component handles the full edit lifecycle: mode transitions, form submission,
+ * validation error handling, and accessibility announcements.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function ContactForm() {
+ *   const form = useTanstackUnityForm({
+ *     defaultValues: { email: 'user@example.com', phone: '+1234567890' },
+ *     onSubmit: async ({ value }) => {
+ *       await saveContact(value)
+ *     }
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.InlineFieldGroup successMessage="Contact saved!">
+ *         <form.InlineFieldGroupHeader title="Contact Information" />
+ *         <form.InlineFieldGroupReadView>
+ *           <DefinitionList>
+ *             <DefinitionItem term="Email" description={form.state.values.email} />
+ *           </DefinitionList>
+ *         </form.InlineFieldGroupReadView>
+ *         <form.InlineFieldGroupEditView legend="Edit contact">
+ *           <form.AppField name="email">
+ *             {field => <field.TextField label="Email" />}
+ *           </form.AppField>
+ *         </form.InlineFieldGroupEditView>
+ *       </form.InlineFieldGroup>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component automatically exits edit mode on successful form submission
+ * - Press Escape to cancel editing and reset form values
+ * - Focus moves to the first form field when entering edit mode
+ * - Focus returns to the edit button when exiting edit mode
+ * - Focus is retained under a scope when in edit mode, to prevent users for leaving unfinished changes
+ * - Use `shouldModeChange` to intercept and conditionally prevent mode transitions
+ * - Use `successMessage` and `errorMessage` for accessible announcements via live regions
+ * @see {@link InlineFieldGroupProps} for all available props
+ * @see {@link InlineFieldGroupHandle} for imperative handle methods
+ * @see {@link InlineFieldGroupHeader} for the header component with action buttons
+ * @see {@link InlineFieldGroupReadView} for read mode content
+ * @see {@link InlineFieldGroupEditView} for edit mode form fields
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field-group GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
+ */
+export declare const InlineFieldGroup: React.ForwardRefExoticComponent<InlineFieldGroupProps & React.RefAttributes<InlineFieldGroupHandle>>;

package/dist/esm/components/inline-field-group/InlineFieldGroup.js

@@ -0,0 +1,185 @@
+import { jsx as x, jsxs as z } from "react/jsx-runtime";
+import { forwardRef as J, useRef as l, useState as V, useEffect as r, useCallback as P, useImperativeHandle as Q, useMemo as W } from "react";
+import { uyTv as X } from "@payfit/unity-themes";
+import { useStore as Y } from "@tanstack/react-form";
+import { useId as Z, useKeyboard as L, FocusScope as ee } from "react-aria";
+import { useIntl as te } from "react-intl";
+import { useFormContext as ie } from "../../hooks/tanstack-form-context.js";
+import { useInlineFieldGroupMode as re } from "./hooks/useInlineFieldGroupMode.js";
+import { InlineFieldGroupContext as oe } from "./InlineFieldGroup.context.js";
+const se = X({
+  slots: {
+    form: "uy:flex uy:flex-col uy:gap-300"
+  }
+}), D = (a) => {
+  if (!a.current) return;
+  const c = a.current.querySelector(
+    '[aria-invalid="true"]'
+  );
+  c && c.focus();
+}, k = 5e3, ne = J(
+  ({
+    children: a,
+    mode: c,
+    defaultMode: j,
+    onModeChange: q,
+    shouldModeChange: m,
+    isLoading: N,
+    className: K,
+    "aria-label": _,
+    successMessage: g,
+    errorMessage: d
+  }, O) => {
+    const s = Z(), A = `unity-InlineFieldGroup-${s}__header`, C = `unity-InlineFieldGroup-${s}__edit-view`, E = l(null), n = l(null), M = l(!0), [G, R] = V(""), [h, f] = V(""), p = te(), u = ie(), { mode: t, enterEditMode: b, exitEditMode: o } = re({
+      mode: c,
+      defaultMode: j,
+      onModeChange: q,
+      shouldModeChange: m
+    }), { isSubmitting: i, isValid: v, isSubmitSuccessful: S, submissionAttempts: y } = Y(u.store, (e) => ({
+      isSubmitting: e.isSubmitting,
+      isValid: e.isValid,
+      isSubmitSuccessful: e.isSubmitSuccessful,
+      submissionAttempts: e.submissionAttempts
+    })), F = l(i), T = l(y);
+    r(() => {
+      i && !F.current && (R(""), f(""));
+    }, [i]), r(() => {
+      if (y > T.current && !v) {
+        const I = d ?? p.formatMessage({
+          id: "unity:component:inline-field-group:validation-error",
+          defaultMessage: "Please fix the errors before saving."
+        });
+        f(I), D(n);
+      }
+    }, [y, v, d, p]), r(() => {
+      F.current && !i && S && (g && R(g), o());
+    }, [i, S, g, o]), r(() => {
+      if (F.current && !i && !S && v) {
+        const I = d ?? p.formatMessage({
+          id: "unity:component:inline-field-group:save-error",
+          defaultMessage: "An error occurred while saving. Please try again."
+        });
+        f(I);
+      }
+    }, [i, S, v, d, p]), r(() => {
+      F.current = i, T.current = y;
+    });
+    const $ = P(
+      (e) => {
+        e.preventDefault(), e.stopPropagation(), u.handleSubmit();
+      },
+      [u]
+    ), w = P(() => {
+      m !== void 0 && !m(t, "read") || (u.reset(), o());
+    }, [u, t, o, m]);
+    Q(
+      O,
+      () => ({
+        focusFirstInvalidField: () => {
+          D(n);
+        },
+        exitEditMode: o,
+        enterEditMode: b
+      }),
+      [o, b]
+    ), r(() => {
+      if (M.current) {
+        M.current = !1;
+        return;
+      }
+      if (t === "edit") {
+        if (n.current) {
+          const e = n.current.querySelectorAll(
+            'input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          e.length > 0 && e[0].focus();
+        }
+      } else
+        E.current && E.current.focus();
+    }, [t]);
+    const { keyboardProps: B } = L({
+      onKeyDown: (e) => {
+        e.key === "Escape" && t === "edit" && (e.preventDefault(), w());
+      }
+    });
+    r(() => {
+      if (G) {
+        const e = setTimeout(() => {
+          R("");
+        }, k);
+        return () => {
+          clearTimeout(e);
+        };
+      }
+    }, [G]), r(() => {
+      if (h) {
+        const e = setTimeout(() => {
+          f("");
+        }, k);
+        return () => {
+          clearTimeout(e);
+        };
+      }
+    }, [h]);
+    const H = W(
+      () => ({
+        mode: t,
+        enterEditMode: b,
+        exitEditMode: w,
+        groupId: s,
+        headerId: A,
+        editViewId: C,
+        isLoading: N,
+        editButtonRef: E,
+        editViewRef: n
+      }),
+      [
+        t,
+        b,
+        w,
+        s,
+        A,
+        C,
+        N
+      ]
+    ), { form: U } = se();
+    return /* @__PURE__ */ x(oe.Provider, { value: H, children: /* @__PURE__ */ x(
+      "form",
+      {
+        ...B,
+        id: s,
+        className: U({ className: K }),
+        onSubmit: $,
+        "aria-label": _,
+        "aria-labelledby": _ ? void 0 : A,
+        children: /* @__PURE__ */ z(ee, { contain: t === "edit", children: [
+          a,
+          /* @__PURE__ */ x(
+            "div",
+            {
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "uy:sr-only",
+              children: G
+            }
+          ),
+          /* @__PURE__ */ x(
+            "div",
+            {
+              role: "alert",
+              "aria-live": "assertive",
+              "aria-atomic": "true",
+              className: "uy:sr-only",
+              children: h
+            }
+          )
+        ] })
+      }
+    ) });
+  }
+);
+ne.displayName = "InlineFieldGroup";
+export {
+  ne as InlineFieldGroup
+};

package/dist/esm/components/inline-field-group/hooks/useInlineFieldGroupMode.d.ts

@@ -0,0 +1,46 @@
+import { InlineFieldGroupMode } from '../InlineFieldGroup.context.js';
+export interface UseInlineFieldGroupModeProps {
+    /**
+     * Controlled mode value. When provided, the component operates in controlled mode.
+     */
+    mode?: InlineFieldGroupMode;
+    /**
+     * Default mode value for uncontrolled mode.
+     * @default 'read'
+     */
+    defaultMode?: InlineFieldGroupMode;
+    /**
+     * Callback fired when mode changes.
+     */
+    onModeChange?: (mode: InlineFieldGroupMode) => void;
+    /**
+     * Callback to intercept and potentially prevent mode changes.
+     * Return `false` to prevent the mode transition.
+     * Return `true` or `undefined` to allow the transition.
+     */
+    shouldModeChange?: (fromMode: InlineFieldGroupMode, toMode: InlineFieldGroupMode) => boolean | undefined;
+}
+export interface UseInlineFieldGroupModeReturn {
+    /** Current mode value */
+    mode: InlineFieldGroupMode;
+    /** Switch to edit mode */
+    enterEditMode: () => void;
+    /** Exit edit mode (return to read mode) */
+    exitEditMode: () => void;
+    /** Check if component is in controlled mode */
+    isControlled: boolean;
+}
+/**
+ * Hook to manage the mode state (read/edit) for InlineFieldGroup.
+ * Supports both controlled and uncontrolled modes, following the pattern
+ * established by NavGroup.tsx
+ * @param props - Configuration for the mode hook
+ * @param props.mode - Controlled mode value. When provided, the component operates in controlled mode.
+ * @param props.defaultMode - Default mode value for uncontrolled mode.
+ * @param props.onModeChange - Callback fired when mode changes.
+ * @param props.shouldModeChange - Callback to intercept and potentially prevent mode changes.
+ * Return `false` to prevent the mode transition.
+ * Return `true` or `undefined` to allow the transition.
+ * @returns Mode state and handlers
+ */
+export declare function useInlineFieldGroupMode({ mode: controlledMode, defaultMode, onModeChange, shouldModeChange, }: UseInlineFieldGroupModeProps): UseInlineFieldGroupModeReturn;

package/dist/esm/components/inline-field-group/hooks/useInlineFieldGroupMode.js

@@ -0,0 +1,27 @@
+import { useState as m, useCallback as i } from "react";
+function x({
+  mode: d,
+  defaultMode: c = "read",
+  onModeChange: s,
+  shouldModeChange: o
+}) {
+  const [l, u] = m(c), t = d !== void 0, n = t ? d : l, e = i(
+    (r) => {
+      o && o(n, r) === !1 || (t || u(r), s?.(r));
+    },
+    [t, n, s, o]
+  ), a = i(() => {
+    e("edit");
+  }, [e]), f = i(() => {
+    e("read");
+  }, [e]);
+  return {
+    mode: n,
+    enterEditMode: a,
+    exitEditMode: f,
+    isControlled: t
+  };
+}
+export {
+  x as useInlineFieldGroupMode
+};