@bloomreach/react-banana-ui 1.27.1 → 1.28.0

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

@@ -20,3 +20,8 @@ export declare const Loading: Story;
 export declare const LongContent: Story;
 export declare const FreeSoloSingle: typeof FreeSoloSingleStory;
 export declare const FreeSoloMultiple: typeof FreeSoloMultipleStory;
+export declare const DefaultValueWithInputChangeHandler: Story;
+export declare const CustomOptionRendering: Story<{
+    icon: string;
+    name: string;
+}, true, true>;

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

@@ -1,5 +1,6 @@
 import { default as Autocomplete } from './autocomplete';
 import { Meta, StoryObj } from '@storybook/react';
+import { ReactElement } from 'react';
 declare const meta: Meta<typeof Autocomplete>;
 export default meta;
 export type Story<Value extends NonNullable<unknown> = string, Multiple extends boolean = false, FreeSolo extends boolean = false> = StoryObj<typeof Autocomplete<Value, Multiple, FreeSolo>>;
@@ -26,3 +27,14 @@ export declare const NoOptionsText: Story<string>;
 export declare const Loading: Story;
 export declare const FreeSoloSingle: Story<string, false, true>;
 export declare const FreeSoloMultiple: Story<string, true, true>;
+export declare const DefaultValueWithInputChangeHandler: Story;
+export declare const ControlledInput: Story;
+export declare const CustomOptionRendering: Story<{
+    icon: ReactElement;
+    name: string;
+}, true, true>;
+export declare const HighlightedOptionRendering: Story;
+export declare const RenderOptionWithFreeSoloWithMultiple: Story<{
+    icon: ReactElement;
+    name: string;
+}, true, true>;

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

@@ -1,4 +1,4 @@
-import { AutocompleteGroupedOption as MuiBaseAutocompleteGroupedOption } from '@mui/base';
+import { FilterOptionsState, AutocompleteGroupedOption as MuiBaseAutocompleteGroupedOption } from '@mui/base';
 import { ForwardedRef, ReactElement, ReactNode, SyntheticEvent } from 'react';
 export interface AutocompleteComponentType {
     <AutocompleteOption extends NonNullable<unknown>, Multiple extends boolean = false, FreeSolo extends boolean = false>(props: AutocompleteProps<AutocompleteOption, Multiple, FreeSolo> & {
@@ -32,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.
      */
@@ -42,6 +48,7 @@ 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: AutocompleteFreeSoloValueMapping<FreeSolo> | AutocompleteOption) => string;
@@ -55,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
@@ -83,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.
      */
@@ -99,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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bloomreach/react-banana-ui",
   "type": "module",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "private": false,
   "repository": {
     "type": "git",