@payfit/unity-components
Version:
116 lines (115 loc) • 5.41 kB
TypeScript
type Key = string | number;
/**
* Common props shared by all MultiSelect variants.
*/
export interface MultiSelectBaseProps {
/** The ID of the element */
id?: string;
/** Default content when no value is selected */
placeholder?: string;
/** Whether the select is searchable and shows a search input on top of the options */
isSearchable?: boolean;
/** Whether the select is disabled */
isDisabled?: boolean;
/** Whether the select is invalid */
isInvalid?: boolean;
/** Whether the select is read only */
isReadOnly?: boolean;
/** Whether the select is in a loading state */
isLoading?: boolean;
/** Callback when the clear button is pressed */
onClearButtonPress?: () => void;
/** Maximum number of items to show in the select button before showing a counter badge */
maxVisibleItems?: number;
/** Callback when the select is focused */
onFocus?: () => void;
/** Callback when the select is blurred */
onBlur?: () => void;
/** Callback triggered when the select popover changes its open state */
onOpenChange?: (isOpen: boolean) => void;
/** The ID of the element that labels this select when no visible label is provided */
'aria-labelledby'?: string;
/** The ID of the element that labels this select when no visible label is provided */
'aria-label'?: string;
}
/**
* Props for flat (non-grouped) dynamic items MultiSelect.
* @template TItems The type of set of items.
*/
export interface FlatSelectProps<TItems extends Set<unknown>> extends MultiSelectBaseProps {
/** The items to display in the select */
items: TItems;
/** Function to get the value from an item, defaults to String(item) */ getItemValue?: (item: TItems extends Set<infer U> ? U : never) => Key;
/** The currently selected values (controlled mode) */
value?: Set<Key>;
/** The default selected values (uncontrolled mode) */
defaultValue?: Set<Key>;
/** Callback when the selection changes */
onChange?: (value: Set<Key>) => void;
/** Function to render the selected value(s) in the button */
renderValue?: (value: Set<TItems extends Set<infer U> ? U : never>) => string;
/** Children must be a render function that returns Option components */ children: (item: TItems extends Set<infer U> ? U : never) => React.JSX.Element;
/** Options for filtering the items */
searchOptions?: Intl.CollatorOptions;
}
/**
* Props for grouped dynamic items MultiSelect.
* @template TItems The type of map from group key to array of items.
*/
export interface GroupedSelectProps<TItems extends Map<string, unknown[]>> extends MultiSelectBaseProps {
/** The items to display in the select, grouped by category */
items: TItems;
/** Function to get the value from an item, defaults to String(item) */
getItemValue?: (item: TItems extends Map<string, Array<infer U>> ? U : never) => Key;
/** The currently selected values (controlled mode) */
value?: Set<Key>;
/** The default selected values (uncontrolled mode) */
defaultValue?: Set<Key>;
/** Callback when the selection changes */
onChange?: (value: Set<Key>) => void;
/** Function to render the selected value(s) in the button */
renderValue?: (value: Set<TItems extends Map<string, Array<infer U>> ? U : never>) => string;
/** Children must be a render function that returns OptGroup components */
children: (groupKey: string, items: TItems extends Map<string, Array<infer U>> ? U[] : never) => React.JSX.Element;
/** Options for filtering the items */
searchOptions?: Intl.CollatorOptions;
}
/**
* Props for static MultiSelect API (all items are defined via React children).
*/
export interface StaticItemsProps<TItem = Key> extends MultiSelectBaseProps {
/** The items to display in the select (for dynamic API) */
items?: never;
/** Function to get the value from an item, defaults to String(item) */
getItemValue?: never;
/** The currently selected values (controlled mode) */
value?: Set<TItem>;
/** The default selected values (uncontrolled mode) */
defaultValue?: Set<TItem>;
/** Callback when the selection changes */
onChange?: (value: Set<TItem>) => void;
/** Function to render the selected value(s) in the button */
renderValue?: (value: Set<TItem>) => string;
/** Children must be Option components */
children: React.ReactNode;
/** Options for filtering the items */
searchOptions?: Intl.CollatorOptions;
}
/**
* Helper type to simplify usage for dynamic MultiSelect props.
* Picks flat or grouped variant depending on items type.
*/
export type DynamicMultiSelectProps<TItems = Set<unknown> | Map<string, unknown[]>> = TItems extends Set<unknown> ? FlatSelectProps<TItems> : TItems extends Map<string, unknown[]> ? GroupedSelectProps<TItems> : never;
/**
* Top-level MultiSelect props type, picks static or dynamic variant as appropriate.
*/
export type MultiSelectProps<TItems = Set<unknown> | Map<string, unknown[]> | undefined> = TItems extends undefined ? StaticItemsProps : DynamicMultiSelectProps<TItems>;
/**
* MultiSelect component type signature.
*/
export type MultiSelectComponent = <TItems = undefined>(props: MultiSelectProps<TItems> & {
ref?: React.ForwardedRef<HTMLButtonElement>;
} & {
displayName?: string;
}) => React.JSX.Element;
export {};