@payfit/unity-components 2.46.39 → 2.47.0

package/dist/esm/components/multi-select/MultiselectTypes.d.ts

@@ -1,4 +1,3 @@
-import { UseComboboxFilterProps } from './hooks/use-combobox-filter.js';
 type Key = string | number;
 /**
  * Common props shared by all MultiSelect variants.
@@ -26,6 +25,8 @@ export interface MultiSelectBaseProps {
     onFocus?: () => void;
     /** Callback when the select is blurred */
     onBlur?: () => void;
+    /** Callback triggered when the select popover changes its open state */
+    onOpenChange?: (isOpen: boolean) => void;
     /** The ID of the element that labels this select when no visible label is provided */
     'aria-labelledby'?: string;
     /** The ID of the element that labels this select when no visible label is provided */
@@ -49,7 +50,7 @@ export interface FlatSelectProps<TItems extends Set<unknown>> extends MultiSelec
     renderValue?: (value: Set<TItems extends Set<infer U> ? U : never>) => string;
     /** Children must be a render function that returns Option components */ children: (item: TItems extends Set<infer U> ? U : never) => React.JSX.Element;
     /** Options for filtering the items */
-    searchOptions?: UseComboboxFilterProps<TItems extends Set<infer U> ? U : never>['searchOptions'];
+    searchOptions?: Intl.CollatorOptions;
 }
 /**
  * Props for grouped dynamic items MultiSelect.
@@ -71,7 +72,7 @@ export interface GroupedSelectProps<TItems extends Map<string, unknown[]>> exten
     /** Children must be a render function that returns OptGroup components */
     children: (groupKey: string, items: TItems extends Map<string, Array<infer U>> ? U[] : never) => React.JSX.Element;
     /** Options for filtering the items */
-    searchOptions?: UseComboboxFilterProps<TItems extends Map<string, Array<infer U>> ? U : never>['searchOptions'];
+    searchOptions?: Intl.CollatorOptions;
 }
 /**
  * Props for static MultiSelect API (all items are defined via React children).
@@ -92,7 +93,7 @@ export interface StaticItemsProps<TItem = Key> extends MultiSelectBaseProps {
     /** Children must be Option components */
     children: React.ReactNode;
     /** Options for filtering the items */
-    searchOptions?: UseComboboxFilterProps<TItem>['searchOptions'];
+    searchOptions?: Intl.CollatorOptions;
 }
 /**
  * Helper type to simplify usage for dynamic MultiSelect props.

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.d.ts

@@ -1,25 +1,28 @@
-import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { ListBoxSectionProps } from 'react-aria-components/ListBox';
 /**
- * Base props for both static and dynamic MultiSelectOptGroup variants
+ * Base props for both static and dynamic MultiSelectOptGroup variants.
  */
-type BaseOptGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+type BaseOptGroupProps = {
     /** The label text displayed at the top of the group */
     label: string;
     /** Whether to show a separator line after the group */
     withSeparator?: boolean;
+    /** Additional class name for the group wrapper */
+    className?: string;
 };
 /**
- * Props for the dynamic API of MultiSelectOptGroup
- * @template T - The type of items in the group
+ * Props for the dynamic API of MultiSelectOptGroup.
+ * @template T - The type of items in the group.
  */
