@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/menu/parts/{MenuItem.d.ts → RawMenuItem.d.ts}

@@ -1,15 +1,14 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { MenuItemProps as MenuItemAriaComponentProps } from 'react-aria-components';
 import { DataAttributes } from '../../../types/DataAttributes.js';
-interface MenuItemProps extends DataAttributes {
+export interface MenuItemProps extends DataAttributes {
     children?: MenuItemAriaComponentProps['children'];
     href?: MenuItemAriaComponentProps['href'];
     onAction?: MenuItemAriaComponentProps['onAction'];
     prefix?: ReactNode;
     className?: string;
 }
-export declare function MenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuItem {
+export declare function RawMenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace RawMenuItem {
     var displayName: string;
 }
-export {};

package/dist/esm/components/menu/parts/{MenuItem.js → RawMenuItem.js}

@@ -1,4 +1,4 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
 import { uyMerge as y } from "@payfit/unity-themes";
 import { MenuItem as i } from "react-aria-components";
 function l({
@@ -6,27 +6,27 @@ function l({
   children: u,
   href: t,
   onAction: r,
-  className: n,
-  ...a
+  className: a,
+  ...n
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     i,
     {
       href: t,
       onAction: r,
       className: y(
         "uy:cursor-pointer uy:flex uy:p-100 uy:items-start uy:gap-100 uy:rounded-25 uy:typography-body uy:text-content-neutral uy:hover:bg-surface-neutral-hover uy:data-[pressed]:bg-surface-neutral-pressed uy:focus-visible:outline-utility-focus-ring uy:active:bg-surface-neutral-active",
-        n
+        a
       ),
-      ...a,
+      ...n,
       children: [
-        /* @__PURE__ */ o("div", { className: "uy:text-content-neutral-low", children: e || null }),
+        /* @__PURE__ */ s("div", { className: "uy:text-content-neutral-low", children: e || null }),
         u
       ]
     }
   );
 }
-l.displayName = "MenuItem";
+l.displayName = "RawMenuItem";
 export {
-  l as MenuItem
+  l as RawMenuItem
 };

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

@@ -1,5 +1,4 @@
-import { MultiSelectComponent, MultiSelectProps } from './Multiselect.types.js';
-declare const MultiSelectComponent: <TItem extends Record<string | number, unknown>, TItemKey extends keyof TItem, TKeyType extends TItem[TItemKey] & (string | number)>(props: MultiSelectProps<TItem, TItemKey, TKeyType>, ref: React.ForwardedRef<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+import { MultiSelectComponent } from './MultiselectTypes.js';
 /**
  * The MultiSelect component allows users to select multiple items from a dropdown list.
  * The component provides two different APIs:
@@ -52,11 +51,10 @@ declare const MultiSelectComponent: <TItem extends Record<string | number, unkno
  * </MultiSelect>
  * ```
  * @component
- * @template TItem - The type of items in the collection. When using the dynamic API, it must be a Record or an object. For the static API, it defaults to a string or number.
- * @template TItemKey - The key name within TItem used as the selection value (must be a key of TItem). Applies only to the dynamic API.
- * @template TKeyType - The type of the property at TItem[TItemKey] (must be string or number). Applies only to the dynamic API.
+ * @template TItems - The type of the items collection. Use `Set<T>` for flat lists or `Map<string, T[]>` for grouped lists. When omitted or undefined, the component uses the static API with React children.
  * @remarks
  * [API & Docs](https://unity-components.payfit.io/?path=/docs/inputs-multiselect--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
  */
-export declare const MultiSelect: MultiSelectComponent;
-export {};
+export declare const MultiSelect: MultiSelectComponent & {
+    displayName: string;
+};

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

@@ -1,233 +1,256 @@
-import { jsx as i, jsxs as q } from "react/jsx-runtime";
-import { forwardRef as Se, useMemo as S, useCallback as d } from "react";
-import { ComboboxProvider as pe, SelectProvider as z } from "@ariakit/react";
+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 J } from "./Multiselect.context.js";
-import { MultiSelectButton as U } from "./parts/MultiSelectButton.js";
-import { MultiSelectPopover as W } from "./parts/MultiSelectPopover.js";
-function X(t) {
+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 ge(t) {
+function Ie(t) {
   return !Object.prototype.hasOwnProperty.call(t, "items");
 }
 function a(t) {
   return String(t);
 }
-function p(t) {
+function b(t) {
   return isNaN(Number(t)) ? t : Number(t);
 }
-function Z(t) {
+function X(t) {
   return Array.from(t, a);
 }
-function Y(t) {
-  return new Set(Z(t));
+function U(t) {
+  return new Set(X(t));
 }
-const $ = (t, P) => {
-  const n = ge(t), A = (e) => {
-    if (Object.hasOwnProperty.call(e, "value"))
-      return e.value;
-    if (Object.prototype.hasOwnProperty.call(e, "id"))
-      return e.id;
-    if (typeof e == "string")
-      return e;
-    const r = Object.keys(e)[0];
-    return e[r];
-  }, ee = n ? (e) => Array.from(e).map(String).join(", ") : (e) => Array.from(e).map((r) => A(r)).join(", "), m = t, w = t, c = S(
-    () => n ? void 0 : m.items,
-    [n, m.items]
-  ), s = n ? void 0 : m.getItemValue ?? A, { children: V } = n ? w : m, te = n ? void 0 : m.searchOptions, { children: C } = w, {
+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 })
+  ] });
+}
+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: be,
+    children: R,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getItemValue: Ke,
-    value: g,
-    defaultValue: f,
-    onChange: v,
-    onBlur: O,
-    isDisabled: M,
-    isInvalid: x,
-    isLoading: j,
-    isReadOnly: D,
-    isSearchable: h,
-    placeholder: R,
-    onClearButtonPress: F,
-    renderValue: re,
-    maxVisibleItems: N = 7,
-    ...B
-  } = t, ne = re ?? ee, y = d(() => n || !c ? [] : X(c) ? Array.from(c.values()).flat() : Array.from(c), [c, n]), oe = d(() => {
+    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 g ? Y(g) : /* @__PURE__ */ new Set();
-  }, [t, g]), le = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), ae = d(
+      return h ? U(h) : /* @__PURE__ */ new Set();
+  }, [t, h]), $ = i(() => d ? U(d) : /* @__PURE__ */ new Set(), [d]), ee = i(
     (e) => {
-      if (!v) return;
-      const r = new Set(
-        Array.from(e).map((l) => p(l))
+      if (!V) return;
+      const o = new Set(
+        Array.from(e).map((s) => b(s))
       );
-      v(r);
+      V(o);
     },
-    [v]
+    [V]
   ), {
-    selectedKeys: u,
-    selectKey: L,
+    selectedKeys: m,
+    selectKey: E,
     unselectKey: T
   } = Ve({
-    selectedKeys: oe(),
-    defaultSelectedKeys: le(),
-    onSelectionChange: ae
-  }), se = d(
+    selectedKeys: Z(),
+    defaultSelectedKeys: $(),
+    onSelectionChange: ee
+  }), te = i(
     (e) => {
-      L(a(e));
+      E(a(e));
     },
-    [L]
-  ), ce = d(
+    [E]
+  ), re = i(
     (e) => {
       T(a(e));
     },
     [T]
-  ), { setSearchQuery: ue, matchingItems: I } = he({
-    items: y(),
-    extractSearchableText: (e) => n ? [""] : [
-      a(
-        s?.(e) || ""
-      )
-    ],
-    enabled: h,
-    searchOptions: te
-  }), ie = () => {
-    if (n) return Array.from(u);
-    const e = y();
-    return Array.from(u).map((r) => {
-      const l = e.find(
-        (o) => a(
-          s?.(o) || ""
-        ) === r
+  ), { 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 l && s ? s(l) : p(r);
+      return s ? n(s) : b(o);
     });
-  }, de = () => {
-    if (n)
+  }, le = () => {
+    if (r)
       return new Set(
-        Array.from(u).map((l) => p(l))
+        Array.from(m).map((s) => b(s))
       );
-    const e = y(), r = /* @__PURE__ */ new Set();
-    return Array.from(u).forEach((l) => {
-      const o = e.find(
-        (K) => a(
-          s?.(K) || ""
-        ) === l
+    const e = v(), o = /* @__PURE__ */ new Set();
+    return Array.from(m).forEach((s) => {
+      const l = e.find(
+        (D) => a(n(D)) === s
       );
-      o && r.add(o);
-    }), r;
-  }, fe = () => {
-    if (f)
-      return Z(f);
-  }, b = S(ie, [
-    u,
+      l && o.add(l);
+    }), o;
+  }, se = () => {
+    if (d)
+      return X(d);
+  }, B = I(oe, [
+    m,
+    r,
     n,
-    s,
-    y
-  ]), _ = S(de, [
-    u,
+    v
+  ]), G = I(le, [
+    m,
+    r,
     n,
-    s,
-    y
-  ]), G = S(fe, [f]), k = (e) => {
-    const r = new Set(e), l = new Set(
-      b.map((o) => a(o))
-    );
-    for (const o of r)
-      l.has(o) || se(p(o));
-    for (const o of l)
-      r.has(o) || ce(p(o));
-  }, E = d(() => n ? C : c ? X(c) ? Array.from(c.entries()).map(([e, r]) => {
-    const l = r.filter(
-      (o) => I.some((K) => {
-        const me = s?.(o) || "", ye = s?.(K) || "";
-        return a(ye) === a(me);
-      })
+    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);
+        }
+      );
+    }
+    return F.map(
+      (e) => p(e)
     );
-    return V(e, l);
-  }) : I.map(
-    (e) => V(
-      e
-    )
-  ) : null, [V, c, I, C, s, n]), H = S(() => E(), [E]), Q = ne;
-  return h ? /* @__PURE__ */ i(pe, { resetValueOnHide: !0, setValue: ue, children: /* @__PURE__ */ i(
-    z,
+  }, [
+    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,
     {
-      value: b.map(
+      value: B.map(
         (e) => a(e)
       ),
-      defaultValue: G,
-      setValue: k,
+      defaultValue: L,
+      setValue: _,
       focusLoop: !0,
-      children: /* @__PURE__ */ q(
-        J.Provider,
+      children: /* @__PURE__ */ f(
+        z.Provider,
         {
-          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: u },
-          children: [
-            /* @__PURE__ */ i(
-              U,
-              {
-                ref: P,
-                placeholder: R,
-                isDisabled: M,
-                isReadOnly: D,
-                isLoading: j,
-                isInvalid: x,
-                renderValue: Q,
-                selectedItems: _,
-                onClearButtonPress: F,
-                ...B
-              }
-            ),
-            /* @__PURE__ */ i(W, { onBlur: O, children: H })
-          ]
+          value: { isSearchable: S, maxVisibleItems: N, selectedKeys: m },
+          children: /* @__PURE__ */ f(
+            W,
+            {
+              props: t,
+              ref: C,
+              content: Q,
+              typedRenderValue: k,
+              selectedItemsForDisplay: G
+            }
+          )
         }
       )
     }
-  ) }) : /* @__PURE__ */ i(
-    z,
+  ) }) : /* @__PURE__ */ f(
+    q,
     {
-      value: b.map(
+      value: B.map(
         (e) => a(e)
       ),
-      defaultValue: G,
-      setValue: k,
+      defaultValue: L,
+      setValue: _,
       focusLoop: !0,
-      children: /* @__PURE__ */ q(
-        J.Provider,
+      children: /* @__PURE__ */ f(
+        z.Provider,
         {
-          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: u },
-          children: [
-            /* @__PURE__ */ i(
-              U,
-              {
-                ref: P,
-                placeholder: R,
-                isDisabled: M,
-                isReadOnly: D,
-                isLoading: j,
-                isInvalid: x,
-                renderValue: Q,
-                selectedItems: _,
-                onClearButtonPress: F,
-                ...B
-              }
-            ),
-            /* @__PURE__ */ i(W, { onBlur: O, children: H })
-          ]
+          value: { isSearchable: S, maxVisibleItems: N, selectedKeys: m },
+          children: /* @__PURE__ */ f(
+            W,
+            {
+              props: t,
+              ref: C,
+              content: Q,
+              typedRenderValue: k,
+              selectedItemsForDisplay: G
+            }
+          )
         }
       )
     }
   );
-};
-$.displayName = "MultiSelect";
-const De = Se(
-  $
+}, Ce = de(
+  be
 );
+Ce.displayName = "MultiSelect";
 export {
-  De as MultiSelect
+  Ce as MultiSelect
 };

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

@@ -0,0 +1,114 @@
+import { UseComboboxFilterProps } from './hooks/use-combobox-filter.js';
+type Key = string | number;
+/**
+ * Common props shared by all MultiSelect variants.
+ */
+export interface MultiSelectBaseProps {
+    /** The ID of the element */
+    id?: string;
+    /** Default content when no value is selected */
+    placeholder?: string;
+    /** Whether the select is searchable and shows a search input on top of the options */
+    isSearchable?: boolean;
+    /** Whether the select is disabled */
+    isDisabled?: boolean;
+    /** Whether the select is invalid */
+    isInvalid?: boolean;
+    /** Whether the select is read only */
+    isReadOnly?: boolean;
+    /** Whether the select is in a loading state */
+    isLoading?: boolean;
+    /** Callback when the clear button is pressed */
+    onClearButtonPress?: () => void;
+    /** Maximum number of items to show in the select button before showing a counter badge */
+    maxVisibleItems?: number;
+    /** Callback when the select is focused */
+    onFocus?: () => void;
+    /** Callback when the select is blurred */
+    onBlur?: () => 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 */
+    'aria-label'?: string;
+}
+/**
+ * Props for flat (non-grouped) dynamic items MultiSelect.
+ * @template TItems The type of set of items.
+ */
+export interface FlatSelectProps<TItems extends Set<unknown>> extends MultiSelectBaseProps {
+    /** The items to display in the select */
+    items: TItems;
+    /** Function to get the value from an item, defaults to String(item) */ getItemValue?: (item: TItems extends Set<infer U> ? U : never) => Key;
+    /** The currently selected values (controlled mode) */
+    value?: Set<Key>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<Key>;
+    /** Callback when the selection changes */
+    onChange?: (value: Set<Key>) => void;
+    /** Function to render the selected value(s) in the button */
+    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'];
+}
+/**
+ * Props for grouped dynamic items MultiSelect.
+ * @template TItems The type of map from group key to array of items.
+ */
+export interface GroupedSelectProps<TItems extends Map<string, unknown[]>> extends MultiSelectBaseProps {
+    /** The items to display in the select, grouped by category */
+    items: TItems;
+    /** Function to get the value from an item, defaults to String(item) */
+    getItemValue?: (item: TItems extends Map<string, Array<infer U>> ? U : never) => Key;
+    /** The currently selected values (controlled mode) */
+    value?: Set<Key>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<Key>;
+    /** Callback when the selection changes */
+    onChange?: (value: Set<Key>) => void;
+    /** Function to render the selected value(s) in the button */
+    renderValue?: (value: Set<TItems extends Map<string, Array<infer U>> ? U : never>) => string;
+    /** 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'];
+}
+/**
+ * Props for static MultiSelect API (all items are defined via React children).
+ */
+export interface StaticItemsProps<TItem = Key> extends MultiSelectBaseProps {
+    /** The items to display in the select (for dynamic API) */
+    items?: never;
+    /** Function to get the value from an item, defaults to String(item) */
+    getItemValue?: never;
+    /** The currently selected values (controlled mode) */
+    value?: Set<TItem>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<TItem>;
+    /** Callback when the selection changes */
+    onChange?: (value: Set<TItem>) => void;
+    /** Function to render the selected value(s) in the button */
+    renderValue?: (value: Set<TItem>) => string;
+    /** Children must be Option components */
+    children: React.ReactNode;
+    /** Options for filtering the items */
+    searchOptions?: UseComboboxFilterProps<TItem>['searchOptions'];
+}
+/**
+ * Helper type to simplify usage for dynamic MultiSelect props.
+ * Picks flat or grouped variant depending on items type.
+ */
+export type DynamicMultiSelectProps<TItems = Set<unknown> | Map<string, unknown[]>> = TItems extends Set<unknown> ? FlatSelectProps<TItems> : TItems extends Map<string, unknown[]> ? GroupedSelectProps<TItems> : never;
+/**
+ * Top-level MultiSelect props type, picks static or dynamic variant as appropriate.
+ */
+export type MultiSelectProps<TItems = Set<unknown> | Map<string, unknown[]> | undefined> = TItems extends undefined ? StaticItemsProps : DynamicMultiSelectProps<TItems>;
+/**
+ * MultiSelect component type signature.
+ */
+export type MultiSelectComponent = <TItems = undefined>(props: MultiSelectProps<TItems> & {
+    ref?: React.ForwardedRef<HTMLButtonElement>;
+} & {
+    displayName?: string;
+}) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { MultiSelectComponent, MultiSelectProps } from './MultiselectTypes.js';
+export type TanstackMultiSelectProps<TItems = undefined> = Omit<MultiSelectProps<TItems>, 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'isInvalid'> & {
+    children?: MultiSelectProps<TItems>['children'];
+};
+export declare const TanstackMultiSelect: MultiSelectComponent & {
+    displayName: string;
+};