@televet/kibble-ui 1.12.7 → 1.12.9

package/build/index.js

@@ -3595,7 +3595,7 @@ function withFormControl(Component) {
         var shouldShowBottomContent = isInvalid || helperText;
         return (React__default["default"].createElement(react.FormControl, __assign({}, formControlStyle, { isInvalid: isInvalid, isRequired: isRequired, isReadOnly: isReadOnly, isDisabled: isDisabled }),
             label && (React__default["default"].createElement(react.FormLabel, __assign({ display: isFieldInline ? 'inline-block' : 'block', color: colors.text.light.default }, labelStyle), label)),
-            React__default["default"].createElement(Component, __assign({}, props, { "$isFieldInline": isFieldInline, errorBorderColor: colors.border.light.error, focusBorderColor: colors.border.light.focus })),
+            React__default["default"].createElement(Component, __assign({}, props, { isFieldInline: isFieldInline, errorBorderColor: colors.border.light.error, focusBorderColor: colors.border.light.focus })),
             shouldShowBottomContent && (React__default["default"].createElement(react.Flex, { mt: 2, w: "100%", justifyContent: alignment, alignItems: "center" },
                 React__default["default"].createElement(react.FormErrorMessage, { m: 0, fontSize: fontSizes.xs, color: colors.text.light.error }, errorText),
                 helperText && (React__default["default"].createElement(react.FormHelperText, { m: 0, color: isInvalid ? colors.text.light.error : colors.text.light.subtle, fontSize: fontSizes.xs }, helperText))))));
@@ -3612,7 +3612,7 @@ var Checkbox = function (_a) {
 
 var CheckboxGroup = function (_a) {
     var checkboxes = _a.checkboxes, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.direction, direction = _c === void 0 ? 'row' : _c, spacing = _a.spacing, variant = _a.variant, rest = __rest(_a, ["checkboxes", "size", "direction", "spacing", "variant"]);
-    rest.$isFieldInline; var domProps = __rest(rest, ["$isFieldInline"]);
+    rest.isFieldInline; var domProps = __rest(rest, ["isFieldInline"]);
     return (React__default["default"].createElement(react.CheckboxGroup, __assign({}, domProps),
         React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing, display: "inline-flex" }, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox, __assign({ key: index }, checkbox, { size: size, variant: variant || checkbox.variant }))); }))));
 };
@@ -3765,7 +3765,8 @@ var CheckboxConfig = {
 };
 
 var Textarea = function (props) {
-    return React__default["default"].createElement(react.Textarea, __assign({ background: colors.background.light }, props));
+    props.isFieldInline; var domProps = __rest(props, ["isFieldInline"]);
+    return React__default["default"].createElement(react.Textarea, __assign({ background: colors.background.light }, domProps));
 };
 Textarea.displayName = 'Textarea';
 var WrappedTextArea = withFormControl(Textarea);
