@bloomreach/react-banana-ui 1.37.0 → 1.38.0

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

@@ -6,12 +6,22 @@ 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>>;
 declare const fruits: string[];
 export declare const Basic: Story;
+export declare const CustomWidth: Story;
 export declare const AutoSelect: Story;
 export declare const AutoSelectFreeSoloMultiple: Story<string, true, true>;
 export declare const DefaultValue: Story;
 export declare const ControlledSingleValue: Story;
 export declare const Multiple: Story<(typeof fruits)[0], true>;
+export declare const SelectAll: Story<(typeof fruits)[0], true>;
+export declare const SelectAllWithDisabledOptions: Story<{
+    id: number;
+    label: string;
+}, true>;
 export declare const DefaultValueMultiple: Story<(typeof fruits)[0], true>;
+export declare const LimitTags: Story<(typeof fruits)[0], true>;
+export declare const LimitTagsCustomText: Story<(typeof fruits)[0], true>;
+export declare const MaxRows: Story<(typeof fruits)[0], true>;
+export declare const LimitTagsWithMaxRows: Story<(typeof fruits)[0], true>;
 export declare const ControlledMultipleValue: Story<(typeof fruits)[0], true>;
 export declare const Disabled: Story;
 export declare const DisabledMultiple: Story<(typeof fruits)[0], true>;

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

@@ -49,6 +49,13 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
      */
     freeSolo?: FreeSolo;
+    /**
+     * Customize the overflow text shown when tags are truncated by `limitTags`.
+     * @param more The number of hidden tags
+     * @returns Content to render as the overflow indicator
+     * @default (more) => `+${more}`
+     */
+    getLimitTagsText?: (more: number) => ReactNode;
     /**
      * Used to determine if an option is disabled.
      */
@@ -81,6 +88,12 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * Icon or any element displayed at the start of the input.
      */
     leftElement?: ReactNode;
+    /**
+     * The maximum number of tags visible when the popup is closed.
+     * Set to `-1` to show all tags. Only works when `multiple` is `true`.
+     * @default -1
+     */
+    limitTags?: number;
     /**
      * If `true`, the component is in a loading state.
      * @default false
@@ -91,6 +104,11 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * @default "Loading..."
      */
     loadingText?: string;
+    /**
+     * The maximum number of visible tag rows before the tag area becomes scrollable while the popup is closed.
+     * Only works when `multiple` is `true`.
+     */
+    maxRows?: number;
     /**
      * If `true`, the component allows multiple selections.
      * @default false
@@ -179,12 +197,30 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * Icon or any element displayed at the end of the input, before the clear button and chevron.
      */
     rightElement?: ReactNode;
+    /**
+     * If `true`, a "Select all" checkbox is shown at the top of the listbox
+     * that toggles all currently visible (filtered) enabled options.
+     * Only works when `multiple` is `true`.
+     * @default false
+     */
+    selectAll?: boolean;
+    /**
+     * The label for the select all checkbox.
+     * Only applicable when both `selectAll` and `multiple` are `true`.
+     * @default "Select all"
+     */
+    selectAllLabel?: string;
     /**
      * The selected value.
      * Set to `null` in case of single select and `[]` in case of multiple select to clear the selection.
      * If the value is an object it must have reference equality with the option in order to be selected.
      */
     value?: AutocompleteValue<AutocompleteOption, Multiple, FreeSolo>;
+    /**
+     * The width of the autocomplete input. Accepts any valid CSS width value.
+     * @example '100%', '400px', 'auto'
+     */
+    width?: number | string;
 }
 export interface AutocompleteRenderGroupParams extends AutocompleteGroupedOption<object> {
     children: ReactNode;