@spark-ui/components/dist/combobox/index.d.mts

Spark (Leboncoin design system) components.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { Dispatch, SetStateAction, RefObject, PropsWithChildren, ComponentPropsWithoutRef, Ref, ComponentProps, ReactNode, HTMLAttributes, ReactElement } from 'react';
import { UseComboboxReturnValue, UseMultipleSelectionReturnValue } from 'downshift';
import { IconButton } from '../icon-button/index.mjs';
import { Popover as Popover$1 } from '../popover/index.mjs';
import '../button/index.mjs';
import 'class-variance-authority/types';
import 'class-variance-authority';
import 'radix-ui';

interface ComboboxItem {
    disabled: boolean;
    value: string;
    text: string;
}
type ItemsMap = Map<string, ComboboxItem>;
type DownshiftState = UseComboboxReturnValue<ComboboxItem> & UseMultipleSelectionReturnValue<ComboboxItem>;

interface ComboboxContextState extends DownshiftState {
    itemsMap: ItemsMap;
    filteredItemsMap: ItemsMap;
    highlightedItem: ComboboxItem | undefined;
    hasPopover: boolean;
    multiple: boolean;
    disabled: boolean;
    readOnly: boolean;
    wrap?: boolean;
    state?: 'error' | 'alert' | 'success';
    lastInteractionType: 'mouse' | 'keyboard';
    setHasPopover: Dispatch<SetStateAction<boolean>>;
    setLastInteractionType: (type: 'mouse' | 'keyboard') => void;
    setOnInputValueChange: Dispatch<SetStateAction<((v: string) => void) | null>>;
    innerInputRef: RefObject<HTMLInputElement | null>;
    triggerAreaRef: RefObject<HTMLDivElement | null>;
    isLoading?: boolean;
    isTyping?: boolean;
    setIsTyping: Dispatch<SetStateAction<boolean>>;
}
type ComboboxContextCommonProps = PropsWithChildren<{
    /**
     * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.
     */
    open?: boolean;
    /**
     * Event handler called when the open state of the select changes.
     */
    onOpenChange?: (isOpen: boolean) => void;
    /**
     * The open state of the select when it is initially rendered. Use when you do not need to control its open state.
     */
    defaultOpen?: boolean;
    /**
     * Use `state` prop to assign a specific state to the combobox, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.
     */
    state?: 'error' | 'alert' | 'success';
    /**
     * When true, prevents the user from interacting with the combobox.
     */
    disabled?: boolean;
    /**
     * Sets the combobox as interactive or not.
     */
    readOnly?: boolean;
    /**
     * When true, the items will be filtered depending on the value of the input (not case-sensitive).
     */
    filtering?: 'none' | 'auto' | 'strict';
    /**
     * By default, the combobox will clear or restore the input value to the selected item value on blur.
     */
    allowCustomValue?: boolean;
    /**
     * In multiple selection, many selected items might be displayed. Be default, the combobox trigger will expand vertically to display them all.
     * If you wish to keep every item on a single line, disabled this property.
     */
    wrap?: boolean;
    /**
     * Display a spinner to indicate to the user that the combobox is loading results for .
     */
    isLoading?: boolean;
}>;
interface ComboboxPropsSingle {
    /**
     * Prop 'multiple' indicating whether multiple values are allowed.
     */
    multiple?: false;
    /**
     * The value of the select when initially rendered. Use when you do not need to control the state of the select.
     */
    defaultValue?: string;
    /**
     * The controlled value of the select. Should be used in conjunction with `onValueChange`.
     */
    value?: string | null;
    /**
     * Event handler called when the value changes.
     */
    onValueChange?: (value: string) => void;
}
interface ComboboxPropsMultiple {
    /**
     * Prop 'multiple' indicating whether multiple values are allowed.
     */
    multiple: true;
    /**
     * The value of the select when initially rendered. Use when you do not need to control the state of the select.
     */
    defaultValue?: string[];
    /**
     * The controlled value of the select. Should be used in conjunction with `onValueChange`.
     */
    value?: string[];
    /**
     * Event handler called when the value changes.
     */
    onValueChange?: (value: string[]) => void;
}
type ComboboxContextProps = ComboboxContextCommonProps & (ComboboxPropsSingle | ComboboxPropsMultiple);
declare const ComboboxProvider: ({ children, state: stateProp, allowCustomValue, filtering, disabled: disabledProp, multiple, readOnly: readOnlyProp, wrap, value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, isLoading, }: ComboboxContextProps) => react_jsx_runtime.JSX.Element;
declare const useComboboxContext: () => ComboboxContextState;