@@ -3832,7 +3833,7 @@ var TextareaConfig = __assign({}, FormControlConfig);
 
 var TextInput = withFormControl(function (props) {
     // the disabled styles coming from the FormControlConfig weren't getting applied to the TextInput, so they're added inline instead
-    var leftElement = props.leftElement, rightElement = props.rightElement, inputRef = props.inputRef, domProps = __rest(props, ["leftElement", "rightElement", "inputRef"]);
+    var leftElement = props.leftElement, rightElement = props.rightElement, inputRef = props.inputRef; props.isFieldInline; var domProps = __rest(props, ["leftElement", "rightElement", "inputRef", "isFieldInline"]);
     return (React__default["default"].createElement(react.InputGroup, null,
         leftElement ? React__default["default"].createElement(react.InputLeftElement, { children: leftElement, h: "100%" }) : null,
         React__default["default"].createElement(react.Input, __assign({ background: colors.background.light, _disabled: {
@@ -3852,13 +3853,13 @@ WrappedTextInput.displayName = 'TextInput';
 var TextInputConfig = __assign({}, FormControlConfig);
 
 var Radio = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, rest = __rest(_a, ["children", "size"]);
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b; _a.isFieldInline; var rest = __rest(_a, ["children", "size", "isFieldInline"]);
     return (React__default["default"].createElement(react.Radio, __assign({}, rest, { size: size, alignItems: "flex-start" }), children));
 };
 
 var RadioGroup = function (_a) {
     var radios = _a.radios, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.direction, direction = _c === void 0 ? 'row' : _c, spacing = _a.spacing, rest = __rest(_a, ["radios", "size", "direction", "spacing"]);
-    rest.$isFieldInline; var domProps = __rest(rest, ["$isFieldInline"]);
+    rest.isFieldInline; var domProps = __rest(rest, ["isFieldInline"]);
     return (React__default["default"].createElement(react.RadioGroup, __assign({}, domProps),
         React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing, maxW: rest.maxW || 'max-content' }, radios.map(function (radio, index) { return (React__default["default"].createElement(Radio, __assign({ key: index }, radio, { size: size }))); }))));
 };
@@ -4156,9 +4157,9 @@ var TruncatedText = function (_a) {
         var checkValue = onCheckTextOverFlowing(containerRef);
         setIsTextOverFlowing(checkValue);
     }, [containerRef, onCheckTextOverFlowing]);
-    return (React__default["default"].createElement(react.Box, { ref: containerRef },
-        React__default["default"].createElement(Tooltip, { label: textContent || '', isDisabled: !isTextOverFlowing, placement: placement },
-            React__default["default"].createElement(react.Text, __assign({ noOfLines: noOfLines, as: "p" }, rest), textContent))));
+    return (React__default["default"].createElement(react.Box, { ref: containerRef, className: "TruncatedText__Wrapper" },
+        React__default["default"].createElement(Tooltip, { className: "TruncatedText__Tooltip", label: textContent || '', isDisabled: !isTextOverFlowing, placement: placement },
+            React__default["default"].createElement(react.Text, __assign({ className: "TruncatedText__TextContent", noOfLines: noOfLines, as: "p" }, rest), textContent))));
 };
 
 var RatingDots = function (_a) {
@@ -4185,9 +4186,356 @@ var RatingDots = function (_a) {
             React__default["default"].createElement(Text, { size: "sm" }, "".concat(roundedMax, " - Very likely")))));
 };
 
+// TODO: Figure out how to document this functionality
+var MenuContext = React.createContext({
+    allMenuItems: [],
+    filteredMenuItems: [],
+    focusedItemIndex: -1,
+    groups: [],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    handleOnClose: function () {
+        throw new Error('handleOnClose(): Promise<void> not implemented');
+    },
+    setFilteredMenuItems: function () {
+        throw new Error('setFilteredMenuItems(): Promise<void> not implemented');
+    },
+    setFocusedItemIndex: function () {
+        throw new Error('setFocusedItemIndex(): Promise<void> not implemented');
+    },
+    setGroups: function () {
+        throw new Error('setGroups(): Promise<void> not implemented');
+    },
+});
+var useMenuContext = function () { return React.useContext(MenuContext); };
+var MenuProvider = function (_a) {
+    var menuItems = _a.menuItems, onMenuClose = _a.onMenuClose, 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; });
+        setFocusedItemIndex(-1);
+        if (onMenuClose) {
+            onMenuClose(selectedItems);
+        }
+    }, [filteredMenuItems, onMenuClose]);
+    return (React__default["default"].createElement(MenuContext.Provider, { value: {
+            allMenuItems: menuItems,
+            filteredMenuItems: filteredMenuItems,
+            focusedItemIndex: focusedItemIndex,
+            groups: groups,
+            menuItemRefs: menuItemRefs,
+            handleOnClose: handleOnClose,
+            searchInputRef: searchInputRef,
+            setFilteredMenuItems: setFilteredMenuItems,
+            setFocusedItemIndex: setFocusedItemIndex,
+            setGroups: setGroups,
+        } }, children));
+};
+
+var MenuContainer = function (_a) {
+    var children = _a.children; _a.onMenuClose; var rest = __rest(_a, ["children", "onMenuClose"]);
+    var handleOnClose = useMenuContext().handleOnClose;
+    return (React__default["default"].createElement(react.Menu, __assign({ onClose: handleOnClose }, rest), children));
+};
+
+var MenuItemConfig = {
+    color: adaptiveColors.text.light.subtle,
+    cursor: 'pointer',
+    fontSize: fontSizes.sm,
+    px: '20px',
+    py: '8px',
+    outline: 0,
+    transitionDuration: 'ultra-fast',
+    transitionProperty: 'background',
+    transitionTimingFunction: 'ease-in',
+    _hover: {
+        bg: semanticColors.background.hover,
+    },
+    _focus: {
+        bg: semanticColors.background.hover,
+    },
+    _active: {
+        color: adaptiveColors.text.light.link,
+    },
+    _expanded: {
+        bg: semanticColors.background.hover,
+    },
+    _disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed',
+        bg: 'transparent',
+        color: adaptiveColors.text.light.subtle,
+    },
+};
+var MenuConfig = {
+    baseStyle: {
+        item: MenuItemConfig,
+        list: {
+            p: '8px 0',
+            boxShadow: shadows.md,
+            borderColor: colors.border.light.default,
+        },
+    },
+};
+
+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 colors = useTheme().colors;
+    var onClose = react.useMenuState().onClose;
+    var handleSelect = React.useCallback(function () {
+        if (isDisabled)
+            return;
+        if (value && onSelectItem) {
+            onSelectItem(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) {
+            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 })))))));
+};
+
+var MenuSearchBar = function (_a) {
+    var handleKeyboardNavigation = _a.handleKeyboardNavigation, menuItems = _a.menuItems, onSearchCallback = _a.onSearchCallback, searchInputRef = _a.searchInputRef, setFilteredMenuItems = _a.setFilteredMenuItems, _b = _a.placeholder, placeholder = _b === void 0 ? 'Search...' : _b;
+    var handleSearch = React.useCallback(function (e) {
+        var searchInput = e.target.value;
+        if (searchInput === '' || !searchInput) {
+            setFilteredMenuItems(menuItems);
+        }
+        else {
+            var filterdItems = menuItems.filter(function (item) { var _a; return (_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchInput.toLowerCase()); });
+            setFilteredMenuItems(filterdItems);
+        }
+        if (onSearchCallback) {
+            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 }));
+};
+
+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, { mt: "8px", className: "menu-list__select-all-buttons" },
+        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 focusNextListItem = React.useCallback(function (direction) {
+        var _a, _b;
+        if (!(menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current))
+            return;
+        var isFirstOption = focusedItemIndex === 0;
+        var isLastOption = focusedItemIndex === (menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current.length) - 1;
+        var newIndex = -1;
+        if (direction === 'ArrowDown') {
+            if (isLastOption) {
+                if (isSearchable) {
+                    (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    setFocusedItemIndex(-1);
+                    return;
+                }
+                newIndex = 0;
+            }
+            else {
+                newIndex = focusedItemIndex + 1;
+            }
+        }
+        else if (direction === 'ArrowUp') {
+            if (isFirstOption) {
+                if (isSearchable) {
+                    (_b = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    setFocusedItemIndex(-1);
+                    return;
+                }
+                newIndex = menuItemRefs.current.length - 1;
+            }
+            else {
+                newIndex = focusedItemIndex - 1;
+            }
+        }
+        var nextListItem = menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current[newIndex];
+        if (nextListItem) {
+            nextListItem === null || nextListItem === void 0 ? void 0 : nextListItem.focus();
+            setFocusedItemIndex(newIndex);
+        }
+        else {
+            setFocusedItemIndex(-1);
+        }
+    }, [focusedItemIndex, isSearchable, menuItemRefs, searchInputRef, setFocusedItemIndex]);
+    var handleKeyboardNavigation = React.useCallback(function (e, elementIsInputField) {
+        e.persist();
+        if (!(menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current))
+            return;
+        if (e.key === 'ArrowDown' || e.key === 'Tab') {
+            focusNextListItem('ArrowDown');
+        }
+        if (e.key === 'ArrowUp') {
+            focusNextListItem('ArrowUp');
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.target.click();
+        }
+    }, [focusNextListItem, menuItemRefs]);
+    var handleToggleSingleItem = React.useCallback(function (selectedValue) {
+        if (filteredMenuItems) {
+            var _filteredMenuItemsCopy = __spreadArray([], __read(filteredMenuItems), false);
+            var selectedItem = _filteredMenuItemsCopy.find(function (item) { return item.value === selectedValue; });
+            if (!isMultiSelect) {
+                _filteredMenuItemsCopy.filter(function (item) { return item.isSelected === true; }).map(function (item) { return (item.isSelected = false); });
+            }
+            if (selectedItem) {
+                selectedItem.isSelected = !selectedItem.isSelected;
+            }
+            setFilteredMenuItems(_filteredMenuItemsCopy);
+            if (onMenuItemSelect && selectedItem) {
+                onMenuItemSelect(selectedItem);
+            }
+        }
+    }, [filteredMenuItems, isMultiSelect, onMenuItemSelect, setFilteredMenuItems]);
+    var handleToggleAllItems = React.useCallback(function (_a) {
+        var groupName = _a.groupName, _b = _a.clear, clear = _b === void 0 ? false : _b;
+        if (filteredMenuItems) {
+            var _filteredMenuItemsCopy = __spreadArray([], __read(filteredMenuItems), false);
+            var value_1 = [];
+            _filteredMenuItemsCopy.forEach(function (item) {
+                if (groupName) {
+                    if (groupName === item.groupLabel) {
+                        item.isSelected = !clear;
+                        if (item.value && item.isSelected) {
+                            value_1.push(item.value);
+                        }
+                    }
+                }
+                else {
+                    item.isSelected = !clear;
+                    if (item.value && item.isSelected) {
+                        value_1.push(item.value);
+                    }
+                }
+            });
+            setFilteredMenuItems(_filteredMenuItemsCopy);
+            if (onMenuItemSelectAll) {
+                onMenuItemSelectAll(_filteredMenuItemsCopy.filter(function (item) { return item.isSelected; }));
+            }
+        }
+    }, [filteredMenuItems, onMenuItemSelectAll, 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);
+            if (groupNames.length) {
+                setGroups(groupNames);
+            }
+        }
+    }, [filteredMenuItems, isGrouped, setGroups]);
+    // 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" },
+            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 }));
+            }))));
+};
+
 var Select = function (props) {
-    var options = props.options, domProps = __rest(props, ["options"]);
-    return (React__default["default"].createElement(react.Select, __assign({}, domProps), options.map(function (option, index) { return (React__default["default"].createElement("option", { key: "options-".concat(index), value: option.value }, option.text)); })));
+    var _a;
+    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({
+        label: placeholder,
+        value: '',
+        leftElement: null,
+    }), 2), selectedOption = _b[0], setSelectedOption = _b[1];
+    React.useEffect(function () {
+        if (value) {
+            var defaultValue = options.find(function (option) { return option.value === value; });
+            if (defaultValue) {
+                setSelectedOption(defaultValue);
+            }
+        }
+    }, [value, options]);
+    if (useBrowserDefaultMenu) {
+        return (React__default["default"].createElement(react.Select, __assign({ value: value, placeholder: placeholder }, domProps, { _hover: {
+                borderWidth: '1px',
+                borderColor: colors.border.light.heavy,
+            }, _focus: {
+                borderWidth: '2px',
+                borderColor: colors.border.light.focus,
+            } }), 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);
+        }
+    };
+    var handleMenuClose = function (selectedOption) {
+        if (listConfig === null || listConfig === void 0 ? void 0 : listConfig.onMenuClose) {
+            listConfig === null || listConfig === void 0 ? void 0 : listConfig.onMenuClose(selectedOption);
+        }
+    };
+    return (React__default["default"].createElement(MenuProvider, { menuItems: options, onMenuClose: handleMenuClose },
+        React__default["default"].createElement(MenuContainer, { matchWidth: true, isLazy: true },
+            React__default["default"].createElement(react.Select, __assign({ as: react.MenuButton }, domProps, { _hover: {
+                    borderWidth: '1px',
+                    borderColor: colors.border.light.heavy,
+                }, _focus: {
+                    borderWidth: '2px',
+                    borderColor: colors.border.light.focus,
+                }, ref: selectRef, onClick: function (event) { return event.stopPropagation(); } }),
+                React__default["default"].createElement(react.HStack, null,
+                    (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 })))));
 };
 Select.displayName = 'Select';
 var WrappedSelect = withFormControl(Select);
