@payfit/unity-components 2.5.7 → 2.7.0

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 { useStore as A } from "@tanstack/react-form";
+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/InlineFieldGroupHeader.d.ts

@@ -6,42 +6,14 @@ export interface InlineFieldGroupHeaderProps {
      */
     title: ReactNode;
     /**
-     * Custom label for the edit button.
-     * @default "Edit" (translated)
+     * Optional subtitle to display below the title.
      */
-    editLabel?: string;
-    /**
-     * Custom label for the save button.
-     * @default "Save" (translated)
-     */
-    saveLabel?: string;
-    /**
-     * Custom label for the cancel button.
-     * @default "Cancel" (translated)
-     */
-    cancelLabel?: string;
+    subtitle?: ReactNode;
     /**
      * Additional custom actions to render alongside the default buttons.
      * These will be displayed between the title and the edit/save/cancel buttons.
      */
     customActions?: ReactNode;
-    /**
-     * 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;
 }
 /**
  * InlineFieldGroupHeader renders the title and contextual action buttons for an InlineFieldGroup.
@@ -69,14 +41,18 @@ export interface InlineFieldGroupHeaderProps {
  * ```
  * @example Custom button labels and actions
  * ```tsx
- * <form.InlineFieldGroupHeader
- *   title="Contact Information"
+ * <form.InlineFieldGroup
  *   editLabel="Modify"
  *   saveLabel="Confirm"
  *   cancelLabel="Discard"
- *   customActions={<Button onPress={handleDelete}>Delete</Button>}
  *   onSavePress={() => trackAnalytics('save_clicked')}
- * />
+ * >
+ *   <form.InlineFieldGroupHeader
+ *     title="Contact Information"
+ *     customActions={<Button onPress={handleDelete}>Delete</Button>}
+ *   />
+ *   ...
+ * </form.InlineFieldGroup>
  * ```
  * @remarks
  * - Must be used as a child of InlineFieldGroup
@@ -89,7 +65,7 @@ export interface InlineFieldGroupHeaderProps {
  * @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 InlineFieldGroupHeader({ title, editLabel, saveLabel, cancelLabel, customActions, onEditPress, onSavePress, onCancelPress, }: InlineFieldGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function InlineFieldGroupHeader({ title, subtitle, customActions, }: InlineFieldGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace InlineFieldGroupHeader {
     var displayName: string;
 }

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

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

package/dist/esm/components/select/Select.d.ts

@@ -1,3 +1,4 @@
+import { Node } from '@react-types/shared';
 import { ForwardedRef, JSX, ReactNode } from 'react';
 import { PopoverProps as AriaPopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components';
 export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'value' | 'defaultValue' | 'onChange' | 'selectionMode'> {
@@ -17,7 +18,10 @@ export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>,
     isSearchable?: boolean;
     /** The placement of the popover */
     placement?: Extract<AriaPopoverProps['placement'], 'top' | 'bottom'>;
+    /** The aria-label for the search input when isSearchable is true */
     searchInputAriaLabel?: string;
+    /** Custom render function to format the selected value display */
+    renderValue?: (value: Node<T>) => ReactNode;
 }
 type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
     ref?: ForwardedRef<HTMLDivElement>;

package/dist/esm/components/select/Select.js

