@renderlesskit/react
Version:
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit
186 lines (185 loc) • 10.7 kB
TypeScript
import * as React from "react";
import { PopoverDisclosureHTMLProps, PopoverDisclosureOptions } from "reakit";
import { SelectStateReturn } from "./SelectState";
export declare const useSelect: {
(options?: SelectOptions | undefined, htmlProps?: import("reakit").ButtonHTMLProps | undefined, unstable_ignoreUseOptions?: boolean | undefined): import("reakit").ButtonHTMLProps;
unstable_propsAreEqual: (prev: import("reakit").RoleOptions & {
disabled?: boolean | undefined;
focusable?: boolean | undefined;
} & {
unstable_clickOnEnter?: boolean | undefined;
unstable_clickOnSpace?: boolean | undefined;
} & Pick<Partial<import("reakit").DisclosureStateReturn>, "visible"> & Pick<import("reakit").DisclosureStateReturn, "baseId" | "toggle"> & Pick<Partial<import("reakit").DialogStateReturn>, "unstable_disclosureRef"> & Pick<import("reakit").DialogStateReturn, "toggle"> & Pick<Partial<import("reakit").PopoverStateReturn>, "unstable_referenceRef"> & import("reakit").unstable_IdState & {
visible: boolean;
animated: number | boolean;
animating: boolean;
} & {
modal: boolean;
unstable_disclosureRef: React.MutableRefObject<HTMLElement | null>;
} & {
unstable_referenceRef: React.RefObject<HTMLElement | null>;
unstable_popoverRef: React.RefObject<HTMLElement | null>;
unstable_arrowRef: React.RefObject<HTMLElement | null>;
unstable_popoverStyles: React.CSSProperties;
unstable_arrowStyles: React.CSSProperties;
unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
unstable_update: () => boolean;
placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
} & Omit<import("reakit").CompositeState, "items"> & {
menuRole: "dialog" | "grid" | "listbox" | "tree";
items: import("./helpers/types").Item[];
values: string[];
valuesById: import("./SelectBaseState").ValuesById;
selectedValue: string | null;
currentValue: string | undefined;
selectedId?: string | null | undefined;
} & import("reakit").unstable_IdActions & {
show: () => void;
hide: () => void;
toggle: () => void;
setVisible: React.Dispatch<React.SetStateAction<boolean>>;
setAnimated: React.Dispatch<React.SetStateAction<number | boolean>>;
stopAnimation: () => void;
} & {
setModal: React.Dispatch<React.SetStateAction<boolean>>;
} & {
place: React.Dispatch<React.SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
} & Omit<import("reakit").CompositeActions, "registerItem"> & {
registerItem: (item: import("./helpers/types").Item) => void;
setSelectedValue: import("reakit-utils/ts").SetState<string | null>;
} & {
/**
* When enabled, user can hide the select popover by pressing
* `esc` while focusing on the select input.
* @default true
*/
hideOnEsc?: boolean | undefined;
} & React.HTMLAttributes<any> & React.RefAttributes<any> & {
wrapElement?: ((element: React.ReactNode) => React.ReactNode) | undefined;
} & {
disabled?: boolean | undefined;
} & React.ButtonHTMLAttributes<any>, next: import("reakit").RoleOptions & {
disabled?: boolean | undefined;
focusable?: boolean | undefined;
} & {
unstable_clickOnEnter?: boolean | undefined;
unstable_clickOnSpace?: boolean | undefined;
} & Pick<Partial<import("reakit").DisclosureStateReturn>, "visible"> & Pick<import("reakit").DisclosureStateReturn, "baseId" | "toggle"> & Pick<Partial<import("reakit").DialogStateReturn>, "unstable_disclosureRef"> & Pick<import("reakit").DialogStateReturn, "toggle"> & Pick<Partial<import("reakit").PopoverStateReturn>, "unstable_referenceRef"> & import("reakit").unstable_IdState & {
visible: boolean;
animated: number | boolean;
animating: boolean;
} & {
modal: boolean;
unstable_disclosureRef: React.MutableRefObject<HTMLElement | null>;
} & {
unstable_referenceRef: React.RefObject<HTMLElement | null>;
unstable_popoverRef: React.RefObject<HTMLElement | null>;
unstable_arrowRef: React.RefObject<HTMLElement | null>;
unstable_popoverStyles: React.CSSProperties;
unstable_arrowStyles: React.CSSProperties;
unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
unstable_update: () => boolean;
placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
} & Omit<import("reakit").CompositeState, "items"> & {
menuRole: "dialog" | "grid" | "listbox" | "tree";
items: import("./helpers/types").Item[];
values: string[];
valuesById: import("./SelectBaseState").ValuesById;
selectedValue: string | null;
currentValue: string | undefined;
selectedId?: string | null | undefined;
} & import("reakit").unstable_IdActions & {
show: () => void;
hide: () => void;
toggle: () => void;
setVisible: React.Dispatch<React.SetStateAction<boolean>>;
setAnimated: React.Dispatch<React.SetStateAction<number | boolean>>;
stopAnimation: () => void;
} & {
setModal: React.Dispatch<React.SetStateAction<boolean>>;
} & {
place: React.Dispatch<React.SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
} & Omit<import("reakit").CompositeActions, "registerItem"> & {
registerItem: (item: import("./helpers/types").Item) => void;
setSelectedValue: import("reakit-utils/ts").SetState<string | null>;
} & {
/**
* When enabled, user can hide the select popover by pressing
* `esc` while focusing on the select input.
* @default true
*/
hideOnEsc?: boolean | undefined;
} & React.HTMLAttributes<any> & React.RefAttributes<any> & {
wrapElement?: ((element: React.ReactNode) => React.ReactNode) | undefined;
} & {
disabled?: boolean | undefined;
} & React.ButtonHTMLAttributes<any>) => boolean;
__keys: readonly any[];
__useOptions: (options: SelectOptions, htmlProps: import("reakit").ButtonHTMLProps) => SelectOptions;
};
export declare const Select: import("../system").Component<"button", import("reakit").RoleOptions & {
disabled?: boolean | undefined;
focusable?: boolean | undefined;
} & {
unstable_clickOnEnter?: boolean | undefined;
unstable_clickOnSpace?: boolean | undefined;
} & Pick<Partial<import("reakit").DisclosureStateReturn>, "visible"> & Pick<import("reakit").DisclosureStateReturn, "baseId" | "toggle"> & Pick<Partial<import("reakit").DialogStateReturn>, "unstable_disclosureRef"> & Pick<import("reakit").DialogStateReturn, "toggle"> & Pick<Partial<import("reakit").PopoverStateReturn>, "unstable_referenceRef"> & import("reakit").unstable_IdState & {
visible: boolean;
animated: number | boolean;
animating: boolean;
} & {
modal: boolean;
unstable_disclosureRef: React.MutableRefObject<HTMLElement | null>;
} & {
unstable_referenceRef: React.RefObject<HTMLElement | null>;
unstable_popoverRef: React.RefObject<HTMLElement | null>;
unstable_arrowRef: React.RefObject<HTMLElement | null>;
unstable_popoverStyles: React.CSSProperties;
unstable_arrowStyles: React.CSSProperties;
unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
unstable_update: () => boolean;
placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
} & Omit<import("reakit").CompositeState, "items"> & {
menuRole: "dialog" | "grid" | "listbox" | "tree";
items: import("./helpers/types").Item[];
values: string[];
valuesById: import("./SelectBaseState").ValuesById;
selectedValue: string | null;
currentValue: string | undefined;
selectedId?: string | null | undefined;
} & import("reakit").unstable_IdActions & {
show: () => void;
hide: () => void;
toggle: () => void;
setVisible: React.Dispatch<React.SetStateAction<boolean>>;
setAnimated: React.Dispatch<React.SetStateAction<number | boolean>>;
stopAnimation: () => void;
} & {
setModal: React.Dispatch<React.SetStateAction<boolean>>;
} & {
place: React.Dispatch<React.SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
} & Omit<import("reakit").CompositeActions, "registerItem"> & {
registerItem: (item: import("./helpers/types").Item) => void;
setSelectedValue: import("reakit-utils/ts").SetState<string | null>;
} & {
/**
* When enabled, user can hide the select popover by pressing
* `esc` while focusing on the select input.
* @default true
*/
hideOnEsc?: boolean | undefined;
} & React.HTMLAttributes<any> & React.RefAttributes<any> & {
wrapElement?: ((element: React.ReactNode) => React.ReactNode) | undefined;
} & {
disabled?: boolean | undefined;
} & React.ButtonHTMLAttributes<any>>;
export declare type SelectOptions = PopoverDisclosureOptions & SelectStateReturn & {
/**
* When enabled, user can hide the select popover by pressing
* `esc` while focusing on the select input.
* @default true
*/
hideOnEsc?: boolean;
};
export declare type SelectHTMLProps = PopoverDisclosureHTMLProps;
export declare type SelectProps = SelectOptions & SelectHTMLProps;