@bloomreach/react-banana-ui 1.27.0 → 1.28.0

package/dist/components/inputs/autocomplete/autocomplete.types.d.ts

@@ -1,7 +1,12 @@
-import { AutocompleteGroupedOption as MuiBaseAutocompleteGroupedOption } from '@mui/base';
+import { FilterOptionsState, AutocompleteGroupedOption as MuiBaseAutocompleteGroupedOption } from '@mui/base';
 import { ForwardedRef, ReactElement, ReactNode, SyntheticEvent } from 'react';
-type AutocompleteFreeSoloValueMapping<FreeSolo> = FreeSolo extends true ? string : never;
-export type AutocompleteValue<Value, Multiple, FreeSolo> = Multiple extends true ? Array<Value | AutocompleteFreeSoloValueMapping<FreeSolo>> : Value | null | AutocompleteFreeSoloValueMapping<FreeSolo>;
+export interface AutocompleteComponentType {
+    <AutocompleteOption extends NonNullable<unknown>, Multiple extends boolean = false, FreeSolo extends boolean = false>(props: AutocompleteProps<AutocompleteOption, Multiple, FreeSolo> & {
+        ref?: ForwardedRef<HTMLElement>;
+    }): null | ReactElement;
+    displayName?: string | undefined;
+}
+export type AutocompleteGroupedOption<AutocompleteOption extends NonNullable<unknown>> = MuiBaseAutocompleteGroupedOption<AutocompleteOption>;
 export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknown>, Multiple extends boolean, FreeSolo extends boolean> {
     /**
      * Custom class name for the container of the component.
@@ -27,6 +32,12 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Filter function to determine which options to show based on user input.
+     * @param options The array of options to filter
+     * @param state The current state of the autocomplete
+     */
+    filterOptions?: (options: AutocompleteOption[], state: FilterOptionsState<AutocompleteOption>) => AutocompleteOption[];
     /**
      * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
      */
@@ -37,9 +48,10 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
     getOptionDisabled?: (option: AutocompleteOption) => boolean;
     /**
      * Used to determine the string value for a given option.
+     * This is used for filtering and input value display.
      * @default (option) => option
      */
-    getOptionLabel?: (option: AutocompleteOption | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
+    getOptionLabel?: (option: AutocompleteFreeSoloValueMapping<FreeSolo> | AutocompleteOption) => string;
     /**
      * If provided, the options will be grouped under the returned string.
      * The groupBy value is also used as the text for group headings
@@ -50,6 +62,10 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * @default false
      */
     hideSelectedOptions?: boolean;
+    /**
+     * The input value.
+     */
+    inputValue?: string;
     /**
      * If `true`, the component is in a loading state.
      * @default false
@@ -78,6 +94,10 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * Callback fired when the popup closes.
      */
     onClose?: () => void;
+    /**
+     * Callback fired when the input value changes.
+     */
+    onInputChange?: (event: SyntheticEvent, value: string) => void;
     /**
      * Callback fired when the popup opens.
      */
@@ -94,6 +114,11 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * If `true`, the autocomplete is readonly.
      */
     readOnly?: boolean;
+    /**
+     * Used to render the option in the listbox.
+     * If not provided, getOptionLabel will be used.
+     */
+    renderOption?: (option: AutocompleteOption) => ReactNode;
     /**
      * If `true`, the autocomplete is required.
      * @default false
@@ -106,15 +131,9 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      */
     value?: AutocompleteValue<AutocompleteOption, Multiple, FreeSolo>;
 }
-export interface AutocompleteGroupedOption<AutocompleteOption extends NonNullable<unknown>> extends MuiBaseAutocompleteGroupedOption<AutocompleteOption> {
-}
 export interface AutocompleteRenderGroupParams extends AutocompleteGroupedOption<object> {
     children: ReactNode;
 }
-export interface AutocompleteComponentType {
-    <AutocompleteOption extends NonNullable<unknown>, Multiple extends boolean = false, FreeSolo extends boolean = false>(props: AutocompleteProps<AutocompleteOption, Multiple, FreeSolo> & {
-        ref?: ForwardedRef<HTMLElement>;
-    }): ReactElement | null;
-    displayName?: string | undefined;
-}
+export type AutocompleteValue<Value, Multiple, FreeSolo> = Multiple extends true ? Array<AutocompleteFreeSoloValueMapping<FreeSolo> | Value> : AutocompleteFreeSoloValueMapping<FreeSolo> | null | Value;
+type AutocompleteFreeSoloValueMapping<FreeSolo> = FreeSolo extends true ? string : never;
 export {};

package/dist/components/inputs/base-field/base-field.d.ts

@@ -1,5 +1,4 @@
 import { BaseFieldProps } from './base-field.types';
-export declare const getZeroSpace: () => JSX.Element;
 /**
  * @internal
  * Base component provides the layout for the field which includes:

package/dist/components/inputs/base-field/base-field.types.d.ts

@@ -28,7 +28,7 @@ export interface BaseFieldProps {
      * The position of the label.
      * @default 'block-start'
      */
-    labelPosition?: 'block-start' | 'inline-start' | 'inline-end';
+    labelPosition?: 'block-start' | 'inline-end' | 'inline-start';
     /**
      * The metadata content.
      */

package/dist/components/inputs/base-input/base-input.d.ts

@@ -1,8 +1,3 @@
 import { BaseInputProps } from './base-input.types';
-/**
- * @internal
- * The base input component to enter and edit text.
- * Should be used only by other components and not exposed to the end users.
- */
 declare const BaseInput: import('react').ForwardRefExoticComponent<BaseInputProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BaseInput;

package/dist/components/inputs/base-input/base-input.types.d.ts

@@ -77,15 +77,15 @@ export interface BaseInputProps {
      * If `true`, the `input` or `textarea` will be read-only.
      */
     readOnly?: boolean;
-    /**
-     * If `true`, the `input` or `textarea` will be required.
-     */
-    required?: boolean;
     /**
      * Custom render function for the `input` or `textarea` element.
      * Use this to render a custom `input` or `textarea` element.
      */
-    renderInput?: (props: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, ref: RefCallback<HTMLInputElement | HTMLTextAreaElement> | null) => JSX.Element;
+    renderInput?: (props: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, ref: null | RefCallback<HTMLInputElement | HTMLTextAreaElement>) => JSX.Element;
+    /**
+     * If `true`, the `input` or `textarea` will be required.
+     */
+    required?: boolean;
     /**
      * Icon or any element displayed at the start of the `input` or `textarea`.
      */

package/dist/components/inputs/calendar/calendar.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './calendar.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/inputs/calendar/calendar.stories.d.ts

@@ -1,10 +1,10 @@
-import { ArgTypes, Meta, StoryObj } from '@storybook/react';
 import { default as Calendar } from './calendar';
+import { ArgTypes, Meta, StoryObj } from '@storybook/react';
 /**
  * Convert the number values in the args to Date objects.
  * The storybook URL contains the args as string values, so we need to convert them to Date objects.
  */
-export declare const convertArgsToDate: (dateArgs: string[], args: Record<string, any>) => Record<string, any>;
+export declare const convertArgsToDate: (dateArgs: string[], args: Record<string, unknown>) => Record<string, unknown>;
 export declare const getDateArgNames: (argTypes: ArgTypes) => string[];
 declare const meta: Meta<typeof Calendar>;
 export default meta;

package/dist/components/inputs/calendar/calendar.types.d.ts

@@ -1,4 +1,7 @@
 import { CalendarState } from '@react-stately/calendar';
+export interface CalendarBaseProps {
+    state: CalendarState;
+}
 export interface CalendarProps {
     /**
      * Custom class name for the container of the component.
@@ -46,6 +49,3 @@ export interface CalendarProps {
      */
     value?: Date | null;
 }
-export interface CalendarBaseProps {
-    state: CalendarState;
-}

package/dist/components/inputs/calendar-cell/calendar-cell.types.d.ts

@@ -5,12 +5,12 @@ export interface CalendarCellProps {
      * Custom class name for the container of the component.
      */
     className?: string;
-    /**
-     * The state of the calendar. Use `useCalendarState` to get it.
-     */
-    state: CalendarState;
     /**
      * The date of the cell. Came from the `CalendarGrid` component.
      */
     date: CalendarDate;
+    /**
+     * The state of the calendar. Use `useCalendarState` to get it.
+     */
+    state: CalendarState;
 }

package/dist/components/inputs/checkbox/checkbox.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './checkbox.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Controlled: Story;

package/dist/components/inputs/checkbox/checkbox.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Checkbox } from './checkbox';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Checkbox>;
 export default meta;
 export type Story = StoryObj<typeof Checkbox>;

package/dist/components/inputs/checkbox/checkbox.types.d.ts

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
 export interface CheckboxProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * If `true`, the checkbox is checked.
      */
     checked?: boolean;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * The state of the checkbox when it is initially rendered. Use when you do not need to control its state.
      * @default false
@@ -18,6 +18,15 @@ export interface CheckboxProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * If `true`, the checkbox will be in indeterminate state.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * The props applied to the input element.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     /**
      * Callback fired when the state is changed.
      */
@@ -32,13 +41,4 @@ export interface CheckboxProps {
      * @default false
      */
     required?: boolean;
-    /**
-     * If `true`, the checkbox will be in indeterminate state.
-     * @default false
-     */
-    indeterminate?: boolean;
-    /**
-     * The props applied to the input element.
-     */
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }

package/dist/components/inputs/checkbox-field/checkbox-field.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './checkbox-field.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const WithLabelAndTooltip: Story;

package/dist/components/inputs/checkbox-field/checkbox-field.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as CheckboxField } from './checkbox-field';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof CheckboxField>;
 export default meta;
 export type Story = StoryObj<typeof CheckboxField>;