@@ -1,17 +1,17 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { forwardRef as B, useState as C } from "react";
-import { uyTv as F } from "@payfit/unity-themes";
-import { useFilter as I, Select as M, Popover as z, Autocomplete as A, Virtualizer as p, ListLayout as d, ListBox as y } from "react-aria-components";
-import { useIntl as T } from "react-intl";
-import { SearchInput as U } from "./parts/SearchInput.js";
-import { SelectButton as V } from "./parts/SelectButton.js";
-const $ = F({
+import { forwardRef as C, useState as F } from "react";
+import { uyTv as I } from "@payfit/unity-themes";
+import { useFilter as M, Select as z, Popover as A, Autocomplete as T, Virtualizer as p, ListLayout as d, ListBox as y } from "react-aria-components";
+import { useIntl as U } from "react-intl";
+import { SearchInput as V } from "./parts/SearchInput.js";
+import { SelectButton as $ } from "./parts/SelectButton.js";
+const k = I({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
     popover: "uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:shadow-300",
     listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
   }
-}), k = ({
+}), q = ({
   children: t,
   items: o,
   placeholder: r,
@@ -25,46 +25,48 @@ const $ = F({
   onBlur: b,
   placement: h,
   searchInputAriaLabel: x,
-  ...S
-}, g) => {
-  const v = T(), [w, N] = C(!1), { contains: O } = I({ sensitivity: "base" }), { base: L, popover: P, listbox: u } = $(), j = n !== void 0 || i !== void 0 ? {
+  renderValue: S,
+  ...g
+}, v) => {
+  const w = U(), [N, O] = F(!1), { contains: L } = M({ sensitivity: "base" }), { base: P, popover: j, listbox: u } = k(), B = n !== void 0 || i !== void 0 ? {
     value: n,
     onChange: i
   } : { defaultValue: m };
   return /* @__PURE__ */ c(
-    M,
+    z,
     {
-      onOpenChange: N,
-      ...S,
-      ref: g,
-      className: L(),
+      onOpenChange: O,
+      ...g,
+      ref: v,
+      className: P(),
       placeholder: s ? void 0 : r,
       isDisabled: s || a,
       isInvalid: l,
       onBlur: b,
-      ...j,
+      ...B,
       children: [
         /* @__PURE__ */ e(
-          V,
+          $,
           {
             isDisabled: s,
             isInvalid: l,
             isReadOnly: a,
-            isOpen: w
+            isOpen: N,
+            renderValue: S
           }
         ),
         /* @__PURE__ */ e(
-          z,
+          A,
           {
             offset: 1,
             containerPadding: 8,
-            className: P(),
+            className: j(),
             placement: h,
-            children: f ? /* @__PURE__ */ c(A, { filter: O, children: [
+            children: f ? /* @__PURE__ */ c(T, { filter: L, children: [
               /* @__PURE__ */ e(
-                U,
+                V,
                 {
-                  "aria-label": x ?? v.formatMessage({
+                  "aria-label": x ?? w.formatMessage({
                     id: "unity:component:select:search:label",
                     defaultMessage: "Search options"
                   })
@@ -95,10 +97,10 @@ const $ = F({
       ]
     }
   );
-}, q = B(function(o, r) {
-  return k(o, r);
+}, E = C(function(o, r) {
+  return q(o, r);
 });
-q.displayName = "Select";
+E.displayName = "Select";
 export {
-  q as Select
+  E as Select
 };

package/dist/esm/components/select/TanstackSelect.js

@@ -1,15 +1,21 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as u } from "../form-field/TanstackFormField.context.js";
-import { Select as p } from "./Select.js";
-const b = ({ onBlur: o, isReadOnly: a, isDisabled: l, ...r }, s) => {
-  const e = f(), t = u(), c = e.state.meta.isTouched && !e.state.meta.isValid, i = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
-  return /* @__PURE__ */ d(
-    p,
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { useFieldContext as u } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as p } from "../form-field/TanstackFormField.context.js";
+import { Select as b } from "./Select.js";
+const h = ({
+  onBlur: o,
+  isReadOnly: a,
+  isDisabled: l,
+  renderValue: r,
+  ...s
+}, c) => {
+  const e = u(), t = p(), d = e.state.meta.isTouched && !e.state.meta.isValid, i = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
+  return /* @__PURE__ */ m(
+    b,
     {
-      ...r,
-      ref: s,
+      ...s,
+      ref: c,
       value: e.state.value ?? "",
       onChange: (n) => {
         e.handleChange(n);
@@ -19,16 +25,17 @@ const b = ({ onBlur: o, isReadOnly: a, isDisabled: l, ...r }, s) => {
       },
       isReadOnly: a,
       isDisabled: l,
-      isInvalid: c,
+      isInvalid: d,
       "aria-labelledby": t.labelId,
       "aria-describedby": i.length > 0 ? i : void 0,
-      "aria-details": t.contextualLinkId
+      "aria-details": t.contextualLinkId,
+      renderValue: r
     }
   );
-}, h = m(function(a, l) {
-  return b(a, l);
+}, x = f(function(a, l) {
+  return h(a, l);
 });
-h.displayName = "TanstackSelect";
+x.displayName = "TanstackSelect";
 export {
-  h as TanstackSelect
+  x as TanstackSelect
 };

package/dist/esm/components/select/parts/SelectButton.d.ts

@@ -1,8 +1,19 @@
-export interface SelectButtonProps {
+import { Node } from '@react-types/shared';
+import { ReactNode } from 'react';
+export interface SelectButtonProps<T extends object> {
+    /** Whether the button is disabled */
     isDisabled?: boolean;
+    /** Whether the button is in an invalid state */
     isInvalid?: boolean;
+    /** Whether the button is read-only */
     isReadOnly?: boolean;
+    /** Whether the select popover is currently open */
     isOpen: boolean;
+    /** Custom render function to format the selected value display */
+    renderValue?: (selectedItem: Node<T>) => ReactNode;
 }
-declare const SelectButton: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const SelectButton: {
+    <T extends object>({ isDisabled, isInvalid, isReadOnly, isOpen, renderValue, }: SelectButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { SelectButton };