import type { CSSProperties, ReactNode, ElementType, SyntheticEvent, FocusEventHandler } from 'react'; import type { Placement } from './placement'; import type { ToArray } from './utils'; import type { FormControlBaseProps } from './form'; import type { AnimationEventProps } from './animation'; import type { BoxProps } from '../Box'; import type { BasicSize } from './sizes'; import type { PickerHandle } from '../Picker/types'; export interface Option extends Record { label?: string | ReactNode; value?: T; groupBy?: string; parent?: Option; children?: Option[]; loading?: boolean; } export type OptionValue = number | string | null; export type OnChangeCallback = (value: T, event: E) => void; export interface DeprecatedMenuProps { /** * Custom menu class name * @deprecated Use `popupClassName` instead */ menuClassName?: string; /** * Custom menu style * @deprecated Use `popupStyle` instead */ menuStyle?: CSSProperties; /** * Picker menu auto width * * @deprecated Use `popupAutoWidth` instead */ menuAutoWidth?: boolean; /** * Set the width of the menu * * @deprecated Use columnWidth instead */ menuWidth?: number; /** * Set the height of the menu * @deprecated Use columnHeight instead */ menuHeight?: number; /** * Set the max height of the menu * @deprecated Use `listboxMaxHeight` instead */ menuMaxHeight?: number; /** * Custom render menu * @deprecated For TreePicker and CheckTreePicker, use `renderTree` instead. For Cascader and MultiCascader, use `renderColumn` instead. */ renderMenu?: any; /** * Custom render menu item * @deprecated Use renderTreeNode or renderOption instead */ renderMenuItem?: any; /** * Custom render menu group * @deprecated Use renderOptionGroup instead */ renderMenuGroup?: any; } export type PickerAppearance = 'default' | 'subtle'; /** * Represents the data properties for a component. */ export interface DataProps { /** * The data of the component. */ data: TData[]; /** * The key to use for setting the option value in the data. * @default value */ valueKey?: string; /** * The key to use for displaying the options in the data. * @default label */ labelKey?: string; /** * The key to use for setting the children in the data. * @default children */ childrenKey?: string; } export interface PickerBaseProps extends PopupProps, Omit, AnimationEventProps { id?: string; /** * Custom Ref for the picker */ ref?: React.Ref; /** Custom locale */ locale?: Partial; /** A picker can have different appearances. */ appearance?: PickerAppearance; /** Format picker to appear inside a content block */ block?: boolean; /** * Controls whether the popup adapts to a full-width Drawer on extra-small screens. * When omitted, each picker uses its existing default behavior. */ responsive?: boolean; /** Set the padding of the container. */ containerPadding?: number; /** Sets the rendering container */ container?: HTMLElement | (() => HTMLElement); /** A picker can show it is currently unable to be interacted with */ disabled?: boolean; /** You can use a custom element for this component */ toggleAs?: ElementType; /** Placeholder text */ placeholder?: ReactNode; /** The placement of picker */ placement?: Placement; /** Prevent floating element overflow */ preventOverflow?: boolean; /** Open the menu and control it */ open?: boolean; /** Initial open menu */ defaultOpen?: boolean; /** A picker that can clear values */ cleanable?: boolean; /** A picker can have different sizes */ size?: BasicSize; /** Called when Modal is displayed */ onOpen?: () => void; /** Called when Modal is closed */ onClose?: () => void; /** * Called when the component is focused. */ onFocus?: FocusEventHandler; /** * Called when the component is blurred. */ onBlur?: FocusEventHandler; /** Custom render extra footer */ renderExtraFooter?: () => ReactNode; } export interface FormControlPickerProps, I = T> extends DataProps, PickerBaseProps, FormControlBaseProps { /** * Disabled items */ disabledItemValues?: ToArray>; } export interface PopupProps { /** Custom CSS class for the popup */ popupClassName?: string; /** Custom inline styles for the popup */ popupStyle?: React.CSSProperties; /** Whether the popup should automatically adjust its width */ popupAutoWidth?: boolean; } /** * Properties for the Listbox component. */ export interface ListboxProps { /** Maximum height of the listbox */ listboxMaxHeight?: number; /** Custom render function for the entire listbox */ renderListbox?: (menu: React.ReactNode) => React.ReactNode; /** Custom render function for individual options */ renderOption?: (label: React.ReactNode, item: Option) => React.ReactNode; /** Custom render function for option groups */ renderOptionGroup?: (title: React.ReactNode, item: Option) => React.ReactNode; }