@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,233 @@
+import { jsx as u, 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 { 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) {
+  return !Object.prototype.hasOwnProperty.call(t, "items");
+}
+function a(t) {
+  return String(t);
+}
+function p(t) {
+  return isNaN(Number(t)) ? t : Number(t);
+}
+function Z(t) {
+  return Array.from(t, a);
+}
+function Y(t) {
+  return new Set(Z(t));
+}
+const $ = (t, g) => {
+  const o = Ve(t), w = (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, {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    children: Pe,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getItemValue: Ae,
+    value: V,
+    defaultValue: f,
+    onChange: b,
+    onBlur: M,
+    isDisabled: x,
+    isInvalid: j,
+    isLoading: D,
+    isReadOnly: I,
+    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(() => {
+    if ("value" in t)
+      return V ? Y(V) : /* @__PURE__ */ new Set();
+  }, [t, V]), se = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), le = d(
+    (e) => {
+      if (!b) return;
+      const n = new Set(
+        Array.from(e).map((l) => p(l))
+      );
+      b(n);
+    },
+    [b]
+  ), {
+    selectedKeys: i,
+    selectKey: L,
+    unselectKey: T
+  } = ve({
+    selectedKeys: oe(),
+    defaultSelectedKeys: se(),
+    onSelectionChange: le
+  }), ae = d(
+    (e) => {
+      L(a(e));
+    },
+    [L]
+  ), ce = d(
+    (e) => {
+      T(a(e));
+    },
+    [T]
+  ), { setSearchQuery: ie, matchingItems: K } = he({
+    items: y(),
+    extractSearchableText: (e) => o ? [""] : [
+      a(
+        (r == null ? void 0 : r(e)) || ""
+      )
+    ],
+    enabled: h,
+    searchOptions: te
+  }), ue = () => {
+    if (o) return Array.from(i);
+    const e = y();
+    return Array.from(i).map((n) => {
+      const l = e.find(
+        (s) => a(
+          (r == null ? void 0 : r(s)) || ""
+        ) === n
+      );
+      return l && r ? r(l) : p(n);
+    });
+  }, de = () => {
+    if (o)
+      return new Set(
+        Array.from(i).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)) || ""
+        ) === l
+      );
+      s && n.add(s);
+    }), n;
+  }, fe = () => {
+    if (f)
+      return Z(f);
+  }, P = S(ue, [
+    i,
+    o,
+    r,
+    y
+  ]), _ = S(de, [
+    i,
+    o,
+    r,
+    y
+  ]), G = S(fe, [f]), k = (e) => {
+    const n = new Set(e), l = new Set(
+      P.map((s) => a(s))
+    );
+    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)) || "";
+        return a(ye) === a(me);
+      })
+    );
+    return v(e, l);
+  }) : K.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(
+    z,
+    {
+      value: P.map(
+        (e) => a(e)
+      ),
+      defaultValue: G,
+      setValue: k,
+      focusLoop: !0,
+      children: /* @__PURE__ */ q(
+        J.Provider,
+        {
+          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: i },
+          children: [
+            /* @__PURE__ */ u(
+              U,
+              {
+                ref: g,
+                placeholder: R,
+                isDisabled: x,
+                isReadOnly: I,
+                isLoading: D,
+                isInvalid: j,
+                renderValue: Q,
+                selectedItems: _,
+                onClearButtonPress: F,
+                ...B
+              }
+            ),
+            /* @__PURE__ */ u(W, { onBlur: M, children: H })
+          ]
+        }
+      )
+    }
+  ) }) : /* @__PURE__ */ u(
+    z,
+    {
+      value: P.map(
+        (e) => a(e)
+      ),
+      defaultValue: G,
+      setValue: k,
+      focusLoop: !0,
+      children: /* @__PURE__ */ q(
+        J.Provider,
+        {
+          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: i },
+          children: [
+            /* @__PURE__ */ u(
+              U,
+              {
+                ref: g,
+                placeholder: R,
+                isDisabled: x,
+                isReadOnly: I,
+                isLoading: D,
+                isInvalid: j,
+                renderValue: Q,
+                selectedItems: _,
+                onClearButtonPress: F,
+                ...B
+              }
+            ),
+            /* @__PURE__ */ u(W, { onBlur: M, children: H })
+          ]
+        }
+      )
+    }
+  );
+};
+$.displayName = "MultiSelect";
+const Ie = Se(
+  $
+);
+export {
+  Ie as MultiSelect
+};

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

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

package/dist/esm/components/multi-select/Multiselect.context.js

