@payfit/unity-components 2.46.12 → 2.46.13

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

@@ -1,158 +0,0 @@
-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;
-    /**
-     * 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.
-     */
-    successMessage?: string;
-    /**
-     * Error message to announce when save or validation fails.
-     * 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.
- * 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 (only if focus hasn't moved elsewhere)
- * - 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

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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
-};

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

@@ -1,24 +0,0 @@
-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;
-}

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

@@ -1,158 +0,0 @@
-import { jsxs as c, Fragment as y, jsx as i } from "react/jsx-runtime";
-import { useContext as E, useMemo as G } from "react";
-import { uyTv as S } from "@payfit/unity-themes";
-import { useSelector as A } from "@tanstack/react-store";
-import { useIntl as B } from "react-intl";
-import { useFormContext as j } from "../../../hooks/tanstack-form-context.js";
-import { useBreakpointListener as k } from "../../../hooks/use-breakpoint-listener.js";
-import { Button as n } from "../../button/Button.js";
-import { InlineFieldGroupContext as V } from "../InlineFieldGroup.context.js";
-const O = S({
-  slots: {
-    container: "",
-    button: ""
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        container: "uy:flex uy:gap-100 uy:items-center"
-      },
-      vertical: {
-        container: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
-        button: "uy:w-full"
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "horizontal"
-  }
-});
-function R({
-  orientation: b = "horizontal",
-  customActions: g
-}) {
-  const o = B(), m = E(V), f = k(), p = f === "xs" || f === "sm";
-  if (!m)
-    throw new Error(
-      "InlineFieldGroupActions must be used within InlineFieldGroup"
-    );
-  const {
-    mode: v,
-    enterEditMode: x,
-    exitEditMode: s,
-    editViewId: h,
-    isLoading: e,
-    editButtonRef: M,
-    editLabel: P,
-    saveLabel: z,
-    cancelLabel: D,
-    onEditPress: I,
-    onSavePress: r,
-    onCancelPress: a
-  } = m, L = j(), { isDirty: l } = A(L.store, (C) => ({
-    isDirty: C.isDirty
-  })), { container: F, button: t } = O({ orientation: b }), N = P || o.formatMessage({
-    id: "unity:component:inline-field-group:edit",
-    defaultMessage: "Edit"
-  }), d = z || o.formatMessage({
-    id: "unity:component:inline-field-group:save",
-    defaultMessage: "Save"
-  }), u = D || o.formatMessage({
-    id: "unity:component:inline-field-group:cancel",
-    defaultMessage: "Cancel"
-  }), w = G(() => p ? /* @__PURE__ */ c(y, { children: [
-    /* @__PURE__ */ i(
-      n,
-      {
-        variant: "primary",
-        size: "default",
-        isDisabled: !l || e,
-        isLoading: e,
-        type: "submit",
-        onPress: () => {
-          r?.();
-        },
-        className: t(),
-        children: d
-      }
-    ),
-    /* @__PURE__ */ i(
-      n,
-      {
-        variant: "secondary",
-        size: "default",
-        onPress: () => {
-          a?.(), s();
-        },
-        isDisabled: e,
-        type: "button",
-        className: t(),
-        children: u
-      }
-    )
-  ] }) : /* @__PURE__ */ c(y, { children: [
-    /* @__PURE__ */ i(
-      n,
-      {
-        variant: "secondary",
-        size: "default",
-        onPress: () => {
-          a?.(), s();
-        },
-        isDisabled: e,
-        type: "button",
-        className: t(),
-        children: u
-      }
-    ),
-    /* @__PURE__ */ i(
-      n,
-      {
-        variant: "primary",
-        size: "default",
-        isDisabled: !l || e,
-        isLoading: e,
-        type: "submit",
-        onPress: () => {
-          r?.();
-        },
-        className: t(),
-        children: d
-      }
-    )
-  ] }), [
-    t,
-    u,
-    d,
-    s,
-    l,
-    e,
-    p,
-    a,
-    r
-  ]);
-  return /* @__PURE__ */ c("div", { className: F(), role: "group", children: [
-    g,
-    v === "read" ? /* @__PURE__ */ i(
-      n,
-      {
-        ref: M,
-        variant: "secondary",
-        size: "default",
-        onPress: () => {
-          I?.(), x();
-        },
-        isDisabled: e,
-        prefixIcon: "PencilSimpleOutlined",
-        "aria-expanded": !1,
-        "aria-controls": h,
-        className: t(),
-        children: N
-      }
-    ) : w
-  ] });
-}
-R.displayName = "InlineFieldGroupActions";
-export {
-  R as InlineFieldGroupActions
-};

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

@@ -1,64 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-export interface InlineFieldGroupEditViewProps extends PropsWithChildren {
-    /**
-     * Optional className for custom styling
-     */
-    className?: string;
-    /**
-     * Legend text for the fieldset. Should describe the group of fields.
-     * This is required for accessibility but will be visually hidden.
-     */
-    legend?: ReactNode;
-}
-/**
- * InlineFieldGroupEditView displays form fields only when the parent InlineFieldGroup is in edit mode.
- * Wrap form field components in this component to show them when editing.
- * The component uses a semantic `<fieldset>` with a visually hidden `<legend>` for accessibility.
- * It automatically disables all fields during loading states and hides content in read mode.
- * @example Basic usage with form fields
- * ```tsx
- * import { useTanstackUnityForm } from '@payfit/unity-components'
- *
- * function Example() {
- *   const form = useTanstackUnityForm({
- *     defaultValues: { email: 'john@example.com', phone: '+33123456789' }
- *   })
- *
- *   return (
- *     <form.AppForm>
- *       <form.InlineFieldGroup>
- *         <form.InlineFieldGroupHeader title="Contact" />
- *         <form.InlineFieldGroupReadView>
- *           <DefinitionList>
- *             <DefinitionItem term="Email" description={form.state.values.email} />
- *           </DefinitionList>
- *         </form.InlineFieldGroupReadView>
- *         <form.InlineFieldGroupEditView legend="Edit contact information">
- *           <form.AppField name="email">
- *             {field => <field.TextField label="Email" isRequired />}
- *           </form.AppField>
- *           <form.AppField name="phone">
- *             {field => <field.PhoneNumberField label="Phone" />}
- *           </form.AppField>
- *         </form.InlineFieldGroupEditView>
- *       </form.InlineFieldGroup>
- *     </form.AppForm>
- *   )
- * }
- * ```
- * @remarks
- * - Must be used as a child of InlineFieldGroup
- * - Set the `legend` prop to describe the group of fields for screen readers
- * - The fieldset is disabled automatically when the parent's `isLoading` prop is true
- * - Uses `aria-busy` to indicate loading state to assistive technologies
- * - Content remains in the DOM but is hidden with `hidden` and `inert` attributes in read mode
- * @see {@link InlineFieldGroupEditViewProps} for all available props
- * @see {@link InlineFieldGroup} for the parent container component
- * @see {@link InlineFieldGroupReadView} for the corresponding read mode component
- * @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 function InlineFieldGroupEditView({ children, className, legend, }: InlineFieldGroupEditViewProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace InlineFieldGroupEditView {
-    var displayName: string;
-}