@payfit/unity-components 2.5.6 → 2.6.0

package/dist/esm/components/empty-state/presets/EmptyStateUseDesktop.js

@@ -0,0 +1,26 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { useIntl as p } from "react-intl";
+import { EmptyState as a } from "../EmptyState.js";
+import { EmptyStateContent as l } from "../parts/EmptyStateContent.js";
+import { EmptyStateIcon as f } from "../parts/EmptyStateIcon.js";
+const d = n(({ title: e, description: o, ...r }, s) => {
+  const m = p().formatMessage({
+    id: "unity:component:empty-state:use-desktop:title",
+    defaultMessage: "Best experienced on desktop"
+  });
+  return /* @__PURE__ */ i(a, { ref: s, ...r, children: [
+    /* @__PURE__ */ t(f, { icon: "DevicesOutlined", variant: "neutral" }),
+    /* @__PURE__ */ t(
+      l,
+      {
+        title: e || m,
+        description: o
+      }
+    )
+  ] });
+});
+d.displayName = "EmptyStateUseDesktop";
+export {
+  d as EmptyStateUseDesktop
+};

package/dist/esm/components/empty-state/presets/EmptyStateWaitingForData.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { EmptyState } from '../EmptyState.js';
+export interface EmptyStateWaitingForDataProps extends Omit<ComponentPropsWithoutRef<typeof EmptyState>, 'children'> {
+    /**
+     * Custom title text. If not provided, uses the default i18n message.
+     */
+    title?: string;
+    /**
+     * Description text providing context about the waiting state.
+     * Defaults to placeholder text if not provided.
+     */
+    description?: string;
+    /**
+     * Optional action elements (buttons, links) to display.
+     * Pass Button or Link components as children.
+     */
+    actions?: ReactNode;
+}
+/**
+ * EmptyStateWaitingForData is a preset for informing users that data will appear once available.
+ * It displays an info icon and provides an optional actions slot.
+ * @param {EmptyStateWaitingForDataProps} props - The component props
+ * @example
+ * ```tsx
+ * import { EmptyStateWaitingForData, Button } from '@payfit/unity-components'
+ *
+ * <EmptyStateWaitingForData
+ *   description="Your results will appear here once data is available."
+ *   actions={
+ *     <Button variant="ghost" onPress={() => console.log('Refresh')}>
+ *       Refresh
+ *     </Button>
+ *   }
+ * />
+ * ```
+ */
+declare const EmptyStateWaitingForData: import('react').ForwardRefExoticComponent<EmptyStateWaitingForDataProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateWaitingForData };

package/dist/esm/components/empty-state/presets/EmptyStateWaitingForData.js

@@ -0,0 +1,28 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useIntl as l } from "react-intl";
+import { EmptyState as s } from "../EmptyState.js";
+import { EmptyStateActions as f } from "../parts/EmptyStateActions.js";
+import { EmptyStateContent as y } from "../parts/EmptyStateContent.js";
+import { EmptyStateIcon as d } from "../parts/EmptyStateIcon.js";
+const c = p(({ title: o, description: a, actions: e, ...r }, i) => {
+  const m = l().formatMessage({
+    id: "unity:component:empty-state:waiting-for-data:title",
+    defaultMessage: "No available results yet"
+  });
+  return /* @__PURE__ */ n(s, { ref: i, ...r, children: [
+    /* @__PURE__ */ t(d, { icon: "InfoOutlined", variant: "neutral" }),
+    /* @__PURE__ */ t(
+      y,
+      {
+        title: o || m,
+        description: a
+      }
+    ),
+    e && /* @__PURE__ */ t(f, { children: e })
+  ] });
+});
+c.displayName = "EmptyStateWaitingForData";
+export {
+  c as EmptyStateWaitingForData
+};

package/dist/esm/components/inline-field/InlineField.js