@@ -0,0 +1,8 @@
+import { createContext as e } from "react";
+const o = e({
+  isSearchable: !1,
+  selectedKeys: /* @__PURE__ */ new Set()
+});
+export {
+  o as MultiSelectContext
+};

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

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+import { UseComboboxFilterProps } from './hooks/use-combobox-filter.js';
+type Key = string | number;
+export interface MultiSelectBaseProps {
+    /** 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;
+}
+export interface FlatSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> extends MultiSelectBaseProps {
+    /** The items to display in the select */
+    items: Set<TItem>;
+    /** The currently selected values (controlled mode) */
+    value?: Set<TKeyType>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<TKeyType>;
+    /** Callback when selection changes */
+    onChange?: (value: Set<TKeyType>) => void;
+    /** Function to get the value from an item, defaults to String(item) */
+    getItemValue?: (item: TItem) => TKeyType;
+    /** Function to render the selected value(s) in the button */
+    renderValue?: (value: Set<TItem>) => string;
+    /** Children must be a render function that returns Option components */
+    children: (item: TItem) => React.JSX.Element;
+}
+export interface GroupedSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> extends MultiSelectBaseProps {
+    /** The items to display in the select, grouped by category */
+    items: Map<string, TItem[]>;
+    /** The currently selected values (controlled mode) */
+    value?: Set<TKeyType>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<TKeyType>;
+    /** Callback when selection changes */
+    onChange?: (value: Set<TKeyType>) => void;
+    /** Function to get the value from an item, defaults to String(item) */
+    getItemValue?: (item: TItem) => TKeyType;
+    /** Function to render the selected value(s) in the button */
+    renderValue?: (value: Set<TItem>) => string;
+    /** Children must be a render function that returns OptGroup components */
+    children: (groupKey: string, items: TItem[]) => React.JSX.Element;
+}
+export interface StaticItemsProps<TItem = Key> extends MultiSelectBaseProps {
+    /** The items to display in the select (for dynamic API) */
+    items?: never;
+    /** The currently selected values (controlled mode) */
+    value?: Set<TItem>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<TItem>;
+    /** Callback when 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: ReactNode;
+    getItemValue?: never;
+}
+export type DynamicMultiSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> = TItem extends unknown ? (Omit<FlatSelectProps<TItem, TItemKey, TKeyType>, 'items'> & {
+    items: Set<TItem>;
+    children: (item: TItem) => React.JSX.Element;
+    getItemValue?: (item: TItem) => TKeyType;
+    renderValue?: (value: Set<TItem>) => string;
+    isSearchable?: boolean;
+    searchOptions?: UseComboboxFilterProps<TItem>['searchOptions'];
+}) | (Omit<GroupedSelectProps<TItem, TItemKey, TKeyType>, 'items'> & {
+    items: Map<string, TItem[]>;
+    children: (groupKey: string, items: TItem[]) => React.JSX.Element;
+    getItemValue?: (item: TItem) => TKeyType;
+    renderValue?: (value: Set<TItem>) => string;
+    isSearchable?: boolean;
+    searchOptions?: UseComboboxFilterProps<TItem>['searchOptions'];
+}) : never;
+export type MultiSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> = TItem extends unknown ? DynamicMultiSelectProps<TItem, TItemKey, TKeyType> | StaticItemsProps : never;
+export type MultiSelectComponent = {
+    <TItem, // Item type
+    TItemKey extends keyof TItem, // key name of the item
+    TKeyType extends TItem[TItemKey] & Key>(props: MultiSelectProps<TItem, TItemKey, TKeyType> & {
+        ref?: React.ForwardedRef<HTMLButtonElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
+export {};

package/dist/esm/components/multi-select/hooks/use-combobox-filter.d.ts

@@ -0,0 +1,12 @@
+export interface UseComboboxFilterProps<T> {
+    items?: T[];
+    extractSearchableText?: (item: T) => string[];
+    enabled?: boolean;
+    searchOptions?: Intl.CollatorOptions;
+}
+export interface UseComboboxFilterReturn<T> {
+    searchQuery: string;
+    setSearchQuery: (value: string) => void;
+    matchingItems: T[];
+}
+export declare function useComboboxFilter<T>({ items, extractSearchableText, enabled, searchOptions, }: UseComboboxFilterProps<T>): UseComboboxFilterReturn<T>;

package/dist/esm/components/multi-select/hooks/use-combobox-filter.js

@@ -0,0 +1,22 @@
+import { useState as m, useMemo as l, startTransition as y } from "react";
+import { useFilter as b } from "react-aria-components";
+function p({
+  items: e = [],
+  extractSearchableText: s = (t) => [String(t)],
+  enabled: n = !1,
+  searchOptions: c = { sensitivity: "base" }
+}) {
+  const [t, a] = m(""), o = b(c), i = o.contains.bind(o), u = (r) => {
+    y(() => {
+      a(r);
+    });
+  }, h = l(() => !n || t.length === 0 ? e : e.filter((r) => s(r).some((f) => i(f, t))), [n, e, t, s, i]);
+  return {
+    searchQuery: t,
+    setSearchQuery: u,
+    matchingItems: h
+  };
+}
+export {
+  p as useComboboxFilter
+};

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

@@ -0,0 +1,14 @@
+interface UseMultiSelectionStateProps<V extends string | number = string> {
+    selectedKeys?: Set<V>;
+    defaultSelectedKeys?: Set<V>;
+    onSelectionChange?: (keys: Set<V>) => void;
+}
+interface UseMultiSelectionStateReturn<V extends string | number = string> {
+    selectedKeys: Set<V>;
+    isSelected: (key: V) => boolean;
+    selectKey: (key: V) => void;
+    unselectKey: (key: V) => void;
+    toggleKey: (key: V) => void;
+}
+export declare function useMultiSelectionState<V extends string | number = string>({ selectedKeys: controlledKeys, defaultSelectedKeys, onSelectionChange, }: UseMultiSelectionStateProps<V>): UseMultiSelectionStateReturn<V>;
+export {};

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

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

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

@@ -0,0 +1,16 @@
+import { ForwardedRef, ReactElement } from 'react';
+export interface MultiSelectButtonProps<TItem> {
+    placeholder?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isLoading?: boolean;
+    isInvalid?: boolean;
+    /** The selected items to show in the button */
+    selectedItems: Set<TItem>;
+    /** Function to render the selected items */
+    renderValue: (values: Set<TItem>) => string;
+    onClearButtonPress?: () => void;
+}
+export declare const MultiSelectButton: <TItem>(props: MultiSelectButtonProps<TItem> & {
+    ref?: ForwardedRef<HTMLButtonElement>;
+}) => ReactElement;

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

