@renderlesskit/react/dist/types/select/SelectBaseState.d.ts

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

import { CompositeActions, CompositeState, CompositeStateReturn } from "reakit";
import { SetState } from "reakit-utils/ts";
import { Item } from "./helpers/types";
export declare function getIdFromValue(valuesById: ValuesById, selectedValue: string | null | undefined): string | null;
export declare function useSelectBaseState(composite: CompositeStateReturn, { selectedValue: initialSelectedValue, values: initialValues, }?: SelectBaseInitialState): SelectBaseStateReturn;
export declare type ValuesById = {
    id: string;
    value: string;
}[];
export declare type SelectBaseState = Omit<CompositeState, "items"> & {
    /**
     * Indicates the type of the suggestions popup.
     */
    menuRole: "listbox" | "tree" | "grid" | "dialog";
    /**
     * Lists all the select items with their `id`, DOM `ref`, `disabled` state,
     * `value` and `groupId` if any. This state is automatically updated when
     * `registerItem` and `unregisterItem` are called.
     * @example
     * const select = useSelectState();
     * select.items.forEach((item) => {
     *
     * });
     */
    items: Item[];
    /**
     * Options/values provided.
     */
    values: string[];
    /**
     * Initial value to be selected
     */
    valuesById: ValuesById;
    /**
     * Initial value to be selected
     */
    selectedValue: string | null;
    /**
     * Initial value to be selected
     */
    currentValue: string | undefined;
    /**
     * Id of the item that is currently selected.
     */
    selectedId?: string | null;
};
export declare type SelectBaseActions = Omit<CompositeActions, "registerItem"> & {
    /**
     * Registers a select item.
     * @example
     * const ref = React.useRef();
     * const select = useSelectState();
     * React.useEffect(() => {
     *   select.registerItem({ ref, id: "id" });
     *   return () => select.unregisterItem("id");
     * });
     */
    registerItem: (item: Item) => void;
    /**
     * Sets `values`.
     */
    setSelectedValue: SetState<SelectBaseState["selectedValue"]>;
};
export declare type SelectBaseInitialState = Pick<Partial<SelectBaseState>, "values" | "selectedValue">;
export declare type SelectBaseStateReturn = SelectBaseState & SelectBaseActions;