@@ -4195,8 +4543,8 @@ var WrappedSelect = withFormControl(Select);
 var SelectConfig = __assign({}, FormControlConfig);
 
 var Switch = function (props) {
-    var isChecked = props.isChecked, $isFieldInline = props.$isFieldInline, domProps = __rest(props, ["isChecked", "$isFieldInline"]);
-    return (React__default["default"].createElement(react.Switch, __assign({ colorScheme: "teal", isChecked: isChecked, display: $isFieldInline ? 'inline-block' : 'block' }, domProps)));
+    var isChecked = props.isChecked, isFieldInline = props.isFieldInline, domProps = __rest(props, ["isChecked", "isFieldInline"]);
+    return (React__default["default"].createElement(react.Switch, __assign({ colorScheme: "teal", isChecked: isChecked, display: isFieldInline ? 'inline-block' : 'block' }, domProps)));
 };
 Switch.displayName = 'Switch';
 var WrappedSwitch = withFormControl(Switch);
@@ -6403,83 +6751,28 @@ var SwitchConfig = {
                 _b),
         },
         lg: {
-            container: (_c = {},
-                _c[$thumbWidth.variable] = '19.5px',
-                _c[$thumbHeight.variable] = '19.5px',
-                _c[$trackWidth.variable] = '33px',
-                _c[$trackHeight.variable] = '10.5px',
-                _c),
-        },
-    },
-};
-
-var DrawerConfig = {
-    variants: {
-        alwaysOpen: {
-            parts: ['dialog, dialogContainer'],
-            dialog: {
-                pointerEvents: 'auto',
-            },
-            dialogContainer: {
-                pointerEvents: 'none',
-            },
-        },
-    },
-};
-
-// TODO: Figure out how to document this functionality
-var MenuContext = React.createContext({
-    allMenuItems: [],
-    filteredMenuItems: [],
-    focusedItemIndex: -1,
-    groups: [],
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    handleOnClose: function () {
-        throw new Error('handleOnClose(): Promise<void> not implemented');
-    },
-    setFilteredMenuItems: function () {
-        throw new Error('setFilteredMenuItems(): Promise<void> not implemented');
-    },
-    setFocusedItemIndex: function () {
-        throw new Error('setFocusedItemIndex(): Promise<void> not implemented');
-    },
-    setGroups: function () {
-        throw new Error('setGroups(): Promise<void> not implemented');
-    },
-});
-var useMenuContext = function () { return React.useContext(MenuContext); };
-var MenuProvider = function (_a) {
-    var menuItems = _a.menuItems, onMenuClose = _a.onMenuClose, 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; });
-        setFocusedItemIndex(-1);
-        if (onMenuClose) {
-            onMenuClose(selectedItems);
-        }
-    }, [filteredMenuItems, onMenuClose]);
-    return (React__default["default"].createElement(MenuContext.Provider, { value: {
-            allMenuItems: menuItems,
-            filteredMenuItems: filteredMenuItems,
-            focusedItemIndex: focusedItemIndex,
-            groups: groups,
-            menuItemRefs: menuItemRefs,
-            handleOnClose: handleOnClose,
-            searchInputRef: searchInputRef,
-            setFilteredMenuItems: setFilteredMenuItems,
-            setFocusedItemIndex: setFocusedItemIndex,
-            setGroups: setGroups,
-        } }, children));
+            container: (_c = {},
+                _c[$thumbWidth.variable] = '19.5px',
+                _c[$thumbHeight.variable] = '19.5px',
+                _c[$trackWidth.variable] = '33px',
+                _c[$trackHeight.variable] = '10.5px',
+                _c),
+        },
+    },
 };
 
