@televet/kibble-ui 1.12.14 → 1.13.1

package/build/index.js

@@ -4183,19 +4183,24 @@ var MenuContext = React.createContext({
 });
 var useMenuContext = function () { return React.useContext(MenuContext); };
 var MenuProvider = function (_a) {
-    var menuItems = _a.menuItems, onMenuClose = _a.onMenuClose, children = _a.children;
+    var menuItems = _a.menuItems, onClose = _a.onClose, children = _a.children;
     var _b = __read(React.useState(menuItems || []), 2), filteredMenuItems = _b[0], setFilteredMenuItems = _b[1];
     var _c = __read(React.useState(null), 2), groups = _c[0], setGroups = _c[1];
     var _d = __read(React.useState(-1), 2), focusedItemIndex = _d[0], setFocusedItemIndex = _d[1];
     var searchInputRef = React.useRef(null);
     var menuItemRefs = React.useRef([]);
     var handleOnClose = React.useCallback(function () {
-        var selectedItems = filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.filter(function (item) { return item.isSelected === true; }).map(function (item) { return item.value; });
+        var selectedItems = filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.filter(function (item) { return item.isSelected === true; });
         setFocusedItemIndex(-1);
-        if (onMenuClose) {
-            onMenuClose(selectedItems);
+        if (onClose) {
+            onClose(selectedItems);
         }
-    }, [filteredMenuItems, onMenuClose]);
+    }, [filteredMenuItems, onClose]);
+    React.useEffect(function () {
+        if (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) {
+            setFilteredMenuItems(menuItems);
+        }
+    }, [menuItems]);
     return (React__default["default"].createElement(MenuContext.Provider, { value: {
             allMenuItems: menuItems,
             filteredMenuItems: filteredMenuItems,
@@ -4211,7 +4216,7 @@ var MenuProvider = function (_a) {
 };
 
 var MenuContainer = function (_a) {
-    var children = _a.children; _a.onMenuClose; var rest = __rest(_a, ["children", "onMenuClose"]);
+    var children = _a.children; _a.onClose; var rest = __rest(_a, ["children", "onClose"]);
     var handleOnClose = useMenuContext().handleOnClose;
     return (React__default["default"].createElement(react.Menu, __assign({ onClose: handleOnClose }, rest), children));
 };
@@ -4257,31 +4262,33 @@ var MenuConfig = {
 };
 
 var MenuItem = function (_a) {
-    var isMultiSelect = _a.isMultiSelect, canSelectAll = _a.canSelectAll, children = _a.children, _b = _a.closeOnSelect, closeOnSelect = _b === void 0 ? !isMultiSelect : _b; _a.groupLabel; var _c = _a.handleKeyboardNavigation, handleKeyboardNavigation = _c === void 0 ? function () { } : _c, isDisabled = _a.isDisabled, isSelected = _a.isSelected, _d = _a.itemIndex, itemIndex = _d === void 0 ? '0' : _d, label = _a.label, leftElement = _a.leftElement, menuItemRefs = _a.menuItemRefs, onSelectItem = _a.onSelectItem, value = _a.value, rest = __rest(_a, ["isMultiSelect", "canSelectAll", "children", "closeOnSelect", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelectItem", "value"]);
-    // TODO: Add truncated text functionality with tooltip on hover
+    var isMultiSelect = _a.isMultiSelect, canSelectAll = _a.canSelectAll, children = _a.children, _b = _a.closeOnSelect, closeOnSelect = _b === void 0 ? !isMultiSelect : _b; _a.groupLabel; var _c = _a.handleKeyboardNavigation, handleKeyboardNavigation = _c === void 0 ? function () { } : _c, isDisabled = _a.isDisabled, isSelected = _a.isSelected, _d = _a.itemIndex, itemIndex = _d === void 0 ? '0' : _d, label = _a.label, leftElement = _a.leftElement, menuItemRefs = _a.menuItemRefs, onSelect = _a.onSelect, shouldRetainSelection = _a.shouldRetainSelection, shouldTruncateText = _a.shouldTruncateText, value = _a.value, rest = __rest(_a, ["isMultiSelect", "canSelectAll", "children", "closeOnSelect", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelect", "shouldRetainSelection", "shouldTruncateText", "value"]);
     var colors = useTheme().colors;
     var onClose = react.useMenuState().onClose;
     var handleSelect = React.useCallback(function () {
         if (isDisabled)
             return;
-        if (value && onSelectItem) {
-            onSelectItem(value);
+        if (value && onSelect) {
+            onSelect({
+                label: label,
+                leftElement: leftElement,
+                value: value,
+            });
         }
         if (closeOnSelect) {
             onClose();
         }
-    }, [value, onSelectItem, onClose, closeOnSelect, isDisabled]);
-    return (React__default["default"].createElement(react.Box, __assign({}, MenuItemConfig, { className: "menu-list__item", onClick: handleSelect, onKeyDown: function (e) { return handleKeyboardNavigation(e, false); }, tabIndex: parseInt(canSelectAll ? (itemIndex += 2) : itemIndex), ref: function (el) {
+    }, [value, onSelect, onClose, closeOnSelect, isDisabled, label, leftElement]);
+    return (React__default["default"].createElement(react.Box, __assign({}, MenuItemConfig, { className: "MenuList__Item", onClick: handleSelect, onKeyDown: function (e) { return handleKeyboardNavigation(e, false); }, tabIndex: parseInt(canSelectAll ? (itemIndex += 2) : itemIndex), ref: function (el) {
             return menuItemRefs && itemIndex ? (menuItemRefs.current[parseInt(itemIndex)] = el) : null;
         }, 
         // @ts-ignore
-        disabled: isDisabled }, rest), children ? (children) : (React__default["default"].createElement(react.HStack, { spacing: "12px", minH: "21px" },
-        isMultiSelect && (React__default["default"].createElement(react.Box, { width: "12px", height: "12px", borderRadius: "12px", position: "relative", background: colors.background.grayDark, className: "menu-list__item-checkbox" },
-            React__default["default"].createElement(react.Box, { position: "absolute", top: "-2px", left: "-2px" }, isSelected && React__default["default"].createElement(Icon, { name: "checkmarkCircle", color: "success", size: "sm" })))),
-        React__default["default"].createElement(react.HStack, { color: isSelected && !isMultiSelect ? colors.text.light.link : colors.text.light.default },
-            leftElement && React__default["default"].createElement(react.Box, { className: "menu-list__item-leftElement" }, leftElement),
-            React__default["default"].createElement(react.Box, { className: "menu-list__item-label" },
-                React__default["default"].createElement(TruncatedText, { textContent: label || '', noOfLines: 1 })))))));
+        disabled: isDisabled }, rest), children ? (children) : (React__default["default"].createElement(react.HStack, { alignItems: "center", spacing: "12px", minH: "21px" },
+        isMultiSelect && (React__default["default"].createElement(react.Box, { className: "MenuList__ItemCheckbox" },
+            React__default["default"].createElement(Checkbox, { variant: "round", isChecked: isSelected, size: "sm" }))),
+        React__default["default"].createElement(react.HStack, { color: isSelected && shouldRetainSelection && !isMultiSelect ? colors.text.light.link : colors.text.light.default },
+            leftElement && React__default["default"].createElement(react.Box, { className: "MenuList__ItemLeftElement" }, leftElement),
+            React__default["default"].createElement(react.Box, { className: "MenuList__ItemLabel" }, shouldTruncateText ? React__default["default"].createElement(TruncatedText, { textContent: label || '', noOfLines: 1 }) : React__default["default"].createElement(Text, null, label)))))));
 };
 
 var MenuSearchBar = function (_a) {
@@ -4299,23 +4306,23 @@ var MenuSearchBar = function (_a) {
             onSearchCallback(e);
         }
     }, [menuItems, onSearchCallback, setFilteredMenuItems]);
-    return (React__default["default"].createElement(WrappedTextInput, { className: "menu-list__searchbar", placeholder: placeholder, onChange: handleSearch, mt: 1, onKeyDown: function (e) { return handleKeyboardNavigation(e, true); }, size: "sm", ref: searchInputRef }));
+    return (React__default["default"].createElement(WrappedTextInput, { className: "MenuList__SearchBar", placeholder: placeholder, onChange: handleSearch, mt: 1, onKeyDown: function (e) { return handleKeyboardNavigation(e, true); }, size: "sm", ref: searchInputRef }));
 };
 
 var MenuSelectAllButtons = function (_a) {
     var groupName = _a.groupName, handleToggleAllItems = _a.handleToggleAllItems, hasSelectedItems = _a.hasSelectedItems, isGrouped = _a.isGrouped;
     if (isGrouped) {
-        return (React__default["default"].createElement(react.Box, { textAlign: "right", w: "50%", className: "menu-list-item__select-all-button" }, hasSelectedItems ? (React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "arrowCircle", size: "xs", onClick: function () { return handleToggleAllItems({ groupName: groupName, clear: true }); }, isDisabled: !hasSelectedItems }, "Clear all")) : (React__default["default"].createElement(Button, { variant: "ghost", size: "xs", onClick: function () { return handleToggleAllItems({ groupName: groupName, clear: false }); } }, "Select all"))));
+        return (React__default["default"].createElement(react.Box, { textAlign: "right", w: "50%", className: "MenuListItem__SelectAllButton" }, hasSelectedItems ? (React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "arrowCircle", size: "xs", onClick: function () { return handleToggleAllItems({ groupName: groupName, clear: true }); }, isDisabled: !hasSelectedItems }, "Clear all")) : (React__default["default"].createElement(Button, { variant: "ghost", size: "xs", onClick: function () { return handleToggleAllItems({ groupName: groupName, clear: false }); } }, "Select all"))));
     }
-    return (React__default["default"].createElement(react.Box, { mt: "8px", className: "menu-list__select-all-buttons" },
+    return (React__default["default"].createElement(react.Box, { mt: "8px", className: "MenuList__SelectAllButtons" },
         React__default["default"].createElement(react.Flex, { justifyContent: "space-between" },
             React__default["default"].createElement(Button, { variant: "ghost", size: "xs", onClick: function () { return handleToggleAllItems({ clear: false }); } }, "Select all"),
             React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "arrowCircle", size: "xs", onClick: function () { return handleToggleAllItems({ clear: true }); }, isDisabled: !hasSelectedItems }, "Clear all"))));
 };
 
 var MenuList = function (_a) {
-    var _b = _a.canSelectAll, canSelectAll = _b === void 0 ? false : _b, _c = _a.canSelectGroups, canSelectGroups = _c === void 0 ? false : _c, children = _a.children, _d = _a.isGrouped, isGrouped = _d === void 0 ? false : _d, isMatchWidthSet = _a.isMatchWidthSet, _e = _a.isMultiSelect, isMultiSelect = _e === void 0 ? false : _e, _f = _a.isSearchable, isSearchable = _f === void 0 ? false : _f, menuItems = _a.menuItems, onMenuItemSelect = _a.onMenuItemSelect, onMenuItemSelectAll = _a.onMenuItemSelectAll, searchPlaceholder = _a.searchPlaceholder, _g = _a.minW, minW = _g === void 0 ? '240px' : _g, maxW = _a.maxW, _h = _a.maxH, maxH = _h === void 0 ? '480px' : _h, rest = __rest(_a, ["canSelectAll", "canSelectGroups", "children", "isGrouped", "isMatchWidthSet", "isMultiSelect", "isSearchable", "menuItems", "onMenuItemSelect", "onMenuItemSelectAll", "searchPlaceholder", "minW", "maxW", "maxH"]);
-    var _j = useMenuContext(), filteredMenuItems = _j.filteredMenuItems, setFilteredMenuItems = _j.setFilteredMenuItems, groups = _j.groups, setGroups = _j.setGroups, focusedItemIndex = _j.focusedItemIndex, setFocusedItemIndex = _j.setFocusedItemIndex, searchInputRef = _j.searchInputRef, menuItemRefs = _j.menuItemRefs;
+    var _b = _a.canSelectAll, canSelectAll = _b === void 0 ? false : _b, _c = _a.canSelectGroups, canSelectGroups = _c === void 0 ? false : _c, children = _a.children, _d = _a.isGrouped, isGrouped = _d === void 0 ? false : _d, isMatchWidthSet = _a.isMatchWidthSet, _e = _a.isMultiSelect, isMultiSelect = _e === void 0 ? false : _e, _f = _a.isSearchable, isSearchable = _f === void 0 ? false : _f, menuItems = _a.menuItems, onSelect = _a.onSelect, onSelectAll = _a.onSelectAll, searchPlaceholder = _a.searchPlaceholder, shouldRetainSelection = _a.shouldRetainSelection, _g = _a.shouldTruncateText, shouldTruncateText = _g === void 0 ? true : _g, _h = _a.minW, minW = _h === void 0 ? '240px' : _h, maxW = _a.maxW, _j = _a.maxH, maxH = _j === void 0 ? '480px' : _j, rest = __rest(_a, ["canSelectAll", "canSelectGroups", "children", "isGrouped", "isMatchWidthSet", "isMultiSelect", "isSearchable", "menuItems", "onSelect", "onSelectAll", "searchPlaceholder", "shouldRetainSelection", "shouldTruncateText", "minW", "maxW", "maxH"]);
+    var _k = useMenuContext(), filteredMenuItems = _k.filteredMenuItems, setFilteredMenuItems = _k.setFilteredMenuItems, groups = _k.groups, setGroups = _k.setGroups, focusedItemIndex = _k.focusedItemIndex, setFocusedItemIndex = _k.setFocusedItemIndex, searchInputRef = _k.searchInputRef, menuItemRefs = _k.menuItemRefs;
     var focusNextListItem = React.useCallback(function (direction) {
         var _a, _b;
         if (!(menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current))
@@ -4373,10 +4380,10 @@ var MenuList = function (_a) {
             e.target.click();
         }
     }, [focusNextListItem, menuItemRefs]);
-    var handleToggleSingleItem = React.useCallback(function (selectedValue) {
+    var handleToggleSingleItem = React.useCallback(function (selectedValue, itemOnSelect) {
         if (filteredMenuItems) {
             var _filteredMenuItemsCopy = __spreadArray([], __read(filteredMenuItems), false);
-            var selectedItem = _filteredMenuItemsCopy.find(function (item) { return item.value === selectedValue; });
+            var selectedItem = _filteredMenuItemsCopy.find(function (item) { return item.value === selectedValue.value; });
             if (!isMultiSelect) {
                 _filteredMenuItemsCopy.filter(function (item) { return item.isSelected === true; }).map(function (item) { return (item.isSelected = false); });
             }
@@ -4384,11 +4391,15 @@ var MenuList = function (_a) {
                 selectedItem.isSelected = !selectedItem.isSelected;
             }
             setFilteredMenuItems(_filteredMenuItemsCopy);
-            if (onMenuItemSelect && selectedItem) {
-                onMenuItemSelect(selectedItem);
+            var allSelectedItems = _filteredMenuItemsCopy.filter(function (item) { return item.isSelected; });
+            if (onSelect && selectedItem) {
+                onSelect(selectedItem, allSelectedItems);
+            }
+            if (itemOnSelect && selectedItem) {
+                itemOnSelect(selectedItem, allSelectedItems);
             }
         }
-    }, [filteredMenuItems, isMultiSelect, onMenuItemSelect, setFilteredMenuItems]);
+    }, [filteredMenuItems, isMultiSelect, onSelect, setFilteredMenuItems]);
     var handleToggleAllItems = React.useCallback(function (_a) {
         var groupName = _a.groupName, _b = _a.clear, clear = _b === void 0 ? false : _b;
         if (filteredMenuItems) {
@@ -4411,11 +4422,11 @@ var MenuList = function (_a) {
                 }
             });
             setFilteredMenuItems(_filteredMenuItemsCopy);
-            if (onMenuItemSelectAll) {
-                onMenuItemSelectAll(_filteredMenuItemsCopy.filter(function (item) { return item.isSelected; }));
+            if (onSelectAll) {
+                onSelectAll(_filteredMenuItemsCopy.filter(function (item) { return item.isSelected; }));
             }
         }
-    }, [filteredMenuItems, onMenuItemSelectAll, setFilteredMenuItems]);
+    }, [filteredMenuItems, onSelectAll, setFilteredMenuItems]);
     React.useEffect(function () {
         if (isGrouped) {
             var groupNames = __spreadArray([], __read(new Set(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.map(function (item) { return item.groupLabel; }))), false);
@@ -4424,44 +4435,50 @@ var MenuList = function (_a) {
             }
         }
     }, [filteredMenuItems, isGrouped, setGroups]);
+    var getMenuItem = React.useCallback(function (item, index) { return (React__default["default"].createElement(MenuItem, { handleKeyboardNavigation: handleKeyboardNavigation, isMultiSelect: isMultiSelect, isSelected: item.isSelected, itemIndex: index.toString(), key: item.value, label: item.label, leftElement: item.leftElement, menuItemRefs: menuItemRefs, onSelect: function (selectedItem) { return handleToggleSingleItem(selectedItem, item.onSelect); }, value: item.value, children: item.children, closeOnSelect: item.closeOnSelect, shouldRetainSelection: shouldRetainSelection, shouldTruncateText: shouldTruncateText })); }, [
+        handleKeyboardNavigation,
+        handleToggleSingleItem,
+        isMultiSelect,
+        menuItemRefs,
+        shouldRetainSelection,
+        shouldTruncateText,
+    ]);
+    if (!isMatchWidthSet) {
+        maxW = '320px';
+    }
     // Return default Chakra menu if user passes in custom child elements
     if (children) {
         return React__default["default"].createElement(react.MenuList, __assign({}, rest), children);
     }
-    if (!isMatchWidthSet) {
-        maxW = '320px';
-    }
-    return (React__default["default"].createElement(react.MenuList, __assign({}, rest, { maxW: maxW, maxH: maxH, minW: minW, overflow: "hidden auto" }),
-        (isSearchable || (canSelectAll && isMultiSelect)) && (React__default["default"].createElement(react.Box, { className: "menu-list__header", m: "0 12px 8px" },
+    return (React__default["default"].createElement(react.MenuList, __assign({ className: "MeuList" }, rest, { maxW: maxW, maxH: maxH, minW: minW, overflow: "hidden auto" }),
+        (isSearchable || (canSelectAll && isMultiSelect)) && (React__default["default"].createElement(react.Box, { className: "MenuList__Header", m: "0 12px 8px" },
             isSearchable && (React__default["default"].createElement(MenuSearchBar, { handleKeyboardNavigation: handleKeyboardNavigation, menuItems: menuItems || [], searchInputRef: searchInputRef, setFilteredMenuItems: setFilteredMenuItems, placeholder: searchPlaceholder })),
             canSelectAll && isMultiSelect && (React__default["default"].createElement(MenuSelectAllButtons, { handleToggleAllItems: handleToggleAllItems, hasSelectedItems: Boolean(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.find(function (item) { return item.isSelected; })), isGrouped: false })))),
-        React__default["default"].createElement(react.Box, { className: "menu-list__body" }, isGrouped
-            ? groups === null || groups === void 0 ? void 0 : groups.map(function (groupName) {
-                var menuItems = filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.filter(function (item) { return item.groupLabel === groupName; });
-                return (React__default["default"].createElement(react.MenuOptionGroup, { key: groupName, className: "menu-list__group" },
-                    React__default["default"].createElement(react.HStack, { minH: "32px", p: "4px 12px 4px 20px", justifyContent: "space-between" },
-                        React__default["default"].createElement(react.Box, { textAlign: "left", className: "menu-list__group-title" },
-                            React__default["default"].createElement(Heading, { size: "xs" }, groupName)),
-                        isMultiSelect && canSelectGroups && (React__default["default"].createElement(MenuSelectAllButtons, { handleToggleAllItems: handleToggleAllItems, hasSelectedItems: Boolean(menuItems === null || menuItems === void 0 ? void 0 : menuItems.find(function (item) { return item.isSelected; })), isGrouped: true, groupName: groupName }))), menuItems === null || menuItems === void 0 ? void 0 :
-                    menuItems.map(function (item, index) {
-                        return (React__default["default"].createElement(MenuItem, { handleKeyboardNavigation: handleKeyboardNavigation, isMultiSelect: isMultiSelect, isSelected: item.isSelected, itemIndex: index.toString(), key: item.value, label: item.label, leftElement: item.leftElement, menuItemRefs: menuItemRefs, onSelectItem: handleToggleSingleItem, value: item.value, children: item.children, closeOnSelect: item.closeOnSelect }));
-                    })));
-            })
-            : filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.map(function (item, index) {
-                return (React__default["default"].createElement(MenuItem, { handleKeyboardNavigation: handleKeyboardNavigation, isMultiSelect: isMultiSelect, isSelected: item.isSelected, itemIndex: index.toString(), key: item.value, label: item.label, leftElement: item.leftElement, menuItemRefs: menuItemRefs, onSelectItem: handleToggleSingleItem, value: item.value, children: item.children, closeOnSelect: item.closeOnSelect }));
-            }))));
+        React__default["default"].createElement(react.Box, { className: "MenuList__Body" }, !(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.length) ? (React__default["default"].createElement(react.Box, { textAlign: "center", display: "block", p: "12px" },
+            React__default["default"].createElement(Text, { size: "sm", colorToken: "subtle" }, "No results found"))) : isGrouped ? (groups === null || groups === void 0 ? void 0 : groups.map(function (groupName) {
+            var menuItems = filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.filter(function (item) { return item.groupLabel === groupName; });
+            return (React__default["default"].createElement(react.MenuOptionGroup, { key: groupName, className: "MenuList__Group" },
+                React__default["default"].createElement(react.HStack, { minH: "32px", p: "4px 12px 4px 20px", justifyContent: "space-between" },
+                    React__default["default"].createElement(react.Box, { textAlign: "left", className: "MenuList__GroupTitle" },
+                        React__default["default"].createElement(Heading, { size: "xs" }, groupName)),
+                    isMultiSelect && canSelectGroups && (React__default["default"].createElement(MenuSelectAllButtons, { handleToggleAllItems: handleToggleAllItems, hasSelectedItems: Boolean(menuItems === null || menuItems === void 0 ? void 0 : menuItems.find(function (item) { return item.isSelected; })), isGrouped: true, groupName: groupName }))), menuItems === null || menuItems === void 0 ? void 0 :
+                menuItems.map(function (item, index) {
+                    return getMenuItem(item, index);
+                })));
+        })) : (filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.map(function (item, index) {
+            return getMenuItem(item, index);
+        })))));
 };
 
-var Select = function (props) {
-    var _a;
+var Select = function (_a) {
+    var options = _a.options; _a.isFieldInline; var useBrowserDefaultMenu = _a.useBrowserDefaultMenu, placeholder = _a.placeholder, listProps = _a.listProps, value = _a.value, _b = _a.shouldTruncateText, shouldTruncateText = _b === void 0 ? true : _b; _a.maxW; var size = _a.size, domProps = __rest(_a, ["options", "isFieldInline", "useBrowserDefaultMenu", "placeholder", "listProps", "value", "shouldTruncateText", "maxW", "size"]);
     var colors = useTheme().colors;
     var selectRef = React.useRef(null);
-    var options = props.options; props.isFieldInline; var useBrowserDefaultMenu = props.useBrowserDefaultMenu, placeholder = props.placeholder, listConfig = props.listConfig, value = props.value, domProps = __rest(props, ["options", "isFieldInline", "useBrowserDefaultMenu", "placeholder", "listConfig", "value"]);
-    var _b = __read(React.useState({
+    var _c = __read(React.useState({
         label: placeholder,
         value: '',
         leftElement: null,
-    }), 2), selectedOption = _b[0], setSelectedOption = _b[1];
+    }), 2), selectedOption = _c[0], setSelectedOption = _c[1];
     React.useEffect(function () {
         if (value) {
             var defaultValue = options.find(function (option) { return option.value === value; });
@@ -4470,39 +4487,48 @@ var Select = function (props) {
             }
         }
     }, [value, options]);
+    var selectWidth = React.useMemo(function () {
+        var _a;
+        if (!selectRef.current) {
+            return '320px';
+        }
+        return "".concat((_a = selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth, "px");
+        // Disables the warning for not including unused dependency in the hook array. This dependency is needed to rerender the menu list with the correct width
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectRef === null || selectRef === void 0 ? void 0 : selectRef.current]);
     var focusStyle = {
         borderWidth: '2px',
         borderColor: colors.border.light.focus,
     };
     if (useBrowserDefaultMenu) {
-        return (React__default["default"].createElement(react.Select, __assign({ value: value, placeholder: placeholder }, domProps, { _focus: __assign({}, focusStyle) }), options.map(function (option, index) { return (React__default["default"].createElement("option", { key: "options-".concat(index), value: option.value }, option.label)); })));
+        return (React__default["default"].createElement(react.Select, __assign({ value: value, placeholder: placeholder }, domProps, { _focus: __assign({}, focusStyle), className: "Select" }), options.map(function (option, index) { return (React__default["default"].createElement("option", { key: "options-".concat(index), value: option.value }, option.label)); })));
     }
     var handleSelectOption = function (selectedOption) {
         setSelectedOption(selectedOption);
-        if (listConfig === null || listConfig === void 0 ? void 0 : listConfig.onSelectOption) {
-            listConfig === null || listConfig === void 0 ? void 0 : listConfig.onSelectOption(selectedOption);
+        if (listProps === null || listProps === void 0 ? void 0 : listProps.onSelect) {
+            listProps.onSelect(selectedOption);
         }
     };
     var handleMenuClose = function (selectedOption) {
-        if (listConfig === null || listConfig === void 0 ? void 0 : listConfig.onMenuClose) {
-            listConfig === null || listConfig === void 0 ? void 0 : listConfig.onMenuClose(selectedOption);
+        if (listProps === null || listProps === void 0 ? void 0 : listProps.onClose) {
+            listProps.onClose(selectedOption);
         }
     };
-    return (React__default["default"].createElement(MenuProvider, { menuItems: options, onMenuClose: handleMenuClose },
+    var flexibleHeightProps = !shouldTruncateText ? { height: 'max-content', minH: '40px' } : {};
+    return (React__default["default"].createElement(MenuProvider, { menuItems: options, onClose: handleMenuClose },
         React__default["default"].createElement(MenuContainer, { matchWidth: true, isLazy: true },
-            React__default["default"].createElement(react.Select, __assign({ as: react.MenuButton }, domProps, { _focus: __assign({}, focusStyle), ref: selectRef, onClick: function (event) { return event.stopPropagation(); } }),
-                React__default["default"].createElement(react.HStack, null,
-                    (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement)
+            React__default["default"].createElement(react.Select, __assign({ as: react.MenuButton, _focus: __assign({}, focusStyle), onClick: function (event) { return event.stopPropagation(); }, type: "button", className: "Select__MenuButton", ref: selectRef, size: size }, flexibleHeightProps, domProps),
+                React__default["default"].createElement(react.HStack, { className: "Select__Container", justifyContent: "flex-start", alignItems: "center", textAlign: "left" },
+                    React__default["default"].createElement(react.Box, { className: "Select__LeftElement" }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement)
                         ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement
-                        : (listConfig === null || listConfig === void 0 ? void 0 : listConfig.defaultLeftElement)
-                            ? listConfig === null || listConfig === void 0 ? void 0 : listConfig.defaultLeftElement
-                            : null,
-                    React__default["default"].createElement(TruncatedText, { textContent: selectedOption.label || '', noOfLines: 1 }))),
-            React__default["default"].createElement(react.Portal, null,
-                React__default["default"].createElement(MenuList, { maxW: "".concat((_a = selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth, "px") || '0px', isGrouped: listConfig === null || listConfig === void 0 ? void 0 : listConfig.isGrouped, isSearchable: listConfig === null || listConfig === void 0 ? void 0 : listConfig.isSearchable, menuItems: options.map(function (option) {
-                        option.isSelected = option.value === selectedOption.value;
-                        return option;
-                    }), onMenuItemSelect: handleSelectOption, isMatchWidthSet: true })))));
+                        : (listProps === null || listProps === void 0 ? void 0 : listProps.defaultLeftElement)
+                            ? listProps === null || listProps === void 0 ? void 0 : listProps.defaultLeftElement
+                            : null),
+                    shouldTruncateText ? (React__default["default"].createElement(TruncatedText, { className: "Select__Text", textContent: selectedOption.label || '', noOfLines: 1 })) : (React__default["default"].createElement(Text, { className: "Select__Text" }, selectedOption.label)))),
+            React__default["default"].createElement(MenuList, { maxW: selectWidth, shouldTruncateText: shouldTruncateText, isGrouped: listProps === null || listProps === void 0 ? void 0 : listProps.isGrouped, isSearchable: listProps === null || listProps === void 0 ? void 0 : listProps.isSearchable, shouldRetainSelection: true, menuItems: options.map(function (option) {
+                    option.isSelected = option.value === selectedOption.value;
+                    return option;
+                }), onSelect: handleSelectOption, isMatchWidthSet: true }))));
 };
 Select.displayName = 'Select';
 var WrappedSelect = withFormControl(Select);
@@ -6794,24 +6820,24 @@ var MenuButton = function (_a) {
                 return '8px';
         }
     }, [isIconButton, size]);
-    return (React__default["default"].createElement(react.MenuButton, __assign({ as: Button, variant: variant, size: size, position: "relative" }, rest, { p: buttonPadding, lineHeight: 0, _active: { transform: 'none' } }),
-        React__default["default"].createElement(react.HStack, { spacing: textSpacing, className: "menu-button__content-container" },
+    return (React__default["default"].createElement(react.MenuButton, __assign({ as: Button, variant: variant, size: size, position: "relative" }, rest, { className: "MenuButton", p: buttonPadding, lineHeight: 0, _active: { transform: 'none' } }),
+        React__default["default"].createElement(react.HStack, { spacing: textSpacing, className: "MenuButton__ContentContainer" },
             leftElement && leftElement,
-            leftIconName && (React__default["default"].createElement(react.Box, { p: isIconButton ? '2px' : 0, className: "menu-button__leftIcon" },
+            leftIconName && (React__default["default"].createElement(react.Box, { className: "MenuButton__LeftIcon" },
                 React__default["default"].createElement(Icon, { name: leftIconName, size: iconSize }))),
-            text && React__default["default"].createElement(react.Box, { className: "menu-button__text" }, text),
-            showRightIcon && (React__default["default"].createElement(react.Box, { className: "menu-button__rightIcon" },
+            text && React__default["default"].createElement(react.Box, { className: "MenuButton__Text" }, text),
+            showRightIcon && (React__default["default"].createElement(react.Box, { className: "MenuButton__RightIcon" },
                 React__default["default"].createElement(Icon, { name: rightIconName, size: size === 'lg' ? 'sm' : 'xs' }))))));
 };
 
 var BetaMenu = function (_a) {
-    var buttonConfig = _a.buttonConfig, CustomTriggerElement = _a.CustomTriggerElement, listConfig = _a.listConfig, menuItems = _a.menuItems, onMenuClose = _a.onMenuClose, _b = _a.isLazy, isLazy = _b === void 0 ? true : _b, props = __rest(_a, ["buttonConfig", "CustomTriggerElement", "listConfig", "menuItems", "onMenuClose", "isLazy"]);
-    return (React__default["default"].createElement(MenuProvider, { menuItems: menuItems, onMenuClose: onMenuClose },
-        React__default["default"].createElement(MenuContainer, __assign({ isLazy: isLazy }, props),
+    var buttonProps = _a.buttonProps, CustomTriggerElement = _a.CustomTriggerElement, listProps = _a.listProps, containerProps = _a.containerProps, props = __rest(_a, ["buttonProps", "CustomTriggerElement", "listProps", "containerProps"]);
+    return (React__default["default"].createElement(MenuProvider, { menuItems: listProps === null || listProps === void 0 ? void 0 : listProps.menuItems, isMultiSelect: listProps === null || listProps === void 0 ? void 0 : listProps.isMultiSelect, onClose: containerProps === null || containerProps === void 0 ? void 0 : containerProps.onClose },
+        React__default["default"].createElement(MenuContainer, __assign({ isLazy: containerProps === null || containerProps === void 0 ? void 0 : containerProps.isLazy }, containerProps, props),
             CustomTriggerElement ? (
             // @ts-ignore
-            React__default["default"].createElement(CustomTriggerElement, { as: react.MenuButton })) : (React__default["default"].createElement(MenuButton, __assign({}, buttonConfig))),
-            React__default["default"].createElement(MenuList, __assign({}, listConfig, { isMatchWidthSet: props.matchWidth, menuItems: menuItems })))));
+            React__default["default"].createElement(CustomTriggerElement, { as: react.MenuButton })) : (React__default["default"].createElement(MenuButton, __assign({}, buttonProps))),
+            React__default["default"].createElement(MenuList, __assign({}, listProps, { isMatchWidthSet: props.matchWidth, menuItems: listProps === null || listProps === void 0 ? void 0 : listProps.menuItems })))));
 };
 
 var withDarkMode$1 = function (children, darkMode) {