@rocket.chat/fuselage 0.71.0 → 0.72.1

package/dist/fuselage.development.js

@@ -620,7 +620,7 @@ function AutoComplete({ value, filter, setFilter, options = [], renderItem, rend
                 : selected;
         });
     }, [value]);
-    const handleSelect = (0, fuselage_hooks_1.useEffectEvent)(([newValue]) => {
+    const handleSelect = (0, fuselage_hooks_1.useStableCallback)(([newValue]) => {
         if (selected.some((item) => item.value === newValue)) {
             hide();
             return;
@@ -636,7 +636,7 @@ function AutoComplete({ value, filter, setFilter, options = [], renderItem, rend
         setFilter?.('');
         hide();
     });
-    const handleRemove = (0, fuselage_hooks_1.useEffectEvent)((event) => {
+    const handleRemove = (0, fuselage_hooks_1.useStableCallback)((event) => {
         event.stopPropagation();
         event.preventDefault();
         const filtered = selected.filter((item) => item.value !== event.currentTarget.value);
@@ -650,12 +650,12 @@ function AutoComplete({ value, filter, setFilter, options = [], renderItem, rend
     const memoizedOptions = (0, react_1.useMemo)(() => options.map(({ value, label }) => [value, label]), [options]);
     const firstSelectedIndex = (0, react_1.useMemo)(() => options.findIndex((option) => selected[0]?.value === option.value), [options, selected]);
     const [cursor, handleKeyDown, , reset, [optionsAreVisible, hide, show]] = (0, Options_1.useCursor)(firstSelectedIndex, memoizedOptions, handleSelect);
-    const handleOnBlur = (0, fuselage_hooks_1.useEffectEvent)((event) => {
+    const handleOnBlur = (0, fuselage_hooks_1.useStableCallback)((event) => {
         hide();
         onBlurAction(event);
     });
     (0, react_1.useEffect)(reset, [filter, reset]);
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useEffectEvent)(() => ref.current?.focus()), flexGrow: 1, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, onChange: (0, fuselage_hooks_1.useEffectEvent)((e) => setFilter?.(e.currentTarget.value)), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN || !value
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useStableCallback)(() => ref.current?.focus()), flexGrow: 1, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, onChange: (0, fuselage_hooks_1.useStableCallback)((e) => setFilter?.(e.currentTarget.value)), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN || !value
                                 ? placeholder
                                 : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled, ...props }), selected.map((itemSelected) => RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { value: itemSelected.value, children: itemSelected.label, onClick: handleRemove }, itemSelected.value)))] }) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-autocomplete__addon": true, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                         ? 'cross'
@@ -3410,7 +3410,7 @@ const InputBox = (0, react_1.forwardRef)(function InputBox({ className, addon, e
         if (addon && innerRef.current && innerRef.current.parentElement) {
             innerRef.current.parentElement.classList.toggle('invalid', !innerRef.current.checkValidity());
         }
-    }, []);
+    }, [addon, error]);
     const handleChange = (0, react_1.useCallback)((event) => {
         if (addon && innerRef.current && innerRef.current.parentElement) {
             innerRef.current.parentElement.classList.toggle('invalid', !innerRef.current.checkValidity());
@@ -3680,66 +3680,6 @@ Object.defineProperty(exports, "Margins", ({ enumerable: true, get: function ()
 /*!**************************************!*\
   !*** ./src/components/Menu/Menu.tsx ***!
   \**************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
-const Options_1 = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
-const PositionAnimated_1 = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
-const menuAction = ([selected], options) => {
-    options[selected].action?.();
-};
-const mapOptions = (options) => Object.entries(options).map(([value, { type = 'option', label, disabled }]) => [
-    value,
-    label,
-    undefined,
-    disabled,
-    type,
-]);
-const Menu = ({ tiny, mini, small = !(tiny || mini), options, optionWidth, placement = 'bottom-start', renderItem, maxHeight, icon = 'kebab', ...props }) => {
-    const mappedOptions = mapOptions(options);
-    const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = (0, Options_1.useCursor)(-1, mappedOptions, (args, [, hide]) => {
-        menuAction(args, options);
-        reset();
-        hide();
-    });
-    const ref = (0, react_1.useRef)(null);
-    const onClick = (0, react_1.useCallback)(() => {
-        if (ref.current?.classList.contains('focus-visible')) {
-            ref.current.classList.remove('focus-visible');
-            hide();
-            return;
-        }
-        if (ref.current) {
-            ref.current.focus();
-            show();
-            ref.current.classList.add('focus-visible');
-        }
-    }, [hide, show]);
-    const handleSelection = (0, react_1.useCallback)((args) => {
-        menuAction(args, options);
-        reset();
-        hide();
-    }, [hide, reset, options]);
-    (0, react_1.useEffect)(() => {
-        if (visible === 'hidden') {
-            ref.current?.classList.remove('focus-visible');
-        }
-    }, [visible]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.IconButton, { "data-testid": 'menu', ref: ref, small: small, tiny: tiny, mini: mini, onClick: onClick, onBlur: hide, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, icon: icon, ...props }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { width: 'auto', visible: visible, anchor: ref, placement: placement, children: (0, jsx_runtime_1.jsx)(Options_1.Options, { maxHeight: maxHeight, renderItem: renderItem, width: optionWidth, onSelect: handleSelection, options: mappedOptions, cursor: cursor, ref: ref }) })] }));
-};
-exports["default"] = Menu;
-
-
-/***/ }),
-
-/***/ "./src/components/Menu/V2/Menu.tsx":
-/*!*****************************************!*\
-  !*** ./src/components/Menu/V2/Menu.tsx ***!
-  \*****************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3752,10 +3692,10 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
-const Button_1 = __webpack_require__(/*! ../../Button */ "./src/components/Button/index.ts");
-const MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/V2/MenuDropdown.tsx"));
-const MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/V2/MenuPopover.tsx"));
-const helpers_1 = __webpack_require__(/*! ./helpers/helpers */ "./src/components/Menu/V2/helpers/helpers.ts");
+const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
+const MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/MenuDropdown.tsx"));
+const MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/MenuPopover.tsx"));
+const helpers_1 = __webpack_require__(/*! ./helpers/helpers */ "./src/components/Menu/helpers/helpers.ts");
 const Menu = ({ icon = 'kebab', placement = 'bottom-start', title, is: MenuButton = Button_1.IconButton, className, pressed, maxWidth = 'x250', button, detached, ...props }) => {
     const state = (0, react_stately_1.useMenuTriggerState)(props);
     const ref = (0, react_1.useRef)(null);
@@ -3778,16 +3718,15 @@ const Menu = ({ icon = 'kebab', placement = 'bottom-start', title, is: MenuButto
                 pressed: pressed || state.isOpen,
             })) : ((0, jsx_runtime_1.jsx)(MenuButton, { ...buttonProps, ref: ref, icon: icon, className: className, title: title, pressed: pressed || state.isOpen, small: defaultSmall, ...sizes })), detached ? (0, react_dom_1.createPortal)(popover, document.body) : popover] }));
 };
-Menu.displayName = 'MenuV2';
 exports["default"] = Menu;
 
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuDropdown.tsx":
-/*!*************************************************!*\
-  !*** ./src/components/Menu/V2/MenuDropdown.tsx ***!
-  \*************************************************/
+/***/ "./src/components/Menu/MenuDropdown.tsx":
+/*!**********************************************!*\
+  !*** ./src/components/Menu/MenuDropdown.tsx ***!
+  \**********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3799,8 +3738,8 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
-const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/V2/MenuItem.tsx"));
-const MenuSection_1 = __importDefault(__webpack_require__(/*! ./MenuSection */ "./src/components/Menu/V2/MenuSection.tsx"));
+const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/MenuItem.tsx"));
+const MenuSection_1 = __importDefault(__webpack_require__(/*! ./MenuSection */ "./src/components/Menu/MenuSection.tsx"));
 function MenuDropDown(props) {
     const state = (0, react_stately_1.useTreeState)(props);
     const ref = (0, react_1.useRef)(null);
@@ -3812,10 +3751,10 @@ exports["default"] = MenuDropDown;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuItem.tsx":
-/*!*********************************************!*\
-  !*** ./src/components/Menu/V2/MenuItem.tsx ***!
-  \*********************************************/
+/***/ "./src/components/Menu/MenuItem.tsx":
+/*!******************************************!*\
+  !*** ./src/components/Menu/MenuItem.tsx ***!
+  \******************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3826,8 +3765,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
-const _1 = __webpack_require__(/*! . */ "./src/components/Menu/V2/index.ts");
-const MenuOption_1 = __importDefault(__webpack_require__(/*! ./MenuOption */ "./src/components/Menu/V2/MenuOption.tsx"));
+const _1 = __webpack_require__(/*! . */ "./src/components/Menu/index.ts");
+const MenuOption_1 = __importDefault(__webpack_require__(/*! ./MenuOption */ "./src/components/Menu/MenuOption.tsx"));
 function MenuItem({ item, state }) {
     const ref = (0, react_1.useRef)(null);
     const { menuItemProps: { onPointerUp, ...menuItemProps }, isFocused, isDisabled, } = (0, react_aria_1.useMenuItem)({ key: item.key }, state, ref);
@@ -3838,17 +3777,17 @@ exports["default"] = MenuItem;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuOption.tsx":
-/*!***********************************************!*\
-  !*** ./src/components/Menu/V2/MenuOption.tsx ***!
-  \***********************************************/
+/***/ "./src/components/Menu/MenuOption.tsx":
+/*!********************************************!*\
+  !*** ./src/components/Menu/MenuOption.tsx ***!
+  \********************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_2 = __webpack_require__(/*! react */ "react");
-const prevent_1 = __webpack_require__(/*! ../../../helpers/prevent */ "./src/helpers/prevent.ts");
+const prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
 const MenuOption = (0, react_2.forwardRef)(function MenuOption({ is: Tag = 'li', id, children, focus, selected, className, title, disabled, variant, onClick, ...props }, ref) {
     return ((0, react_1.createElement)(Tag, { ...props, key: id, id: id, ref: ref, "aria-selected": !!selected, "aria-disabled": !!disabled, title: title, onClick: (e) => {
             if (disabled) {
@@ -3872,19 +3811,19 @@ exports["default"] = (0, react_2.memo)(MenuOption);
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuPopover.tsx":
-/*!************************************************!*\
-  !*** ./src/components/Menu/V2/MenuPopover.tsx ***!
-  \************************************************/
+/***/ "./src/components/Menu/MenuPopover.tsx":
+/*!*********************************************!*\
+  !*** ./src/components/Menu/MenuPopover.tsx ***!
+  \*********************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-const DropdownDesktop_1 = __webpack_require__(/*! ../../Dropdown/DropdownDesktop */ "./src/components/Dropdown/DropdownDesktop.tsx");
-const DropdownMobile_1 = __webpack_require__(/*! ../../Dropdown/DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
-const Popover_1 = __webpack_require__(/*! ../../Popover */ "./src/components/Popover/index.ts");
+const DropdownDesktop_1 = __webpack_require__(/*! ../Dropdown/DropdownDesktop */ "./src/components/Dropdown/DropdownDesktop.tsx");
+const DropdownMobile_1 = __webpack_require__(/*! ../Dropdown/DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
+const Popover_1 = __webpack_require__(/*! ../Popover */ "./src/components/Popover/index.ts");
 function MenuPopover({ children, state, offset = 4, maxWidth, ...props }) {
     const isMobile = !(0, fuselage_hooks_1.useBreakpoints)().includes('sm');
     if (isMobile) {
@@ -3897,10 +3836,10 @@ exports["default"] = MenuPopover;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuSection.tsx":
-/*!************************************************!*\
-  !*** ./src/components/Menu/V2/MenuSection.tsx ***!
-  \************************************************/
+/***/ "./src/components/Menu/MenuSection.tsx":
+/*!*********************************************!*\
+  !*** ./src/components/Menu/MenuSection.tsx ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3910,10 +3849,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
-const Box_1 = __webpack_require__(/*! ../../Box */ "./src/components/Box/index.ts");
-const Divider_1 = __webpack_require__(/*! ../../Divider */ "./src/components/Divider/index.ts");
-const Option_1 = __webpack_require__(/*! ../../Option */ "./src/components/Option/index.ts");
-const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/V2/MenuItem.tsx"));
+const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
+const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
+const Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/index.ts");
+const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/MenuItem.tsx"));
 function MenuSection({ section, state, }) {
     const { itemProps, headingProps, groupProps } = (0, react_aria_1.useMenuSection)({
         'heading': section.rendered,
@@ -3929,10 +3868,10 @@ exports["default"] = MenuSection;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/helpers/helpers.ts":
-/*!***************************************************!*\
-  !*** ./src/components/Menu/V2/helpers/helpers.ts ***!
-  \***************************************************/
+/***/ "./src/components/Menu/helpers/helpers.ts":
+/*!************************************************!*\
+  !*** ./src/components/Menu/helpers/helpers.ts ***!
+  \************************************************/
 /***/ ((__unused_webpack_module, exports) => {
 
 
@@ -3973,10 +3912,10 @@ exports.getPlacement = getPlacement;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/index.ts":
-/*!*****************************************!*\
-  !*** ./src/components/Menu/V2/index.ts ***!
-  \*****************************************/
+/***/ "./src/components/Menu/index.ts":
+/*!**************************************!*\
+  !*** ./src/components/Menu/index.ts ***!
+  \**************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3984,14 +3923,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MenuItemDescription = exports.MenuItemTitle = exports.MenuItemSkeleton = exports.MenuItemInput = exports.MenuItemIcon = exports.MenuItemContent = exports.MenuItemColumn = exports.MenuItemAvatar = exports.MenuSection = exports.MenuItem = exports.MenuV2 = void 0;
-var Menu_1 = __webpack_require__(/*! ./Menu */ "./src/components/Menu/V2/Menu.tsx");
-Object.defineProperty(exports, "MenuV2", ({ enumerable: true, get: function () { return __importDefault(Menu_1).default; } }));
-var MenuItem_1 = __webpack_require__(/*! ./stately/MenuItem */ "./src/components/Menu/V2/stately/MenuItem.tsx");
+exports.MenuItemDescription = exports.MenuItemTitle = exports.MenuItemSkeleton = exports.MenuItemInput = exports.MenuItemIcon = exports.MenuItemContent = exports.MenuItemColumn = exports.MenuItemAvatar = exports.MenuSection = exports.MenuItem = exports.Menu = void 0;
+var Menu_1 = __webpack_require__(/*! ./Menu */ "./src/components/Menu/Menu.tsx");
+Object.defineProperty(exports, "Menu", ({ enumerable: true, get: function () { return __importDefault(Menu_1).default; } }));
+var MenuItem_1 = __webpack_require__(/*! ./stately/MenuItem */ "./src/components/Menu/stately/MenuItem.tsx");
 Object.defineProperty(exports, "MenuItem", ({ enumerable: true, get: function () { return __importDefault(MenuItem_1).default; } }));
-var MenuSection_1 = __webpack_require__(/*! ./stately/MenuSection */ "./src/components/Menu/V2/stately/MenuSection.tsx");
+var MenuSection_1 = __webpack_require__(/*! ./stately/MenuSection */ "./src/components/Menu/stately/MenuSection.tsx");
 Object.defineProperty(exports, "MenuSection", ({ enumerable: true, get: function () { return __importDefault(MenuSection_1).default; } }));
-var Option_1 = __webpack_require__(/*! ../../Option */ "./src/components/Option/index.ts");
+var Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/index.ts");
 Object.defineProperty(exports, "MenuItemAvatar", ({ enumerable: true, get: function () { return Option_1.OptionAvatar; } }));
 Object.defineProperty(exports, "MenuItemColumn", ({ enumerable: true, get: function () { return Option_1.OptionColumn; } }));
 Object.defineProperty(exports, "MenuItemContent", ({ enumerable: true, get: function () { return Option_1.OptionContent; } }));
@@ -4004,10 +3943,10 @@ Object.defineProperty(exports, "MenuItemDescription", ({ enumerable: true, get:
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/stately/MenuItem.tsx":
-/*!*****************************************************!*\
-  !*** ./src/components/Menu/V2/stately/MenuItem.tsx ***!
-  \*****************************************************/
+/***/ "./src/components/Menu/stately/MenuItem.tsx":
+/*!**************************************************!*\
+  !*** ./src/components/Menu/stately/MenuItem.tsx ***!
+  \**************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
@@ -4072,10 +4011,10 @@ exports["default"] = MenuItem;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/stately/MenuSection.tsx":
-/*!********************************************************!*\
-  !*** ./src/components/Menu/V2/stately/MenuSection.tsx ***!
-  \********************************************************/
+/***/ "./src/components/Menu/stately/MenuSection.tsx":
+/*!*****************************************************!*\
+  !*** ./src/components/Menu/stately/MenuSection.tsx ***!
+  \*****************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
@@ -4121,39 +4060,6 @@ MenuSection.getCollectionNode = function* getCollectionNode(props) {
 exports["default"] = MenuSection;
 
 
-/***/ }),
-
-/***/ "./src/components/Menu/index.ts":
-/*!**************************************!*\
-  !*** ./src/components/Menu/index.ts ***!
-  \**************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Menu = void 0;
-var Menu_1 = __webpack_require__(/*! ./Menu */ "./src/components/Menu/Menu.tsx");
-Object.defineProperty(exports, "Menu", ({ enumerable: true, get: function () { return __importDefault(Menu_1).default; } }));
-__exportStar(__webpack_require__(/*! ./V2 */ "./src/components/Menu/V2/index.ts"), exports);
-
-
 /***/ }),
 
 /***/ "./src/components/Message/Message.tsx":
@@ -5992,7 +5898,7 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
         }
         return null;
     };
-    const handleClick = (0, fuselage_hooks_1.useEffectEvent)(() => {
+    const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
             return hide();
         }
@@ -6776,14 +6682,14 @@ const useCursor = (initial, options, onChange) => {
     const [cursor, setCursor] = (0, react_1.useState)(initial);
     const visibilityHandler = (0, useVisible_1.useVisible)();
     const [visibility, hide, show] = visibilityHandler;
-    const reset = (0, fuselage_hooks_1.useEffectEvent)(() => setCursor(0));
-    const handleKeyUp = (0, fuselage_hooks_1.useEffectEvent)((e) => {
+    const reset = (0, fuselage_hooks_1.useStableCallback)(() => setCursor(0));
+    const handleKeyUp = (0, fuselage_hooks_1.useStableCallback)((e) => {
         const { keyCode } = e;
         if (AnimatedVisibility_1.AnimatedVisibility.HIDDEN === visibility && keyCode === keyCodes.TAB) {
             return show();
         }
     });
-    const handleKeyDown = (0, fuselage_hooks_1.useEffectEvent)((e) => {
+    const handleKeyDown = (0, fuselage_hooks_1.useStableCallback)((e) => {
         const isSelectableOption = ([, , , type]) => !type || type === 'option';
         const getLastIndex = () => findLastIndex(options, isSelectableOption);
         const { keyCode, key } = e;
@@ -6866,8 +6772,8 @@ const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */
 const AnimatedVisibility_1 = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
 const useVisible = (initialVisibility = AnimatedVisibility_1.AnimatedVisibility.HIDDEN) => {
     const [visible, setVisible] = (0, fuselage_hooks_1.useDebouncedState)(initialVisibility, 10);
-    const hide = (0, fuselage_hooks_1.useEffectEvent)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
-    const show = (0, fuselage_hooks_1.useEffectEvent)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.VISIBLE));
+    const hide = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
+    const show = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.VISIBLE));
     return [visible, hide, show];
 };
 exports.useVisible = useVisible;
@@ -6912,8 +6818,8 @@ exports.OptionsPaginated = (0, react_2.forwardRef)(({ withTitle, multiple, rende
 });
 const useVisible = (initialVisibility = AnimatedVisibility_1.AnimatedVisibility.HIDDEN) => {
     const [visible, setVisible] = (0, fuselage_hooks_1.useDebouncedState)(initialVisibility, 10);
-    const hide = (0, fuselage_hooks_1.useEffectEvent)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
-    const show = (0, fuselage_hooks_1.useEffectEvent)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.VISIBLE));
+    const hide = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
+    const show = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.VISIBLE));
     return [visible, hide, show];
 };
 exports.useVisible = useVisible;
@@ -6982,7 +6888,7 @@ const PaginatedMultiSelect = ({ withTitle, value, filter, options = [], error, d
     const [visible, hide, show] = (0, useVisible_1.useVisible)();
     const ref = (0, react_1.useRef)(null);
     const { ref: containerRef, borderBoxSize } = (0, fuselage_hooks_1.useResizeObserver)();
-    const handleClick = (0, fuselage_hooks_1.useEffectEvent)(() => {
+    const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
             return hide();
         }
@@ -7083,7 +6989,7 @@ const PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, erro
     const currentValue = value !== undefined ? value : internalValue;
     const option = options.find((option) => option?.value === currentValue);
     const [visible, hide, show] = (0, useVisible_1.useVisible)();
-    const internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(([value]) => {
+    const internalChangedByClick = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
         onChange(value);
         hide();
@@ -7095,7 +7001,7 @@ const PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, erro
     const visibleText = isUnfilteredOrHidden
         ? valueLabel || placeholder
         : undefined;
-    const handleClick = (0, fuselage_hooks_1.useEffectEvent)(() => {
+    const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
             return hide();
         }
@@ -7127,7 +7033,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const PaginatedSelect_1 = __webpack_require__(/*! ./PaginatedSelect */ "./src/components/PaginatedSelect/PaginatedSelect.tsx");
 const PaginatedSelectFiltered = ({ filter, setFilter, options, placeholder, ...props }) => {
-    const anchor = (0, react_1.useMemo)(() => (0, react_1.forwardRef)(({ filter, onChange: _onChange, ...props }, ref) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onChange: (0, fuselage_hooks_1.useEffectEvent)((e) => {
+    const anchor = (0, react_1.useMemo)(() => (0, react_1.forwardRef)(({ filter, onChange: _onChange, ...props }, ref) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onChange: (0, fuselage_hooks_1.useStableCallback)((e) => {
             setFilter(e.currentTarget.value);
         }), ...props, "rcx-input-box--undecorated": true }))), [placeholder, setFilter]);
     return ((0, jsx_runtime_1.jsx)(PaginatedSelect_1.PaginatedSelect, { placeholder: undefined, filter: filter, options: options, ...props, anchor: anchor }));
@@ -8042,7 +7948,7 @@ const pollTouchingEdges = (element, touchingEdgesRef, onScrollContent) => {
 const Scrollable = ({ children, horizontal, vertical, smooth, onScrollContent, }) => {
     const scrollTimeoutRef = (0, react_1.useRef)();
     const touchingEdgesRef = (0, react_1.useRef)({});
-    const handleScroll = (0, fuselage_hooks_1.useEffectEvent)((event) => {
+    const handleScroll = (0, fuselage_hooks_1.useStableCallback)((event) => {
         const element = event.currentTarget;
         if (!scrollTimeoutRef.current) {
             pollTouchingEdges(element, touchingEdgesRef, onScrollContent);
@@ -8374,7 +8280,7 @@ const SelectFocus_1 = __importDefault(__webpack_require__(/*! ./SelectFocus */ "
 const Wrapper = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-select__wrapper": true, ref: ref, ...props })));
 const useDidUpdate = (func, deps) => {
     const didMount = (0, react_1.useRef)(false);
-    const fn = (0, fuselage_hooks_1.useEffectEvent)(func);
+    const fn = (0, fuselage_hooks_1.useStableCallback)(func);
     (0, react_1.useEffect)(() => {
         if (didMount.current) {
             fn();
@@ -8384,7 +8290,7 @@ const useDidUpdate = (func, deps) => {
 };
 const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filter, error, disabled, options = [], anchor: Anchor = SelectFocus_1.default, onChange = () => { }, getValue = ([value] = ['', '']) => value, getLabel = ([, label] = ['', '']) => label, placeholder = '', renderItem, renderSelected: RenderSelected, renderOptions: _Options = Options_1.Options, addonIcon, customEmpty, ...props }, ref) {
     const [internalValue, setInternalValue] = (0, react_1.useState)(value || '');
-    const internalChangedByKeyboard = (0, fuselage_hooks_1.useEffectEvent)(([value]) => {
+    const internalChangedByKeyboard = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
         onChange(value);
     });
@@ -8404,7 +8310,7 @@ const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filt
     const innerRef = (0, react_1.useRef)(null);
     const anchorRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     const removeFocusClass = () => innerRef.current?.classList.remove('focus-visible');
-    const internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(([value]) => {
+    const internalChangedByClick = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
         onChange(value);
         removeFocusClass();
@@ -8425,7 +8331,7 @@ const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filt
     const valueLabel = getLabel(option);
     const visibleText = (filter === undefined || visible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN) &&
         (valueLabel || placeholder || typeof placeholder === 'string');
-    const handleClick = (0, fuselage_hooks_1.useEffectEvent)(() => {
+    const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (innerRef.current?.classList.contains('focus-visible')) {
             removeFocusClass();
             return hide();