feat(MultiTypeaheadSelect): make labels removable and customizable (#11774)

* feat(MultiTypeaheadSelect): make labels removable and customizable

* docs(Select): remove duplicate paragraphs

* test: update jest snapshot

Author: adamviktora

packages/react-core/src/components/Select/examples/Select.md

@@ -78,11 +78,6 @@ By default, the menu toggle will display a badge to indicate the number of items
 ```
 
 ### Typeahead
-Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
-
-Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
-
-To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
 
 Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
 
@@ -93,13 +88,6 @@ To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component
 ```
 
 ### Typeahead with create option
-If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value. 
-
-If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
-
-To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
-
-The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
 
 If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
 
@@ -111,14 +99,9 @@ The following example outlines the code implementation required to create a work
 
 ```
 
-### Multiple typeahead with chips
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
-
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
-
-When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
+### Multiple typeahead with labels
 
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a label group to be placed in the select toggle.
 
 When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
 
@@ -127,20 +110,14 @@ When more items than the allowed limit are selected, overflowing items will be h
 ```
 
 ### Multiple typeahead with create option
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
 
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
-
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a label group to display created items as labels.
 
 ```ts file="./SelectMultiTypeaheadCreatable.tsx"
 
 ```
 
 ### Multiple typeahead with checkboxes
-By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
-
-By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 
 By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 

packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
-import { Label, LabelGroup } from '@patternfly/react-core/dist/esm/components/Label';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core/dist/esm/components/Label';
 import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import {
   Select,
@@ -51,6 +51,8 @@ export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' |
   toggleWidth?: string;
   /** Additional props passed to the toggle. */
   toggleProps?: MenuToggleProps;
+  /** Additional props passed to each label of the selected option. */
+  labelProps?: LabelProps;
 }
 
 export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSelectProps> = ({
@@ -65,6 +67,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
   isDisabled,
   toggleWidth,
   toggleProps,
+  labelProps,
   ...props
 }: MultiTypeaheadSelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -302,10 +305,11 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
               <Label
                 key={index}
                 datatest-id={`${selection}-chip`}
-                onClick={(ev) => {
+                onClose={(ev) => {
                   ev.stopPropagation();
                   clearOption(ev, selection);
                 }}
+                {...labelProps}
               >
                 {initialOptions.find((o) => o.value === selection)?.content}
               </Label>

packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
         <button
           aria-label="Clear input value"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-18"
+          data-ouia-component-id="OUIA-Generated-Button-plain-21"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"