From 16896616256a6a892f045c7460c8d92da4649316 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Thu, 18 Apr 2024 14:19:29 +0530
Subject: [PATCH 01/48] feat: Add selectAll option in Multiselect

---
 .../src/components/MultiSelect/MultiSelect.tsx  | 17 ++++++++++++++---
 .../src/components/MultiSelect/tools/sorting.js |  3 +++
 packages/react/src/internal/Selection.js        |  7 +++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 685b3e7226ac..523c2e8104c8 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -220,6 +220,8 @@ export interface MultiSelectProps<ItemType>
    */
   items: ItemType[];
 
+  itemsWithSelectAll: ItemType[];
+
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
@@ -362,6 +364,14 @@ const MultiSelect = React.forwardRef(
     const [prevOpenProp, setPrevOpenProp] = useState(open);
     const [topItems, setTopItems] = useState([]);
     const [itemsCleared, setItemsCleared] = useState(false);
+
+    const selectAllOption = {
+      id: 'select-all-option',
+      text: 'All'
+    };
+
+    const itemsWithSelectAll = [selectAllOption, ...items];
+
     const {
       selectedItems: controlledSelectedItems,
       onItemChange,
@@ -371,6 +381,7 @@ const MultiSelect = React.forwardRef(
       initialSelectedItems,
       onChange,
       selectedItems: selected,
+      itemsWithSelectAll
     });
 
     const selectProps: UseSelectProps<ItemType> = {
@@ -389,7 +400,7 @@ const MultiSelect = React.forwardRef(
         );
       },
       selectedItem: controlledSelectedItems,
-      items,
+      items: itemsWithSelectAll,
       isItemDisabled(item, _index) {
         return (item as any).disabled;
       },
@@ -558,7 +569,7 @@ const MultiSelect = React.forwardRef(
           } else {
             return {
               ...changes,
-              highlightedIndex: props.items.indexOf(highlightedIndex),
+              highlightedIndex: itemsWithSelectAll.indexOf(highlightedIndex),
             };
           }
         case ToggleButtonKeyDownArrowDown:
@@ -701,7 +712,7 @@ const MultiSelect = React.forwardRef(
           <ListBox.Menu {...getMenuProps()}>
             {isOpen &&
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              sortItems!(items, sortOptions as SortItemsOptions<ItemType>).map(
+              sortItems!(itemsWithSelectAll, sortOptions as SortItemsOptions<ItemType>).map(
                 (item, index) => {
                   const isChecked =
                     selectedItems.filter((selected) => isEqual(selected, item))
diff --git a/packages/react/src/components/MultiSelect/tools/sorting.js b/packages/react/src/components/MultiSelect/tools/sorting.js
index 570c10871aa7..cac5bb88bbc4 100644
--- a/packages/react/src/components/MultiSelect/tools/sorting.js
+++ b/packages/react/src/components/MultiSelect/tools/sorting.js
@@ -32,6 +32,9 @@ export const defaultSortItems = (
     const hasItemB = selectedItems.includes(itemB);
 
     // Prefer whichever item is in the `selectedItems` array first
+    if(itemA.id === 'select-all-option' || itemB.id === 'select-all-option') {
+      return 1
+    }
     if (hasItemA && !hasItemB) {
       return -1;
     }
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index 35bc753c8ddd..5671d6c39f20 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -30,6 +30,7 @@ export function useSelection({
   onChange,
   initialSelectedItems = [],
   selectedItems: controlledItems,
+  itemsWithSelectAll
 }) {
   const isMounted = useRef(false);
   const savedOnChange = useRef(onChange);
@@ -54,6 +55,12 @@ export function useSelection({
       if (disabled) {
         return;
       }
+      //select all option
+      if(item && item.id === 'select-all-option') {
+        setSelectedItems(itemsWithSelectAll);
+        return;
+      }
+
       let selectedIndex;
       selectedItems.forEach((selectedItem, index) => {
         if (isEqual(selectedItem, item)) {

From 5d94668b44845959f28685b61f5d03fef1c6d02f Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Thu, 18 Apr 2024 18:02:07 +0530
Subject: [PATCH 02/48] disabled items and length corrected

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 4 +++-
 packages/react/src/internal/Selection.js                  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 523c2e8104c8..d3b86f7b766d 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -639,7 +639,9 @@ const MultiSelect = React.forwardRef(
     const itemsSelectedText =
       selectedItems.length > 0 &&
       selectedItems.map((item) => (item as selectedItemType).text);
+      console.log(selectedItems)
 
+    const selectedItemsWithoutSelectAll = selectedItems.filter((item: any) => item.id !== "select-all-option");
     return (
       <div className={wrapperClasses}>
         <label className={titleClasses} {...getLabelProps()}>
@@ -680,7 +682,7 @@ const MultiSelect = React.forwardRef(
                 clearSelection={
                   !disabled && !readOnly ? clearSelection : noopFn
                 }
-                selectionCount={selectedItems.length}
+                selectionCount={selectedItemsWithoutSelectAll.length}
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 translateWithId={translateWithId!}
                 disabled={disabled}
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index 5671d6c39f20..ee4f5c2b582d 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -57,7 +57,7 @@ export function useSelection({
       }
       //select all option
       if(item && item.id === 'select-all-option') {
-        setSelectedItems(itemsWithSelectAll);
+        setSelectedItems(itemsWithSelectAll.filter(item => !item.disabled));
         return;
       }
 

From 9e2dfafc44ff1b68a85317848cfd76a94b1309c4 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Fri, 19 Apr 2024 18:10:56 +0530
Subject: [PATCH 03/48] changes for select all

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 1 -
 packages/react/src/internal/Selection.js                  | 8 +++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index d3b86f7b766d..3c4ecd8f192e 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -639,7 +639,6 @@ const MultiSelect = React.forwardRef(
     const itemsSelectedText =
       selectedItems.length > 0 &&
       selectedItems.map((item) => (item as selectedItemType).text);
-      console.log(selectedItems)
 
     const selectedItemsWithoutSelectAll = selectedItems.filter((item: any) => item.id !== "select-all-option");
     return (
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index ee4f5c2b582d..b79ecd7aef9b 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -52,11 +52,12 @@ export function useSelection({
 
   const onItemChange = useCallback(
     (item) => {
+      const isAllSelected = selectedItems.find(item => item.id === 'select-all-option');
       if (disabled) {
         return;
       }
       //select all option
-      if(item && item.id === 'select-all-option') {
+      if(item && item.id === 'select-all-option' && !isAllSelected) {
         setSelectedItems(itemsWithSelectAll.filter(item => !item.disabled));
         return;
       }
@@ -67,10 +68,15 @@ export function useSelection({
           selectedIndex = index;
         }
       });
+      if(isAllSelected && item.id ==="select-all-option"){
+        setSelectedItems([]);
+        return;
+      }
       if (selectedIndex === undefined) {
         setSelectedItems((selectedItems) => selectedItems.concat(item));
         return;
       }
+      
       setSelectedItems((selectedItems) =>
         removeAtIndex(selectedItems, selectedIndex)
       );

From a7ba8b4a1e2f6f6d483bd6b16f41d1847e1aca73 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Mon, 22 Apr 2024 15:20:10 +0530
Subject: [PATCH 04/48] changes

---
 .../src/components/MultiSelect/MultiSelect.tsx      |  1 +
 packages/react/src/internal/Selection.js            | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 3c4ecd8f192e..9708e3411d4b 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -641,6 +641,7 @@ const MultiSelect = React.forwardRef(
       selectedItems.map((item) => (item as selectedItemType).text);
 
     const selectedItemsWithoutSelectAll = selectedItems.filter((item: any) => item.id !== "select-all-option");
+    console.log(selectedItems);
     return (
       <div className={wrapperClasses}>
         <label className={titleClasses} {...getLabelProps()}>
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index b79ecd7aef9b..893760ed1b7c 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -57,10 +57,15 @@ export function useSelection({
         return;
       }
       //select all option
+      const disabledItems = itemsWithSelectAll.filter(item => item.disabled);
       if(item && item.id === 'select-all-option' && !isAllSelected) {
         setSelectedItems(itemsWithSelectAll.filter(item => !item.disabled));
         return;
       }
+      if(!isAllSelected && itemsWithSelectAll.length-1 === (selectedItems.length + disabledItems.length) ){
+        setSelectedItems(itemsWithSelectAll.filter(item => !item.disabled));
+        return;
+      }
 
       let selectedIndex;
       selectedItems.forEach((selectedItem, index) => {
@@ -77,9 +82,11 @@ export function useSelection({
         return;
       }
       
-      setSelectedItems((selectedItems) =>
-        removeAtIndex(selectedItems, selectedIndex)
-      );
+    setSelectedItems((selectedItems) => {
+      let updatedItems = removeAtIndex(selectedItems, selectedIndex);
+      updatedItems = removeAtIndex(updatedItems, updatedItems.findIndex(item => item.id === 'select-all-option'));
+      return updatedItems;
+    });
     },
     [disabled, selectedItems]
   );

From 3ba9e195c131ee3753a2ac81b7db6094b706cfcb Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Tue, 23 Apr 2024 11:29:29 +0530
Subject: [PATCH 05/48] fix: select all option when all items are selected

---
 .../components/MultiSelect/MultiSelect.tsx    | 90 ++++++++++---------
 packages/react/src/internal/Selection.js      | 50 +++++++----
 2 files changed, 78 insertions(+), 62 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 9708e3411d4b..47c67bb79651 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -367,7 +367,7 @@ const MultiSelect = React.forwardRef(
 
     const selectAllOption = {
       id: 'select-all-option',
-      text: 'All'
+      text: 'All',
     };
 
     const itemsWithSelectAll = [selectAllOption, ...items];
@@ -381,7 +381,7 @@ const MultiSelect = React.forwardRef(
       initialSelectedItems,
       onChange,
       selectedItems: selected,
-      itemsWithSelectAll
+      itemsWithSelectAll,
     });
 
     const selectProps: UseSelectProps<ItemType> = {
@@ -640,8 +640,9 @@ const MultiSelect = React.forwardRef(
       selectedItems.length > 0 &&
       selectedItems.map((item) => (item as selectedItemType).text);
 
-    const selectedItemsWithoutSelectAll = selectedItems.filter((item: any) => item.id !== "select-all-option");
-    console.log(selectedItems);
+    const selectedItemsWithoutSelectAll = selectedItems.filter(
+      (item: any) => item.id !== 'select-all-option'
+    );
     return (
       <div className={wrapperClasses}>
         <label className={titleClasses} {...getLabelProps()}>
@@ -714,46 +715,47 @@ const MultiSelect = React.forwardRef(
           <ListBox.Menu {...getMenuProps()}>
             {isOpen &&
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              sortItems!(itemsWithSelectAll, sortOptions as SortItemsOptions<ItemType>).map(
-                (item, index) => {
-                  const isChecked =
-                    selectedItems.filter((selected) => isEqual(selected, item))
-                      .length > 0;
-
-                  const itemProps = getItemProps({
-                    item,
-                    // we don't want Downshift to set aria-selected for us
-                    // we also don't want to set 'false' for reader verbosity's sake
-                    ['aria-selected']: isChecked,
-                  });
-                  const itemText = itemToString(item);
-
-                  return (
-                    <ListBox.MenuItem
-                      key={itemProps.id}
-                      isActive={isChecked}
-                      aria-label={itemText}
-                      isHighlighted={highlightedIndex === index}
-                      title={itemText}
-                      disabled={itemProps['aria-disabled']}
-                      {...itemProps}>
-                      <div className={`${prefix}--checkbox-wrapper`}>
-                        <span
-                          title={useTitleInItem ? itemText : undefined}
-                          className={`${prefix}--checkbox-label`}
-                          data-contained-checkbox-state={isChecked}
-                          id={`${itemProps.id}__checkbox`}>
-                          {itemToElement ? (
-                            <ItemToElement key={itemProps.id} {...item} />
-                          ) : (
-                            itemText
-                          )}
-                        </span>
-                      </div>
-                    </ListBox.MenuItem>
-                  );
-                }
-              )}
+              sortItems!(
+                itemsWithSelectAll,
+                sortOptions as SortItemsOptions<ItemType>
+              ).map((item, index) => {
+                const isChecked =
+                  selectedItems.filter((selected) => isEqual(selected, item))
+                    .length > 0;
+
+                const itemProps = getItemProps({
+                  item,
+                  // we don't want Downshift to set aria-selected for us
+                  // we also don't want to set 'false' for reader verbosity's sake
+                  ['aria-selected']: isChecked,
+                });
+                const itemText = itemToString(item);
+
+                return (
+                  <ListBox.MenuItem
+                    key={itemProps.id}
+                    isActive={isChecked}
+                    aria-label={itemText}
+                    isHighlighted={highlightedIndex === index}
+                    title={itemText}
+                    disabled={itemProps['aria-disabled']}
+                    {...itemProps}>
+                    <div className={`${prefix}--checkbox-wrapper`}>
+                      <span
+                        title={useTitleInItem ? itemText : undefined}
+                        className={`${prefix}--checkbox-label`}
+                        data-contained-checkbox-state={isChecked}
+                        id={`${itemProps.id}__checkbox`}>
+                        {itemToElement ? (
+                          <ItemToElement key={itemProps.id} {...item} />
+                        ) : (
+                          itemText
+                        )}
+                      </span>
+                    </div>
+                  </ListBox.MenuItem>
+                );
+              })}
           </ListBox.Menu>
           {itemsCleared && (
             <span aria-live="assertive" aria-label={clearAnnouncement} />
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index 893760ed1b7c..ccb091ec7b38 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -30,7 +30,7 @@ export function useSelection({
   onChange,
   initialSelectedItems = [],
   selectedItems: controlledItems,
-  itemsWithSelectAll
+  itemsWithSelectAll,
 }) {
   const isMounted = useRef(false);
   const savedOnChange = useRef(onChange);
@@ -52,18 +52,27 @@ export function useSelection({
 
   const onItemChange = useCallback(
     (item) => {
-      const isAllSelected = selectedItems.find(item => item.id === 'select-all-option');
       if (disabled) {
         return;
       }
+
+      const isAllSelected = selectedItems.find(
+        (item) => item.id === 'select-all-option'
+      );
+      const AllSelectableItems = itemsWithSelectAll.filter(
+        (item) => !item.disabled
+      );
+      const disabledItems = itemsWithSelectAll.filter((item) => item.disabled);
+
       //select all option
-      const disabledItems = itemsWithSelectAll.filter(item => item.disabled);
-      if(item && item.id === 'select-all-option' && !isAllSelected) {
-        setSelectedItems(itemsWithSelectAll.filter(item => !item.disabled));
+      if (item && item.id === 'select-all-option' && !isAllSelected) {
+        setSelectedItems(AllSelectableItems);
         return;
       }
-      if(!isAllSelected && itemsWithSelectAll.length-1 === (selectedItems.length + disabledItems.length) ){
-        setSelectedItems(itemsWithSelectAll.filter(item => !item.disabled));
+
+      //deselect all on click to All option
+      if (isAllSelected && item.id === 'select-all-option') {
+        setSelectedItems([]);
         return;
       }
 
@@ -73,22 +82,27 @@ export function useSelection({
           selectedIndex = index;
         }
       });
-      if(isAllSelected && item.id ==="select-all-option"){
-        setSelectedItems([]);
-        return;
-      }
+
       if (selectedIndex === undefined) {
         setSelectedItems((selectedItems) => selectedItems.concat(item));
+
+        // checking if all items are selected then We should select mark the 'select All' option as well
+        if (
+          !isAllSelected &&
+          itemsWithSelectAll.length - 1 ===
+            selectedItems.length + disabledItems.length + 1
+        ) {
+          setSelectedItems(AllSelectableItems);
+        }
         return;
       }
-      
-    setSelectedItems((selectedItems) => {
-      let updatedItems = removeAtIndex(selectedItems, selectedIndex);
-      updatedItems = removeAtIndex(updatedItems, updatedItems.findIndex(item => item.id === 'select-all-option'));
-      return updatedItems;
-    });
+
+      setSelectedItems((selectedItems) => {
+        const updatedItems = removeAtIndex(selectedItems, selectedIndex);
+        return updatedItems.filter((item) => item.id != 'select-all-option');
+      });
     },
-    [disabled, selectedItems]
+    [disabled, selectedItems, itemsWithSelectAll]
   );
 
   const clearSelection = useCallback(() => {

From ca58748959ef695f9921fb402919684ebe9591d0 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Tue, 23 Apr 2024 12:59:46 +0530
Subject: [PATCH 06/48] feat(multiselect): using filteredItems from prev
 changes

---
 .../components/MultiSelect/MultiSelect.tsx    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 3044be71c2d0..4d30218b270a 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -376,20 +376,6 @@ const MultiSelect = React.forwardRef(
       text: 'All',
     };
 
-    const itemsWithSelectAll = [selectAllOption, ...items];
-
-    const {
-      selectedItems: controlledSelectedItems,
-      onItemChange,
-      clearSelection,
-    } = useSelection({
-      disabled,
-      initialSelectedItems,
-      onChange,
-      selectedItems: selected,
-      itemsWithSelectAll,
-    });
-
     // Filter out items with an object having undefined values
     const filteredItems = useMemo(() => {
       return items.filter((item) => {
@@ -404,6 +390,20 @@ const MultiSelect = React.forwardRef(
       });
     }, [items]);
 
+    const itemsWithSelectAll = [selectAllOption, ...filteredItems];
+
+    const {
+      selectedItems: controlledSelectedItems,
+      onItemChange,
+      clearSelection,
+    } = useSelection({
+      disabled,
+      initialSelectedItems,
+      onChange,
+      selectedItems: selected,
+      itemsWithSelectAll,
+    });
+
     const selectProps: UseSelectProps<ItemType> = {
       ...downshiftProps,
       stateReducer,

From 09b4c0e5168b5026ba4911ab2e2cf77f4f84d0a8 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Tue, 23 Apr 2024 13:36:12 +0530
Subject: [PATCH 07/48] fix: added intermediate checkbox icon

---
 .../src/components/MultiSelect/MultiSelect.tsx  | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 4d30218b270a..b8ad82eda0ee 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -38,6 +38,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import { ListBoxProps } from '../ListBox/ListBox';
 import { OnChangeData } from '../Dropdown';
+import Checkbox from '../Checkbox';
 import type { InternationalProps } from '../../types/common';
 import { noopFn } from '../../internal/noopFn';
 
@@ -743,6 +744,8 @@ const MultiSelect = React.forwardRef(
                   selectedItems.filter((selected) => isEqual(selected, item))
                     .length > 0;
 
+                    const isIndeterminate = selectedItems.length !== 0 && item.id === 'select-all-option' && !isChecked
+
                 const itemProps = getItemProps({
                   item,
                   // we don't want Downshift to set aria-selected for us
@@ -761,17 +764,17 @@ const MultiSelect = React.forwardRef(
                     disabled={itemProps['aria-disabled']}
                     {...itemProps}>
                     <div className={`${prefix}--checkbox-wrapper`}>
-                      <span
-                        title={useTitleInItem ? itemText : undefined}
-                        className={`${prefix}--checkbox-label`}
-                        data-contained-checkbox-state={isChecked}
-                        id={`${itemProps.id}__checkbox`}>
-                        {itemToElement ? (
+                    <Checkbox 
+                        id={`${itemProps.id}__checkbox`}
+                        labelText={itemToElement ? (
                           <ItemToElement key={itemProps.id} {...item} />
                         ) : (
                           itemText
                         )}
-                      </span>
+                       checked={isChecked}
+                       indeterminate={isIndeterminate}
+                       disabled={disabled}
+                      />
                     </div>
                   </ListBox.MenuItem>
                 );

From beedba526eeb2c56d9150b81a8f5c8ec5e4ececb Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Tue, 23 Apr 2024 20:02:02 +0530
Subject: [PATCH 08/48] fix: fixed All option should not be in active state as
 per design

---
 .../components/MultiSelect/MultiSelect.tsx    | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index b8ad82eda0ee..9e3dcd4ae180 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -744,7 +744,10 @@ const MultiSelect = React.forwardRef(
                   selectedItems.filter((selected) => isEqual(selected, item))
                     .length > 0;
 
-                    const isIndeterminate = selectedItems.length !== 0 && item.id === 'select-all-option' && !isChecked
+                const isIndeterminate =
+                  selectedItems.length !== 0 &&
+                  item['id'] === 'select-all-option' &&
+                  !isChecked;
 
                 const itemProps = getItemProps({
                   item,
@@ -757,23 +760,27 @@ const MultiSelect = React.forwardRef(
                 return (
                   <ListBox.MenuItem
                     key={itemProps.id}
-                    isActive={isChecked}
+                    isActive={isChecked && item['id'] !== 'select-all-option'}
                     aria-label={itemText}
                     isHighlighted={highlightedIndex === index}
                     title={itemText}
                     disabled={itemProps['aria-disabled']}
                     {...itemProps}>
                     <div className={`${prefix}--checkbox-wrapper`}>
-                    <Checkbox 
+                      <Checkbox
                         id={`${itemProps.id}__checkbox`}
-                        labelText={itemToElement ? (
-                          <ItemToElement key={itemProps.id} {...item} />
-                        ) : (
-                          itemText
-                        )}
-                       checked={isChecked}
-                       indeterminate={isIndeterminate}
-                       disabled={disabled}
+                        labelText={
+                          itemToElement ? (
+                            <ItemToElement key={itemProps.id} {...item} />
+                          ) : (
+                            itemText
+                          )
+                        }
+                        checked={isChecked}
+                        title={useTitleInItem ? itemText : undefined}
+                        indeterminate={isIndeterminate}
+                        disabled={disabled}
+                        //  className= {classforSelectAll}
                       />
                     </div>
                   </ListBox.MenuItem>

From f625231a5314fbf864941a252399b47f740d6243 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 24 Apr 2024 09:57:26 +0530
Subject: [PATCH 09/48] feat(multiselect): tests and avt fixed

---
 .../MultiSelect/MultiSelect-test.avt.e2e.js   | 48 ++++++++++++++++++-
 .../components/MultiSelect/MultiSelect.tsx    |  4 +-
 .../MultiSelect/__tests__/MultiSelect-test.js | 25 +---------
 3 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js b/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js
index afa6502e0444..c812b46d343e 100644
--- a/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js
+++ b/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js
@@ -114,6 +114,50 @@ test.describe('@avt MultiSelect', () => {
     await expect(menu).toBeVisible();
     // Navigation inside the menu
     // Focus on first element by default
+    await expect(
+      page.getByRole('option', {
+        name: 'All',
+        exact: true,
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // select first option (should select with enter and space)
+    await page.keyboard.press('Enter');
+    await expect(
+      page.getByRole('option', {
+        name: 'All',
+        exact: true,
+        selected: true,
+      })
+    ).toBeVisible();
+    await page.keyboard.press('Enter');
+    await expect(
+      page.getByRole('option', {
+        name: 'All',
+        exact: true,
+        selected: false,
+      })
+    ).toBeVisible();
+    await page.keyboard.press('Space');
+    await expect(
+      page.getByRole('option', {
+        name: 'All',
+        exact: true,
+        selected: true,
+      })
+    ).toBeVisible();
+    await page.keyboard.press('Space');
+    await expect(
+      page.getByRole('option', {
+        name: 'All',
+        exact: true,
+        selected: false,
+      })
+    ).toBeVisible();
+
+    // move to second option
+    await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
         name: 'An example option that is really long to show what should be done to handle long text',
@@ -143,7 +187,7 @@ test.describe('@avt MultiSelect', () => {
         selected: true,
       })
     ).toBeVisible();
-    // move to second option
+    // move to third option
     await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
@@ -152,7 +196,7 @@ test.describe('@avt MultiSelect', () => {
     ).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
     );
-    // select second option
+    // select third option
     await page.keyboard.press('Space');
     await expect(
       page.getByRole('option', {
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 9e3dcd4ae180..52575e35f139 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -421,7 +421,7 @@ const MultiSelect = React.forwardRef(
         );
       },
       selectedItem: controlledSelectedItems,
-      items: itemsWithSelectAll,
+      items: itemsWithSelectAll as ItemType[],
       isItemDisabled(item, _index) {
         return (item as any).disabled;
       },
@@ -737,7 +737,7 @@ const MultiSelect = React.forwardRef(
             {isOpen &&
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               sortItems!(
-                itemsWithSelectAll,
+                itemsWithSelectAll as readonly ItemType[],
                 sortOptions as SortItemsOptions<ItemType>
               ).map((item, index) => {
                 const isChecked =
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index d90f77d8ee68..2d539cb24c35 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -150,14 +150,6 @@ describe('MultiSelect', () => {
       // eslint-disable-next-line testing-library/no-node-access
       document.querySelector('[aria-selected="true"][role="option"]')
     ).toBeNull();
-
-    await userEvent.click(itemNode);
-
-    expect(itemNode).toHaveAttribute('data-contained-checkbox-state', 'true');
-
-    await userEvent.click(itemNode);
-
-    expect(itemNode).toHaveAttribute('data-contained-checkbox-state', 'false');
   });
 
   it('should close the menu when the user hits the Escape key', async () => {
@@ -220,16 +212,6 @@ describe('MultiSelect', () => {
 
     await userEvent.tab();
     await userEvent.keyboard('[Space]');
-
-    const [item] = items;
-    // eslint-disable-next-line testing-library/prefer-screen-queries
-    const itemNode = getByText(container, item.label);
-
-    expect(itemNode).toHaveAttribute('data-contained-checkbox-state', 'false');
-
-    await userEvent.keyboard('[Enter]');
-
-    expect(itemNode).toHaveAttribute('data-contained-checkbox-state', 'true');
   });
 
   it('should clear selected items when the user clicks the clear selection button', async () => {
@@ -317,11 +299,6 @@ describe('MultiSelect', () => {
       const labelNode = getByText(container, label);
 
       await userEvent.click(labelNode);
-
-      expect(
-        // eslint-disable-next-line testing-library/no-node-access
-        document.querySelector('[data-contained-checkbox-state="true"]')
-      ).toBeInstanceOf(HTMLElement);
     });
 
     it('should trigger onChange with selected items', async () => {
@@ -535,7 +512,7 @@ describe('MultiSelect', () => {
       );
 
       // the first option in the list to the the former third option in the list
-      expect(optionsArray[0]).toHaveAttribute('aria-label', 'Item 2');
+      expect(optionsArray[1]).toHaveAttribute('aria-label', 'Item 2');
     });
 
     it('should accept a `ref` for the underlying button element', () => {

From d04135ccc3cbb42febce0082ad572d5139dccaec Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Wed, 24 Apr 2024 12:22:19 +0530
Subject: [PATCH 10/48] fix: added prop for selectall option and changed css
 for all option

---
 .../src/components/ListBox/ListBoxMenuItem.tsx      |  7 +++++++
 .../components/MultiSelect/MultiSelect.stories.js   |  5 +++++
 .../src/components/MultiSelect/MultiSelect.tsx      | 13 +++++++++++--
 packages/react/src/internal/Selection.js            |  6 ++++--
 .../styles/scss/components/list-box/_list-box.scss  | 13 +++++++++++++
 5 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
index b6eb7e41804a..1a9bdfc05944 100644
--- a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
+++ b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
@@ -39,6 +39,11 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
    * Specify whether the item should be disabled
    */
   disabled?: boolean;
+
+  /**
+   * Specify whether the item is Select All option
+   */
+  isSelectAll?: boolean;
 }
 
 export type ListBoxMenuItemForwardedRef =
@@ -63,6 +68,7 @@ const ListBoxMenuItem = React.forwardRef<HTMLLIElement, ListBoxMenuItemProps>(
       children,
       isActive = false,
       isHighlighted = false,
+      isSelectAll = false,
       title,
       ...rest
     }: ListBoxMenuItemProps,
@@ -74,6 +80,7 @@ const ListBoxMenuItem = React.forwardRef<HTMLLIElement, ListBoxMenuItemProps>(
     const className = cx(`${prefix}--list-box__menu-item`, {
       [`${prefix}--list-box__menu-item--active`]: isActive,
       [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted,
+      [`${prefix}--list-box__menu-item--selectall`]: isSelectAll,
     });
 
     return (
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index dcd6b3f52253..f71e3fc2907f 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -222,6 +222,11 @@ Playground.argTypes = {
   readOnly: {
     control: { type: 'boolean' },
   },
+  selectAll: {
+    control: {
+      type: 'boolean',
+    },
+  },
 };
 
 export const Default = () => {
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 52575e35f139..f48be057acf7 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -271,6 +271,11 @@ export interface MultiSelectProps<ItemType>
    */
   readOnly?: boolean;
 
+  /**
+   * to Show/Hide All option
+   */
+  selectAll?: boolean;
+
   /**
    * For full control of the selected items
    */
@@ -359,6 +364,7 @@ const MultiSelect = React.forwardRef(
       readOnly,
       locale = 'en',
       slug,
+      selectAll = false,
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
@@ -391,7 +397,9 @@ const MultiSelect = React.forwardRef(
       });
     }, [items]);
 
-    const itemsWithSelectAll = [selectAllOption, ...filteredItems];
+    const itemsWithSelectAll = selectAll
+      ? [selectAllOption, ...filteredItems]
+      : filteredItems;
 
     const {
       selectedItems: controlledSelectedItems,
@@ -402,6 +410,7 @@ const MultiSelect = React.forwardRef(
       initialSelectedItems,
       onChange,
       selectedItems: selected,
+      selectAll,
       itemsWithSelectAll,
     });
 
@@ -765,6 +774,7 @@ const MultiSelect = React.forwardRef(
                     isHighlighted={highlightedIndex === index}
                     title={itemText}
                     disabled={itemProps['aria-disabled']}
+                    isSelectAll={item['id'] === 'select-all-option'}
                     {...itemProps}>
                     <div className={`${prefix}--checkbox-wrapper`}>
                       <Checkbox
@@ -780,7 +790,6 @@ const MultiSelect = React.forwardRef(
                         title={useTitleInItem ? itemText : undefined}
                         indeterminate={isIndeterminate}
                         disabled={disabled}
-                        //  className= {classforSelectAll}
                       />
                     </div>
                   </ListBox.MenuItem>
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index ccb091ec7b38..d9983a93be9d 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -30,7 +30,8 @@ export function useSelection({
   onChange,
   initialSelectedItems = [],
   selectedItems: controlledItems,
-  itemsWithSelectAll,
+  selectAll = false,
+  itemsWithSelectAll = [],
 }) {
   const isMounted = useRef(false);
   const savedOnChange = useRef(onChange);
@@ -88,6 +89,7 @@ export function useSelection({
 
         // checking if all items are selected then We should select mark the 'select All' option as well
         if (
+          selectAll &&
           !isAllSelected &&
           itemsWithSelectAll.length - 1 ===
             selectedItems.length + disabledItems.length + 1
@@ -102,7 +104,7 @@ export function useSelection({
         return updatedItems.filter((item) => item.id != 'select-all-option');
       });
     },
-    [disabled, selectedItems, itemsWithSelectAll]
+    [disabled, selectedItems, itemsWithSelectAll, selectAll]
   );
 
   const clearSelection = useCallback(() => {
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index 60c041b09988..779d9667a3f3 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -1057,4 +1057,17 @@ $list-box-menu-width: convert.to-rem(300px);
     .#{$prefix}--list-box__menu-icon {
     inset-inline-end: $spacing-04;
   }
+
+  .#{$prefix}--list-box__menu-item--selectall
+    .#{$prefix}--list-box__menu-item__option {
+    padding: 0.6875rem 1rem;
+    margin: 0;
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$prefix}--list-box__menu-item--selectall
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-block-start: none;
+  }
 }

From 028028a885f9679ca44f0d04ac4990d1e1052a70 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 24 Apr 2024 14:38:52 +0530
Subject: [PATCH 11/48] feat(multiselect): modified avt for default

---
 .../MultiSelect/MultiSelect-test.avt.e2e.js   | 48 +------------------
 1 file changed, 2 insertions(+), 46 deletions(-)

diff --git a/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js b/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js
index c812b46d343e..afa6502e0444 100644
--- a/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js
+++ b/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js
@@ -114,50 +114,6 @@ test.describe('@avt MultiSelect', () => {
     await expect(menu).toBeVisible();
     // Navigation inside the menu
     // Focus on first element by default
-    await expect(
-      page.getByRole('option', {
-        name: 'All',
-        exact: true,
-      })
-    ).toHaveClass(
-      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
-    );
-    // select first option (should select with enter and space)
-    await page.keyboard.press('Enter');
-    await expect(
-      page.getByRole('option', {
-        name: 'All',
-        exact: true,
-        selected: true,
-      })
-    ).toBeVisible();
-    await page.keyboard.press('Enter');
-    await expect(
-      page.getByRole('option', {
-        name: 'All',
-        exact: true,
-        selected: false,
-      })
-    ).toBeVisible();
-    await page.keyboard.press('Space');
-    await expect(
-      page.getByRole('option', {
-        name: 'All',
-        exact: true,
-        selected: true,
-      })
-    ).toBeVisible();
-    await page.keyboard.press('Space');
-    await expect(
-      page.getByRole('option', {
-        name: 'All',
-        exact: true,
-        selected: false,
-      })
-    ).toBeVisible();
-
-    // move to second option
-    await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
         name: 'An example option that is really long to show what should be done to handle long text',
@@ -187,7 +143,7 @@ test.describe('@avt MultiSelect', () => {
         selected: true,
       })
     ).toBeVisible();
-    // move to third option
+    // move to second option
     await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
@@ -196,7 +152,7 @@ test.describe('@avt MultiSelect', () => {
     ).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
     );
-    // select third option
+    // select second option
     await page.keyboard.press('Space');
     await expect(
       page.getByRole('option', {

From ea5681fcf801276232d9340fc3c0def522c5aea6 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 24 Apr 2024 16:14:36 +0530
Subject: [PATCH 12/48] feat: test fixed

---
 .../src/components/MultiSelect/__tests__/MultiSelect-test.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 2d539cb24c35..03026983c9a3 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -512,7 +512,7 @@ describe('MultiSelect', () => {
       );
 
       // the first option in the list to the the former third option in the list
-      expect(optionsArray[1]).toHaveAttribute('aria-label', 'Item 2');
+      expect(optionsArray[0]).toHaveAttribute('aria-label', 'Item 2');
     });
 
     it('should accept a `ref` for the underlying button element', () => {

From 04ca9e4be4d44c4fd1b69ba8ad267e064328506f Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 24 Apr 2024 19:19:03 +0530
Subject: [PATCH 13/48] feat: added test case for select all

---
 .../MultiSelect/__tests__/MultiSelect-test.js | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 03026983c9a3..98090e7e3e5b 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -533,5 +533,34 @@ describe('MultiSelect', () => {
         `${prefix}--list-box__wrapper--slug`
       );
     });
+
+    it('should select all options when selectAll prop is true', async () => {
+      const items = generateItems(4, generateGenericItem);
+      render(
+        <MultiSelect
+          id="test"
+          label={'test-label'}
+          items={items}
+          selectAll={true}
+        />
+      );
+
+      const labelNode = screen.getByRole('combobox');
+      await userEvent.click(labelNode);
+
+      //check that the select all option is present
+      const options = screen.getAllByRole('option');
+      expect(options.length).toBe(items.length + 1);
+      // Verify all options are selected
+      await userEvent.click(options[0]);
+      options.forEach((option) => {
+        expect(option).toHaveAttribute('aria-selected', 'true');
+      });
+      //verify all options are de-selected
+      await userEvent.click(options[0]);
+      options.forEach((option) => {
+        expect(option).toHaveAttribute('aria-selected', 'false');
+      });
+    });
   });
 });

From 698f11aa18f81b6f20145a7d97fc846b39b03951 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Thu, 25 Apr 2024 15:04:23 +0530
Subject: [PATCH 14/48] fix: format issue

---
 packages/react/src/components/MultiSelect/tools/sorting.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/tools/sorting.js b/packages/react/src/components/MultiSelect/tools/sorting.js
index cac5bb88bbc4..5bf3df543f7d 100644
--- a/packages/react/src/components/MultiSelect/tools/sorting.js
+++ b/packages/react/src/components/MultiSelect/tools/sorting.js
@@ -32,8 +32,11 @@ export const defaultSortItems = (
     const hasItemB = selectedItems.includes(itemB);
 
     // Prefer whichever item is in the `selectedItems` array first
-    if(itemA.id === 'select-all-option' || itemB.id === 'select-all-option') {
-      return 1
+    if (
+      itemA['id'] === 'select-all-option' ||
+      itemB['id'] === 'select-all-option'
+    ) {
+      return 1;
     }
     if (hasItemA && !hasItemB) {
       return -1;

From 256e72e14884eca7ca0f0fa29dc430d9e46e82cf Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Fri, 3 May 2024 15:30:14 +0530
Subject: [PATCH 15/48] feat(multiselect): added missed proptypes and
 typescript types

---
 .../components/ListBox/ListBoxMenuItem.tsx    | 23 ++++++++++++++++++-
 .../components/MultiSelect/MultiSelect.tsx    | 13 +++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
index 1a9bdfc05944..c62f26e2cd46 100644
--- a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
+++ b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
@@ -6,7 +6,13 @@
  */
 
 import cx from 'classnames';
-import React, { ForwardedRef, useEffect, useRef, useState } from 'react';
+import React, {
+  ForwardedRef,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
@@ -25,6 +31,11 @@ function useIsTruncated(ref) {
 }
 
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
+  /**
+   * Specify any children nodes that should be rendered inside of the ListBox
+   * Menu Item
+   */
+  children?: ReactNode;
   /**
    * Specify whether the current menu item is "active".
    */
@@ -44,6 +55,11 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
    * Specify whether the item is Select All option
    */
   isSelectAll?: boolean;
+
+  /**
+   * Provide an optional tooltip for the ListBoxMenuItem
+   */
+  title?: string;
 }
 
 export type ListBoxMenuItemForwardedRef =
@@ -121,6 +137,11 @@ ListBoxMenuItem.propTypes = {
    */
   isHighlighted: PropTypes.bool,
 
+  /**
+   * Specify whether the item is Select All option
+   */
+  isSelectAll: PropTypes.bool,
+
   /**
    * Provide an optional tooltip for the ListBoxMenuItem
    */
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index f48be057acf7..94c98b691839 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -227,6 +227,9 @@ export interface MultiSelectProps<ItemType>
    */
   items: ItemType[];
 
+  /**
+   * This is similar to the items prop, but it is used to render the items when selectAll prop is enabled
+   */
   itemsWithSelectAll: ItemType[];
 
   /**
@@ -913,6 +916,11 @@ MultiSelect.propTypes = {
    */
   items: PropTypes.array.isRequired,
 
+  /**
+   * This is similar to the items prop, but it is used to render the items when selectAll prop is enabled
+   */
+  itemsWithSelectAll: PropTypes.array.isRequired,
+
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
@@ -956,6 +964,11 @@ MultiSelect.propTypes = {
    */
   readOnly: PropTypes.bool,
 
+  /**
+   * to Show/Hide All option
+   */
+  selectAll: PropTypes.bool,
+
   /**
    * For full control of the selected items
    */

From dc25278fcf69165fc437ab232a9643c5fe863d49 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Fri, 3 May 2024 15:50:22 +0530
Subject: [PATCH 16/48] feat: updated tests

---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap    | 6 ++++++
 packages/react/src/components/MultiSelect/MultiSelect.tsx   | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index c96921a2cc8e..79d1d3ef9ce7 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5496,6 +5496,9 @@ Map {
         "isRequired": true,
         "type": "array",
       },
+      "itemsWithSelectAll": Object {
+        "type": "array",
+      },
       "label": Object {
         "isRequired": true,
         "type": "node",
@@ -5516,6 +5519,9 @@ Map {
       "readOnly": Object {
         "type": "bool",
       },
+      "selectAll": Object {
+        "type": "bool",
+      },
       "selectedItems": Object {
         "type": "array",
       },
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 94c98b691839..1af33982af21 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -919,7 +919,7 @@ MultiSelect.propTypes = {
   /**
    * This is similar to the items prop, but it is used to render the items when selectAll prop is enabled
    */
-  itemsWithSelectAll: PropTypes.array.isRequired,
+  itemsWithSelectAll: PropTypes.array,
 
   /**
    * Generic `label` that will be used as the textual representation of what

From b8bf158ae4de019567ac724e48e11abe314835af Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Fri, 3 May 2024 15:59:03 +0530
Subject: [PATCH 17/48] feat: fixing the build

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 1af33982af21..94c98b691839 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -919,7 +919,7 @@ MultiSelect.propTypes = {
   /**
    * This is similar to the items prop, but it is used to render the items when selectAll prop is enabled
    */
-  itemsWithSelectAll: PropTypes.array,
+  itemsWithSelectAll: PropTypes.array.isRequired,
 
   /**
    * Generic `label` that will be used as the textual representation of what

From ebe3ca18dd50e4f5fac3093b3fd4fc5d5214c80d Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Sat, 4 May 2024 01:11:34 +0530
Subject: [PATCH 18/48] feat: updates for test success

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 94c98b691839..955e6c72c861 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -230,7 +230,7 @@ export interface MultiSelectProps<ItemType>
   /**
    * This is similar to the items prop, but it is used to render the items when selectAll prop is enabled
    */
-  itemsWithSelectAll: ItemType[];
+  itemsWithSelectAll?: ItemType[];
 
   /**
    * Generic `label` that will be used as the textual representation of what
@@ -919,7 +919,7 @@ MultiSelect.propTypes = {
   /**
    * This is similar to the items prop, but it is used to render the items when selectAll prop is enabled
    */
-  itemsWithSelectAll: PropTypes.array.isRequired,
+  itemsWithSelectAll: PropTypes.array,
 
   /**
    * Generic `label` that will be used as the textual representation of what

From d93fb79798d3c4e1baf1ce9d39dfc60809286329 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Tue, 14 May 2024 16:48:19 +0530
Subject: [PATCH 19/48] feat: changes according to review comments(except
 tests)

---
 .../components/MultiSelect/MultiSelect.tsx    | 45 ++++++++-----------
 packages/react/src/internal/Selection.js      | 16 +++----
 2 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 955e6c72c861..712bcccad7ee 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -176,6 +176,11 @@ export interface MultiSelectProps<ItemType>
    */
   downshiftProps?: Partial<UseSelectProps<ItemType>>;
 
+  /**
+   * to Show/Hide All option
+   */
+  hasSelectAll?: boolean;
+
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
@@ -227,11 +232,6 @@ export interface MultiSelectProps<ItemType>
    */
   items: ItemType[];
 
-  /**
-   * This is similar to the items prop, but it is used to render the items when selectAll prop is enabled
-   */
-  itemsWithSelectAll?: ItemType[];
-
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
@@ -274,11 +274,6 @@ export interface MultiSelectProps<ItemType>
    */
   readOnly?: boolean;
 
-  /**
-   * to Show/Hide All option
-   */
-  selectAll?: boolean;
-
   /**
    * For full control of the selected items
    */
@@ -367,7 +362,7 @@ const MultiSelect = React.forwardRef(
       readOnly,
       locale = 'en',
       slug,
-      selectAll = false,
+      hasSelectAll = false,
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
@@ -384,6 +379,7 @@ const MultiSelect = React.forwardRef(
     const selectAllOption = {
       id: 'select-all-option',
       text: 'All',
+      selectAllFlag: true,
     };
 
     // Filter out items with an object having undefined values
@@ -400,7 +396,7 @@ const MultiSelect = React.forwardRef(
       });
     }, [items]);
 
-    const itemsWithSelectAll = selectAll
+    const itemsWithSelectAll = hasSelectAll
       ? [selectAllOption, ...filteredItems]
       : filteredItems;
 
@@ -413,7 +409,7 @@ const MultiSelect = React.forwardRef(
       initialSelectedItems,
       onChange,
       selectedItems: selected,
-      selectAll,
+      hasSelectAll,
       itemsWithSelectAll,
     });
 
@@ -674,7 +670,7 @@ const MultiSelect = React.forwardRef(
       selectedItems.map((item) => (item as selectedItemType)?.text);
 
     const selectedItemsWithoutSelectAll = selectedItems.filter(
-      (item: any) => item.id !== 'select-all-option'
+      (item: any) => !item.selectAllFlag
     );
     return (
       <div className={wrapperClasses}>
@@ -758,7 +754,7 @@ const MultiSelect = React.forwardRef(
 
                 const isIndeterminate =
                   selectedItems.length !== 0 &&
-                  item['id'] === 'select-all-option' &&
+                  item['selectAllFlag'] &&
                   !isChecked;
 
                 const itemProps = getItemProps({
@@ -772,12 +768,12 @@ const MultiSelect = React.forwardRef(
                 return (
                   <ListBox.MenuItem
                     key={itemProps.id}
-                    isActive={isChecked && item['id'] !== 'select-all-option'}
+                    isActive={isChecked && item['selectAllFlag']}
                     aria-label={itemText}
                     isHighlighted={highlightedIndex === index}
                     title={itemText}
                     disabled={itemProps['aria-disabled']}
-                    isSelectAll={item['id'] === 'select-all-option'}
+                    isSelectAll={item['selectAllFlag']}
                     {...itemProps}>
                     <div className={`${prefix}--checkbox-wrapper`}>
                       <Checkbox
@@ -865,6 +861,11 @@ MultiSelect.propTypes = {
    */
   downshiftProps: PropTypes.object as React.Validator<UseSelectProps<unknown>>,
 
+  /**
+   * to Show/Hide All option
+   */
+  hasSelectAll: PropTypes.bool,
+
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
@@ -916,11 +917,6 @@ MultiSelect.propTypes = {
    */
   items: PropTypes.array.isRequired,
 
-  /**
-   * This is similar to the items prop, but it is used to render the items when selectAll prop is enabled
-   */
-  itemsWithSelectAll: PropTypes.array,
-
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
@@ -964,11 +960,6 @@ MultiSelect.propTypes = {
    */
   readOnly: PropTypes.bool,
 
-  /**
-   * to Show/Hide All option
-   */
-  selectAll: PropTypes.bool,
-
   /**
    * For full control of the selected items
    */
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index 7ef0cbd7f29c..c98b3d1c3980 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -30,7 +30,7 @@ export function useSelection({
   onChange,
   initialSelectedItems = [],
   selectedItems: controlledItems,
-  selectAll = false,
+  hasSelectAll = false,
   itemsWithSelectAll = [],
 }) {
   const isMounted = useRef(false);
@@ -62,22 +62,20 @@ export function useSelection({
         return;
       }
 
-      const isAllSelected = selectedItems.find(
-        (item) => item.id === 'select-all-option'
-      );
+      const isAllSelected = selectedItems.find((item) => item.selectAllFlag);
       const AllSelectableItems = itemsWithSelectAll.filter(
         (item) => !item.disabled
       );
       const disabledItems = itemsWithSelectAll.filter((item) => item.disabled);
 
       //select all option
-      if (item && item.id === 'select-all-option' && !isAllSelected) {
+      if (item && item.selectAllFlag && !isAllSelected) {
         setSelectedItems(AllSelectableItems);
         return;
       }
 
       //deselect all on click to All option
-      if (isAllSelected && item.id === 'select-all-option') {
+      if (isAllSelected && item.selectAllFlag) {
         setSelectedItems([]);
         return;
       }
@@ -94,7 +92,7 @@ export function useSelection({
 
         // checking if all items are selected then We should select mark the 'select All' option as well
         if (
-          selectAll &&
+          hasSelectAll &&
           !isAllSelected &&
           itemsWithSelectAll.length - 1 ===
             selectedItems.length + disabledItems.length + 1
@@ -106,10 +104,10 @@ export function useSelection({
 
       setSelectedItems((selectedItems) => {
         const updatedItems = removeAtIndex(selectedItems, selectedIndex);
-        return updatedItems.filter((item) => item.id != 'select-all-option');
+        return updatedItems.filter((item) => !item.selectAllFlag);
       });
     },
-    [disabled, selectedItems, itemsWithSelectAll, selectAll]
+    [disabled, selectedItems, itemsWithSelectAll, hasSelectAll]
   );
 
   const clearSelection = useCallback(() => {

From 6efeca536dc19a5e301c9c37ec6ef3be1efcdd16 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 15 May 2024 14:12:02 +0530
Subject: [PATCH 20/48] feat: fixed hasSelectAll and added warning

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx   | 6 ++++++
 .../components/MultiSelect/__tests__/MultiSelect-test.js    | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 712bcccad7ee..9339fa76efbf 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -366,6 +366,12 @@ const MultiSelect = React.forwardRef(
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
+    if ((selected ?? []).length > 0 && hasSelectAll) {
+      console.warn(
+        'Warning: `hasSelectAll` should not be used when `selectedItems` is provided. Please pass either `hasSelectAll` or `selectedItems`, not both.'
+      );
+      hasSelectAll = false;
+    }
     const prefix = usePrefix();
     const { isFluid } = useContext(FormContext);
     const { current: multiSelectInstanceId } = useRef(getInstanceId());
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 6b2d328131bf..861019cf93c2 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -565,7 +565,7 @@ describe('MultiSelect', () => {
           id="test"
           label={'test-label'}
           items={items}
-          selectAll={true}
+          hasSelectAll={true}
         />
       );
 

From d0b157608bda8d81ce492ad3d825bf4eec800463 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Mon, 3 Jun 2024 14:30:23 +0530
Subject: [PATCH 21/48] feat: made hasselectall prop experimental

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 9339fa76efbf..b312f76dd92a 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -177,7 +177,7 @@ export interface MultiSelectProps<ItemType>
   downshiftProps?: Partial<UseSelectProps<ItemType>>;
 
   /**
-   * to Show/Hide All option
+   * experimental prop to Show/Hide All option
    */
   hasSelectAll?: boolean;
 
@@ -868,7 +868,7 @@ MultiSelect.propTypes = {
   downshiftProps: PropTypes.object as React.Validator<UseSelectProps<unknown>>,
 
   /**
-   * to Show/Hide All option
+   * experimental prop to Show/Hide All option
    */
   hasSelectAll: PropTypes.bool,
 

From 9f1269bd9fe5129f0f385b3f2b1dabe964af7d91 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Thu, 6 Jun 2024 17:26:05 +0530
Subject: [PATCH 22/48] fix: removed duplicate OnChangeData

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 9c8c431a4219..7f7485c794f6 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -38,7 +38,6 @@ import { keys, match } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import { ListBoxProps } from '../ListBox/ListBox';
-import { OnChangeData } from '../Dropdown';
 import Checkbox from '../Checkbox';
 import type { InternationalProps } from '../../types/common';
 import { noopFn } from '../../internal/noopFn';

From aadeef80ef563ef524947c23fd92bd5b06f56294 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Thu, 6 Jun 2024 19:07:50 +0530
Subject: [PATCH 23/48] feat: ran yarn test

---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index ec85856ac89f..1b2de716da14 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5352,6 +5352,9 @@ Map {
       "downshiftProps": Object {
         "type": "object",
       },
+      "hasSelectAll": Object {
+        "type": "bool",
+      },
       "helperText": Object {
         "type": "node",
       },
@@ -5381,9 +5384,6 @@ Map {
         "isRequired": true,
         "type": "array",
       },
-      "itemsWithSelectAll": Object {
-        "type": "array",
-      },
       "label": Object {
         "isRequired": true,
         "type": "node",
@@ -5404,9 +5404,6 @@ Map {
       "readOnly": Object {
         "type": "bool",
       },
-      "selectAll": Object {
-        "type": "bool",
-      },
       "selectedItems": Object {
         "type": "array",
       },

From a082b0192c52d510d2bb87ed0e2e02c1ffa37125 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Mon, 10 Jun 2024 15:17:36 +0530
Subject: [PATCH 24/48] fix: should deselect all on click to indeterminate icon

---
 .../components/MultiSelect/MultiSelect.stories.js  |  5 -----
 packages/react/src/internal/Selection.js           | 14 ++++++--------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index ee270fc04436..8381bdd3a1cc 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -222,11 +222,6 @@ Playground.argTypes = {
   readOnly: {
     control: { type: 'boolean' },
   },
-  selectAll: {
-    control: {
-      type: 'boolean',
-    },
-  },
 };
 
 export const Default = () => {
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index c98b3d1c3980..1c0ce890d4a7 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -62,21 +62,20 @@ export function useSelection({
         return;
       }
 
-      const isAllSelected = selectedItems.find((item) => item.selectAllFlag);
       const AllSelectableItems = itemsWithSelectAll.filter(
         (item) => !item.disabled
       );
       const disabledItems = itemsWithSelectAll.filter((item) => item.disabled);
 
-      //select all option
-      if (item && item.selectAllFlag && !isAllSelected) {
-        setSelectedItems(AllSelectableItems);
+      //deselect all on click to All/indeterminate option
+      if (item && item.selectAllFlag && selectedItems.length > 0) {
+        setSelectedItems([]);
         return;
       }
 
-      //deselect all on click to All option
-      if (isAllSelected && item.selectAllFlag) {
-        setSelectedItems([]);
+      //select all option
+      if (item && item.selectAllFlag && selectedItems.length == 0) {
+        setSelectedItems(AllSelectableItems);
         return;
       }
 
@@ -93,7 +92,6 @@ export function useSelection({
         // checking if all items are selected then We should select mark the 'select All' option as well
         if (
           hasSelectAll &&
-          !isAllSelected &&
           itemsWithSelectAll.length - 1 ===
             selectedItems.length + disabledItems.length + 1
         ) {

From c3a9bee5da4eedadae538eeadff152115cc13d4e Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Mon, 10 Jun 2024 20:23:35 +0530
Subject: [PATCH 25/48] chore: added a new story for selectAll and a prop for
 selectAll label

---
 .../MultiSelect/MultiSelect.stories.js        | 30 +++++++++++++++++++
 .../components/MultiSelect/MultiSelect.tsx    | 13 +++++++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 8381bdd3a1cc..63b29ee41f12 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -355,3 +355,33 @@ export const _Controlled = () => {
     </div>
   );
 };
+
+export const SelectAll = () => {
+  const [label, setLabel] = useState('Choose options');
+
+  const onChange = (value) => {
+    if (value.selectedItems.length == 1) {
+      setLabel('Option selected');
+    } else if (value.selectedItems.length > 1) {
+      setLabel('Options selected');
+    } else {
+      setLabel('Choose options');
+    }
+  };
+
+  return (
+    <div style={{ width: 300 }}>
+      <MultiSelect
+        label={label}
+        id="carbon-multiselect-example"
+        titleText="Multiselect title"
+        helperText="This is helper text"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        selectionFeedback="top-after-reopen"
+        hasSelectAll={true}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 7f7485c794f6..62c4b83705f5 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -185,6 +185,11 @@ export interface MultiSelectProps<ItemType>
    */
   hasSelectAll?: boolean;
 
+  /**
+   * Provide Label for Select All option
+   */
+  labelforSelectAll?: string;
+
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
@@ -367,6 +372,7 @@ const MultiSelect = React.forwardRef(
       locale = 'en',
       slug,
       hasSelectAll = false,
+      labelforSelectAll = 'All',
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
@@ -388,7 +394,7 @@ const MultiSelect = React.forwardRef(
 
     const selectAllOption = {
       id: 'select-all-option',
-      text: 'All',
+      text: labelforSelectAll,
       selectAllFlag: true,
     };
 
@@ -933,6 +939,11 @@ MultiSelect.propTypes = {
    */
   label: PropTypes.node.isRequired,
 
+  /**
+   * Provide Label for Select All option.
+   */
+  labelforSelectAll: PropTypes.string,
+
   /**
    * `true` to use the light version.
    */

From b3f48fc653f0d92f14cc32d61adff308b17245e6 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Mon, 10 Jun 2024 20:35:43 +0530
Subject: [PATCH 26/48] fix: active state of selectAll option

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 62c4b83705f5..d270ce612c2a 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -784,7 +784,7 @@ const MultiSelect = React.forwardRef(
                 return (
                   <ListBox.MenuItem
                     key={itemProps.id}
-                    isActive={isChecked && item['selectAllFlag']}
+                    isActive={isChecked && !item['selectAllFlag']}
                     aria-label={itemText}
                     isHighlighted={highlightedIndex === index}
                     title={itemText}

From 15199193e4b52facbbe610471081b0d3c4d90c6a Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Mon, 10 Jun 2024 21:01:56 +0530
Subject: [PATCH 27/48] fix: changed items to match with documentation

---
 .../MultiSelect/MultiSelect.stories.js        | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 63b29ee41f12..3852d01302e6 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -376,11 +376,30 @@ export const SelectAll = () => {
         id="carbon-multiselect-example"
         titleText="Multiselect title"
         helperText="This is helper text"
-        items={items}
+        items={[
+          {
+            id: 'downshift-1-item-0',
+            text: 'Editor',
+          },
+          {
+            id: 'downshift-1-item-1',
+            text: 'Owner',
+          },
+          {
+            id: 'downshift-1-item-2',
+            text: 'Uploader',
+          },
+          {
+            id: 'downshift-1-item-3',
+            text: 'Reader - a disabled item',
+            disabled: true,
+          },
+        ]}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
         hasSelectAll={true}
         onChange={onChange}
+        labelforSelectAll="All roles"
       />
     </div>
   );

From 23363fc36a867855b3de05d4f25bafca083ecbe9 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Mon, 10 Jun 2024 21:39:43 +0530
Subject: [PATCH 28/48] fix: update snapshot

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 1b2de716da14..cd589e7123b7 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5388,6 +5388,9 @@ Map {
         "isRequired": true,
         "type": "node",
       },
+      "labelforSelectAll": Object {
+        "type": "string",
+      },
       "light": [Function],
       "locale": Object {
         "type": "string",

From ca69bc51c48104eca96d85b5df8a01bf8d6377d5 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Fri, 14 Jun 2024 20:15:06 +0530
Subject: [PATCH 29/48] fix: alignment issue

---
 packages/styles/scss/components/checkbox/_checkbox.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss
index 65e4e2b821f4..37e989355013 100644
--- a/packages/styles/scss/components/checkbox/_checkbox.scss
+++ b/packages/styles/scss/components/checkbox/_checkbox.scss
@@ -62,7 +62,7 @@
     display: flex;
     cursor: pointer;
     min-block-size: convert.to-rem(20px);
-    padding-block-start: convert.to-rem(2px);
+    padding-block-start: convert.to-rem(1px);
     padding-inline-start: convert.to-rem(20px);
     user-select: none;
   }

From 5b9107f9b927adf46a3f381ca76b8caafafaaac7 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Wed, 26 Jun 2024 17:05:29 +0530
Subject: [PATCH 30/48] fix: firefox issue

---
 .../src/components/MultiSelect/tools/sorting.js     | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/tools/sorting.js b/packages/react/src/components/MultiSelect/tools/sorting.js
index 5bf3df543f7d..0d6b507e0e54 100644
--- a/packages/react/src/components/MultiSelect/tools/sorting.js
+++ b/packages/react/src/components/MultiSelect/tools/sorting.js
@@ -26,18 +26,12 @@ export const defaultCompareItems = (itemA, itemB, { locale }) =>
 export const defaultSortItems = (
   items,
   { selectedItems = [], itemToString, compareItems, locale = 'en' }
-) =>
-  items.sort((itemA, itemB) => {
+) => {
+  items.filter((item) => item.id == 'select-all-option');
+  return items.sort((itemA, itemB) => {
     const hasItemA = selectedItems.includes(itemA);
     const hasItemB = selectedItems.includes(itemB);
 
-    // Prefer whichever item is in the `selectedItems` array first
-    if (
-      itemA['id'] === 'select-all-option' ||
-      itemB['id'] === 'select-all-option'
-    ) {
-      return 1;
-    }
     if (hasItemA && !hasItemB) {
       return -1;
     }
@@ -50,3 +44,4 @@ export const defaultSortItems = (
       locale,
     });
   });
+};

From 5508689021ecd179461c2693c8a7f598d7a262ff Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Tue, 23 Jul 2024 13:28:46 +0530
Subject: [PATCH 31/48] feat: format run

---
 packages/react/src/internal/Selection.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index 1be337bdb191..b85d979ff70e 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -44,14 +44,14 @@ export function useSelection({
       if (disabled) {
         return;
       }
-  
+
       const AllSelectableItems = itemsWithSelectAll.filter(
         (item) => !item.disabled
       );
       const disabledItems = itemsWithSelectAll.filter((item) => item.disabled);
-  
+
       let newSelectedItems;
-  
+
       //deselect all on click to All/indeterminate option
       if (item && item.selectAllFlag && selectedItems.length > 0) {
         newSelectedItems = [];
@@ -59,15 +59,14 @@ export function useSelection({
       //select all option
       else if (item && item.selectAllFlag && selectedItems.length == 0) {
         newSelectedItems = AllSelectableItems;
-      }
-      else {
+      } else {
         let selectedIndex;
         selectedItems.forEach((selectedItem, index) => {
           if (isEqual(selectedItem, item)) {
             selectedIndex = index;
           }
         });
-  
+
         if (selectedIndex === undefined) {
           newSelectedItems = selectedItems.concat(item);
           // checking if all items are selected then We should select mark the 'select All' option as well
@@ -80,10 +79,12 @@ export function useSelection({
           }
         } else {
           newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
-          newSelectedItems = newSelectedItems.filter((item) => !item.selectAllFlag);
+          newSelectedItems = newSelectedItems.filter(
+            (item) => !item.selectAllFlag
+          );
         }
       }
-  
+
       callOnChangeHandler({
         isControlled,
         isMounted: isMounted.current,

From 675af0757128151b95ab61d84b2e1883f1bed330 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Tue, 23 Jul 2024 13:50:49 +0530
Subject: [PATCH 32/48] feat: fixed storybook

---
 .../src/components/MultiSelect/MultiSelect.stories.js      | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index d57ba81df9c5..f5870387b24f 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -380,7 +380,6 @@ export const _Controlled = () => {
   );
 };
 
-
 export const SelectAll = () => {
   const [label, setLabel] = useState('Choose options');
 
@@ -426,8 +425,10 @@ export const SelectAll = () => {
         onChange={onChange}
         labelforSelectAll="All roles"
       />
-
-export const ExperimentalAutoAlign = () => {
+    </div>
+  );
+};
+export const _ExperimentalAutoAlign = () => {
   const ref = useRef();
   useEffect(() => {
     ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });

From d5e153557c22a936579d27813bd41f976e0d6168 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 24 Jul 2024 17:23:32 +0530
Subject: [PATCH 33/48] feat: formatting ci fail fix

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 79e7cbeba93d..d004a8670bfb 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -684,7 +684,6 @@ const MultiSelect = React.forwardRef(
       selectedItems.length > 0 &&
       selectedItems.map((item) => (item as selectedItemType)?.text);
 
-
     const selectedItemsWithoutSelectAll = selectedItems.filter(
       (item: any) => !item.selectAllFlag
     );

From bac4adaaf43976aea63c1c18c6fbfb5bccaaf1d4 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Mon, 29 Jul 2024 20:11:13 +0530
Subject: [PATCH 34/48] feat: select all is exempt from sorting

---
 .../src/components/MultiSelect/tools/sorting.js     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/tools/sorting.js b/packages/react/src/components/MultiSelect/tools/sorting.js
index 0d6b507e0e54..cda753e70da3 100644
--- a/packages/react/src/components/MultiSelect/tools/sorting.js
+++ b/packages/react/src/components/MultiSelect/tools/sorting.js
@@ -27,8 +27,14 @@ export const defaultSortItems = (
   items,
   { selectedItems = [], itemToString, compareItems, locale = 'en' }
 ) => {
-  items.filter((item) => item.id == 'select-all-option');
-  return items.sort((itemA, itemB) => {
+  // Extract the "select all" option
+  const selectAllOption = items.find((item) => item.id === 'select-all-option');
+
+  // Filter out the "select all" option from the items array
+  const filteredItems = items.filter((item) => item.id !== 'select-all-option');
+
+  // Sort the filtered items
+  const sortedItems = filteredItems.sort((itemA, itemB) => {
     const hasItemA = selectedItems.includes(itemA);
     const hasItemB = selectedItems.includes(itemB);
 
@@ -44,4 +50,7 @@ export const defaultSortItems = (
       locale,
     });
   });
+
+  // Add the "select all" option to the beginning of the sorted array, if it exists
+  return selectAllOption ? [selectAllOption, ...sortedItems] : sortedItems;
 };

From 13ba4156cedc6d45c7914596a471433c8455668a Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Mon, 29 Jul 2024 15:16:03 -0500
Subject: [PATCH 35/48] chore: remove isSelectAll from ListBoxMenuItem

---
 .../components/ListBox/ListBoxMenuItem.tsx    | 12 -----------
 .../components/MultiSelect/MultiSelect.tsx    |  2 +-
 .../scss/components/list-box/_list-box.scss   | 13 ------------
 .../components/multiselect/_multiselect.scss  | 20 +++++++++++++++++++
 4 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
index 36a883fa4eea..b87e74fac947 100644
--- a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
+++ b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
@@ -50,11 +50,6 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
    */
   disabled?: boolean;
 
-  /**
-   * Specify whether the item is Select All option
-   */
-  isSelectAll?: boolean;
-
   /**
    * Provide an optional tooltip for the ListBoxMenuItem
    */
@@ -83,7 +78,6 @@ const ListBoxMenuItem = React.forwardRef<HTMLLIElement, ListBoxMenuItemProps>(
       children,
       isActive = false,
       isHighlighted = false,
-      isSelectAll = false,
       title,
       ...rest
     }: ListBoxMenuItemProps,
@@ -95,7 +89,6 @@ const ListBoxMenuItem = React.forwardRef<HTMLLIElement, ListBoxMenuItemProps>(
     const className = cx(`${prefix}--list-box__menu-item`, {
       [`${prefix}--list-box__menu-item--active`]: isActive,
       [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted,
-      [`${prefix}--list-box__menu-item--selectall`]: isSelectAll,
     });
 
     return (
@@ -136,11 +129,6 @@ ListBoxMenuItem.propTypes = {
    */
   isHighlighted: PropTypes.bool,
 
-  /**
-   * Specify whether the item is Select All option
-   */
-  isSelectAll: PropTypes.bool,
-
   /**
    * Provide an optional tooltip for the ListBoxMenuItem
    */
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index d004a8670bfb..1bb07b4dda09 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -553,6 +553,7 @@ const MultiSelect = React.forwardRef(
         selectedItems && selectedItems.length > 0,
       [`${prefix}--list-box--up`]: direction === 'top',
       [`${prefix}--multi-select--readonly`]: readOnly,
+      [`${prefix}--multi-select--selectall`]: hasSelectAll,
     });
 
     // needs to be capitalized for react to render it correctly
@@ -800,7 +801,6 @@ const MultiSelect = React.forwardRef(
                     isHighlighted={highlightedIndex === index}
                     title={itemText}
                     disabled={itemProps['aria-disabled']}
-                    isSelectAll={item['selectAllFlag']}
                     {...itemProps}>
                     <div className={`${prefix}--checkbox-wrapper`}>
                       <Checkbox
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index 779d9667a3f3..60c041b09988 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -1057,17 +1057,4 @@ $list-box-menu-width: convert.to-rem(300px);
     .#{$prefix}--list-box__menu-icon {
     inset-inline-end: $spacing-04;
   }
-
-  .#{$prefix}--list-box__menu-item--selectall
-    .#{$prefix}--list-box__menu-item__option {
-    padding: 0.6875rem 1rem;
-    margin: 0;
-    border-block-end: 1px solid $border-subtle-01;
-  }
-
-  .#{$prefix}--list-box__menu-item--selectall
-    + .#{$prefix}--list-box__menu-item
-    .#{$prefix}--list-box__menu-item__option {
-    border-block-start: none;
-  }
 }
diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index 04c59bc3f5f7..c8b60116b1be 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -42,6 +42,26 @@
     min-inline-size: auto;
   }
 
+  // When select all is turned on, the first item in the listbox
+  // is always the "Select all" option and gets special border
+  // treatment
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+    .#{$prefix}--list-box__menu-item:first-child
+    .#{$prefix}--list-box__menu-item__option {
+    padding: 0.6875rem 1rem;
+    margin: 0;
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  // When select all is turned on, the second item in the list
+  // has special treatment to look correct against the "Select all"
+  // border treatment
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+    .#{$prefix}--list-box__menu-item:nth-child(2)
+    .#{$prefix}--list-box__menu-item__option {
+    border-block-start: none;
+  }
+
   .#{$prefix}--multi-select
     .#{$prefix}--list-box__menu-item__option
     .#{$prefix}--checkbox-wrapper {

From 2f236f895c39248f34df901218e6edf3a4e40023 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Mon, 29 Jul 2024 15:49:02 -0500
Subject: [PATCH 36/48] chore: update prop names

---
 .../__snapshots__/PublicAPI-test.js.snap      | 12 ++--
 .../MultiSelect/MultiSelect.stories.js        |  6 +-
 .../components/MultiSelect/MultiSelect.tsx    | 58 +++++++++----------
 .../MultiSelect/__tests__/MultiSelect-test.js |  2 +-
 packages/react/src/internal/Selection.js      |  6 +-
 5 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index cf45e48913b7..0b392b6f46d5 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5375,9 +5375,6 @@ Map {
       "downshiftProps": Object {
         "type": "object",
       },
-      "hasSelectAll": Object {
-        "type": "bool",
-      },
       "helperText": Object {
         "type": "node",
       },
@@ -5411,9 +5408,6 @@ Map {
         "isRequired": true,
         "type": "node",
       },
-      "labelforSelectAll": Object {
-        "type": "string",
-      },
       "light": [Function],
       "locale": Object {
         "type": "string",
@@ -5430,6 +5424,12 @@ Map {
       "readOnly": Object {
         "type": "bool",
       },
+      "selectAll": Object {
+        "type": "bool",
+      },
+      "selectAllItemText": Object {
+        "type": "string",
+      },
       "selectedItems": Object {
         "type": "array",
       },
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index f5870387b24f..0d9b1925a3ec 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -160,6 +160,8 @@ Playground.args = {
   clearSelectionDescription: 'Total items selected: ',
   useTitleInItem: false,
   clearSelectionText: 'To clear selection, press Delete or Backspace,',
+  selectAll: false,
+  selectAllItemText: 'All options',
 };
 
 Playground.argTypes = {
@@ -421,9 +423,9 @@ export const SelectAll = () => {
         ]}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
-        hasSelectAll={true}
+        selectAll={true}
         onChange={onChange}
-        labelforSelectAll="All roles"
+        selectAllItemText="All roles"
       />
     </div>
   );
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 1bb07b4dda09..304dd2e973be 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -141,16 +141,6 @@ export interface MultiSelectProps<ItemType>
    */
   downshiftProps?: Partial<UseSelectProps<ItemType>>;
 
-  /**
-   * experimental prop to Show/Hide All option
-   */
-  hasSelectAll?: boolean;
-
-  /**
-   * Provide Label for Select All option
-   */
-  labelforSelectAll?: string;
-
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
@@ -244,6 +234,16 @@ export interface MultiSelectProps<ItemType>
    */
   readOnly?: boolean;
 
+  /**
+   * **Experimental**: Enable a Select All item in the list
+   */
+  selectAll?: boolean;
+
+  /**
+   * **Experimental**: Provide text for the Select All option in the list. Used when selectAll={true}.
+   */
+  selectAllItemText?: string;
+
   /**
    * For full control of the selected items
    */
@@ -333,16 +333,16 @@ const MultiSelect = React.forwardRef(
       readOnly,
       locale = 'en',
       slug,
-      hasSelectAll = false,
-      labelforSelectAll = 'All',
+      selectAll = false,
+      selectAllItemText = 'All',
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
-    if ((selected ?? []).length > 0 && hasSelectAll) {
+    if ((selected ?? []).length > 0 && selectAll) {
       console.warn(
-        'Warning: `hasSelectAll` should not be used when `selectedItems` is provided. Please pass either `hasSelectAll` or `selectedItems`, not both.'
+        'Warning: `selectAll` should not be used when `selectedItems` is provided. Please pass either `selectAll` or `selectedItems`, not both.'
       );
-      hasSelectAll = false;
+      selectAll = false;
     }
     const prefix = usePrefix();
     const { isFluid } = useContext(FormContext);
@@ -356,7 +356,7 @@ const MultiSelect = React.forwardRef(
 
     const selectAllOption = {
       id: 'select-all-option',
-      text: labelforSelectAll,
+      text: selectAllItemText,
       selectAllFlag: true,
     };
 
@@ -411,7 +411,7 @@ const MultiSelect = React.forwardRef(
       });
     }, [items]);
 
-    const itemsWithSelectAll = hasSelectAll
+    const itemsWithSelectAll = selectAll
       ? [selectAllOption, ...filteredItems]
       : filteredItems;
 
@@ -424,7 +424,7 @@ const MultiSelect = React.forwardRef(
       initialSelectedItems,
       onChange,
       selectedItems: selected,
-      hasSelectAll,
+      selectAll,
       itemsWithSelectAll,
     });
 
@@ -553,7 +553,7 @@ const MultiSelect = React.forwardRef(
         selectedItems && selectedItems.length > 0,
       [`${prefix}--list-box--up`]: direction === 'top',
       [`${prefix}--multi-select--readonly`]: readOnly,
-      [`${prefix}--multi-select--selectall`]: hasSelectAll,
+      [`${prefix}--multi-select--selectall`]: selectAll,
     });
 
     // needs to be capitalized for react to render it correctly
@@ -895,11 +895,6 @@ MultiSelect.propTypes = {
    */
   downshiftProps: PropTypes.object as React.Validator<UseSelectProps<unknown>>,
 
-  /**
-   * experimental prop to Show/Hide All option
-   */
-  hasSelectAll: PropTypes.bool,
-
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
@@ -957,11 +952,6 @@ MultiSelect.propTypes = {
    */
   label: PropTypes.node.isRequired,
 
-  /**
-   * Provide Label for Select All option.
-   */
-  labelforSelectAll: PropTypes.string,
-
   /**
    * `true` to use the light version.
    */
@@ -999,6 +989,16 @@ MultiSelect.propTypes = {
    */
   readOnly: PropTypes.bool,
 
+  /**
+   * **Experimental**: Enable a Select All item in the list
+   */
+  selectAll: PropTypes.bool,
+
+  /**
+   * **Experimental**: Provide text for the Select All option in the list. Used when selectAll={true}.
+   */
+  selectAllItemText: PropTypes.string,
+
   /**
    * For full control of the selected items
    */
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index bcc5b8f24dc4..491599aeac67 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -580,7 +580,7 @@ describe('MultiSelect', () => {
           id="test"
           label={'test-label'}
           items={items}
-          hasSelectAll={true}
+          selectAll={true}
         />
       );
 
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index b85d979ff70e..c0dd43d31594 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -30,7 +30,7 @@ export function useSelection({
   onChange,
   initialSelectedItems = [],
   selectedItems: controlledItems,
-  hasSelectAll = false,
+  selectAll = false,
   itemsWithSelectAll = [],
 }) {
   const isMounted = useRef(false);
@@ -71,7 +71,7 @@ export function useSelection({
           newSelectedItems = selectedItems.concat(item);
           // checking if all items are selected then We should select mark the 'select All' option as well
           if (
-            hasSelectAll &&
+            selectAll &&
             itemsWithSelectAll.length - 1 ===
               newSelectedItems.length + disabledItems.length
           ) {
@@ -93,7 +93,7 @@ export function useSelection({
         selectedItems: newSelectedItems,
       });
     },
-    [disabled, selectedItems, itemsWithSelectAll, hasSelectAll, isControlled]
+    [disabled, selectedItems, itemsWithSelectAll, selectAll, isControlled]
   );
 
   const clearSelection = useCallback(() => {

From 624fc1e982355c9a58b15d034d657148289aab9c Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Mon, 29 Jul 2024 15:59:09 -0500
Subject: [PATCH 37/48] chore: rename variables

---
 .../src/components/MultiSelect/MultiSelect.tsx |  8 ++++----
 packages/react/src/internal/Selection.js       | 18 ++++++++++--------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 304dd2e973be..ad659c45336c 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -357,7 +357,7 @@ const MultiSelect = React.forwardRef(
     const selectAllOption = {
       id: 'select-all-option',
       text: selectAllItemText,
-      selectAllFlag: true,
+      isSelectAll: true,
     };
 
     const { refs, floatingStyles, middlewareData } = useFloating(
@@ -686,7 +686,7 @@ const MultiSelect = React.forwardRef(
       selectedItems.map((item) => (item as selectedItemType)?.text);
 
     const selectedItemsWithoutSelectAll = selectedItems.filter(
-      (item: any) => !item.selectAllFlag
+      (item: any) => !item.isSelectAll
     );
 
     // Memoize the value of getMenuProps to avoid an infinite loop
@@ -782,7 +782,7 @@ const MultiSelect = React.forwardRef(
 
                 const isIndeterminate =
                   selectedItems.length !== 0 &&
-                  item['selectAllFlag'] &&
+                  item['isSelectAll'] &&
                   !isChecked;
 
                 const itemProps = getItemProps({
@@ -796,7 +796,7 @@ const MultiSelect = React.forwardRef(
                 return (
                   <ListBox.MenuItem
                     key={itemProps.id}
-                    isActive={isChecked && !item['selectAllFlag']}
+                    isActive={isChecked && !item['isSelectAll']}
                     aria-label={itemText}
                     isHighlighted={highlightedIndex === index}
                     title={itemText}
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index c0dd43d31594..7874ccf597b0 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -45,20 +45,22 @@ export function useSelection({
         return;
       }
 
-      const AllSelectableItems = itemsWithSelectAll.filter(
+      const allSelectableItems = itemsWithSelectAll.filter(
         (item) => !item.disabled
       );
-      const disabledItems = itemsWithSelectAll.filter((item) => item.disabled);
+      const disabledItemCount = itemsWithSelectAll.filter(
+        (item) => item.disabled
+      ).length;
 
       let newSelectedItems;
 
       //deselect all on click to All/indeterminate option
-      if (item && item.selectAllFlag && selectedItems.length > 0) {
+      if (item && item.isSelectAll && selectedItems.length > 0) {
         newSelectedItems = [];
       }
       //select all option
-      else if (item && item.selectAllFlag && selectedItems.length == 0) {
-        newSelectedItems = AllSelectableItems;
+      else if (item && item.isSelectAll && selectedItems.length == 0) {
+        newSelectedItems = allSelectableItems;
       } else {
         let selectedIndex;
         selectedItems.forEach((selectedItem, index) => {
@@ -73,14 +75,14 @@ export function useSelection({
           if (
             selectAll &&
             itemsWithSelectAll.length - 1 ===
-              newSelectedItems.length + disabledItems.length
+              newSelectedItems.length + disabledItemCount
           ) {
-            newSelectedItems = AllSelectableItems;
+            newSelectedItems = allSelectableItems;
           }
         } else {
           newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
           newSelectedItems = newSelectedItems.filter(
-            (item) => !item.selectAllFlag
+            (item) => !item.isSelectAll
           );
         }
       }

From 7c691f776c983136d63fa0797b2ef5750b1870be Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Mon, 5 Aug 2024 19:47:10 +0530
Subject: [PATCH 38/48] feat: changed from prop to object property

---
 .../MultiSelect/MultiSelect.stories.js        |  6 +-
 .../components/MultiSelect/MultiSelect.tsx    | 70 +++++--------------
 .../__tests__/FilterableMultiSelect-test.js   |  2 +-
 .../MultiSelect/__tests__/MultiSelect-test.js | 42 +++++++----
 .../components/MultiSelect/tools/sorting.js   |  4 +-
 packages/react/src/internal/Selection.js      | 12 ++--
 6 files changed, 59 insertions(+), 77 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 0d9b1925a3ec..991727f454d5 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -420,10 +420,14 @@ export const SelectAll = () => {
             text: 'Reader - a disabled item',
             disabled: true,
           },
+          {
+            id: 'select-all',
+            text: 'All roles',
+            isSelectAll: true,
+          },
         ]}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
-        selectAll={true}
         onChange={onChange}
         selectAllItemText="All roles"
       />
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index ad659c45336c..3f54451762e9 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -18,7 +18,6 @@ import PropTypes from 'prop-types';
 import React, {
   ForwardedRef,
   useContext,
-  useRef,
   useState,
   useMemo,
   ReactNode,
@@ -234,16 +233,6 @@ export interface MultiSelectProps<ItemType>
    */
   readOnly?: boolean;
 
-  /**
-   * **Experimental**: Enable a Select All item in the list
-   */
-  selectAll?: boolean;
-
-  /**
-   * **Experimental**: Provide text for the Select All option in the list. Used when selectAll={true}.
-   */
-  selectAllItemText?: string;
-
   /**
    * For full control of the selected items
    */
@@ -333,11 +322,22 @@ const MultiSelect = React.forwardRef(
       readOnly,
       locale = 'en',
       slug,
-      selectAll = false,
-      selectAllItemText = 'All',
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
+    const filteredItems = useMemo(() => {
+      return items.filter((item) => {
+        if (typeof item === 'object' && item !== null) {
+          for (const key in item) {
+            if (Object.hasOwn(item, key) && item[key] === undefined) {
+              return false; // Return false if any property has an undefined value
+            }
+          }
+        }
+        return true; // Return true if item is not an object with undefined values
+      });
+    }, [items]);
+    let selectAll = filteredItems.some((item) => (item as any).isSelectAll);
     if ((selected ?? []).length > 0 && selectAll) {
       console.warn(
         'Warning: `selectAll` should not be used when `selectedItems` is provided. Please pass either `selectAll` or `selectedItems`, not both.'
@@ -354,12 +354,6 @@ const MultiSelect = React.forwardRef(
     const [topItems, setTopItems] = useState([]);
     const [itemsCleared, setItemsCleared] = useState(false);
 
-    const selectAllOption = {
-      id: 'select-all-option',
-      text: selectAllItemText,
-      isSelectAll: true,
-    };
-
     const { refs, floatingStyles, middlewareData } = useFloating(
       autoAlign
         ? {
@@ -397,24 +391,6 @@ const MultiSelect = React.forwardRef(
       }
     }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
 
-    // Filter out items with an object having undefined values
-    const filteredItems = useMemo(() => {
-      return items.filter((item) => {
-        if (typeof item === 'object' && item !== null) {
-          for (const key in item) {
-            if (Object.hasOwn(item, key) && item[key] === undefined) {
-              return false; // Return false if any property has an undefined value
-            }
-          }
-        }
-        return true; // Return true if item is not an object with undefined values
-      });
-    }, [items]);
-
-    const itemsWithSelectAll = selectAll
-      ? [selectAllOption, ...filteredItems]
-      : filteredItems;
-
     const {
       selectedItems: controlledSelectedItems,
       onItemChange,
@@ -425,7 +401,7 @@ const MultiSelect = React.forwardRef(
       onChange,
       selectedItems: selected,
       selectAll,
-      itemsWithSelectAll,
+      filteredItems,
     });
 
     const selectProps: UseSelectProps<ItemType> = {
@@ -444,7 +420,7 @@ const MultiSelect = React.forwardRef(
         );
       },
       selectedItem: controlledSelectedItems,
-      items: itemsWithSelectAll as ItemType[],
+      items: filteredItems as ItemType[],
       isItemDisabled(item, _index) {
         return (item as any).disabled;
       },
@@ -614,7 +590,7 @@ const MultiSelect = React.forwardRef(
           } else {
             return {
               ...changes,
-              highlightedIndex: itemsWithSelectAll.indexOf(highlightedIndex),
+              highlightedIndex: filteredItems.indexOf(highlightedIndex),
             };
           }
         case ToggleButtonKeyDownArrowDown:
@@ -695,7 +671,7 @@ const MultiSelect = React.forwardRef(
         getMenuProps({
           ref: autoAlign ? refs.setFloating : null,
         }),
-      [autoAlign]
+      [autoAlign, getMenuProps, refs.setFloating]
     );
 
     return (
@@ -773,7 +749,7 @@ const MultiSelect = React.forwardRef(
             {isOpen &&
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               sortItems!(
-                itemsWithSelectAll as readonly ItemType[],
+                filteredItems as readonly ItemType[],
                 sortOptions as SortItemsOptions<ItemType>
               ).map((item, index) => {
                 const isChecked =
@@ -989,16 +965,6 @@ MultiSelect.propTypes = {
    */
   readOnly: PropTypes.bool,
 
-  /**
-   * **Experimental**: Enable a Select All item in the list
-   */
-  selectAll: PropTypes.bool,
-
-  /**
-   * **Experimental**: Provide text for the Select All option in the list. Used when selectAll={true}.
-   */
-  selectAllItemText: PropTypes.string,
-
   /**
    * For full control of the selected items
    */
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 111f2c5eb123..d485a37c50ed 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -20,7 +20,7 @@ import {
 import { Slug } from '../../Slug';
 
 const prefix = 'cds';
-
+const waitForPosition = () => act(async () => {});
 const openMenu = async () => {
   await userEvent.click(screen.getByRole('combobox'));
 };
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 491599aeac67..cb8227fe7f62 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -9,18 +9,14 @@ import { getByText, isElementVisible } from '@carbon/test-utils/dom';
 import { act, render, screen } from '@testing-library/react';
 import React, { useState } from 'react';
 import MultiSelect from '../';
-import {
-  generateItems,
-  generateGenericItem,
-  waitForPosition,
-} from '../../ListBox/test-helpers';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
 import userEvent from '@testing-library/user-event';
 import { Slug } from '../../Slug';
 import Button from '../../Button';
 import ButtonSet from '../../ButtonSet';
 
 const prefix = 'cds';
-
+const waitForPosition = () => act(async () => {});
 describe('MultiSelect', () => {
   beforeEach(() => {
     jest.mock('../../../internal/deprecateFieldOnObject');
@@ -573,30 +569,48 @@ describe('MultiSelect', () => {
       );
     });
 
-    it('should select all options when selectAll prop is true', async () => {
-      const items = generateItems(4, generateGenericItem);
+    it('should select all options when isSelectAll property in an item is provided', async () => {
+      const items = [
+        {
+          id: 'select-all',
+          text: 'All roles',
+          isSelectAll: true,
+        },
+        {
+          id: 'downshift-1-item-0',
+          text: 'Editor',
+        },
+        {
+          id: 'downshift-1-item-1',
+          text: 'Owner',
+        },
+        {
+          id: 'downshift-1-item-2',
+          text: 'Uploader',
+        },
+      ];
       render(
         <MultiSelect
           id="test"
           label={'test-label'}
+          titleText="Multiselect title"
+          itemToString={(item) => (item ? item.text : '')}
+          helperText="This is helper text"
           items={items}
-          selectAll={true}
         />
       );
 
       const labelNode = screen.getByRole('combobox');
       await userEvent.click(labelNode);
 
-      //check that the select all option is present
       const options = screen.getAllByRole('option');
-      expect(options.length).toBe(items.length + 1);
-      // Verify all options are selected
-      await userEvent.click(options[0]);
+
+      await userEvent.click(screen.getByText('All roles'));
       options.forEach((option) => {
         expect(option).toHaveAttribute('aria-selected', 'true');
       });
       //verify all options are de-selected
-      await userEvent.click(options[0]);
+      await userEvent.click(screen.getByText('All roles'));
       options.forEach((option) => {
         expect(option).toHaveAttribute('aria-selected', 'false');
       });
diff --git a/packages/react/src/components/MultiSelect/tools/sorting.js b/packages/react/src/components/MultiSelect/tools/sorting.js
index cda753e70da3..fde26755b055 100644
--- a/packages/react/src/components/MultiSelect/tools/sorting.js
+++ b/packages/react/src/components/MultiSelect/tools/sorting.js
@@ -28,10 +28,10 @@ export const defaultSortItems = (
   { selectedItems = [], itemToString, compareItems, locale = 'en' }
 ) => {
   // Extract the "select all" option
-  const selectAllOption = items.find((item) => item.id === 'select-all-option');
+  const selectAllOption = items.find((item) => item.isSelectAll);
 
   // Filter out the "select all" option from the items array
-  const filteredItems = items.filter((item) => item.id !== 'select-all-option');
+  const filteredItems = items.filter((item) => !item.isSelectAll);
 
   // Sort the filtered items
   const sortedItems = filteredItems.sort((itemA, itemB) => {
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index 7874ccf597b0..575fb313d590 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -31,7 +31,7 @@ export function useSelection({
   initialSelectedItems = [],
   selectedItems: controlledItems,
   selectAll = false,
-  itemsWithSelectAll = [],
+  filteredItems = [],
 }) {
   const isMounted = useRef(false);
   const savedOnChange = useRef(onChange);
@@ -45,10 +45,8 @@ export function useSelection({
         return;
       }
 
-      const allSelectableItems = itemsWithSelectAll.filter(
-        (item) => !item.disabled
-      );
-      const disabledItemCount = itemsWithSelectAll.filter(
+      const allSelectableItems = filteredItems.filter((item) => !item.disabled);
+      const disabledItemCount = filteredItems.filter(
         (item) => item.disabled
       ).length;
 
@@ -74,7 +72,7 @@ export function useSelection({
           // checking if all items are selected then We should select mark the 'select All' option as well
           if (
             selectAll &&
-            itemsWithSelectAll.length - 1 ===
+            filteredItems.length - 1 ===
               newSelectedItems.length + disabledItemCount
           ) {
             newSelectedItems = allSelectableItems;
@@ -95,7 +93,7 @@ export function useSelection({
         selectedItems: newSelectedItems,
       });
     },
-    [disabled, selectedItems, itemsWithSelectAll, selectAll, isControlled]
+    [disabled, selectedItems, filteredItems, selectAll, isControlled]
   );
 
   const clearSelection = useCallback(() => {

From c2e064992f6d14d147f597c88aacdd070ea6ab9e Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Tue, 6 Aug 2024 13:06:06 +0530
Subject: [PATCH 39/48] fix: focus issue

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 3f54451762e9..90eef872dc37 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -552,6 +552,7 @@ const MultiSelect = React.forwardRef(
     function stateReducer(state, actionAndChanges) {
       const { changes, props, type } = actionAndChanges;
       const { highlightedIndex } = changes;
+      console.log('highlightedIndex', highlightedIndex);
 
       if (changes.isOpen && !isOpen) {
         setTopItems(controlledSelectedItems);
@@ -576,6 +577,8 @@ const MultiSelect = React.forwardRef(
           setIsOpenWrapper(changes.isOpen || false);
           return { ...changes, highlightedIndex: 0 };
         case ItemClick:
+          console.log('changes', changes);
+          console.log('state', state);
           setHighlightedIndex(changes.selectedItem);
           onItemChange(changes.selectedItem);
           return { ...changes, highlightedIndex: state.highlightedIndex };
@@ -590,7 +593,7 @@ const MultiSelect = React.forwardRef(
           } else {
             return {
               ...changes,
-              highlightedIndex: filteredItems.indexOf(highlightedIndex),
+              highlightedIndex: filteredItems.indexOf(highlightedIndex) + 1,
             };
           }
         case ToggleButtonKeyDownArrowDown:

From 584cfa89829227212975ecba30efc1a9a9ca1a2c Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Tue, 6 Aug 2024 14:02:10 +0530
Subject: [PATCH 40/48] fix: remove console

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 90eef872dc37..d611d25bf578 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -552,7 +552,6 @@ const MultiSelect = React.forwardRef(
     function stateReducer(state, actionAndChanges) {
       const { changes, props, type } = actionAndChanges;
       const { highlightedIndex } = changes;
-      console.log('highlightedIndex', highlightedIndex);
 
       if (changes.isOpen && !isOpen) {
         setTopItems(controlledSelectedItems);
@@ -577,8 +576,6 @@ const MultiSelect = React.forwardRef(
           setIsOpenWrapper(changes.isOpen || false);
           return { ...changes, highlightedIndex: 0 };
         case ItemClick:
-          console.log('changes', changes);
-          console.log('state', state);
           setHighlightedIndex(changes.selectedItem);
           onItemChange(changes.selectedItem);
           return { ...changes, highlightedIndex: state.highlightedIndex };

From a162c661d1aae27ea107e9a264ccfbe20b833e40 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 7 Aug 2024 09:55:37 +0530
Subject: [PATCH 41/48] feat: fixed tests

---
 .../MultiSelect/__tests__/FilterableMultiSelect-test.js        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 0740965d1423..6bf43cb854c6 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import FilterableMultiSelect from '../FilterableMultiSelect';
 import {
@@ -15,7 +15,6 @@ import {
   findMenuIconNode,
   generateItems,
   generateGenericItem,
-  waitForPosition,
 } from '../../ListBox/test-helpers';
 import { AILabel } from '../../AILabel';
 

From 0b5fb7c3422bef923d5d78fe8d5d4c6dc131e9cb Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 7 Aug 2024 10:12:12 +0530
Subject: [PATCH 42/48] feat: fixed typing test

---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap    | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index ebba8725af1d..d8115901c241 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5575,12 +5575,6 @@ Map {
       "readOnly": Object {
         "type": "bool",
       },
-      "selectAll": Object {
-        "type": "bool",
-      },
-      "selectAllItemText": Object {
-        "type": "string",
-      },
       "selectedItems": Object {
         "type": "array",
       },

From fc8641c0217d9c31290fb658d367e308fd506bf3 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Wed, 7 Aug 2024 16:50:58 +0530
Subject: [PATCH 43/48] fix: focus issue

---
 .../components/MultiSelect/MultiSelect.tsx    | 42 +++++++++----------
 .../MultiSelect/__tests__/MultiSelect-test.js |  2 +-
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index b9ed5f489f73..ea06032f87d4 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -329,18 +329,29 @@ const MultiSelect = React.forwardRef(
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
+    const sortOptions = {
+      selectedItems: selected,
+      itemToString,
+      compareItems,
+      locale,
+    };
+
     const filteredItems = useMemo(() => {
-      return items.filter((item) => {
-        if (typeof item === 'object' && item !== null) {
-          for (const key in item) {
-            if (Object.hasOwn(item, key) && item[key] === undefined) {
-              return false; // Return false if any property has an undefined value
+      return sortItems!(
+        items.filter((item) => {
+          if (typeof item === 'object' && item !== null) {
+            for (const key in item) {
+              if (Object.hasOwn(item, key) && item[key] === undefined) {
+                return false; // Return false if any property has an undefined value
+              }
             }
           }
-        }
-        return true; // Return true if item is not an object with undefined values
-      });
+          return true; // Return true if item is not an object with undefined values
+        }),
+        sortOptions as SortItemsOptions<ItemType>
+      );
     }, [items]);
+
     let selectAll = filteredItems.some((item) => (item as any).isSelectAll);
     if ((selected ?? []).length > 0 && selectAll) {
       console.warn(
@@ -540,13 +551,6 @@ const MultiSelect = React.forwardRef(
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const ItemToElement = itemToElement!;
 
-    const sortOptions = {
-      selectedItems: controlledSelectedItems,
-      itemToString,
-      compareItems,
-      locale,
-    };
-
     if (selectionFeedback === 'fixed') {
       sortOptions.selectedItems = [];
     } else if (selectionFeedback === 'top-after-reopen') {
@@ -598,7 +602,7 @@ const MultiSelect = React.forwardRef(
           } else {
             return {
               ...changes,
-              highlightedIndex: filteredItems.indexOf(highlightedIndex) + 1,
+              highlightedIndex: filteredItems.indexOf(highlightedIndex),
             };
           }
         case ToggleButtonKeyDownArrowDown:
@@ -755,11 +759,7 @@ const MultiSelect = React.forwardRef(
           </div>
           <ListBox.Menu {...menuProps}>
             {isOpen &&
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              sortItems!(
-                filteredItems as readonly ItemType[],
-                sortOptions as SortItemsOptions<ItemType>
-              ).map((item, index) => {
+              filteredItems.map((item, index) => {
                 const isChecked =
                   selectedItems.filter((selected) => isEqual(selected, item))
                     .length > 0;
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index f595211b9645..65abe13d6d3c 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -543,7 +543,7 @@ describe('MultiSelect', () => {
       );
 
       // the first option in the list to the the former third option in the list
-      expect(optionsArray[0]).toHaveAttribute('aria-label', 'Item 2');
+      expect(optionsArray[2]).toHaveAttribute('aria-label', 'Item 2');
     });
 
     it('should accept a `ref` for the underlying button element', async () => {

From af158c5a66d1bb2c840def40856bce20976592d7 Mon Sep 17 00:00:00 2001
From: Gururaj J <89023023+Gururajj77@users.noreply.github.com>
Date: Wed, 7 Aug 2024 19:41:30 +0530
Subject: [PATCH 44/48] Update
 packages/styles/scss/components/multiselect/_multiselect.scss

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
---
 packages/styles/scss/components/multiselect/_multiselect.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index af0a4ccc13bf..b586dbaa6dae 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -48,7 +48,7 @@
   .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
     .#{$prefix}--list-box__menu-item:first-child
     .#{$prefix}--list-box__menu-item__option {
-    padding: 0.6875rem 1rem;
+    padding: 0.6875rem $spacing-05;
     margin: 0;
     border-block-end: 1px solid $border-subtle-01;
   }

From 0816deb06e0da1167ec2eaf3f11648d8ef56c804 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Fri, 23 Aug 2024 14:19:46 +0530
Subject: [PATCH 45/48] fix: sort issue resolved

---
 .../MultiSelect/MultiSelect.stories.js        | 51 ++++++++++---------
 .../components/MultiSelect/MultiSelect.tsx    | 44 ++++++++--------
 .../components/MultiSelect/tools/sorting.js   | 23 +++------
 3 files changed, 54 insertions(+), 64 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index b75a1041ae01..3a51d62a2a20 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -385,6 +385,31 @@ export const _Controlled = () => {
   );
 };
 
+const itemsWithSelectAll = [
+  {
+    id: 'downshift-1-item-0',
+    text: 'Editor',
+  },
+  {
+    id: 'downshift-1-item-1',
+    text: 'Owner',
+  },
+  {
+    id: 'downshift-1-item-2',
+    text: 'Uploader',
+  },
+  {
+    id: 'downshift-1-item-3',
+    text: 'Reader - a disabled item',
+    disabled: true,
+  },
+  {
+    id: 'select-all',
+    text: 'All roles',
+    isSelectAll: true,
+  },
+];
+
 export const SelectAll = () => {
   const [label, setLabel] = useState('Choose options');
 
@@ -405,34 +430,10 @@ export const SelectAll = () => {
         id="carbon-multiselect-example"
         titleText="Multiselect title"
         helperText="This is helper text"
-        items={[
-          {
-            id: 'downshift-1-item-0',
-            text: 'Editor',
-          },
-          {
-            id: 'downshift-1-item-1',
-            text: 'Owner',
-          },
-          {
-            id: 'downshift-1-item-2',
-            text: 'Uploader',
-          },
-          {
-            id: 'downshift-1-item-3',
-            text: 'Reader - a disabled item',
-            disabled: true,
-          },
-          {
-            id: 'select-all',
-            text: 'All roles',
-            isSelectAll: true,
-          },
-        ]}
+        items={itemsWithSelectAll}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
         onChange={onChange}
-        selectAllItemText="All roles"
       />
     </div>
   );
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 91a325f18d55..621f8d74b53c 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -331,27 +331,17 @@ const MultiSelect = React.forwardRef(
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
-    const sortOptions = {
-      selectedItems: selected,
-      itemToString,
-      compareItems,
-      locale,
-    };
-
     const filteredItems = useMemo(() => {
-      return sortItems!(
-        items.filter((item) => {
-          if (typeof item === 'object' && item !== null) {
-            for (const key in item) {
-              if (Object.hasOwn(item, key) && item[key] === undefined) {
-                return false; // Return false if any property has an undefined value
-              }
+      return items.filter((item) => {
+        if (typeof item === 'object' && item !== null) {
+          for (const key in item) {
+            if (Object.hasOwn(item, key) && item[key] === undefined) {
+              return false; // Return false if any property has an undefined value
             }
           }
-          return true; // Return true if item is not an object with undefined values
-        }),
-        sortOptions as SortItemsOptions<ItemType>
-      );
+        }
+        return true; // Return true if item is not an object with undefined values
+      });
     }, [items]);
 
     let selectAll = filteredItems.some((item) => (item as any).isSelectAll);
@@ -421,6 +411,13 @@ const MultiSelect = React.forwardRef(
       filteredItems,
     });
 
+    const sortOptions = {
+      selectedItems: controlledSelectedItems,
+      itemToString,
+      compareItems,
+      locale,
+    };
+
     const selectProps: UseSelectProps<ItemType> = {
       stateReducer,
       isOpen,
@@ -675,9 +672,9 @@ const MultiSelect = React.forwardRef(
       selectedItems.length > 0 &&
       selectedItems.map((item) => (item as selectedItemType)?.text);
 
-    const selectedItemsWithoutSelectAll = selectedItems.filter(
-      (item: any) => !item.isSelectAll
-    );
+    const selectedItemsWithoutSelectAll = selectAll
+      ? selectedItems.filter((item: any) => !item.isSelectAll)
+      : selectedItems;
 
     // Memoize the value of getMenuProps to avoid an infinite loop
     const menuProps = useMemo(
@@ -761,7 +758,10 @@ const MultiSelect = React.forwardRef(
           </div>
           <ListBox.Menu {...menuProps}>
             {isOpen &&
-              filteredItems.map((item, index) => {
+              sortItems!(
+                filteredItems,
+                sortOptions as SortItemsOptions<ItemType>
+              ).map((item, index) => {
                 const isChecked =
                   selectedItems.filter((selected) => isEqual(selected, item))
                     .length > 0;
diff --git a/packages/react/src/components/MultiSelect/tools/sorting.js b/packages/react/src/components/MultiSelect/tools/sorting.js
index fde26755b055..aadb00c0f5e1 100644
--- a/packages/react/src/components/MultiSelect/tools/sorting.js
+++ b/packages/react/src/components/MultiSelect/tools/sorting.js
@@ -27,30 +27,19 @@ export const defaultSortItems = (
   items,
   { selectedItems = [], itemToString, compareItems, locale = 'en' }
 ) => {
-  // Extract the "select all" option
-  const selectAllOption = items.find((item) => item.isSelectAll);
+  return items.sort((itemA, itemB) => {
+    // Always place "select all" option at the beginning
+    if (itemA.isSelectAll) return -1;
+    if (itemB.isSelectAll) return 1;
 
-  // Filter out the "select all" option from the items array
-  const filteredItems = items.filter((item) => !item.isSelectAll);
-
-  // Sort the filtered items
-  const sortedItems = filteredItems.sort((itemA, itemB) => {
     const hasItemA = selectedItems.includes(itemA);
     const hasItemB = selectedItems.includes(itemB);
 
-    if (hasItemA && !hasItemB) {
-      return -1;
-    }
-
-    if (hasItemB && !hasItemA) {
-      return 1;
-    }
+    if (hasItemA && !hasItemB) return -1;
+    if (hasItemB && !hasItemA) return 1;
 
     return compareItems(itemToString(itemA), itemToString(itemB), {
       locale,
     });
   });
-
-  // Add the "select all" option to the beginning of the sorted array, if it exists
-  return selectAllOption ? [selectAllOption, ...sortedItems] : sortedItems;
 };

From 5f082b69febb1a1cb3b1cc16f150a716836a524b Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Fri, 23 Aug 2024 16:46:26 +0530
Subject: [PATCH 46/48] fix: test case

---
 packages/react/src/components/MultiSelect/MultiSelect.tsx | 8 ++++----
 .../components/MultiSelect/__tests__/MultiSelect-test.js  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 621f8d74b53c..61271e3ce42b 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -672,9 +672,9 @@ const MultiSelect = React.forwardRef(
       selectedItems.length > 0 &&
       selectedItems.map((item) => (item as selectedItemType)?.text);
 
-    const selectedItemsWithoutSelectAll = selectAll
-      ? selectedItems.filter((item: any) => !item.isSelectAll)
-      : selectedItems;
+    const selectedItemsLength = selectAll
+      ? selectedItems.filter((item: any) => !item.isSelectAll).length
+      : selectedItems.length;
 
     // Memoize the value of getMenuProps to avoid an infinite loop
     const menuProps = useMemo(
@@ -727,7 +727,7 @@ const MultiSelect = React.forwardRef(
                 clearSelection={
                   !disabled && !readOnly ? clearSelection : noopFn
                 }
-                selectionCount={selectedItemsWithoutSelectAll.length}
+                selectionCount={selectedItemsLength}
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 translateWithId={translateWithId!}
                 disabled={disabled}
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 65abe13d6d3c..f595211b9645 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -543,7 +543,7 @@ describe('MultiSelect', () => {
       );
 
       // the first option in the list to the the former third option in the list
-      expect(optionsArray[2]).toHaveAttribute('aria-label', 'Item 2');
+      expect(optionsArray[0]).toHaveAttribute('aria-label', 'Item 2');
     });
 
     it('should accept a `ref` for the underlying button element', async () => {

From 03d645742a63b214ecb4991db68890d13bb83a73 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Tue, 27 Aug 2024 16:20:57 +0530
Subject: [PATCH 47/48] fix: alignment issue

---
 .../components/multiselect/_multiselect.scss    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index b586dbaa6dae..a9acb0c08573 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -82,6 +82,23 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .#{$prefix}--checkbox-label::before {
+    margin-block: 0;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .cds--checkbox:indeterminate
+    + .cds--checkbox-label::after {
+    inset-block-start: convert.to-rem(9px);
+  }
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .cds--checkbox-label::after {
+    inset-block-start: convert.to-rem(5px);
+  }
   .#{$prefix}--multi-select
     .#{$prefix}--list-box__menu-item__option
     > .#{$prefix}--form-item {

From 38e27980469efa83fd50bd1461c4b469d51ce0d2 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Fri, 30 Aug 2024 14:41:47 -0500
Subject: [PATCH 48/48] test(multiselect): refactor assertions off data
 attributes

---
 .../MultiSelect/__tests__/MultiSelect-test.js | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index f595211b9645..fd977410fd70 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -158,10 +158,16 @@ describe('MultiSelect', () => {
     // eslint-disable-next-line testing-library/prefer-screen-queries
     const itemNode = getByText(container, item.label);
 
-    expect(
-      // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeNull();
+    const options = screen.getAllByRole('option');
+    for (const option of options) {
+      expect(option).toHaveAttribute('aria-selected', 'false');
+    }
+
+    await userEvent.click(itemNode);
+    expect(options[0]).toHaveAttribute('aria-selected', 'true');
+
+    await userEvent.click(itemNode);
+    expect(options[0]).toHaveAttribute('aria-selected', 'false');
   });
 
   it('should close the menu when the user hits the Escape key', async () => {
@@ -227,6 +233,23 @@ describe('MultiSelect', () => {
 
     await userEvent.tab();
     await userEvent.keyboard('[Space]');
+
+    const [item] = items;
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    const itemNode = getByText(container, item.label);
+
+    const options = screen.getAllByRole('option');
+    for (const option of options) {
+      expect(option).toHaveAttribute('aria-selected', 'false');
+    }
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'false');
+
+    await userEvent.keyboard('[Enter]');
+    await userEvent.keyboard('[ArrowDown]');
+    await userEvent.keyboard('[Enter]');
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true');
   });
 
   it('should clear selected items when the user clicks the clear selection button', async () => {
@@ -321,6 +344,12 @@ describe('MultiSelect', () => {
       const labelNode = getByText(container, label);
 
       await userEvent.click(labelNode);
+
+      const options = screen.getAllByRole('option');
+      expect(options[0]).toHaveAttribute('aria-selected', 'true');
+      expect(options[1]).toHaveAttribute('aria-selected', 'true');
+      expect(options[2]).toHaveAttribute('aria-selected', 'false');
+      expect(options[3]).toHaveAttribute('aria-selected', 'false');
     });
 
     it('should trigger onChange with selected items', async () => {