package/dist/components/inputs/checkbox-group/checkbox-group-context.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export type CheckboxGroupContextType = {
+export interface CheckboxGroupContextType {
     /**
      * If `true`, all the checkboxes within the group will be disabled, preventing user interaction.
      * @default false
@@ -11,5 +11,5 @@ export type CheckboxGroupContextType = {
      * @default false
      */
     readOnly?: boolean;
-};
+}
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextType | null>;

package/dist/components/inputs/checkbox-group/checkbox-group.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Args, Meta } from '@storybook/react';
 import { Story } from './checkbox-group.stories';
+import { Args, Meta } from '@storybook/react';
 import { CheckboxGroupProps } from './checkbox-group.types';
 type StoryArgs = Args & CheckboxGroupProps;
 declare const meta: Meta<StoryArgs>;

package/dist/components/inputs/checkbox-group/checkbox-group.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as CheckboxGroup } from './checkbox-group';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof CheckboxGroup>;
 export default meta;
 export type Story = StoryObj<typeof CheckboxGroup>;

package/dist/components/inputs/date-input/date-input.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './date-input.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/inputs/date-input/date-input.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as DateInput } from './date-input';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof DateInput>;
 export default meta;
 export type Story = StoryObj<typeof DateInput>;

package/dist/components/inputs/date-picker/date-picker.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as DatePicker } from './date-picker';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof DatePicker>;
 export default meta;
 export type Story = StoryObj<typeof DatePicker>;