-var MenuContainer = function (_a) {
-    var children = _a.children; _a.onMenuClose; var rest = __rest(_a, ["children", "onMenuClose"]);
-    var handleOnClose = useMenuContext().handleOnClose;
-    return (React__default["default"].createElement(react.Menu, __assign({ onClose: handleOnClose }, rest), children));
+var DrawerConfig = {
+    variants: {
+        alwaysOpen: {
+            parts: ['dialog, dialogContainer'],
+            dialog: {
+                pointerEvents: 'auto',
+            },
+            dialogContainer: {
+                pointerEvents: 'none',
+            },
+        },
+    },
 };
 
 var MenuButton = function (_a) {
@@ -6544,240 +6837,6 @@ var MenuButton = function (_a) {
                 React__default["default"].createElement(Icon, { name: rightIconName, size: size === 'lg' ? 'sm' : 'xs' }))))));
 };
 
-var MenuItemConfig = {
-    color: adaptiveColors.text.light.subtle,
-    cursor: 'pointer',
-    fontSize: fontSizes.sm,
-    px: '20px',
-    py: '8px',
-    outline: 0,
-    transitionDuration: 'ultra-fast',
-    transitionProperty: 'background',
-    transitionTimingFunction: 'ease-in',
-    _hover: {
-        bg: semanticColors.background.hover,
-    },
-    _focus: {
-        bg: semanticColors.background.hover,
-    },
-    _active: {
-        color: adaptiveColors.text.light.link,
-    },
-    _expanded: {
-        bg: semanticColors.background.hover,
-    },
-    _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed',
-        bg: 'transparent',
-        color: adaptiveColors.text.light.subtle,
-    },
-};
-var MenuConfig = {
-    baseStyle: {
-        item: MenuItemConfig,
-        list: {
-            p: '8px 0',
-            boxShadow: shadows.md,
-            borderColor: colors.border.light.default,
-        },
-    },
-};
-
-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 colors = useTheme().colors;
-    var onClose = react.useMenuState().onClose;
-    var handleSelect = React.useCallback(function () {
-        if (isDisabled)
-            return;
-        if (value && onSelectItem) {
-            onSelectItem(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) {
-            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" })))),
-        leftElement && React__default["default"].createElement(react.Box, { className: "menu-list__item-leftElement" }, leftElement),
-        React__default["default"].createElement(react.Box, { className: "menu-list__item-label" }, label)))));
-};
-
-var MenuSearchBar = function (_a) {
-    var handleKeyboardNavigation = _a.handleKeyboardNavigation, menuItems = _a.menuItems, onSearchCallback = _a.onSearchCallback, searchInputRef = _a.searchInputRef, setFilteredMenuItems = _a.setFilteredMenuItems, _b = _a.placeholder, placeholder = _b === void 0 ? 'Search...' : _b;
-    var handleSearch = React.useCallback(function (e) {
-        var searchInput = e.target.value;
-        if (searchInput === '' || !searchInput) {
-            setFilteredMenuItems(menuItems);
-        }
-        else {
-            var filterdItems = menuItems.filter(function (item) { var _a; return (_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchInput.toLowerCase()); });
-            setFilteredMenuItems(filterdItems);
-        }
-        if (onSearchCallback) {
-            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 }));
-};
-
-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, { mt: "8px", className: "menu-list__select-all-buttons" },
-        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 focusNextListItem = React.useCallback(function (direction) {
-        var _a, _b;
-        if (!(menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current))
-            return;
-        var isFirstOption = focusedItemIndex === 0;
-        var isLastOption = focusedItemIndex === (menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current.length) - 1;
-        var newIndex = -1;
-        if (direction === 'ArrowDown') {
-            if (isLastOption) {
-                if (isSearchable) {
-                    (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    setFocusedItemIndex(-1);
-                    return;
-                }
-                newIndex = 0;
-            }
-            else {
-                newIndex = focusedItemIndex + 1;
-            }
-        }
-        else if (direction === 'ArrowUp') {
-            if (isFirstOption) {
-                if (isSearchable) {
-                    (_b = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                    setFocusedItemIndex(-1);
-                    return;
-                }
-                newIndex = menuItemRefs.current.length - 1;
-            }
-            else {
-                newIndex = focusedItemIndex - 1;
-            }
-        }
-        var nextListItem = menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current[newIndex];
-        if (nextListItem) {
-            nextListItem === null || nextListItem === void 0 ? void 0 : nextListItem.focus();
-            setFocusedItemIndex(newIndex);
-        }
-        else {
-            setFocusedItemIndex(-1);
-        }
-    }, [focusedItemIndex, isSearchable, menuItemRefs, searchInputRef, setFocusedItemIndex]);
-    var handleKeyboardNavigation = React.useCallback(function (e, elementIsInputField) {
-        e.persist();
-        if (!(menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current))
-            return;
-        if (e.key === 'ArrowDown' || e.key === 'Tab') {
-            focusNextListItem('ArrowDown');
-        }
-        if (e.key === 'ArrowUp') {
-            focusNextListItem('ArrowUp');
-        }
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            e.target.click();
-        }
-    }, [focusNextListItem, menuItemRefs]);
-    var handleToggleSingleItem = React.useCallback(function (selectedValue) {
-        if (filteredMenuItems) {
-            var _filteredMenuItemsCopy = __spreadArray([], __read(filteredMenuItems), false);
-            var selectedItem = _filteredMenuItemsCopy.find(function (item) { return item.value === selectedValue; });
-            if (!isMultiSelect) {
-                _filteredMenuItemsCopy.filter(function (item) { return item.isSelected === true; }).map(function (item) { return (item.isSelected = false); });
-            }
-            if (selectedItem) {
-                selectedItem.isSelected = !selectedItem.isSelected;
-            }
-            setFilteredMenuItems(_filteredMenuItemsCopy);
-            if (onMenuItemSelect && selectedItem) {
-                onMenuItemSelect(selectedItem);
-            }
-        }
-    }, [filteredMenuItems, isMultiSelect, onMenuItemSelect, setFilteredMenuItems]);
-    var handleToggleAllItems = React.useCallback(function (_a) {
-        var groupName = _a.groupName, _b = _a.clear, clear = _b === void 0 ? false : _b;
-        if (filteredMenuItems) {
-            var _filteredMenuItemsCopy = __spreadArray([], __read(filteredMenuItems), false);
-            var value_1 = [];
-            _filteredMenuItemsCopy.forEach(function (item) {
-                if (groupName) {
-                    if (groupName === item.groupLabel) {
-                        item.isSelected = !clear;
-                        if (item.value && item.isSelected) {
-                            value_1.push(item.value);
-                        }
-                    }
-                }
-                else {
-                    item.isSelected = !clear;
-                    if (item.value && item.isSelected) {
-                        value_1.push(item.value);
-                    }
-                }
-            });
-            setFilteredMenuItems(_filteredMenuItemsCopy);
-            if (onMenuItemSelectAll) {
-                onMenuItemSelectAll(_filteredMenuItemsCopy.filter(function (item) { return item.isSelected; }));
-            }
-        }
-    }, [filteredMenuItems, onMenuItemSelectAll, 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);
-            if (groupNames.length) {
-                setGroups(groupNames);
-            }
-        }
-    }, [filteredMenuItems, isGrouped, setGroups]);
-    // 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" },
-            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 }));
-            }))));
-};
-
 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 },
