From f196f983171991b97c1782e377e1658b92c5f8de Mon Sep 17 00:00:00 2001 From: Madeorsk Date: Tue, 24 Sep 2024 19:50:38 +0200 Subject: [PATCH] Export SelectProperties type. --- src/Components/Select/Select.tsx | 121 ++++++++++++++++--------------- 1 file changed, 63 insertions(+), 58 deletions(-) diff --git a/src/Components/Select/Select.tsx b/src/Components/Select/Select.tsx index 599c9b8..20a2e66 100644 --- a/src/Components/Select/Select.tsx +++ b/src/Components/Select/Select.tsx @@ -4,6 +4,68 @@ import {OptionsSuggestions, useSuggestionsNavigation} from "./OptionsSuggestions import {classes, Modify, normalizeString} from "../../Utils"; import {CaretDown, Check, X} from "@phosphor-icons/react"; +/** + * Generic select component properties. + */ +export type SelectProperties = React.PropsWithChildren, { + /** + * The currently selected option(s). + */ + value: OptionKey|OptionKey[]; + + /** + * Called when new options are selected. + * @param newValue + */ + onChange: (newValue: OptionKey|OptionKey[]) => void; + + /** + * Options list or a way to get it from a given search. + */ + options: Record; + + /** + * Render an option. + * @param option The option to render. + */ + renderOption?: (option: Option) => React.ReactNode; + + /** + * Option match function. Return true if the given option matches the given search query. + * @param search The search query. + * @param option The option that should match the search query. + */ + match?: (search: string, option: Option) => boolean; + + /** + * Max count of options to allow to select. + * 1 by default when multiple is false, infinity when multiple is true. + */ + selectibleMaxCount?: number; + + /** + * True to allow to select an infinite count of options. + * false by default. + */ + multiple?: boolean; + + /** + * When true, the select loses focus when a new option is selected (by clicking or pressing Enter). + * false by default. + */ + blurOnSelect?: boolean; + + /** + * When true, the select loses focus when the max count of selectible options have been reached (by clicking or pressing Enter). + * true by default. + */ + blurWhenMaxCountSelected?: boolean; + + // Already set properties. + type?: never; + role?: never; +}>>; + /** * Generic select component. */ @@ -20,64 +82,7 @@ export function Select( type, role, children, ...props - }: React.PropsWithChildren, { - /** - * The currently selected option(s). - */ - value: OptionKey|OptionKey[]; - - /** - * Called when new options are selected. - * @param newValue - */ - onChange: (newValue: OptionKey|OptionKey[]) => void; - - /** - * Options list or a way to get it from a given search. - */ - options: Record; - - /** - * Render an option. - * @param option The option to render. - */ - renderOption?: (option: Option) => React.ReactNode; - - /** - * Option match function. Return true if the given option matches the given search query. - * @param search The search query. - * @param option The option that should match the search query. - */ - match?: (search: string, option: Option) => boolean; - - /** - * Max count of options to allow to select. - * 1 by default when multiple is false, infinity when multiple is true. - */ - selectibleMaxCount?: number; - - /** - * True to allow to select an infinite count of options. - * false by default. - */ - multiple?: boolean; - - /** - * When true, the select loses focus when a new option is selected (by clicking or pressing Enter). - * false by default. - */ - blurOnSelect?: boolean; - - /** - * When true, the select loses focus when the max count of selectible options have been reached (by clicking or pressing Enter). - * true by default. - */ - blurWhenMaxCountSelected?: boolean; - - // Already set properties. - type?: never; - role?: never; - }>>): React.ReactElement + }: SelectProperties): React.ReactElement { const [search, setSearch] = React.useState("");