package/dist/components/inputs/date-picker/use-date-picker.d.ts

@@ -6,7 +6,7 @@ import { DatePickerProps } from './date-picker.types';
  * Custom hook for the DatePicker component.
  */
 export declare function useDatePicker(props: DatePickerProps, state: DatePickerState): {
-    dateInputProps: DateInputProps;
     calendarState: CalendarState;
+    dateInputProps: DateInputProps;
     lockFocus: boolean;
 };

package/dist/components/inputs/date-segment/date-segment.types.d.ts

@@ -1,14 +1,14 @@
 import { DateFieldState, DateSegment } from '@react-stately/datepicker';
 import { ReactNode } from 'react';
 export interface DateSegmentProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * The segment of the date.
      */

package/dist/components/inputs/field-label/field-label.types.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 export interface FieldLabelProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * The `id` of the element the label is associated with.
      */
@@ -16,5 +16,5 @@ export interface FieldLabelProps {
      * The size of the label.
      * @default 'bold'
      */
-    view?: 'normal' | 'bold';
+    view?: 'bold' | 'normal';
 }

package/dist/components/inputs/index.d.ts

@@ -1,14 +1,14 @@
 export * from './autocomplete';
 export * from './calendar';
+export * from './checkbox';
 export * from './checkbox-field';
 export * from './checkbox-group';
