@bloomreach/react-banana-ui 1.42.0 → 1.43.0

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

@@ -17,6 +17,7 @@ export declare const SelectAllWithDisabledOptions: Story<{
     id: number;
     label: string;
 }, true>;
+export declare const SelectableTags: Story<(typeof fruits)[0], 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>;

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

@@ -84,6 +84,13 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * The input value.
      */
     inputValue?: string;
+    /**
+     * Determines whether a given tag is highlighted as selected.
+     * Only used when `selectableTags` is `true` and `multiple` is `true`.
+     * @param option The option represented by the tag
+     * @param index The index of the tag in the value array
+     */
+    isTagSelected?: (option: AutocompleteOption, index: number) => boolean;
     /**
      * Icon or any element displayed at the start of the input.
      */
@@ -150,6 +157,14 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
         parsedValues: string[];
         pastedText: string;
     }) => void;
+    /**
+     * Callback fired when a tag body is clicked.
+     * Only used when `selectableTags` is `true` and `multiple` is `true`.
+     * @param event The click/keyboard event
+     * @param option The option represented by the clicked tag
+     * @param index The index of the tag in the value array
+     */
+    onTagClick?: (event: SyntheticEvent, option: AutocompleteOption, index: number) => void;
     /**
      * Array ot options to display.
      */
@@ -197,6 +212,15 @@ 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`, tags become individually selectable: each tag's highlighted
+     * state is controlled by `isTagSelected` and clicking a tag body fires
+     * `onTagClick` (instead of every tag being shown as selected). Useful for
+     * "pick the active item among the selected ones" flows.
+     * Only works when `multiple` is `true`.
+     * @default false
+     */
+    selectableTags?: boolean;
     /**
      * If `true`, a "Select all" checkbox is shown at the top of the listbox
      * that toggles all currently visible (filtered) enabled options.

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

@@ -19,3 +19,4 @@ export declare const FieldsInRow: Story;
 export declare const OptionWithLabel: Story;
 export declare const NoneOption: Story;
 export declare const DisabledOptions: Story;
+export declare const SelectWithDisabledOptions: Story<string, true>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bloomreach/react-banana-ui",
   "type": "module",
-  "version": "1.42.0",
+  "version": "1.43.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -45,7 +45,6 @@
     "release": "npx semantic-release",
     "release:dry-run": "npm run release -- --dry-run --branches $(git rev-parse --abbrev-ref HEAD)",
     "security-audit": "npm audit --audit-level=moderate --only=prod",
-    "sonar": "SONAR_TOKEN=$SONAR_TOKEN docker compose run --remove-orphans sonar-scan",
     "start": "npm run storybook",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",