@payfit/unity-components 2.46.13 → 2.46.14

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

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

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

@@ -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
+};

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;
+}

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

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

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