@payfit/unity-components 1.1.0 → 1.2.0

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

@@ -1,15 +1,15 @@
-import { jsx as u, jsxs as q } from "react/jsx-runtime";
+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 { useComboboxFilter as he } from "./hooks/use-combobox-filter.js";
-import { useMultiSelectionState as ve } from "./hooks/use-multiselection-state.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) {
   return t instanceof Map;
 }
-function Ve(t) {
+function ge(t) {
   return !Object.prototype.hasOwnProperty.call(t, "items");
 }
 function a(t) {
@@ -24,59 +24,59 @@ function Z(t) {
 function Y(t) {
   return new Set(Z(t));
 }
-const $ = (t, g) => {
-  const o = Ve(t), w = (e) => {
+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 n = Object.keys(e)[0];
-    return e[n];
-  }, ee = o ? (e) => Array.from(e).map(String).join(", ") : (e) => Array.from(e).map((n) => w(n)).join(", "), m = t, C = t, c = S(
-    () => o ? void 0 : m.items,
-    [o, m.items]
-  ), r = o ? void 0 : m.getItemValue ?? w, { children: v } = o ? C : m, te = o ? void 0 : m.searchOptions, { children: O } = C, {
+    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, {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children: Pe,
+    children: be,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getItemValue: Ae,
-    value: V,
+    getItemValue: Ke,
+    value: g,
     defaultValue: f,
-    onChange: b,
-    onBlur: M,
-    isDisabled: x,
-    isInvalid: j,
-    isLoading: D,
-    isReadOnly: I,
+    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(() => o || !c ? [] : X(c) ? Array.from(c.values()).flat() : Array.from(c), [c, o]), oe = d(() => {
+  } = t, ne = re ?? ee, y = d(() => n || !c ? [] : X(c) ? Array.from(c.values()).flat() : Array.from(c), [c, n]), oe = d(() => {
     if ("value" in t)
-      return V ? Y(V) : /* @__PURE__ */ new Set();
-  }, [t, V]), se = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), le = d(
+      return g ? Y(g) : /* @__PURE__ */ new Set();
+  }, [t, g]), le = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), ae = d(
     (e) => {
-      if (!b) return;
-      const n = new Set(
+      if (!v) return;
+      const r = new Set(
         Array.from(e).map((l) => p(l))
       );
-      b(n);
+      v(r);
     },
-    [b]
+    [v]
   ), {
-    selectedKeys: i,
+    selectedKeys: u,
     selectKey: L,
     unselectKey: T
-  } = ve({
+  } = Ve({
     selectedKeys: oe(),
-    defaultSelectedKeys: se(),
-    onSelectionChange: le
-  }), ae = d(
+    defaultSelectedKeys: le(),
+    onSelectionChange: ae
+  }), se = d(
     (e) => {
       L(a(e));
     },
@@ -86,78 +86,78 @@ const $ = (t, g) => {
       T(a(e));
     },
     [T]
-  ), { setSearchQuery: ie, matchingItems: K } = he({
+  ), { setSearchQuery: ue, matchingItems: I } = he({
     items: y(),
-    extractSearchableText: (e) => o ? [""] : [
+    extractSearchableText: (e) => n ? [""] : [
       a(
-        (r == null ? void 0 : r(e)) || ""
+        s?.(e) || ""
       )
     ],
     enabled: h,
     searchOptions: te
-  }), ue = () => {
-    if (o) return Array.from(i);
+  }), ie = () => {
+    if (n) return Array.from(u);
     const e = y();
-    return Array.from(i).map((n) => {
+    return Array.from(u).map((r) => {
       const l = e.find(
-        (s) => a(
-          (r == null ? void 0 : r(s)) || ""
-        ) === n
+        (o) => a(
+          s?.(o) || ""
+        ) === r
       );
-      return l && r ? r(l) : p(n);
+      return l && s ? s(l) : p(r);
     });
   }, de = () => {
-    if (o)
+    if (n)
       return new Set(
-        Array.from(i).map((l) => p(l))
+        Array.from(u).map((l) => p(l))
       );
-    const e = y(), n = /* @__PURE__ */ new Set();
-    return Array.from(i).forEach((l) => {
-      const s = e.find(
-        (A) => a(
-          (r == null ? void 0 : r(A)) || ""
+    const e = y(), r = /* @__PURE__ */ new Set();
+    return Array.from(u).forEach((l) => {
+      const o = e.find(
+        (K) => a(
+          s?.(K) || ""
         ) === l
       );
-      s && n.add(s);
-    }), n;
+      o && r.add(o);
+    }), r;
   }, fe = () => {
     if (f)
       return Z(f);
-  }, P = S(ue, [
-    i,
-    o,
-    r,
+  }, b = S(ie, [
+    u,
+    n,
+    s,
     y
   ]), _ = S(de, [
-    i,
-    o,
-    r,
+    u,
+    n,
+    s,
     y
   ]), G = S(fe, [f]), k = (e) => {
-    const n = new Set(e), l = new Set(
-      P.map((s) => a(s))
+    const r = new Set(e), l = new Set(
+      b.map((o) => a(o))
     );
-    for (const s of n)
-      l.has(s) || ae(p(s));
-    for (const s of l)
-      n.has(s) || ce(p(s));
-  }, E = d(() => o ? O : c ? X(c) ? Array.from(c.entries()).map(([e, n]) => {
-    const l = n.filter(
-      (s) => K.some((A) => {
-        const me = (r == null ? void 0 : r(s)) || "", ye = (r == null ? void 0 : r(A)) || "";
+    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);
       })
     );
-    return v(e, l);
-  }) : K.map(
-    (e) => v(
+    return V(e, l);
+  }) : I.map(
+    (e) => V(
       e
     )
-  ) : null, [v, c, K, O, r, o]), H = S(() => E(), [E]), Q = ne;
-  return h ? /* @__PURE__ */ u(pe, { resetValueOnHide: !0, setValue: ie, children: /* @__PURE__ */ u(
+  ) : 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,
     {
-      value: P.map(
+      value: b.map(
         (e) => a(e)
       ),
       defaultValue: G,
@@ -166,32 +166,32 @@ const $ = (t, g) => {
       children: /* @__PURE__ */ q(
         J.Provider,
         {
-          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: i },
+          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: u },
           children: [
-            /* @__PURE__ */ u(
+            /* @__PURE__ */ i(
               U,
               {
-                ref: g,
+                ref: P,
                 placeholder: R,
-                isDisabled: x,
-                isReadOnly: I,
-                isLoading: D,
-                isInvalid: j,
+                isDisabled: M,
+                isReadOnly: D,
+                isLoading: j,
+                isInvalid: x,
                 renderValue: Q,
                 selectedItems: _,
                 onClearButtonPress: F,
                 ...B
               }
             ),
-            /* @__PURE__ */ u(W, { onBlur: M, children: H })
+            /* @__PURE__ */ i(W, { onBlur: O, children: H })
           ]
         }
       )
     }
-  ) }) : /* @__PURE__ */ u(
+  ) }) : /* @__PURE__ */ i(
     z,
     {
-      value: P.map(
+      value: b.map(
         (e) => a(e)
       ),
       defaultValue: G,
@@ -200,24 +200,24 @@ const $ = (t, g) => {
       children: /* @__PURE__ */ q(
         J.Provider,
         {
-          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: i },
+          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: u },
           children: [
-            /* @__PURE__ */ u(
+            /* @__PURE__ */ i(
               U,
               {
-                ref: g,
+                ref: P,
                 placeholder: R,
-                isDisabled: x,
-                isReadOnly: I,
-                isLoading: D,
-                isInvalid: j,
+                isDisabled: M,
+                isReadOnly: D,
+                isLoading: j,
+                isInvalid: x,
                 renderValue: Q,
                 selectedItems: _,
                 onClearButtonPress: F,
                 ...B
               }
             ),
-            /* @__PURE__ */ u(W, { onBlur: M, children: H })
+            /* @__PURE__ */ i(W, { onBlur: O, children: H })
           ]
         }
       )
@@ -225,9 +225,9 @@ const $ = (t, g) => {
   );
 };
 $.displayName = "MultiSelect";
-const Ie = Se(
+const De = Se(
   $
 );
 export {
-  Ie as MultiSelect
+  De as MultiSelect
 };

package/dist/esm/components/multi-select/hooks/use-multiselection-state.js

@@ -1,47 +1,47 @@
-import { useState as l } from "react";
-function I({
-  selectedKeys: w,
-  defaultSelectedKeys: y,
-  onSelectionChange: t
+import { useState as w } from "react";
+function a({
+  selectedKeys: c,
+  defaultSelectedKeys: K,
+  onSelectionChange: d
 }) {
-  const [f, u] = l(
-    () => y ?? /* @__PURE__ */ new Set()
-  ), K = w !== void 0, r = K ? w : f;
+  const [u, r] = w(
+    () => K ?? /* @__PURE__ */ new Set()
+  ), n = c !== void 0, l = n ? c : u;
   return {
-    selectedKeys: r,
-    isSelected: (e) => r.has(e),
-    selectKey: (e) => {
-      if (K && t) {
-        const s = new Set(r);
-        s.add(e), t(s);
+    selectedKeys: l,
+    isSelected: (t) => l.has(t),
+    selectKey: (t) => {
+      if (n && d) {
+        const e = new Set(l);
+        e.add(t), d(e);
       } else
-        u((s) => {
-          const d = new Set(s);
-          return d.add(e), t == null || t(d), d;
+        r((e) => {
+          const s = new Set(e);
+          return s.add(t), d?.(s), s;
         });
     },
-    unselectKey: (e) => {
-      if (K && t) {
-        const s = new Set(r);
-        s.delete(e), t(s);
+    unselectKey: (t) => {
+      if (n && d) {
+        const e = new Set(l);
+        e.delete(t), d(e);
       } else
-        u((s) => {
-          const d = new Set(s);
-          return d.delete(e), t == null || t(d), d;
+        r((e) => {
+          const s = new Set(e);
+          return s.delete(t), d?.(s), s;
         });
     },
-    toggleKey: (e) => {
-      if (K && t) {
-        const s = new Set(r);
-        s.has(e) ? s.delete(e) : s.add(e), t(s);
+    toggleKey: (t) => {
+      if (n && d) {
+        const e = new Set(l);
+        e.has(t) ? e.delete(t) : e.add(t), d(e);
       } else
-        u((s) => {
-          const d = new Set(s);
-          return d.has(e) ? d.delete(e) : d.add(e), t == null || t(d), d;
+        r((e) => {
+          const s = new Set(e);
+          return s.has(t) ? s.delete(t) : s.add(t), d?.(s), s;
         });
     }
   };
 }
 export {
-  I as useMultiSelectionState
+  a as useMultiSelectionState
 };

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

@@ -1,15 +1,15 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { memo as j, forwardRef as E, useContext as k, useMemo as A } from "react";
 import { useSelectContext as D, useStoreState as K, Select as $ } from "@ariakit/react";
 import { uyTv as L } from "@payfit/unity-themes";
-import { useId as R } from "react-aria";
-import { useIntl as T } from "react-intl";
-import { Badge as U } from "../../badge/Badge.js";
-import { CircularIconButton as W } from "../../icon-button/CircularIconButton.js";
-import { Icon as p } from "../../icon/Icon.js";
-import { Spinner as q } from "../../spinner/Spinner.js";
-import { MultiSelectContext as F } from "../Multiselect.context.js";
-const G = L({
+import { useId as P } from "react-aria";
+import { useIntl as R } from "react-intl";
+import { Badge as T } from "../../badge/Badge.js";
+import { CircularIconButton as U } from "../../icon-button/CircularIconButton.js";
+import { Icon as b } from "../../icon/Icon.js";
+import { Spinner as W } from "../../spinner/Spinner.js";
+import { MultiSelectContext as q } from "../Multiselect.context.js";
+const F = L({
   slots: {
     base: "uy:h-500 uy:flex uy:items-center uy:justify-between uy:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
     inputValue: "uy:flex-1 uy:typography-body uy:text-content-form-enabled uy:text-left uy:line-clamp-1",
@@ -61,46 +61,46 @@ const G = L({
     }
   ]
 });
-function H({
+function G({
   isDisabled: r,
   isReadOnly: t,
-  isLoading: d,
+  isLoading: c,
   isInvalid: n,
   placeholder: u,
-  selectedItems: g,
-  renderValue: m,
-  onClearButtonPress: i,
+  selectedItems: x,
+  renderValue: d,
+  onClearButtonPress: g,
   ...w
 }, h) {
-  const f = R(), s = T(), S = D(), M = K(S, "open"), y = k(F), a = y.maxVisibleItems ?? 0, l = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(g), { base: v, inputValue: I, state: C, suffix: V } = G({
+  const m = P(), s = R(), S = D(), C = K(S, "open"), f = k(q), a = f.maxVisibleItems ?? 0, l = f.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(x), { base: M, inputValue: v, state: I, suffix: B } = F({
     isDisabled: !!r,
     isReadOnly: !!t,
     isInvalid: !!n,
     isEmpty: l.size === 0
-  }), b = Math.max(
+  }), y = Math.max(
     o.length - a,
     0
-  ), N = l.size > 0 && !r && !t && !d, B = A(() => {
+  ), V = l.size > 0 && !r && !t && !c, N = A(() => {
     if (o.length === 0) return u;
     const O = o.slice(0, a), z = new Set(O);
-    return m(z);
-  }, [o, a, m, u]);
-  return /* @__PURE__ */ c(
+    return d(z);
+  }, [o, a, d, u]);
+  return /* @__PURE__ */ i(
     $,
     {
       ...w,
       ref: h,
-      className: v(),
+      className: M(),
       disabled: r || t,
       "aria-invalid": n,
       "aria-readonly": t,
-      "aria-labelledby": `${f}-select-button-label`,
+      "aria-labelledby": `${m}-select-button-label`,
       "data-dd-privacy": "mask",
       children: [
-        /* @__PURE__ */ e("span", { id: `${f}-select-button-label`, className: I(), children: l.size > 0 ? B : u }),
-        /* @__PURE__ */ c("div", { className: C(), children: [
-          d && /* @__PURE__ */ e(
-            q,
+        /* @__PURE__ */ e("span", { id: `${m}-select-button-label`, className: v(), children: l.size > 0 ? N : u }),
+        /* @__PURE__ */ i("div", { className: I(), children: [
+          c && /* @__PURE__ */ e(
+            W,
             {
               color: "inherit",
               size: "small",
@@ -111,7 +111,7 @@ function H({
             }
           ),
           n && /* @__PURE__ */ e(
-            p,
+            b,
             {
               src: "WarningCircleOutlined",
               color: "content.form.invalid",
@@ -121,12 +121,12 @@ function H({
               })
             }
           ),
-          b > 0 && /* @__PURE__ */ c(U, { variant: "numeric", children: [
+          y > 0 && /* @__PURE__ */ i(T, { variant: "numeric", children: [
             "+",
-            b
+            y
           ] }),
-          N && /* @__PURE__ */ e(
-            W,
+          V && /* @__PURE__ */ e(
+            U,
             {
               title: s.formatMessage({
                 id: "unity:component:common:clear:title",
@@ -135,17 +135,17 @@ function H({
               className: "uy:text-content-neutral-enabled",
               icon: "CloseOutlined",
               onPress: () => {
-                i == null || i();
+                g?.();
               }
             }
           )
         ] }),
         /* @__PURE__ */ e(
-          p,
+          b,
           {
             color: "content.neutral.low",
-            className: V(),
-            src: M ? "CaretUpOutlined" : "CaretDownOutlined",
+            className: B(),
+            src: C ? "CaretUpOutlined" : "CaretDownOutlined",
             role: "presentation"
           }
         )
@@ -153,9 +153,9 @@ function H({
     }
   );
 }
-const x = j(E(H));
-x.displayName = "MultiselectButton";
-const ne = x;
+const p = j(E(G));
+p.displayName = "MultiselectButton";
+const ne = p;
 export {
   ne as MultiSelectButton
 };

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

@@ -1,15 +1,15 @@
-import { jsx as e, jsxs as r, Fragment as m } from "react/jsx-runtime";
+import { jsx as e, jsxs as o, Fragment as m } from "react/jsx-runtime";
 import { memo as b, useContext as f } from "react";
 import { SelectPopover as h, Combobox as v, ComboboxList as x } from "@ariakit/react";
-import { uyTv as i } from "@payfit/unity-themes";
+import { uyTv as t } from "@payfit/unity-themes";
 import { Icon as g } from "../../icon/Icon.js";
 import { MultiSelectContext as w } from "../Multiselect.context.js";
-const S = i({
+const S = t({
   slots: {
     base: "uy:shadow-floating uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-full uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-auto uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
     list: "uy:p-100"
   }
-}), N = i({
+}), N = t({
   slots: {
     wrapper: "uy:sticky uy:top-0 uy:bg-surface-neutral uy:pt-100 uy:px-100",
     base: "uy:flex uy:w-full uy:gap-100 uy:h-500 uy:border uy:border-solid uy:rounded-75 uy:py-100 uy:border-border-form-enabled uy:bg-surface-form-enabled uy:px-150 uy:typography-body uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
@@ -18,22 +18,22 @@ const S = i({
   }
 });
 function C({
-  children: t,
-  ...s
+  children: r,
+  ...l
 }) {
-  const l = f(w), { base: n, list: u } = S(), { base: a, input: y, wrapper: c, divider: d } = N(), { onBlur: o, ...p } = s;
+  const i = f(w), { base: s, list: u } = S(), { base: n, input: a, wrapper: y, divider: c } = N(), { onBlur: d, ...p } = l;
   return /* @__PURE__ */ e(
     h,
     {
       portal: !0,
       sameWidth: !0,
       unmountOnHide: !0,
-      className: n(),
-      onClose: () => o == null ? void 0 : o(),
+      className: s(),
+      onClose: () => d?.(),
       ...p,
-      children: l.isSearchable ? /* @__PURE__ */ r(m, { children: [
-        /* @__PURE__ */ r("div", { className: c(), children: [
-          /* @__PURE__ */ r("div", { className: a(), children: [
+      children: i.isSearchable ? /* @__PURE__ */ o(m, { children: [
+        /* @__PURE__ */ o("div", { className: y(), children: [
+          /* @__PURE__ */ o("div", { className: n(), children: [
             /* @__PURE__ */ e(
               g,
               {
@@ -47,14 +47,14 @@ function C({
               {
                 autoSelect: !0,
                 placeholder: "Search...",
-                className: y()
+                className: a()
               }
             )
           ] }),
-          /* @__PURE__ */ e("hr", { className: d() })
+          /* @__PURE__ */ e("hr", { className: c() })
         ] }),
-        /* @__PURE__ */ e(x, { className: u(), children: t })
-      ] }) : /* @__PURE__ */ e("div", { className: u(), children: t })
+        /* @__PURE__ */ e(x, { className: u(), children: r })
+      ] }) : /* @__PURE__ */ e("div", { className: u(), children: r })
     }
   );
 }

package/dist/esm/components/multi-select-field/MultiSelectField.d.ts

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { LabelProps } from '../label/Label.js';
 import { MultiSelectProps } from '../multi-select/Multiselect.types.js';
@@ -51,7 +51,7 @@ export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues
  * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-multiselectfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
  */
 export declare const MultiSelectField: {
-    <TSchema extends Schema, TItem = unknown>(props: MultiSelectFieldProps<ZodInfer<TSchema>, FieldPath<ZodInfer<TSchema>>, TItem, keyof TItem, TItem[keyof TItem] & Key> & {
+    <TSchema extends Schema, TItem = unknown>(props: MultiSelectFieldProps<StandardSchemaV1.InferOutput<TSchema>, FieldPath<StandardSchemaV1.InferOutput<TSchema>>, TItem, keyof TItem, TItem[keyof TItem] & Key> & {
         ref?: ForwardedRef<HTMLButtonElement>;
     }): React.JSX.Element;
     displayName?: string;