@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/autocomplete/types.ts

@@ -1,204 +1,204 @@
-import type { ReactNode, Ref } from "react";
-
-export type AutocompleteSize = "sm" | "md" | "lg";
-
-/**
- * Resolved type of the `value`/`onChange` payload, mirroring MUI's
- * `AutocompleteValue`.
- */
-export type AutocompleteValue<
-	Option,
-	Multiple extends boolean | undefined,
-	FreeSolo extends boolean | undefined = false,
-> = Multiple extends true
-	? Array<FreeSolo extends true ? Option | string : Option>
-	: (FreeSolo extends true ? Option | string : Option) | null;
-
-export type AutocompleteChangeReason = "selectOption" | "removeOption" | "createOption" | "clear" | "blur";
-
-export type AutocompleteInputChangeReason = "input" | "reset" | "clear";
-
-export interface AutocompleteRenderOptionState {
-	/**
-	 * Index of the option in the filtered list.
-	 */
-	index: number;
-	/**
-	 * Current text in the input.
-	 */
-	inputValue: string;
-	/**
-	 * Whether the option is part of the current value.
-	 */
-	selected: boolean;
-}
-
-export interface AutocompleteFilterOptionsState<Option> {
-	inputValue: string;
-	getOptionLabel: (option: Option) => string;
-}
-
-/**
- * Props shared by `Autocomplete` and `Combobox`. Modelled on the MUI
- * `Autocomplete` API, with Designsystemet field props (`label`,
- * `description`, `error`, `data-size`, `data-color`) on top.
- */
-export interface AutocompleteBaseProps<Option, Multiple extends boolean | undefined> {
-	/**
-	 * The options to choose from.
-	 */
-	options: readonly Option[];
-	/**
-	 * Whether several options can be selected. Selected options are rendered
-	 * as chips above the input.
-	 * @default false
-	 */
-	multiple?: Multiple;
-	/**
-	 * Text rendered in the input when it is empty.
-	 */
-	placeholder?: string;
-	/**
-	 * Label for the field.
-	 */
-	label?: ReactNode;
-	/**
-	 * Description rendered below the label.
-	 */
-	description?: ReactNode;
-	/**
-	 * Validation message rendered below the input. Also puts the field in an
-	 * invalid state.
-	 */
-	error?: ReactNode;
-	/**
-	 * Returns the string used as the label of an option, both in the list and
-	 * in the input.
-	 * @default (option) => option.label ?? String(option)
-	 */
-	getOptionLabel?: (option: Option) => string;
-	/**
-	 * Returns the React key for an option.
-	 * @default getOptionLabel
-	 */
-	getOptionKey?: (option: Option) => React.Key;
-	/**
-	 * Returns whether an option should be unselectable.
-	 */
-	getOptionDisabled?: (option: Option) => boolean;
-	/**
-	 * Compares an option to a value. Required when the value is not
-	 * referentially equal to the option.
-	 * @default Object.is
-	 */
-	isOptionEqualToValue?: (option: Option, value: Option) => boolean;
-	/**
-	 * Groups the options under headers. Options must already be sorted by
-	 * group, the same way MUI's `groupBy` works.
-	 */
-	groupBy?: (option: Option) => string;
-	/**
-	 * Filters the options against the current input value. Use
-	 * `createFilterOptions` to tweak the default behaviour.
-	 */
-	filterOptions?: (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => Option[];
-	/**
-	 * Renders the content of an option in the list.
-	 * @default getOptionLabel
-	 */
-	renderOption?: (option: Option, state: AutocompleteRenderOptionState) => ReactNode;
-	/**
-	 * Renders the label of a selected chip when `multiple` is set.
-	 * @default getOptionLabel
-	 */
-	renderChipLabel?: (option: Option) => ReactNode;
-	/**
-	 * Rendered in the popup when there are no options to show.
-	 */
-	noOptionsText?: ReactNode;
-	/**
-	 * Rendered in the popup instead of `noOptionsText` while `loading` is set
-	 * and there are no options.
-	 */
-	loadingText?: ReactNode;
-	/**
-	 * Shows a loading indicator in the input.
-	 * @default false
-	 */
-	loading?: boolean;
-	/**
-	 * Hides the clear button.
-	 * @default false
-	 */
-	disableClearable?: boolean;
-	/**
-	 * The maximum number of options rendered in the list. `-1` renders all.
-	 * @default -1
-	 */
-	limit?: number;
-	/**
-	 * Highlights the first option as the user types.
-	 * @default false
-	 */
-	autoHighlight?: boolean;
-	/**
-	 * Opens the popup when the input is clicked.
-	 * @default true
-	 */
-	openOnFocus?: boolean;
-	/**
-	 * Makes the control fill the width of its container.
-	 * @default true
-	 */
-	fullWidth?: boolean;
-	/**
-	 * The input value. Use together with `onInputChange` for a controlled input.
-	 */
-	inputValue?: string;
-	/**
-	 * Called when the text in the input changes.
-	 */
-	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void;
-	/**
-	 * Whether the popup is open. Use together with `onOpenChange`.
-	 */
-	open?: boolean;
-	/**
-	 * Whether the popup is open initially when uncontrolled.
-	 */
-	defaultOpen?: boolean;
-	/**
-	 * Called when the popup opens or closes.
-	 */
-	onOpenChange?: (open: boolean) => void;
-	/**
-	 * Traps interaction inside the popup while it is open.
-	 * @default false
-	 */
-	modal?: boolean;
-	disabled?: boolean;
-	readOnly?: boolean;
-	required?: boolean;
-	/**
-	 * Name used when the field is submitted as part of a form.
-	 */
-	name?: string;
-	id?: string;
-	className?: string;
-	style?: React.CSSProperties;
-	/**
-	 * Classes for the bordered control that wraps the chips and the input.
-	 */
-	controlClassName?: string;
-	/**
-	 * Classes for the popup element.
-	 */
-	popupClassName?: string;
-	inputRef?: Ref<HTMLInputElement>;
-	/**
-	 * Accessible name for the input. Use when the field has no visible label.
-	 */
-	"aria-label"?: string;
-	"data-size"?: AutocompleteSize;
-	"data-color"?: string;
-}
+import type { ReactNode, Ref } from "react";
+
+export type AutocompleteSize = "sm" | "md" | "lg";
+
+/**
+ * Resolved type of the `value`/`onChange` payload, mirroring MUI's
+ * `AutocompleteValue`.
+ */
+export type AutocompleteValue<
+	Option,
+	Multiple extends boolean | undefined,
+	FreeSolo extends boolean | undefined = false,
+> = Multiple extends true
+	? Array<FreeSolo extends true ? Option | string : Option>
+	: (FreeSolo extends true ? Option | string : Option) | null;
+
+export type AutocompleteChangeReason = "selectOption" | "removeOption" | "createOption" | "clear" | "blur";
+
+export type AutocompleteInputChangeReason = "input" | "reset" | "clear";
+
+export interface AutocompleteRenderOptionState {
+	/**
+	 * Index of the option in the filtered list.
+	 */
+	index: number;
+	/**
+	 * Current text in the input.
+	 */
+	inputValue: string;
+	/**
+	 * Whether the option is part of the current value.
+	 */
+	selected: boolean;
+}
+
+export interface AutocompleteFilterOptionsState<Option> {
+	inputValue: string;
+	getOptionLabel: (option: Option) => string;
+}
+
+/**
+ * Props shared by `Autocomplete` and `Combobox`. Modelled on the MUI
+ * `Autocomplete` API, with Designsystemet field props (`label`,
+ * `description`, `error`, `data-size`, `data-color`) on top.
+ */
+export interface AutocompleteBaseProps<Option, Multiple extends boolean | undefined> {
+	/**
+	 * The options to choose from.
+	 */
+	options: readonly Option[];
+	/**
+	 * Whether several options can be selected. Selected options are rendered
+	 * as chips above the input.
+	 * @default false
+	 */
+	multiple?: Multiple;
+	/**
+	 * Text rendered in the input when it is empty.
+	 */
+	placeholder?: string;
+	/**
+	 * Label for the field.
+	 */
+	label?: ReactNode;
+	/**
+	 * Description rendered below the label.
+	 */
+	description?: ReactNode;
+	/**
+	 * Validation message rendered below the input. Also puts the field in an
+	 * invalid state.
+	 */
+	error?: ReactNode;
+	/**
+	 * Returns the string used as the label of an option, both in the list and
+	 * in the input.
+	 * @default (option) => option.label ?? String(option)
+	 */
+	getOptionLabel?: (option: Option) => string;
+	/**
+	 * Returns the React key for an option.
+	 * @default getOptionLabel
+	 */
+	getOptionKey?: (option: Option) => React.Key;
+	/**
+	 * Returns whether an option should be unselectable.
+	 */
+	getOptionDisabled?: (option: Option) => boolean;
+	/**
+	 * Compares an option to a value. Required when the value is not
+	 * referentially equal to the option.
+	 * @default Object.is
+	 */
+	isOptionEqualToValue?: (option: Option, value: Option) => boolean;
+	/**
+	 * Groups the options under headers. Options must already be sorted by
+	 * group, the same way MUI's `groupBy` works.
+	 */
+	groupBy?: (option: Option) => string;
+	/**
+	 * Filters the options against the current input value. Use
+	 * `createFilterOptions` to tweak the default behaviour.
+	 */
+	filterOptions?: (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => Option[];
+	/**
+	 * Renders the content of an option in the list.
+	 * @default getOptionLabel
+	 */
+	renderOption?: (option: Option, state: AutocompleteRenderOptionState) => ReactNode;
+	/**
+	 * Renders the label of a selected chip when `multiple` is set.
+	 * @default getOptionLabel
+	 */
+	renderChipLabel?: (option: Option) => ReactNode;
+	/**
+	 * Rendered in the popup when there are no options to show.
+	 */
+	noOptionsText?: ReactNode;
+	/**
+	 * Rendered in the popup instead of `noOptionsText` while `loading` is set
+	 * and there are no options.
+	 */
+	loadingText?: ReactNode;
+	/**
+	 * Shows a loading indicator in the input.
+	 * @default false
+	 */
+	loading?: boolean;
+	/**
+	 * Hides the clear button.
+	 * @default false
+	 */
+	disableClearable?: boolean;
+	/**
+	 * The maximum number of options rendered in the list. `-1` renders all.
+	 * @default -1
+	 */
+	limit?: number;
+	/**
+	 * Highlights the first option as the user types.
+	 * @default false
+	 */
+	autoHighlight?: boolean;
+	/**
+	 * Opens the popup when the input is clicked.
+	 * @default true
+	 */
+	openOnFocus?: boolean;
+	/**
+	 * Makes the control fill the width of its container.
+	 * @default true
+	 */
+	fullWidth?: boolean;
+	/**
+	 * The input value. Use together with `onInputChange` for a controlled input.
+	 */
+	inputValue?: string;
+	/**
+	 * Called when the text in the input changes.
+	 */
+	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void;
+	/**
+	 * Whether the popup is open. Use together with `onOpenChange`.
+	 */
+	open?: boolean;
+	/**
+	 * Whether the popup is open initially when uncontrolled.
+	 */
+	defaultOpen?: boolean;
+	/**
+	 * Called when the popup opens or closes.
+	 */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * Traps interaction inside the popup while it is open.
+	 * @default false
+	 */
+	modal?: boolean;
+	disabled?: boolean;
+	readOnly?: boolean;
+	required?: boolean;
+	/**
+	 * Name used when the field is submitted as part of a form.
+	 */
+	name?: string;
+	id?: string;
+	className?: string;
+	style?: React.CSSProperties;
+	/**
+	 * Classes for the bordered control that wraps the chips and the input.
+	 */
+	controlClassName?: string;
+	/**
+	 * Classes for the popup element.
+	 */
+	popupClassName?: string;
+	inputRef?: Ref<HTMLInputElement>;
+	/**
+	 * Accessible name for the input. Use when the field has no visible label.
+	 */
+	"aria-label"?: string;
+	"data-size"?: AutocompleteSize;
+	"data-color"?: string;
+}