-export interface DynamicMultiSelectOptGroup<T> extends BaseOptGroupProps {
+export interface DynamicMultiSelectOptGroup<T> extends BaseOptGroupProps, Omit<ListBoxSectionProps<T>, 'children' | 'id' | 'items' | 'className'> {
     /** Array of items to render as options within the group */
     items: T[];
     /** Render function that converts each item into a MultiSelectOption */
     children: (item: T) => React.JSX.Element;
 }
 /**
- * Props for the static API of MultiSelectOptGroup
+ * Props for the static API of MultiSelectOptGroup.
  */
 export interface StaticMultiSelectOptGroup extends BaseOptGroupProps {
     /** Not used in static API */
@@ -28,14 +31,18 @@ export interface StaticMultiSelectOptGroup extends BaseOptGroupProps {
     children: ReactNode;
 }
 /**
- * Combined props type for MultiSelectOptGroup
- * @template T - The type of items when using dynamic API
+ * Combined props type for MultiSelectOptGroup.
+ * @template T - The type of items when using the dynamic API.
  */
 export type MultiSelectOptGroupProps<T = unknown> = DynamicMultiSelectOptGroup<T> | StaticMultiSelectOptGroup;
 /**
  * Groups related options within a `MultiSelect` component.
  *
- * This component provides two APIs for grouping options:
+ * This component renders a React Aria `ListBoxSection`, so grouped options keep
+ * keyboard navigation, filtering, and selection behavior aligned with the parent
+ * multiselect.
+ *
+ * The component provides two APIs for grouping options:
  * 1. Static API - Directly nest MultiSelectOption components
  * 2. Dynamic API - Provide an array of items and a render function for dynamic items
  * @example
@@ -53,14 +60,14 @@ export type MultiSelectOptGroupProps<T = unknown> = DynamicMultiSelectOptGroup<T
  *   withSeparator
  * >
  *   {fruit => (
- *     <MultiSelectOption value={fruit.id}>
+ *     <MultiSelectOption value={fruit.id} textValue={fruit.name}>
  *       {fruit.name}
  *     </MultiSelectOption>
  *   )}
  * </MultiSelectOptGroup>
  * ```
- * @template T - The type of items when using the dynamic API
- * @see {@link MultiSelectOption} for the child component API
+ * @template T - The type of items when using the dynamic API.
+ * @see {@link MultiSelectOption} for the child component API.
  */
 declare function MultiSelectOptGroup<T>(props: MultiSelectOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace MultiSelectOptGroup {

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.js

@@ -1,34 +1,45 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useContext as h } from "react";
-import { ComboboxGroup as x, ComboboxGroupLabel as C, SelectGroup as G, SelectGroupLabel as S } from "@ariakit/react";
-import { uyTv as N } from "@payfit/unity-themes";
-import { MultiSelectContext as g } from "../Multiselect.context.js";
-const M = N({
+import { jsxs as o, Fragment as c, jsx as t } from "react/jsx-runtime";
+import { uyTv as m } from "@payfit/unity-themes";
+import { Collection as y } from "react-aria-components/Collection";
+import { Header as d } from "react-aria-components/Header";
+import { ListBoxSection as b } from "react-aria-components/ListBox";
+import { Separator as f } from "react-aria-components/Separator";
+const p = m({
   slots: {
     base: "uy:flex uy:flex-col uy:bg-surface-neutral",
     label: "uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral",
     separator: "uy:my-100 uy:border-t uy:border-border-neutral uy:border-solid"
   }
 });
-function O(e) {
+function h(e) {
   return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
 }
-function j(e) {
-  const i = h(g), { base: c, label: r, separator: o } = M(), { label: n, withSeparator: a, className: m, ...y } = e, d = (b, p) => b.map((f) => p(f)), l = O(e) ? d(e.items, e.children) : e.children, u = {
-    className: c({ className: m }),
-    ...y
-  };
-  return i.isSearchable ? /* @__PURE__ */ s(x, { ...u, children: [
-    /* @__PURE__ */ t(C, { className: r(), children: n }),
-    l,
-    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
-  ] }) : /* @__PURE__ */ s(G, { ...u, children: [
-    /* @__PURE__ */ t(S, { className: r(), children: n }),
-    l,
-    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
+function x(e) {
+  const { base: a, label: i, separator: l } = p(), { label: r, withSeparator: n, className: u, ...s } = e;
+  return /* @__PURE__ */ o(c, { children: [
+    /* @__PURE__ */ o(
+      b,
+      {
+        ...s,
+        id: r,
+        className: a({ className: u }),
+        children: [
+          /* @__PURE__ */ t(d, { className: i(), children: r }),
+          h(e) ? /* @__PURE__ */ t(y, { items: e.items, children: e.children }) : e.children
+        ]
+      }
+    ),
+    n && /* @__PURE__ */ t(
+      f,
+      {
+        orientation: "horizontal",
+        className: l(),
+        "aria-hidden": !0
+      }
+    )
   ] });
 }
-j.displayName = "MultiSelectOptGroup";
+x.displayName = "MultiSelectOptGroup";
 export {
-  j as MultiSelectOptGroup
+  x as MultiSelectOptGroup
 };

package/dist/esm/components/multi-select/parts/MultiSelectOption.d.ts

@@ -1,9 +1,10 @@
-import { default as React, ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components/ListBox';
 /**
  * Props for the MultiSelectOption component.
- * @template T - The type of the value this option represents (string or number)
+ * @template T - The type of the value this option represents (string or number).
  */
-export interface MultiSelectOptionProps<T> {
+export interface MultiSelectOptionProps<T> extends Omit<ListBoxItemProps, 'children' | 'id' | 'value'> {
     /** The value associated with this option. Must be unique within the MultiSelect */
     value: T;
     /** The content to display for this option */
@@ -14,6 +15,8 @@ export interface MultiSelectOptionProps<T> {
     autoFocus?: boolean;
     /** Additional text displayed below the option to provide more context */
     helperText?: string;
+    /** Text used by search and typeahead when the visual content is complex */
+    textValue?: string;
 }
 export declare const MultiSelectOption: <T>(props: MultiSelectOptionProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>;

package/dist/esm/components/multi-select/parts/MultiSelectOption.js

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as p, useContext as b, createElement as v } from "react";
-import { SelectItem as x, ComboboxItem as h, SelectItemCheck as S } from "@ariakit/react";
-import { uyTv as g } from "@payfit/unity-themes";
-import C from "../../../hooks/use-id.js";
-import { CheckboxIndicator as k } from "../../checkbox/parts/CheckboxIndicator.js";
-import { MultiSelectContext as I } from "../Multiselect.context.js";
-const O = g({
+import { jsx as r, jsxs as a, Fragment as b } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { uyTv as x } from "@payfit/unity-themes";
+import { ListBoxItem as v } from "react-aria-components/ListBox";
+import h from "../../../hooks/use-id.js";
+import { CheckboxIndicator as g } from "../../checkbox/parts/CheckboxIndicator.js";
+const w = x({
   slots: {
     base: [
       "uy:flex uy:flex-col uy:transition",
       "uy:w-full uy:px-150 uy:py-100",
       "uy:rounded-50 uy:cursor-pointer",
-      "uy:hover:bg-surface-neutral-hover",
-      "uy:active:bg-surface-neutral-pressed",
-      "uy:focus-visible:outline uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2",
-      "uy:data-[active-item=true]:outline uy:data-[active-item=true]:outline-2 uy:data-[active-item=true]:outline-utility-focus-ring uy:data-[active-item=true]:outline-offset-2"
+      "uy:outline-none",
+      "uy:data-[hovered=true]:bg-surface-neutral-hover",
+      "uy:data-[pressed=true]:bg-surface-neutral-pressed",
+      "uy:data-[focus-visible=true]:outline uy:data-[focus-visible=true]:outline-2 uy:data-[focus-visible=true]:outline-solid uy:data-[focus-visible=true]:outline-utility-focus-ring uy:data-[focus-visible=true]:-outline-offset-2"
     ],
     label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
-    helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-300"
+    helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-3.5"
   },
   variants: {
     isDisabled: {
       true: {
         base: "uy:cursor-not-allowed!",
-        label: "uy:text-content-neutral-disabled"
+        label: "uy:text-content-neutral-disabled",
+        helperText: "uy:text-content-neutral-disabled"
       },
       false: {
         base: ""
@@ -31,57 +31,49 @@ const O = g({
     }
   }
 });
-function w({
-  isDisabled: i
-}) {
-  return /* @__PURE__ */ e(
-    S,
-    {
-      render: (t) => /* @__PURE__ */ e(
-        k,
-        {
-          isSelected: "children" in t && !!t.children,
-          isDisabled: i,
-          "data-dd-privacy": "hidden"
-        }
-      )
-    }
-  );
+function N(t, e) {
+  if (e !== void 0) return e;
+  if (typeof t == "string") return t;
 }
-function r({
-  value: i,
-  children: t,
+function l({
+  value: t,
+  children: e,
   isDisabled: u,
-  helperText: l,
-  autoFocus: n = !1,
-  ...a
-}, s) {
-  const o = C(), c = b(I), { base: y, label: d, helperText: f } = O({ isDisabled: u });
-  return /* @__PURE__ */ v(
-    x,
+  helperText: o,
+  textValue: n,
+  ...s
+}, d) {
+  const i = h(), { base: y, label: c, helperText: p } = w({ isDisabled: u });
+  return /* @__PURE__ */ r(
+    v,
     {
       "data-dd-privacy": "mask",
-      ...a,
-      ref: s,
-      id: o,
-      key: o,
-      value: String(i),
-      disabled: u,
+      ...s,
+      ref: d,
+      id: t,
+      isDisabled: u,
+      textValue: N(e, n),
       className: y(),
-      autoFocus: n,
-      focusOnHover: !1,
-      "aria-describedby": l ? `${o}-helper-text` : void 0,
-      render: c.isSearchable ? /* @__PURE__ */ e(h, {}) : void 0
-    },
-    /* @__PURE__ */ m("div", { className: d(), children: [
-      /* @__PURE__ */ e(w, { isDisabled: u }),
-      t
-    ] }),
-    l && /* @__PURE__ */ e("span", { id: `${o}-helper-text`, className: f(), children: l })
+      "aria-describedby": o ? `${i}-helper-text` : void 0,
+      children: ({ isSelected: f }) => /* @__PURE__ */ a(b, { children: [
+        /* @__PURE__ */ a("div", { className: c(), children: [
+          /* @__PURE__ */ r(
+            g,
+            {
+              isSelected: f,
+              isDisabled: u,
+              "data-dd-privacy": "hidden"
+            }
+          ),
+          e
+        ] }),
+        o && /* @__PURE__ */ r("span", { id: `${i}-helper-text`, className: p(), children: o })
+      ] })
+    }
   );
 }
-r.displayName = "MultiSelectOption";
-const H = p(r);
+l.displayName = "MultiSelectOption";
+const S = m(l);
 export {
-  H as MultiSelectOption
+  S as MultiSelectOption
 };

package/dist/esm/components/multi-select/utils/selection-adapter.d.ts

@@ -0,0 +1,5 @@
+import { Key } from '@react-types/shared';
+export type MultiSelectKey = string | number;
+export declare function setToReactAriaValue(value: Set<MultiSelectKey> | undefined): readonly Key[] | undefined;
+export declare function setToReactAriaDefaultValue(value: Set<MultiSelectKey> | undefined): readonly Key[] | undefined;
+export declare function reactAriaValueToSet(value: readonly Key[]): Set<MultiSelectKey>;

package/dist/esm/components/multi-select/utils/selection-adapter.js

@@ -0,0 +1,18 @@
+function e(r) {
+  if (r !== void 0)
+    return Array.from(r);
+}
+function n(r) {
+  if (r !== void 0)
+    return Array.from(r);
+}
+function o(r) {
+  return new Set(
+    r.filter((t) => typeof t == "string" || typeof t == "number")
+  );
+}
+export {
+  o as reactAriaValueToSet,
+  n as setToReactAriaDefaultValue,
+  e as setToReactAriaValue
+};

package/dist/esm/components/phone-number/PhoneNumberInput.js

@@ -8,15 +8,16 @@ import { Input as te } from "react-aria-components/Input";
 import { ListBox as ae } from "react-aria-components/ListBox";
 import { Popover as oe } from "react-aria-components/Popover";
 import { Select as ue } from "react-aria-components/Select";
-import { Virtualizer as de, ListLayout as ne } from "react-aria-components/Virtualizer";
-import { defaultCountries as f, usePhoneInput as ie, FlagImage as le, parseCountry as se } from "react-international-phone";
-import { useIntl as ye } from "react-intl";
-import { CircularIconButton as ce } from "../icon-button/CircularIconButton.js";
-import { Icon as m } from "../icon/Icon.js";
-import { SearchInput as fe } from "../select/parts/SearchInput.js";
-import { PhoneNumberItem as me } from "./parts/PhoneNumberItem.js";
-import be from "./unknownFlag.svg.js";
-const pe = Y({
+import { Separator as de } from "react-aria-components/Separator";
+import { Virtualizer as ie, ListLayout as ne } from "react-aria-components/Virtualizer";
+import { defaultCountries as m, usePhoneInput as le, FlagImage as se, parseCountry as ye } from "react-international-phone";
+import { useIntl as ce } from "react-intl";
+import { CircularIconButton as me } from "../icon-button/CircularIconButton.js";
+import { Icon as f } from "../icon/Icon.js";
+import { Search as fe } from "../search/Search.js";
+import { PhoneNumberItem as be } from "./parts/PhoneNumberItem.js";
+import pe from "./unknownFlag.svg.js";
+const ge = Y({
   slots: {
     base: [
       "uy:group",
@@ -98,11 +99,11 @@ const pe = Y({
       "uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[296px]"
     ]
   }
-}), ge = J(
+}), he = J(
   (b, p) => {
-    const n = ye(), {
+    const i = ce(), {
       onChange: g,
-      value: i,
+      value: n,
       defaultCountry: h = "unknown",
       onClearButtonPress: v,
       isInvalid: o = !1,
@@ -111,8 +112,8 @@ const pe = Y({
       "aria-label": s,
       defaultMask: w,
       charAfterDialCode: C,
-      historySaveDebounceMS: I,
-      disableCountryGuess: N,
+      historySaveDebounceMS: N,
+      disableCountryGuess: I,
       forceDialCode: P,
       disableDialCodeAndPrefix: k,
       disableFormatting: S,
@@ -120,23 +121,23 @@ const pe = Y({
       ...B
     } = b, [D, L] = K(!1), { contains: O } = Z({ sensitivity: "base" }), d = Q(null);
     X(p, () => d.current, [d]);
-    const R = [["", "unknown", "", ""], ...f], {
+    const R = [["", "unknown", "", ""], ...m], {
       inputRef: y,
       inputValue: c,
       handlePhoneValueChange: j,
       country: t,
       setCountry: A,
       phone: F
-    } = ie({
+    } = le({
       prefix: x,
       defaultCountry: h,
-      value: i,
+      value: n,
       countries: R,
       disableDialCodePrefill: !0,
       defaultMask: w,
       charAfterDialCode: C,
-      historySaveDebounceMS: I,
-      disableCountryGuess: N,
+      historySaveDebounceMS: N,
+      disableCountryGuess: I,
       forceDialCode: P,
       disableDialCodeAndPrefix: k,
       disableFormatting: S,
@@ -153,12 +154,12 @@ const pe = Y({
       selectIcon: U,
       selectButton: E,
       state: H
-    } = pe(), q = c.replace(F, "").trim() !== "" && !u;
+    } = ge(), q = c.replace(F, "").trim() !== "" && !u;
     return /* @__PURE__ */ e("div", { ref: d, children: /* @__PURE__ */ a(
       re,
       {
         className: W(),
-        "aria-label": `${s}${i ? `, ${i}` : ""}`,
+        "aria-label": `${s}${n ? `, ${n}` : ""}`,
         "aria-invalid": o,
         "data-invalid": o,
         "data-disabled": u,
@@ -185,7 +186,7 @@ const pe = Y({
                   {
                     "data-dd-privacy": "mask",
                     className: E(),
-                    "aria-label": n.formatMessage(
+                    "aria-label": i.formatMessage(
                       {
                         id: "unity:component:phone-number:country-selector:label",
                         defaultMessage: "Select country code, {country} {dialCode}"
@@ -197,7 +198,7 @@ const pe = Y({
                     ),
                     children: [
                       t.iso2 !== "unknown" ? /* @__PURE__ */ e(
-                        le,
+                        se,
                         {
                           iso2: t.iso2,
                           alt: t.name,
@@ -209,7 +210,7 @@ const pe = Y({
                         "img",
                         {
                           "aria-hidden": "true",
-                          src: be,
+                          src: pe,
                           alt: "",
                           "data-dd-privacy": "mask",
                           className: "react-international-phone-flag-emoji",
@@ -218,7 +219,7 @@ const pe = Y({
                         }
                       ),
                       /* @__PURE__ */ e(
-                        m,
+                        f,
                         {
                           className: U(),
                           "aria-hidden": "true",
@@ -239,9 +240,10 @@ const pe = Y({
                     containerPadding: 8,
                     className: G(),
                     children: /* @__PURE__ */ a(_, { filter: O, children: [
-                      /* @__PURE__ */ e(fe, { "aria-label": M }),
+                      /* @__PURE__ */ e("div", { className: "uy:m-100", children: /* @__PURE__ */ e(fe, { label: M, "data-dd-privacy": "mask" }) }),
+                      /* @__PURE__ */ e(de, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
                       /* @__PURE__ */ e(
-                        de,
+                        ie,
                         {
                           layout: ne,
                           layoutOptions: {
@@ -251,11 +253,11 @@ const pe = Y({
                             ae,
                             {
                               className: T(),
-                              items: f,
+                              items: m,
                               children: (r) => {
-                                const l = se(r);
+                                const l = ye(r);
                                 return /* @__PURE__ */ e(
-                                  me,
+                                  be,
                                   {
                                     country: l,
                                     id: l.iso2
@@ -291,21 +293,21 @@ const pe = Y({
             ),
             /* @__PURE__ */ a("div", { className: H(), children: [
               o && /* @__PURE__ */ e(
-                m,
+                f,
                 {
                   src: "WarningCircleOutlined",
                   color: "content.form.invalid",
                   role: "img",
-                  "aria-label": n.formatMessage({
+                  "aria-label": i.formatMessage({
                     id: "unity:component:form-field:form-input:error:alt",
                     defaultMessage: "Error"
                   })
                 }
               ),
               q && /* @__PURE__ */ e(
-                ce,
+                me,
                 {
-                  title: n.formatMessage({
+                  title: i.formatMessage({
                     id: "unity:component:common:clear:title",
                     defaultMessage: "Clear"
                   }),
@@ -323,7 +325,7 @@ const pe = Y({
     ) });
   }
 );
-ge.displayName = "PhoneNumberInput";
+he.displayName = "PhoneNumberInput";
 export {
-  ge as PhoneNumberInput
+  he as PhoneNumberInput
 };