@meltdownjs/droppy/dist/index.d.ts

@meltdownjs/droppy is a react library which provides hooks for creating virtualized Select-, MultiSelect-, ComboBox- & MultiComboBox-Components easily.

import { CSSProperties } from 'react';
import { DebouncedFunc } from 'lodash-es';
import { DefinedInitialDataInfiniteOptions } from '@tanstack/react-query';
import { DefinedUseInfiniteQueryResult } from '@tanstack/react-query';
import { Dispatch } from 'react';
import { ExtendedRefs } from '@floating-ui/react';
import { HTMLAttributes } from 'react';
import { HTMLProps } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { MutableRefObject } from 'react';
import { ReactNode } from 'react';
import { ReferenceType } from '@floating-ui/react';
import { RefObject } from 'react';
import { SetStateAction } from 'react';
import { UndefinedInitialDataInfiniteOptions } from '@tanstack/react-query';
import { UseInfiniteQueryOptions } from '@tanstack/react-query';
import { UseInfiniteQueryResult } from '@tanstack/react-query';
import { VirtualItem } from '@tanstack/react-virtual';

declare type BaseComboBox = {
    searchTerm: string;
    setSearchTerm: Dispatch<SetStateAction<string>>;
    clearSearch: () => void;
    searchInputValue: string;
    setSearchInputValue: Dispatch<SetStateAction<string>>;
    setSearchTermDebounced: DebouncedFunc<Dispatch<SetStateAction<string>>>;
    getSerchInputProps: (props: HTMLProps<HTMLInputElement>) => Record<string, unknown>;
};

declare type BaseUseMultiSelectArgs<TOption> = {
    virtualizerOptions?: VirtualizerOptions;
    initialSelectedOptions?: TOption[];
    onClose?: () => void;
    onSelectedOptionsChange?: (selectedOptions: TOption[]) => void;
};

declare type BaseUseMultiSelectReturn<TScrollElement extends HTMLElement, TOption> = {
    virtualizer: UseInifiteQueryResultVirtualizerReturn<TScrollElement>;
    dropdownList: UseDropDownListReturn;
    selectedOptions: TOption[];
    setSelectedOptions: Dispatch<SetStateAction<TOption[]>>;
    getReferenceProps: (props: HTMLProps<Element>) => Record<string, unknown>;
    getFloatingProps: (props: HTMLProps<Element>) => Record<string, unknown>;
    getItemProps: (props?: HTMLProps<HTMLElement>, virtualItem?: VirtualItem) => Record<string, unknown>;
};

declare type BaseUseSelectArgs<TOption> = {
    virtualizerOptions?: VirtualizerOptions;
    initialSelectedOption?: TOption;
    onClose?: () => void;
    onSelectedOptionChange?: (selectedOption: TOption | undefined) => void;
};

declare type BaseUseSelectReturn<TScrollElement extends HTMLElement, TOption> = {
    virtualizer: UseInifiteQueryResultVirtualizerReturn<TScrollElement>;
    dropdownList: UseDropDownListReturn;
    selectedOption: TOption | undefined;
    setSelectedOption: Dispatch<SetStateAction<TOption | undefined>>;
    getReferenceProps: (props: HTMLProps<Element>) => Record<string, unknown>;
    getFloatingProps: (props: HTMLProps<Element>) => Record<string, unknown>;
    getItemProps: (props?: HTMLProps<HTMLElement>, virtualItem?: VirtualItem) => Record<string, unknown>;
};

export declare type GetInfiniteQueryOptions<TResult, TResultItem> = (args: GetInfiniteQueryOptionsArgs) => DefinedInitialDataInfiniteOptions<TResult, Error, TResultItem[]> | UndefinedInitialDataInfiniteOptions<TResult, Error, TResultItem[]> | UseInfiniteQueryOptions<TResult, Error, TResultItem[]>;

export declare type GetInfiniteQueryOptionsArgs = {
    searchTerm: string;
};

/**
 * Checks if two objects are equal by comparing their stringified versions.
 *
 * @param {T} object1 - The first object to compare.
 * @param {T} object2 - The second object to compare.
 * @return {boolean} Returns true if the objects are equal, false otherwise.
 */
export declare const isEqual: <T>(object1: T, object2: T) => boolean;

/**
 * Checks if the first object is part of the array of objects by comparing them using isEqual function.
 *
 * @param {T} object1 - The object to check for.
 * @param {T[]} objects - The array of objects to check against.
 * @return {boolean} Returns true if the object is part of the array, false otherwise.
 */
export declare const isPartOf: <T>(object1: T, objects: T[]) => boolean;

export declare type Item<T> = {
    key: string;
    value: T;
};

declare const Option_2: (props: OptionProps) => JSX_2.Element;
export { Option_2 as Option }

