@rocket.chat/fuselage 0.41.0 → 0.42.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.42.0
+
+### Minor Changes
+
+- [#1087](https://github.com/RocketChat/fuselage/pull/1087) [`4cd95535b`](https://github.com/RocketChat/fuselage/commit/4cd95535b6c384af6cb56ce98e2045dbe65ef9de) Thanks [@ggazzo](https://github.com/ggazzo)! - feat(fuselage): Adds detached prop to render Menu on the document body
+
 ## 0.41.0
 
 ### Minor Changes

package/dist/components/Menu/V2/Menu.d.ts

@@ -14,6 +14,7 @@ interface MenuButtonProps<T> extends AriaMenuProps<T>, MenuTriggerProps {
     mini?: boolean;
     placement?: UsePositionOptions['placement'];
     title?: string;
+    detached?: boolean;
     /**
      * A component that renders an IconButton
      */
@@ -23,6 +24,6 @@ interface MenuButtonProps<T> extends AriaMenuProps<T>, MenuTriggerProps {
     maxWidth?: string;
     button?: React.ReactElement;
 }
-declare const Menu: <T extends object>({ icon, placement, title, is: MenuButton, className, pressed, maxWidth, button, ...props }: MenuButtonProps<T>) => JSX.Element;
+declare const Menu: <T extends object>({ icon, placement, title, is: MenuButton, className, pressed, maxWidth, button, detached, ...props }: MenuButtonProps<T>) => JSX.Element;
 export default Menu;
 //# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu/V2/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/V2/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,KAAK,GAAG,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,UAAU,eAAe,CAAC,CAAC,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,gBAAgB;IACrE,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC7B;AACD,QAAA,MAAM,IAAI,mJA4DT,CAAC;AACF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/V2/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,KAAK,GAAG,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,UAAU,eAAe,CAAC,CAAC,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,gBAAgB;IACrE,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC7B;AACD,QAAA,MAAM,IAAI,6JA+DT,CAAC;AACF,eAAe,IAAI,CAAC"}

package/dist/fuselage.development.js

@@ -6494,13 +6494,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
+var react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom");
 var react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
 var Button_1 = __webpack_require__(/*! ../../Button */ "./src/components/Button/index.ts");
 var MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/V2/MenuDropdown.tsx"));
 var MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/V2/MenuPopover.tsx"));
 var helpers_1 = __webpack_require__(/*! ./helpers/helpers */ "./src/components/Menu/V2/helpers/helpers.ts");
 var Menu = function (_a) {
-    var _b = _a.icon, icon = _b === void 0 ? 'kebab' : _b, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, title = _a.title, _d = _a.is, MenuButton = _d === void 0 ? Button_1.IconButton : _d, className = _a.className, pressed = _a.pressed, _e = _a.maxWidth, maxWidth = _e === void 0 ? 'x250' : _e, button = _a.button, props = __rest(_a, ["icon", "placement", "title", "is", "className", "pressed", "maxWidth", "button"]);
+    var _b = _a.icon, icon = _b === void 0 ? 'kebab' : _b, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, title = _a.title, _d = _a.is, MenuButton = _d === void 0 ? Button_1.IconButton : _d, className = _a.className, pressed = _a.pressed, _e = _a.maxWidth, maxWidth = _e === void 0 ? 'x250' : _e, button = _a.button, detached = _a.detached, props = __rest(_a, ["icon", "placement", "title", "is", "className", "pressed", "maxWidth", "button", "detached"]);
     var state = (0, react_stately_1.useMenuTriggerState)(props);
     var ref = (0, react_1.useRef)(null);
     var _f = (0, react_aria_1.useMenuTrigger)({}, state, ref), menuTriggerProps = _f.menuTriggerProps, menuProps = _f.menuProps;
@@ -6508,10 +6509,11 @@ var Menu = function (_a) {
     var large = props.large, medium = props.medium, tiny = props.tiny, mini = props.mini;
     var sizes = { large: large, medium: medium, tiny: tiny, mini: mini };
     var defaultSmall = !large && !medium && !tiny && !mini;
+    var popover = state.isOpen && (react_1.default.createElement(MenuPopover_1.default, { state: state, triggerRef: ref, placement: (0, helpers_1.getPlacement)(placement), maxWidth: maxWidth },
+        react_1.default.createElement(MenuDropdown_1.default, __assign({}, props, menuProps))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         button ? ((0, react_1.cloneElement)(button, __assign(__assign({}, buttonProps), { ref: ref, icon: icon, className: className, title: title, pressed: pressed || state.isOpen }))) : (react_1.default.createElement(MenuButton, __assign({}, buttonProps, { ref: ref, icon: icon, className: className, title: title, pressed: pressed || state.isOpen, small: defaultSmall }, sizes))),
-        state.isOpen && (react_1.default.createElement(MenuPopover_1.default, { state: state, triggerRef: ref, placement: (0, helpers_1.getPlacement)(placement), maxWidth: maxWidth },
-            react_1.default.createElement(MenuDropdown_1.default, __assign({}, props, menuProps))))));
+        detached ? (0, react_dom_1.createPortal)(popover, document.body) : popover));
 };
 exports["default"] = Menu;