@@ -6835,7 +6894,7 @@ var ModalFooter = function (_a) {
 };
 
 var ModalFooterButtons = function (_a) {
-    var _b = _a.submitText, submitText = _b === void 0 ? 'Submit' : _b, isLoading = _a.isLoading, isDestructive = _a.isDestructive; _a.children; var onSubmit = _a.onSubmit, _c = _a.allowCancel, allowCancel = _c === void 0 ? true : _c, onCancel = _a.onCancel, rest = __rest(_a, ["submitText", "isLoading", "isDestructive", "children", "onSubmit", "allowCancel", "onCancel"]);
+    var _b = _a.submitText, submitText = _b === void 0 ? 'Submit' : _b, isLoading = _a.isLoading, isDisabled = _a.isDisabled, isDestructive = _a.isDestructive; _a.children; var onSubmit = _a.onSubmit, _c = _a.allowCancel, allowCancel = _c === void 0 ? true : _c, onCancel = _a.onCancel, rest = __rest(_a, ["submitText", "isLoading", "isDisabled", "isDestructive", "children", "onSubmit", "allowCancel", "onCancel"]);
     var onClose = react.useModalContext().onClose;
     var handleCancel = function () {
         if (onCancel) {
@@ -6847,7 +6906,7 @@ var ModalFooterButtons = function (_a) {
         React__default["default"].createElement(react.Flex, { w: "100%" },
             allowCancel && (React__default["default"].createElement(Button, { variant: "tertiary", onClick: handleCancel }, "Cancel")),
             React__default["default"].createElement(react.Spacer, null),
-            React__default["default"].createElement(Button, { onClick: onSubmit, isLoading: isLoading, variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
+            React__default["default"].createElement(Button, { onClick: onSubmit, isLoading: isLoading, isDisabled: isDisabled, variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
 };
 
 // @ts-ignore