export declare type OptionProps = {
    children: ReactNode;
    activeIndex: number;
    index: number;
    asChild?: boolean;
    listRef: MutableRefObject<HTMLElement[]>;
    measureElement?: (node: Element | null) => void;
} & HTMLAttributes<HTMLElement>;

/**
 * Transforms a record into an array of items containing keys and values.
 *
 * @param {Record<string, T>} record - The record to transform into items.
 * @return {Item<T>[]} The array of items with keys and values.
 */
export declare const transformRecordToItems: <T>(record: Record<string, T>) => Item<T>[];

/**
 * Custom hook for managing the dropdown list functionality.
 *
 * @param {UseDropDownListArgs} args - Arguments for the dropdown list
 * @return {UseDropDownListReturn} Object containing various properties and functions related to the dropdown list
 */
export declare const useDropDownList: (args: UseDropDownListArgs) => UseDropDownListReturn;

export declare type UseDropDownListArgs = {
    onClose?: () => void;
    ariaRole?: 'select' | 'combobox';
};

export declare type UseDropDownListReturn = {
    isOpen: boolean;
    setIsOpen: Dispatch<SetStateAction<boolean>>;
    refs: ExtendedRefs<ReferenceType>;
    listRef: MutableRefObject<HTMLElement[]>;
    activeIndex: number;
    getFloatingProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
    getReferenceProps: (userProps?: HTMLProps<Element>) => Record<string, unknown>;
    getItemProps: (userProps?: Omit<HTMLProps<HTMLElement>, 'selected' | 'active'> & {
        active?: boolean;
        selected?: boolean;
    }) => Record<string, unknown>;
    floatingStyles: CSSProperties;
};

/**
 * Custom hook for managing an infinite combo box state.
 *
 * @param {UseInfiniteComboBoxArgs<T, U>} args - The arguments for the hook.
 * @return {UseInfiniteComboBoxReturn<V, U>} The return object containing various functions and states.
 */
export declare const useInfiniteComboBox: <T, U, V extends HTMLElement>(args: UseInfiniteComboBoxArgs<T, U>) => UseInfiniteComboBoxReturn<V, U>;

export declare type UseInfiniteComboBoxArgs<TResult, TResultItem> = {
    getInfiniteQueryOptions: GetInfiniteQueryOptions<TResult, TResultItem>;
} & BaseUseSelectArgs<TResultItem>;

export declare type UseInfiniteComboBoxReturn<TScrollElement extends HTMLElement, TOption> = UseInfiniteSelectReturn<TScrollElement, TOption> & BaseComboBox;

/**
 * Custom hook for managing an infinite multi-combobox state.
 *
 * @param {UseInfiniteMultiComboBoxArgs<TResult, TResultItem>} args - The arguments for the hook.
 * @return {UseInfiniteMutliComboBoxReturn<TScrollElement, TResultItem>} The return object containing various functions and states.
 */
export declare const useInfiniteMultiComboBox: <TResult, TResultItem, TScrollElement extends HTMLElement>(args: UseInfiniteMultiComboBoxArgs<TResult, TResultItem>) => UseInfiniteMutliComboBoxReturn<TScrollElement, TResultItem>;

export declare type UseInfiniteMultiComboBoxArgs<TResult, TResultItem> = {
    getInfiniteQueryOptions: GetInfiniteQueryOptions<TResult, TResultItem>;
} & BaseUseMultiSelectArgs<TResultItem>;

/**
 * Custom hook for handling infinite multi-select functionality.
 *
 * @param {UseInfiniteMultiSelectArgs<TResult, TResultItem>} args - Arguments for the hook.
 * @return {UseInfiniteMultiSelectReturn<TScrollElement, TResultItem>} Object containing select functionality.
 */
export declare const useInfiniteMultiSelect: <TResult, TResultItem, TScrollElement extends HTMLElement>(args: UseInfiniteMultiSelectArgs<TResult, TResultItem>) => UseInfiniteMultiSelectReturn<TScrollElement, TResultItem>;

export declare type UseInfiniteMultiSelectArgs<TResult, TResultItem> = {
    infiniteQueryOptions: DefinedInitialDataInfiniteOptions<TResult, Error, TResultItem[]> | UndefinedInitialDataInfiniteOptions<TResult, Error, TResultItem[]> | UseInfiniteQueryOptions<TResult, Error, TResultItem[]>;
    ariaRole?: 'combobox';
} & BaseUseMultiSelectArgs<TResultItem>;

export declare type UseInfiniteMultiSelectReturn<TScrollElement extends HTMLElement, TOption> = {
    options: TOption[];
} & BaseUseMultiSelectReturn<TScrollElement, TOption>;

export declare type UseInfiniteMutliComboBoxReturn<TScrollElement extends HTMLElement, TOption> = UseInfiniteMultiSelectReturn<TScrollElement, TOption> & BaseComboBox;