@@ -10,23 +10,32 @@ const g = ({
   isLoading: o,
   shouldModeChange: p
 }) => {
-  const i = r(null), e = r(null), l = r(!0), { mode: t, enterEditMode: s, exitEditMode: d } = w({
+  const t = r(null), e = r(null), l = r(!0), { mode: i, enterEditMode: s, exitEditMode: d } = w({
     mode: a,
     defaultMode: F,
     onModeChange: x,
     shouldModeChange: p
   }), n = `inline-field-${b()}`, c = `${n}__edit-view`, I = E(
     () => ({
-      mode: t,
+      mode: i,
       enterEditMode: s,
       exitEditMode: d,
       fieldId: n,
       isLoading: o,
-      triggerRef: i,
+      triggerRef: t,
       editViewRef: e,
       editViewId: c
     }),
-    [t, s, d, n, o, c]
+    [
+      i,
+      s,
+      d,
+      n,
+      o,
+      t,
+      e,
+      c
+    ]
   ), u = M(() => {
     if (e.current) {
       const f = e.current.querySelectorAll(
@@ -40,8 +49,8 @@ const g = ({
       l.current = !1;
       return;
     }
-    t === "edit" ? u() : i.current && i.current.focus();
-  }, [t, u]), /* @__PURE__ */ R(V.Provider, { value: I, children: m });
+    i === "edit" ? u() : t.current && t.current.focus();
+  }, [i, u]), /* @__PURE__ */ R(V.Provider, { value: I, children: m });
 };
 g.displayName = "InlineField";
 export {

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

@@ -19,5 +19,17 @@ export interface InlineFieldGroupContextValue {
     editButtonRef?: RefObject<HTMLButtonElement>;
     /** Ref to the edit view container for focus management */
     editViewRef?: RefObject<HTMLFieldSetElement>;
+    /** Custom label for the edit button */
+    editLabel?: string;
+    /** Custom label for the save button */
+    saveLabel?: string;
+    /** Custom label for the cancel button */
+    cancelLabel?: string;
+    /** Callback fired when edit button is clicked */
+    onEditPress?: () => void;
+    /** Callback fired when save button is clicked */
+    onSavePress?: () => void;
+    /** Callback fired when cancel button is clicked */
+    onCancelPress?: () => void;
 }
 export declare const InlineFieldGroupContext: import('react').Context<InlineFieldGroupContextValue | undefined>;

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

@@ -52,6 +52,13 @@ export interface InlineFieldGroupProps extends PropsWithChildren {
      * If not provided, aria-labelledby will reference the header title.
      */
     'aria-label'?: string;
+    /**
+     * Indicates whether the component or element should track and respond to focus containment.
+     * When set to true, the focus is constrained within the component, preventing focus from
+     * moving outside its boundaries.
+     * @default false
+     */
+    containFocus?: boolean;
     /**
      * Success message to announce when save succeeds.
      * If not provided, no success announcement is made.
@@ -62,6 +69,38 @@ export interface InlineFieldGroupProps extends PropsWithChildren {
      * If not provided, generic validation errors are announced.
      */
     errorMessage?: string;
+    /**
+     * Custom label for the edit button.
+     * @default "Edit" (translated)
+     */
+    editLabel?: string;
+    /**
+     * Custom label for the save button.
+     * @default "Save" (translated)
+     */
+    saveLabel?: string;
+    /**
+     * Custom label for the cancel button.
+     * @default "Cancel" (translated)
+     */
+    cancelLabel?: string;
+    /**
+     * Optional callback fired when the edit button is clicked.
+     * This is called before entering edit mode and is useful for analytics or side effects.
+     */
+    onEditPress?: () => void;
+    /**
+     * Optional callback fired when the save button is clicked.
+     * This is called before form submission and is useful for analytics or side effects.
+     * Note: Form submission is handled via the form's onSubmit configuration.
+     */
+    onSavePress?: () => void;
+    /**
+     * Optional callback fired when the cancel button is clicked.
+     * This is called before canceling and is useful for analytics or side effects.
+     * The form will be reset and edit mode exited automatically.
+     */
+    onCancelPress?: () => void;
 }
 /**
  * InlineFieldGroup enables group-level inline editing with read/edit mode switching.

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

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

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export interface InlineFieldGroupActionsProps {
+    /**
+     * Layout orientation for the action buttons.
+     * - horizontal: buttons in a row (desktop/header)
+     * - vertical: buttons stacked (mobile/bottom)
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Additional custom actions to render alongside the default buttons.
+     */
+    customActions?: ReactNode;
+}
+/**
+ * InlineFieldGroupActions renders the edit/save/cancel action buttons.
+ * This is an internal component used by InlineFieldGroupHeader and InlineFieldGroup
+ * to provide responsive button placement.
+ * @internal
+ */
+export declare function InlineFieldGroupActions({ orientation, customActions, }: InlineFieldGroupActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InlineFieldGroupActions {
+    var displayName: string;
+}