type ComboboxProps = ComboboxContextProps;
declare const Combobox$1: {
    ({ children, ...props }: ComboboxProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface ClearButtonProps extends ComponentPropsWithoutRef<'button'> {
    'aria-label': string;
    ref?: Ref<HTMLButtonElement>;
}
declare const ClearButton: {
    ({ className, tabIndex, onClick, ref, ...others }: ClearButtonProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface DisclosureProps extends Omit<ComponentProps<typeof IconButton>, 'aria-label'> {
    className?: string;
    closedLabel: string;
    openedLabel: string;
    ref?: Ref<HTMLButtonElement>;
}
declare const Disclosure: {
    ({ className, closedLabel, openedLabel, intent, design, size, ref: forwardedRef, ...props }: DisclosureProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface EmptyProps {
    className?: string;
    children: ReactNode;
    ref?: Ref<HTMLDivElement>;
}
declare const Empty: {
    ({ className, children, ref: forwardedRef }: EmptyProps): react_jsx_runtime.JSX.Element | null;
    displayName: string;
};

interface GroupProps {
    children: ReactNode;
    className?: string;
    ref?: Ref<HTMLDivElement>;
}
declare const Group: {
    ({ children, ref: forwardedRef, ...props }: GroupProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type InputPrimitiveProps = ComponentPropsWithoutRef<'input'>;
interface InputProps extends Omit<InputPrimitiveProps, 'value' | 'placeholder'> {
    className?: string;
    placeholder?: string;
    value?: string;
    defaultValue?: string;
    onValueChange?: (value: string) => void;
    ref?: Ref<HTMLInputElement>;
}
declare const Input: {
    ({ "aria-label": ariaLabel, className, placeholder, value, defaultValue, onValueChange, ref: forwardedRef, ...props }: InputProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface ItemProps extends HTMLAttributes<HTMLLIElement> {
    disabled?: boolean;
    value: string;
    children: ReactNode;
    className?: string;
    ref?: Ref<HTMLLIElement>;
}
declare const Item: {
    ({ children, ref: forwardedRef, ...props }: ItemProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface ItemIndicatorProps {
    children?: ReactNode;
    className?: string;
    label?: string;
    ref?: Ref<HTMLSpanElement>;
}
declare const ItemIndicator: {
    ({ className, children, label, ref: forwardedRef, }: ItemIndicatorProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface ItemsProps extends ComponentPropsWithoutRef<'ul'> {
    children: ReactNode;
    className?: string;
    ref?: Ref<HTMLUListElement>;
}
declare const Items: {
    ({ children, className, ref: forwardedRef, ...props }: ItemsProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface ItemTextProps {
    children: string;
    className?: string;
    ref?: Ref<HTMLSpanElement>;
}
declare const ItemText: {
    ({ children, className, ref: forwardedRef }: ItemTextProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface LabelProps {
    children: string;
    className?: string;
    ref?: Ref<HTMLDivElement>;
}
declare const Label: {
    ({ children, className, ref: forwardedRef }: LabelProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const LeadingIcon: {
    ({ children }: {
        children: ReactElement;
    }): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface PopoverProps extends ComponentProps<typeof Popover$1.Content> {
    ref?: Ref<HTMLDivElement>;
}
declare const Popover: {
    ({ children, matchTriggerWidth, sideOffset, className, ref: forwardedRef, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const Portal: typeof Popover$1.Portal;

declare const SelectedItems: {
    (): react_jsx_runtime.JSX.Element | null;
    displayName: string;
};

interface TriggerProps {
    className?: string;
    children: ReactNode;
    ref?: Ref<HTMLDivElement>;
}
declare const Trigger: {
    ({ className, children, ref: forwardedRef }: TriggerProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const Combobox: typeof Combobox$1 & {
    Group: typeof Group;
    Item: typeof Item;
    Items: typeof Items;
    ItemText: typeof ItemText;
    ItemIndicator: typeof ItemIndicator;
    Label: typeof Label;
    Popover: typeof Popover;
    Trigger: typeof Trigger;
    LeadingIcon: typeof LeadingIcon;
    Empty: typeof Empty;
    Input: typeof Input;
    Disclosure: typeof Disclosure;
    SelectedItems: typeof SelectedItems;
    ClearButton: typeof ClearButton;
    Portal: typeof Portal;
};

export { Combobox, ComboboxProvider, useComboboxContext };