/**
 * Custom hook for handling infinite select functionality.
 *
 * @param {UseInfiniteSelectArgs<TResult, TResultItem>} args - Arguments for the hook.
 * @return {UseInfiniteSelectReturn<TScrollElement, TResultItem>} Object containing select functionality.
 */
export declare const useInfiniteSelect: <TResult, TResultItem, TScrollElement extends HTMLElement>(args: UseInfiniteSelectArgs<TResult, TResultItem>) => UseInfiniteSelectReturn<TScrollElement, TResultItem>;

export declare type UseInfiniteSelectArgs<TResult, TResultItem> = {
    infiniteQueryOptions: DefinedInitialDataInfiniteOptions<TResult, Error, TResultItem[]> | UndefinedInitialDataInfiniteOptions<TResult, Error, TResultItem[]> | UseInfiniteQueryOptions<TResult, Error, TResultItem[]>;
    ariaRole?: 'combobox';
} & BaseUseSelectArgs<TResultItem>;

export declare type UseInfiniteSelectReturn<TScrollElement extends HTMLElement, TOption> = {
    options: TOption[];
} & BaseUseSelectReturn<TScrollElement, TOption>;

export declare type UseInifiteQueryResultVirtualizerArgs<TResultItem> = {
    infiniteQueryResult: UseInfiniteQueryResult<TResultItem[]> | DefinedUseInfiniteQueryResult<TResultItem[]>;
    virtualizerOptions?: VirtualizerOptions;
};

export declare type UseInifiteQueryResultVirtualizerReturn<TScrollElement extends HTMLElement> = {
    virtualItems: VirtualItem[];
    scrollElementRef: RefObject<TScrollElement>;
    measureElement: (node: Element | null) => void;
    getTotalSize: () => number;
};

export declare type UseMultiOptionSelectorCallbackArgs<TOption> = {
    options: TOption[];
    selectedOptions: TOption[];
    setSelectedOptions: Dispatch<SetStateAction<TOption[]>>;
    onSelectedOptionsChange?: (selectedOptions: TOption[]) => void;
};

export declare type UseMultiOptionSelectorCallbackReturn = (index: number) => void;

/**
 * Custom hook for managing the state of multiple selected options.
 *
 * @param {UseMultiSelectArgs<TOption>} args - Object containing initialSelectedOptions, options, virtualizerOptions, onClose, and onSelectedOptionsChange
 * @return {UseMultiSelectReturn<TScrollElement, TOption>} Object containing virtualizer, dropdownList, selectedOptions, setSelectedOptions, getReferenceProps, getFloatingProps, and getItemProps
 */
export declare const useMultiSelect: <TScrollElement extends HTMLElement, TOption>(args: UseMultiSelectArgs<TOption>) => UseMultiSelectReturn<TScrollElement, TOption>;

export declare type UseMultiSelectArgs<TOption> = {
    options: TOption[];
} & BaseUseMultiSelectArgs<TOption>;

export declare type UseMultiSelectReturn<TScrollElement extends HTMLElement, TOption> = BaseUseMultiSelectReturn<TScrollElement, TOption>;

export declare type UseOtpionSelectorCallbackArgs<TOption> = {
    options: TOption[];
    dropdownList: UseDropDownListReturn;
    setSelectedOption: Dispatch<SetStateAction<TOption | undefined>>;
    onSelectedOptionChange?: (selected: TOption) => void;
};

export declare type UseOtpionSelectorCallbackReturn = (index: number) => void;

export declare type UsePropsGetterArgs = {
    dropdownList: UseDropDownListReturn;
    selectOptionByIndex: (index: number) => void;
};

export declare type UsePropsGetterReturn = {
    getReferenceProps: (props: HTMLProps<Element>) => Record<string, unknown>;
    getFloatingProps: (props: HTMLProps<Element>) => Record<string, unknown>;
    getItemProps: (props?: HTMLProps<HTMLElement>, virtualItem?: VirtualItem) => Record<string, unknown>;
};

/**
 * Custom hook for managing the state of a select input.
 *
 * @param {UseSelectArgs<TOption>} args - Object containing options, initialSelectedOption, virtualizerOptions, onClose, and onSelectedOptionChange
 * @return {UseSelectReturn<TScrollElement, TOption>} Object containing virtualizer, dropdownList, selectedOption, setSelectedOption, getReferenceProps, getFloatingProps, and getItemProps
 */
export declare const useSelect: <TScrollElement extends HTMLElement, TOption>(args: UseSelectArgs<TOption>) => UseSelectReturn<TScrollElement, TOption>;

export declare type UseSelectArgs<TOption> = {
    options: TOption[];
} & BaseUseSelectArgs<TOption>;

export declare type UseSelectReturn<TScrollElement extends HTMLElement, TOption> = BaseUseSelectReturn<TScrollElement, TOption>;

declare type VirtualizerOptions = {
    overscan?: number;
    estimateSize?: number;
};

export { }