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

package/dist/esm/components/label/Label.mjs

@@ -0,0 +1,56 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { mergeProps as u } from "react-aria";
+import { useSlottedContext as b, InputContext as g, Label as f } from "react-aria-components";
+import { tv as N } from "tailwind-variants";
+const h = N({
+  slots: {
+    base: "uy-typography-body-strong uy-text-content-form-enabled uy-flex uy-gap-25",
+    asterisk: "uy-text-content-danger",
+    optionalTag: "uy-typography-body"
+  },
+  variants: {
+    variant: {
+      strong: {
+        base: "uy-typography-body-strong"
+      },
+      body: {
+        base: "uy-typography-body"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "strong"
+  }
+}), q = c(
+  ({ children: n, ...a }, l) => {
+    const e = b(g), i = u(
+      { isRequired: e == null ? void 0 : e["aria-required"] },
+      a
+    ), {
+      isRequired: r = !1,
+      requiredVariant: s = "required",
+      ...p
+    } = i, { base: y, asterisk: d, optionalTag: m } = h();
+    return /* @__PURE__ */ o(
+      f,
+      {
+        ...p,
+        ref: l,
+        className: y({ className: a.className }),
+        children: [
+          n,
+          s === "required" && r && /* @__PURE__ */ o("span", { className: d(), children: [
+            "*",
+            /* @__PURE__ */ t("span", { className: "uy-sr-only", children: "required" })
+          ] }),
+          s === "optional" && !r && /* @__PURE__ */ t("span", { className: m({ className: a.className }), children: "(optional)" })
+        ]
+      }
+    );
+  }
+);
+q.displayName = "Label";
+export {
+  q as Label
+};

package/dist/esm/components/link/Link.d.mts

@@ -8,6 +8,10 @@ export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
      * The URL the link navigates to.
      */
     href: HTMLAnchorElement['href'] | NavRouterLinkProps['to'];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLLinkElement>['id'];
     /**
      * The link's display variant. Links can be inline with text or standalone (block).
      * @default 'inline'
@@ -38,6 +42,10 @@ declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps
      * The URL the link navigates to.
      */
     href: HTMLAnchorElement["href"] | NavRouterLinkProps["to"];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLLinkElement>["id"];
     /**
      * The link's display variant. Links can be inline with text or standalone (block).
      * @default 'inline'
@@ -59,5 +67,7 @@ declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps
      */
     isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
     maxCharactersTruncation?: number;
+} & {
+    children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLAnchorElement>>;
 export { Link };

package/dist/esm/components/link/Link.mjs

@@ -1,47 +1,49 @@
-import { jsxs as d, jsx as k } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { IconSprite as y } from "@payfit/unity-icons";
-import { Link as g } from "react-aria-components";
-import { useRouter as v } from "../../providers/router/RouterProvider.mjs";
+import { jsxs as f, jsx as k } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { IconSprite as g } from "@payfit/unity-icons";
+import { Link as v } from "react-aria-components";
+import { useRouter as x } from "../../providers/router/RouterProvider.mjs";
 import { link as w } from "./Link.variants.mjs";
 import { isExternalUrl as L } from "./utils.mjs";
-const A = x(
+const A = y(
   ({
     href: o,
-    children: a,
+    children: s,
     variant: m = "inline",
-    color: s = "primary",
-    isDisabled: i = !1,
+    color: a = "primary",
+    isDisabled: n = !1,
     isCurrent: c = void 0,
     isExternal: p,
-    maxCharactersTruncation: n,
+    maxCharactersTruncation: t,
     ...r
   }, u) => {
-    const l = v(), e = p ?? L(o), t = !e && l ? l.isActive(o.toString()) : c, f = w({
+    const l = x(), e = p ?? L(o), i = !e && l ? l.isActive(o.toString()) : c, d = w({
       variant: m,
-      color: s,
-      isDisabled: i,
-      isTruncated: !!n
+      color: a,
+      isDisabled: n,
+      isTruncated: !!t
     });
-    return /* @__PURE__ */ d(
-      g,
+    return /* @__PURE__ */ f(
+      v,
       {
         ...r,
         href: o,
         ref: u,
-        style: { "--uy-link-max-w": `${n}ch` },
-        className: f,
-        isDisabled: i,
+        style: !!t ? {
+          "--uy-link-max-w": `${t}ch`
+        } : {},
+        className: d,
+        isDisabled: n,
         target: e ? "_blank" : r.target,
         rel: e && !r.rel ? "noopener noreferrer" : r.rel,
-        ...t !== void 0 && {
-          "data-current": t,
-          "aria-current": t ? "page" : void 0
+        ...i !== void 0 && {
+          "data-current": i,
+          "aria-current": i ? "page" : void 0
         },
         children: [
-          a,
+          s,
           e && /* @__PURE__ */ k(
-            y,
+            g,
             {
               src: "ArrowSquareOutOutlined",
               color: "currentColor",

package/dist/esm/components/menu/Menu.d.mts

@@ -3,7 +3,7 @@ interface MenuProps {
     defaultOpen?: MenuTriggerProps['defaultOpen'];
     children?: MenuTriggerProps['children'];
 }
-export declare function Menu({ defaultOpen, children }: MenuProps): JSX.Element;
+export declare function Menu({ defaultOpen, children }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }

package/dist/esm/components/menu/parts/MenuContent.d.mts

@@ -4,7 +4,7 @@ interface MenuContent {
     placement?: PopoverProps['placement'];
     width?: number;
 }
-export declare function MenuContent({ children, placement, width, }: PropsWithChildren<MenuContent>): JSX.Element;
+export declare function MenuContent({ children, placement, width, }: PropsWithChildren<MenuContent>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuContent {
     var displayName: string;
 }

package/dist/esm/components/menu/parts/MenuContent.mjs

@@ -10,7 +10,7 @@ function y({
     n,
     {
       placement: o,
-      className: "uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",
+      className: "uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",
       children: /* @__PURE__ */ u(s, { autoFocus: "first", className: `uy-min-w-[320px] ${t}`, children: r })
     }
   );

package/dist/esm/components/menu/parts/MenuHeader.d.mts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 interface MenuHeaderProps {
     className?: string;
 }
-export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): JSX.Element;
+export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuHeader {
     var displayName: string;
 }

package/dist/esm/components/menu/parts/MenuItem.d.mts

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

package/dist/esm/components/menu/parts/MenuSeparator.d.mts

@@ -1,4 +1,4 @@
-export declare function MenuSeparator(): JSX.Element;
+export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuSeparator {
     var displayName: string;
 }

package/dist/esm/components/menu/parts/MenuTrigger.d.mts

@@ -3,7 +3,7 @@ interface MenuTriggerProps {
     className?: string;
     asChild?: boolean;
 }
-export declare function MenuTrigger({ children, asChild, className, }: PropsWithChildren<MenuTriggerProps>): JSX.Element;
+export declare function MenuTrigger({ children, asChild, className, }: PropsWithChildren<MenuTriggerProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuTrigger {
     var displayName: string;
 }

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