-export * from './checkbox';
 export * from './date-input';
 export * from './date-picker';
 export * from './input-field';
+export * from './radio';
 export * from './radio-field';
 export * from './radio-group';
-export * from './radio';
 export * from './select-field';
 export * from './select-option';
 export * from './text-field';

package/dist/components/inputs/input-field/input-field.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './input-field.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const DifferentStates: Story;

package/dist/components/inputs/input-field/input-field.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as InputField } from './input-field';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof InputField>;
 export default meta;
 export type Story = StoryObj<typeof InputField>;

package/dist/components/inputs/internal.d.ts

@@ -1,6 +1,6 @@
 export * from './base-field';
 export * from './base-input';
+export * from './checkbox';
 export * from './field-label';
 export * from './select';
 export * from './toggle';
-export * from './checkbox';

package/dist/components/inputs/radio/radio.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './radio.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const SelectedUncontrolled: Story;

package/dist/components/inputs/radio/radio.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Radio } from './radio';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Radio>;
 export default meta;
 export type Story = StoryObj<typeof Radio>;

package/dist/components/inputs/radio-field/radio-field.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './radio-field.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const WithLabelAndTooltip: Story;

package/dist/components/inputs/radio-field/radio-field.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as RadioField } from './radio-field';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof RadioField>;
 export default meta;
 export type Story = StoryObj<typeof RadioField>;

package/dist/components/inputs/radio-group/radio-group-context.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export type RadioGroupContextType = {
+export interface RadioGroupContextType {
     /**
      * If `true`, all the radio buttons within the group will be disabled, preventing user interaction.
      * @default false
@@ -29,6 +29,6 @@ export type RadioGroupContextType = {
     /**
      * The current value of the radio group. This is usually the value of the selected radio button within the group.
      */
-    value: string | null;
-};
+    value: null | string;
+}
 export declare const RadioGroupContext: React.Context<RadioGroupContextType | null>;

package/dist/components/inputs/radio-group/radio-group.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Args, Meta } from '@storybook/react';
 import { Story } from './radio-group.stories';
+import { Args, Meta } from '@storybook/react';
 import { RadioGroupProps } from './radio-group.types';
 type StoryArgs = Args & RadioGroupProps;
 declare const meta: Meta<StoryArgs>;

package/dist/components/inputs/radio-group/radio-group.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as RadioGroup } from './radio-group';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof RadioGroup>;
 export default meta;
 export type Story = StoryObj<typeof RadioGroup>;

package/dist/components/inputs/radio-group/radio-group.types.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactElement } from 'react';
+import { ReactElement, default as React } from 'react';
 export interface RadioGroupProps {
     /**
      * The child elements of the component. These are usually `Radio` or 'RadioField' components.
@@ -53,5 +53,5 @@ export interface RadioGroupProps {
      * The value of the selected radio field in a controlled component.
      * This is the value that the radio group starts with.
      */
-    value?: string | null;
+    value?: null | string;
 }

package/dist/components/inputs/select/select.types.d.ts

@@ -1,5 +1,10 @@
-import { default as React, ForwardedRef, ReactElement, ReactNode } from 'react';
-export type SelectValue<Value, Multiple> = Multiple extends true ? Value[] : Value | null;
+import { ForwardedRef, ReactElement, ReactNode, default as React } from 'react';
+export interface SelectComponentType {
+    <OptionValue extends NonNullable<unknown>, Multiple extends boolean = false>(props: SelectProps<OptionValue, Multiple> & {
+        ref?: ForwardedRef<HTMLElement>;
+    }): null | ReactElement;
+    displayName?: string | undefined;
+}
 export interface SelectProps<OptionValue extends NonNullable<unknown>, Multiple extends boolean> {
     /**
      * The content of the component.
@@ -38,7 +43,7 @@ export interface SelectProps<OptionValue extends NonNullable<unknown>, Multiple
     /**
      * Callback fired when an option is selected.
      */
-    onChange?: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element> | React.FocusEvent<Element, Element> | React.ChangeEvent<HTMLInputElement> | null, value: SelectValue<OptionValue, Multiple>) => void;
+    onChange?: (event: null | React.ChangeEvent<HTMLInputElement> | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>, value: SelectValue<OptionValue, Multiple>) => void;
     /**
      * Text to show when there is no selected value.
      */
