@payfit/unity-components 2.46.39 → 2.46.40

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

@@ -4,6 +4,11 @@ import { MultiSelectComponent } from './MultiselectTypes.js';
  * The component provides two different APIs:
  * 1. Static API - For simple cases where options are defined as direct children and use primitive values as keys (strings or numbers)
  * 2. Dynamic API - For data-driven cases where options are generated from a dynamic collection with typed objects
+ *
+ * Selection is backed by React Aria and exposed as a Set of option keys. For dynamic options,
+ * the selected keys are resolved back to their original items before calling `renderValue`.
+ * Searchable multiselects use each option's `textValue` when provided, then fall back to
+ * string children for filtering and typeahead.
  * @example
  * ```tsx
  * import { MultiSelect, MultiSelectOption, MultiSelectOptGroup } from '@payfit/unity-components'
@@ -44,7 +49,7 @@ import { MultiSelectComponent } from './MultiselectTypes.js';
  *   }
  * >
  *   {(item) => (
- *     <MultiSelectOption value={item.id}>
+ *     <MultiSelectOption value={item.id} textValue={item.name}>
  *       {item.name}
  *     </MultiSelectOption>
  *   )}

package/dist/esm/components/multi-select/MultiSelect.js

@@ -1,256 +1,304 @@
-import { jsx as f, jsxs as ie, Fragment as fe } from "react/jsx-runtime";
-import { forwardRef as de, useMemo as I, useCallback as i, useRef as me } from "react";
-import { ComboboxProvider as Se, SelectProvider as q, useSelectContext as ye, useStoreState as pe } from "@ariakit/react";
-import { useComboboxFilter as he } from "./hooks/use-combobox-filter.js";
-import { useMultiSelectionState as Ve } from "./hooks/use-multiselection-state.js";
-import { MultiSelectContext as z } from "./Multiselect.context.js";
-import { MultiSelectButton as ge } from "./parts/MultiSelectButton.js";
-import { MultiSelectPopover as ve } from "./parts/MultiSelectPopover.js";
-function J(t) {
-  return t instanceof Map;
-}
-function Ie(t) {
-  return !Object.prototype.hasOwnProperty.call(t, "items");
-}
-function a(t) {
-  return String(t);
-}
-function b(t) {
-  return isNaN(Number(t)) ? t : Number(t);
-}
-function X(t) {
-  return Array.from(t, a);
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as he, useRef as U, useState as W, useMemo as h, useCallback as l } from "react";
+import { reactAriaValueToSet as ve, setToReactAriaDefaultValue as xe, setToReactAriaValue as Se } from "./utils/selection-adapter.js";
+import { uyTv as we } from "@payfit/unity-themes";
+import { useFilter as Ve, Autocomplete as Ce } from "react-aria-components/Autocomplete";
+import { Button as Ie, ButtonContext as Me } from "react-aria-components/Button";
+import { ListBox as q } from "react-aria-components/ListBox";
+import { Popover as Oe } from "react-aria-components/Popover";
+import { Select as Ne } from "react-aria-components/Select";
+import { Separator as Pe } from "react-aria-components/Separator";
+import { useIntl as Ae } from "react-intl";
+import { Badge as Re } from "../badge/Badge.js";
+import { CircularIconButton as Be } from "../icon-button/CircularIconButton.js";
+import { Icon as H } from "../icon/Icon.js";
+import { Search as De } from "../search/Search.js";
+import { Spinner as je } from "../spinner/Spinner.js";
+import { MultiSelectContext as Ee } from "./Multiselect.context.js";
+const ze = we({
+  slots: {
+    root: "uy:relative uy:flex uy:flex-col uy:gap-100 uy:w-full",
+    trigger: "uy:relative uy:h-5.5 uy:sm:h-500 uy:flex uy:items-center uy:justify-between uy:py-125 uy:sm:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
+    inputValue: "uy:flex-1 uy:typography-body uy:text-left uy:line-clamp-1",
+    state: "uy:grow-0 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:inline-flex uy:gap-50 uy:items-center uy:px-100",
+    suffix: "uy:text-content-neutral-lowest",
+    clearButton: "uy:absolute uy:right-[36px] uy:top-1/2 uy:z-10 uy:-translate-y-1/2",
+    popover: "uy:shadow-300 uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-[var(--trigger-width)] uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
+    list: "uy:p-100 uy:overflow-y-auto uy:overflow-x-hidden"
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        trigger: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled uy:text-content-form-disabled",
+        inputValue: "uy:text-content-form-disabled!",
+        state: "uy:text-content-form-disabled",
+        suffix: "uy:text-content-form-disabled"
+      }
+    },
+    isReadOnly: {
+      true: {
+        trigger: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled",
+        inputValue: "uy:text-content-form-disabled",
+        state: "uy:text-content-form-disabled",
+        suffix: "uy:text-content-form-disabled"
+      }
+    },
+    isInvalid: {
+      true: {
+        trigger: "uy:bg-surface-form-error uy:border-border-form-error",
+        inputValue: "uy:text-content-form-error",
+        state: "uy:text-content-form-error"
+      }
+    },
+    isEmpty: {
+      true: {
+        inputValue: "uy:text-content-neutral-lowest"
+      },
+      false: {
+        inputValue: "uy:text-content-form-enabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        trigger: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+        inputValue: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+        state: "uy:text-content-neutral-disabled"
+      }
+    },
+    {
+      isEmpty: !0,
+      isDisabled: !1,
+      isReadOnly: !1,
+      isInvalid: !1,
+      className: {
+        inputValue: "uy:text-content-neutral-lowest"
+      }
+    }
+  ]
+});
+function J(e) {
+  return e instanceof Map;
 }
-function U(t) {
-  return new Set(X(t));
+function ke(e) {
+  return !Object.prototype.hasOwnProperty.call(e, "items");
 }
-function W({
-  props: t,
-  ref: C,
-  content: r,
-  typedRenderValue: A,
-  selectedItemsForDisplay: O
-}) {
-  const K = ye(), P = pe(K, "open"), u = me(!1), {
-    placeholder: M,
-    isDisabled: c,
-    isReadOnly: y,
-    isLoading: p,
-    isInvalid: w,
-    onClearButtonPress: x,
-    onBlur: n,
-    onFocus: R,
-    ...j
-  } = t, h = i(() => {
-    P || !u.current && n && (u.current = !0, n());
-  }, [P, n]), d = i(() => {
-    u.current = !1, R?.();
-  }, [R]), V = i(() => {
-    setTimeout(() => {
-      const S = document.activeElement, g = K?.getState().contentElement;
-      g && S !== g && !g.contains(S) && !u.current && n && (u.current = !0, n());
-    }, 0);
-  }, [n, K]);
-  return /* @__PURE__ */ ie(fe, { children: [
-    /* @__PURE__ */ f(
-      ge,
-      {
-        ref: C,
-        placeholder: M,
-        isDisabled: c,
-        isReadOnly: y,
-        isLoading: p,
-        isInvalid: w,
-        renderValue: A,
-        selectedItems: O,
-        onClearButtonPress: x,
-        onBlur: h,
-        onFocus: d,
-        ...j
-      }
-    ),
-    /* @__PURE__ */ f(ve, { onBlur: V, children: r })
-  ] });
+function Q(e) {
+  return typeof e == "object" && e !== null && "value" in e && (typeof e.value == "string" || typeof e.value == "number") ? e.value : typeof e == "object" && e !== null && "id" in e && (typeof e.id == "string" || typeof e.id == "number") ? e.id : typeof e == "string" || typeof e == "number" ? e : String(e);
 }
-const be = (t, C) => {
-  const r = Ie(t), A = (e) => typeof e == "object" && e !== null && "value" in e && (typeof e.value == "string" || typeof e.value == "number") ? e.value : typeof e == "object" && e !== null && "id" in e && (typeof e.id == "string" || typeof e.id == "number") ? e.id : typeof e == "string" || typeof e == "number" ? e : String(e), P = r ? (e) => Array.from(e).map(String).join(", ") : (e) => Array.from(e).map((o) => A(o)).join(", "), u = t, M = t, c = I(
-    () => r ? void 0 : u.items,
-    [r, u.items]
-  ), y = r ? void 0 : u.getItemValue, { children: p } = r ? M : u, w = r ? void 0 : u.searchOptions, { children: x } = M, n = i(
-    (e) => r || !y ? A(e) : y(e),
-    [r, y]
-  ), {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children: R,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getItemValue: j,
-    value: h,
-    defaultValue: d,
-    onChange: V,
-    isSearchable: S,
-    renderValue: g,
-    maxVisibleItems: N = 7
-  } = t, Y = g ?? P, v = i(() => r || !c ? [] : J(c) ? Array.from(c.values()).flat() : Array.from(c), [c, r]), Z = i(() => {
-    if ("value" in t)
-      return h ? U(h) : /* @__PURE__ */ new Set();
-  }, [t, h]), $ = i(() => d ? U(d) : /* @__PURE__ */ new Set(), [d]), ee = i(
-    (e) => {
-      if (!V) return;
-      const o = new Set(
-        Array.from(e).map((s) => b(s))
-      );
-      V(o);
+const Le = (e) => Array.from(e).map(String).join(", "), Te = (e) => Array.from(e).map((v) => Q(v)).join(", ");
+function Fe(e, v) {
+  const d = Ae(), X = U(null), Y = U(null), [Z, C] = W(!1), o = ke(e), I = e, M = e, {
+    placeholder: c,
+    isDisabled: f,
+    isReadOnly: u,
+    isLoading: O,
+    isInvalid: y,
+    onClearButtonPress: N,
+    onBlur: _,
+    onFocus: $,
+    onChange: P,
+    onOpenChange: A,
+    value: x,
+    defaultValue: R,
+    isSearchable: B,
+    renderValue: ee,
+    maxVisibleItems: m = 7,
+    children: S,
+    searchOptions: te,
+    ...re
+  } = e, [D, oe] = W(() => new Set(R ?? [])), n = o ? void 0 : I.items, w = o ? void 0 : I.getItemValue, p = x !== void 0, a = h(
+    () => p ? new Set(x) : D,
+    [p, x, D]
+  ), j = ee ?? (o ? Le : Te), E = l(
+    (t) => o || !w ? Q(t) : w(t),
+    [w, o]
+  ), z = l(() => o || !n ? [] : J(n) ? Array.from(n.values()).flat() : Array.from(n), [n, o]), ne = h(() => {
+    if (o)
+      return new Set(a);
+    const t = z(), s = /* @__PURE__ */ new Set();
+    return a.forEach((V) => {
+      const K = t.find((ge) => E(ge) === V);
+      K && s.add(K);
+    }), s;
+  }, [z, o, E, a]), b = Array.from(ne), k = Math.max(
+    b.length - m,
+    0
+  ), L = a.size > 0 && !f && !u && !O, {
+    root: ae,
+    trigger: le,
+    inputValue: se,
+    state: ue,
+    suffix: ie,
+    clearButton: de,
+    popover: ce,
+    list: T
+  } = ze({
+    isDisabled: !!f,
+    isReadOnly: !!u,
+    isInvalid: !!y,
+    isEmpty: a.size === 0
+  }), fe = h(() => {
+    if (b.length === 0) return c;
+    const t = b.slice(0, m), s = new Set(t);
+    return j(
+      s
+    );
+  }, [m, c, j, b]), g = l(
+    (t) => {
+      p || oe(t), P?.(t);
     },
-    [V]
-  ), {
-    selectedKeys: m,
-    selectKey: E,
-    unselectKey: T
-  } = Ve({
-    selectedKeys: Z(),
-    defaultSelectedKeys: $(),
-    onSelectionChange: ee
-  }), te = i(
-    (e) => {
-      E(a(e));
+    [p, P]
+  ), ye = l(
+    (t) => {
+      g(ve(t));
     },
-    [E]
-  ), re = i(
-    (e) => {
-      T(a(e));
+    [g]
+  ), me = l(() => {
+    g(/* @__PURE__ */ new Set()), N?.();
+  }, [N, g]), pe = l(
+    (t) => {
+      C(t), A?.(t);
     },
-    [T]
-  ), { setSearchQuery: ne, matchingItems: F } = he({
-    items: v(),
-    extractSearchableText: (e) => r ? [""] : [a(n(e))],
-    enabled: S,
-    searchOptions: w
-  }), oe = () => {
-    if (r) return Array.from(m);
-    const e = v();
-    return Array.from(m).map((o) => {
-      const s = e.find(
-        (l) => a(n(l)) === o
-      );
-      return s ? n(s) : b(o);
-    });
-  }, le = () => {
-    if (r)
-      return new Set(
-        Array.from(m).map((s) => b(s))
-      );
-    const e = v(), o = /* @__PURE__ */ new Set();
-    return Array.from(m).forEach((s) => {
-      const l = e.find(
-        (D) => a(n(D)) === s
-      );
-      l && o.add(l);
-    }), o;
-  }, se = () => {
-    if (d)
-      return X(d);
-  }, B = I(oe, [
-    m,
-    r,
-    n,
-    v
-  ]), G = I(le, [
-    m,
-    r,
-    n,
-    v
-  ]), L = I(se, [d]), _ = (e) => {
-    const o = new Set(e), s = new Set(B.map((l) => a(l)));
-    for (const l of o)
-      s.has(l) || te(b(l));
-    for (const l of s)
-      o.has(l) || re(b(l));
-  }, H = i(() => {
-    if (r)
-      return x;
-    if (!c) return null;
-    if (J(c)) {
-      const e = c;
-      return Array.from(e.entries()).map(
-        ([o, s]) => {
-          const l = s.filter(
-            (D) => F.some((ue) => {
-              const ce = n(D), ae = n(ue);
-              return a(ae) === a(ce);
-            })
-          );
-          return p(o, l);
-        }
+    [C, A]
+  ), F = l(() => {
+    if (o)
+      return M.children;
+    if (!n) return null;
+    if (J(n)) {
+      const t = n;
+      return Array.from(t.entries()).map(
+        ([s, V]) => S(s, V)
       );
     }
-    return F.map(
-      (e) => p(e)
+    return Array.from(n).map(
+      (t) => S(t)
     );
-  }, [
-    p,
-    c,
-    F,
-    x,
-    n,
-    r
-  ]), Q = I(() => H(), [H]), k = Y;
-  return S ? /* @__PURE__ */ f(Se, { resetValueOnHide: !0, setValue: ne, children: /* @__PURE__ */ f(
-    q,
+  }, [S, n, o, M.children]), G = h(() => F(), [F]), { contains: be } = Ve(te ?? { sensitivity: "base" });
+  return /* @__PURE__ */ r(
+    Ne,
     {
-      value: B.map(
-        (e) => a(e)
-      ),
-      defaultValue: L,
-      setValue: _,
-      focusLoop: !0,
-      children: /* @__PURE__ */ f(
-        z.Provider,
+      ...re,
+      ref: X,
+      className: ae(),
+      isDisabled: f || u,
+      isInvalid: y,
+      onBlur: _,
+      onChange: ye,
+      onFocus: $,
+      onOpenChange: pe,
+      placeholder: c,
+      selectionMode: "multiple",
+      shouldCloseOnSelect: !1,
+      value: Se(a),
+      defaultValue: xe(R),
+      allowsEmptyCollection: !0,
+      children: /* @__PURE__ */ i(
+        Ee.Provider,
         {
-          value: { isSearchable: S, maxVisibleItems: N, selectedKeys: m },
-          children: /* @__PURE__ */ f(
-            W,
-            {
-              props: t,
-              ref: C,
-              content: Q,
-              typedRenderValue: k,
-              selectedItemsForDisplay: G
-            }
-          )
-        }
-      )
-    }
-  ) }) : /* @__PURE__ */ f(
-    q,
-    {
-      value: B.map(
-        (e) => a(e)
-      ),
-      defaultValue: L,
-      setValue: _,
-      focusLoop: !0,
-      children: /* @__PURE__ */ f(
-        z.Provider,
-        {
-          value: { isSearchable: S, maxVisibleItems: N, selectedKeys: m },
-          children: /* @__PURE__ */ f(
-            W,
-            {
-              props: t,
-              ref: C,
-              content: Q,
-              typedRenderValue: k,
-              selectedItemsForDisplay: G
-            }
-          )
+          value: { isSearchable: B, maxVisibleItems: m, selectedKeys: a },
+          children: [
+            /* @__PURE__ */ i(
+              Ie,
+              {
+                ref: v,
+                className: le(),
+                "data-dd-privacy": "mask",
+                isDisabled: f || u,
+                "aria-invalid": y,
+                "aria-readonly": u,
+                children: [
+                  /* @__PURE__ */ r("span", { className: se(), translate: "no", children: a.size > 0 ? fe : c }),
+                  /* @__PURE__ */ i("span", { className: ue(), children: [
+                    O && /* @__PURE__ */ r(
+                      je,
+                      {
+                        color: "inherit",
+                        size: "small",
+                        label: d.formatMessage({
+                          id: "unity:component:form-field:form-input:spinner:label",
+                          defaultMessage: "Loading"
+                        })
+                      }
+                    ),
+                    y && /* @__PURE__ */ r(
+                      H,
+                      {
+                        src: "WarningCircleOutlined",
+                        color: "content.form.invalid",
+                        alt: d.formatMessage({
+                          id: "unity:component:form-field:form-input:error:alt",
+                          defaultMessage: "Error"
+                        })
+                      }
+                    ),
+                    k > 0 && /* @__PURE__ */ i(Re, { variant: "numeric", children: [
+                      "+",
+                      k
+                    ] }),
+                    L && /* @__PURE__ */ r("span", { className: "uy:w-300 uy:shrink-0", "aria-hidden": !0 })
+                  ] }),
+                  /* @__PURE__ */ r(
+                    H,
+                    {
+                      className: ie(),
+                      src: Z ? "CaretUpOutlined" : "CaretDownOutlined",
+                      role: "presentation"
+                    }
+                  )
+                ]
+              }
+            ),
+            L && /* @__PURE__ */ r(Me.Provider, { value: null, children: /* @__PURE__ */ r(
+              Be,
+              {
+                title: d.formatMessage({
+                  id: "unity:component:common:clear:title",
+                  defaultMessage: "Clear"
+                }),
+                className: de(),
+                icon: "CloseOutlined",
+                onPress: me,
+                asElement: "button"
+              }
+            ) }),
+            /* @__PURE__ */ r(
+              Oe,
+              {
+                ref: Y,
+                offset: 1,
+                containerPadding: 8,
+                className: ce(),
+                children: B ? /* @__PURE__ */ i(Ce, { filter: be, children: [
+                  /* @__PURE__ */ r("div", { className: "uy:m-100", children: /* @__PURE__ */ r(
+                    De,
+                    {
+                      label: d.formatMessage({
+                        id: "unity:component:select:search:label",
+                        defaultMessage: "Search options"
+                      }),
+                      "data-dd-privacy": "mask"
+                    }
+                  ) }),
+                  /* @__PURE__ */ r(Pe, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
+                  /* @__PURE__ */ r(q, { className: T(), children: G })
+                ] }) : /* @__PURE__ */ r(q, { className: T(), children: G })
+              }
+            )
+          ]
         }
       )
     }
   );
-}, Ce = de(
-  be
+}
+const Ge = he(
+  Fe
 );
-Ce.displayName = "MultiSelect";
+Ge.displayName = "MultiSelect";
 export {
-  Ce as MultiSelect
+  Ge as MultiSelect
 };

package/dist/esm/components/multi-select/Multiselect.context.d.ts

@@ -1,7 +1,7 @@
 interface MultiSelectContextType {
     isSearchable?: boolean;
     maxVisibleItems?: number;
-    selectedKeys?: Set<string>;
+    selectedKeys?: Set<string | number>;
 }
 export declare const MultiSelectContext: import('react').Context<MultiSelectContextType>;
 export {};

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.