@payfit/unity-components 0.0.0-alpha.7 → 0.0.0-alpha.8

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

@@ -0,0 +1,62 @@
+import { MultiSelectComponent, MultiSelectProps } from './Multiselect.types.mjs';
+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;
+/**
+ * The MultiSelect component allows users to select multiple items from a dropdown list.
+ * 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
+ * @example
+ * ```tsx
+ * import { MultiSelect, MultiSelectOption, MultiSelectOptGroup } from '@payfit/unity-components'
+ *
+ * // Static API - Options defined as direct children
+ * <MultiSelect
+ *   placeholder="Select fruits..."
+ *   onChange={(selected) => console.log(selected)}
+ * >
+ *   <MultiSelectOptGroup label="Citrus" withSeparator>
+ *     <MultiSelectOption value="orange">Orange</MultiSelectOption>
+ *     <MultiSelectOption value="lemon">Lemon</MultiSelectOption>
+ *   </MultiSelectOptGroup>
+ *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ * </MultiSelect>
+ *
+ * // Dynamic API - Options generated from a collection with typed objects
+ * interface Fruit {
+ *   id: string;
+ *   name: string;
+ *   category: string;
+ * }
+ *
+ * const fruits: Set<Fruit> = new Set([
+ *   { id: 'apple-1', name: 'Apple', category: 'Core' },
+ *   { id: 'orange-1', name: 'Orange', category: 'Citrus' }
+ * ]);
+ *
+ * <MultiSelect
+ *   items={fruits}
+ *   placeholder="Select fruits..."
+ *   value={new Set(['apple-1'])}
+ *   getItemValue={item => item.id}
+ *   renderValue={(items) =>
+ *     Array.from(items)
+ *       .map(item => item.name)
+ *       .join(', ')
+ *   }
+ * >
+ *   {(item) => (
+ *     <MultiSelectOption value={item.id}>
+ *       {item.name}
+ *     </MultiSelectOption>
+ *   )}
+ * </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.
+ * @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 {};

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

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

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

@@ -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.mjs

@@ -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.mts

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+import { UseComboboxFilterProps } from './hooks/use-combobox-filter.mjs';
+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.mts

@@ -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.mjs

@@ -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.mts

@@ -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.mjs

@@ -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.mts

@@ -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;