@@ -0,0 +1,161 @@
+import { jsxs as c, 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 { useId as L } from "react-aria";
+import { useIntl as R } from "react-intl";
+import { tv as U } from "tailwind-variants";
+import { Badge as W } from "../../badge/Badge.js";
+import { CircularIconButton as q } from "../../icon-button/CircularIconButton.js";
+import { Icon as p } from "../../icon/Icon.js";
+import { Spinner as F } from "../../spinner/Spinner.js";
+import { MultiSelectContext as G } from "../Multiselect.context.js";
+const H = U({
+  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 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:not([disabled]):uy-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",
+    state: "uy-grow-0 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-inline-flex uy-gap-50 uy-items-center uy-px-100",
+    suffix: ""
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "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: {
+        base: "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: {
+        base: "uy-bg-surface-form-error uy-border-border-form-error",
+        inputValue: "uy-text-content-form-error",
+        state: "uy-text-content-form-error",
+        suffix: "uy-text-content-form-error"
+      }
+    },
+    isEmpty: {
+      true: {
+        inputValue: "uy-text-content-neutral-lowest"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "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",
+        suffix: "uy-border-border-form-enabled uy-text-content-form-enabled"
+      }
+    }
+  ]
+});
+function J({
+  isDisabled: r,
+  isReadOnly: t,
+  isLoading: d,
+  isInvalid: n,
+  placeholder: u,
+  selectedItems: g,
+  renderValue: m,
+  onClearButtonPress: i,
+  ...h
+}, w) {
+  const f = L(), s = R(), S = D(), M = K(S, "open"), y = k(G), a = y.maxVisibleItems ?? 0, l = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(g), { base: v, inputValue: I, state: C, suffix: V } = H({
+    isDisabled: !!r,
+    isReadOnly: !!t,
+    isInvalid: !!n,
+    isEmpty: l.size === 0
+  }), b = Math.max(
+    o.length - a,
+    0
+  ), N = l.size > 0 && !r && !t && !d, B = 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(
+    $,
+    {
+      ...h,
+      ref: w,
+      className: v(),
+      disabled: r || t,
+      "aria-invalid": n,
+      "aria-readonly": t,
+      "aria-labelledby": `${f}-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(
+            F,
+            {
+              color: "inherit",
+              size: "small",
+              label: s.formatMessage({
+                id: "unity:component:form-field:form-input:spinner:label",
+                defaultMessage: "Loading"
+              })
+            }
+          ),
+          n && /* @__PURE__ */ e(
+            p,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: s.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          ),
+          b > 0 && /* @__PURE__ */ c(W, { variant: "numeric", children: [
+            "+",
+            b
+          ] }),
+          N && /* @__PURE__ */ e(
+            q,
+            {
+              title: s.formatMessage({
+                id: "unity:component:common:clear:title",
+                defaultMessage: "Clear"
+              }),
+              className: "uy-text-content-neutral-enabled",
+              icon: "CloseOutlined",
+              onPress: () => {
+                i == null || i();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          p,
+          {
+            color: "inherit",
+            className: V(),
+            src: M ? "CaretUpOutlined" : "CaretDownOutlined",
+            role: "presentation"
+          }
+        )
+      ]
+    }
+  );
+}
+const x = j(E(J));
+x.displayName = "MultiselectButton";
+const ne = x;
+export {
+  ne as MultiSelectButton
+};