@@ -58,9 +63,4 @@ export interface SelectProps<OptionValue extends NonNullable<unknown>, Multiple
      */
     value?: SelectValue<OptionValue, Multiple>;
 }
-export interface SelectComponentType {
-    <OptionValue extends NonNullable<unknown>, Multiple extends boolean = false>(props: SelectProps<OptionValue, Multiple> & {
-        ref?: ForwardedRef<HTMLElement>;
-    }): ReactElement | null;
-    displayName?: string | undefined;
-}
+export type SelectValue<Value, Multiple> = Multiple extends true ? Value[] : null | Value;

package/dist/components/inputs/select-field/select-field.qa.stories.d.ts

@@ -1,6 +1,6 @@
+import { Story } from './select-field.stories';
 import { Meta } from '@storybook/react';
 import { SelectField } from '.';
-import { Story } from './select-field.stories';
 declare const meta: Meta<typeof SelectField>;
 export default meta;
 export declare const Basic: Story;

package/dist/components/inputs/select-field/select-field.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as SelectField } from './select-field';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof SelectField>;
 export default meta;
 export type Story<ValueType extends NonNullable<unknown> = string, Multiple extends boolean = false> = StoryObj<typeof SelectField<ValueType, Multiple>>;

package/dist/components/inputs/select-field/select-field.types.d.ts

@@ -1,5 +1,11 @@
 import { ForwardedRef, ReactElement, ReactNode } from 'react';
 import { SelectProps } from '../../internal';
+export interface SelectFieldComponentType {
+    <OptionValue extends NonNullable<unknown>, Multiple extends boolean = false>(props: SelectFieldProps<OptionValue, Multiple> & {
+        ref?: ForwardedRef<HTMLElement>;
+    }): null | ReactElement;
+    displayName?: string;
+}
 export interface SelectFieldProps<OptionValue extends NonNullable<unknown>, Multiple extends boolean> extends SelectProps<OptionValue, Multiple> {
     /**
      * The options of the select. Use the `SelectOption` component to define the options.
@@ -30,9 +36,3 @@ export interface SelectFieldProps<OptionValue extends NonNullable<unknown>, Mult
      */
     tooltip?: ReactNode;
 }
-export interface SelectFieldComponentType {
-    <OptionValue extends NonNullable<unknown>, Multiple extends boolean = false>(props: SelectFieldProps<OptionValue, Multiple> & {
-        ref?: ForwardedRef<HTMLElement>;
-    }): ReactElement | null;
-    displayName?: string;
-}

package/dist/components/inputs/select-option/select-option.types.d.ts

@@ -1,30 +1,30 @@
 import { ForwardedRef, ReactElement, ReactNode } from 'react';
+export interface SelectOptionComponentType {
+    <OptionValue>(props: SelectOptionProps<OptionValue> & {
+        ref?: ForwardedRef<HTMLElement>;
+    }): null | ReactElement;
+    displayName?: string;
+}
 export interface SelectOptionProps<OptionValue> {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * If `true`, the option will be disabled.
      */
     disabled?: boolean;
+    /**
+     * A text representation of the option's content. Used for keyboard text navigation matching.
+     */
+    label?: string;
     /**
      * The value of the option.
      * If the value is an object it must have reference equality with the select in order to be selected.
      */
     value: OptionValue;
-    /**
-     * A text representation of the option's content. Used for keyboard text navigation matching.
-     */
-    label?: string;
-}
-export interface SelectOptionComponentType {
-    <OptionValue>(props: SelectOptionProps<OptionValue> & {
-        ref?: ForwardedRef<HTMLElement>;
-    }): ReactElement | null;
-    displayName?: string;
 }

package/dist/components/inputs/text-field/text-field.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './text-field.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const DifferentStates: Story;

package/dist/components/inputs/text-field/text-field.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as TextField } from './text-field';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof TextField>;
 export default meta;
 export type Story = StoryObj<typeof TextField>;