@rocket.chat/fuselage 0.40.0 → 0.42.0

package/dist/fuselage.development.js

@@ -2743,10 +2743,10 @@ var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@
 var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box/Box */ "./src/components/Box/Box.tsx"));
 var Card = function (_a) {
-    var horizontal = _a.horizontal, hero = _a.hero, props = __rest(_a, ["horizontal", "hero"]);
+    var horizontal = _a.horizontal, hero = _a.hero, clickable = _a.clickable, props = __rest(_a, ["horizontal", "hero", "clickable"]);
     var breakpoints = (0, fuselage_hooks_1.useBreakpoints)();
     var isMobile = !breakpoints.includes('sm');
-    return (react_1.default.createElement(Box_1.default, __assign({ "rcx-card": true, "rcx-card__horizontal": horizontal, "rcx-card__vertical": !horizontal, "rcx-card__hero": hero, "rcx-card__horizontal--wrap": horizontal && isMobile }, props)));
+    return (react_1.default.createElement(Box_1.default, __assign({ "rcx-card": true, "rcx-card__horizontal": horizontal, "rcx-card__vertical": !horizontal, "rcx-card__hero": hero, "rcx-card__horizontal--wrap": horizontal && isMobile, "rcx-card__clickable": clickable }, props)));
 };
 exports["default"] = Card;
 
@@ -3009,7 +3009,7 @@ var CardTitle = function (_a) {
     var children = _a.children, info = _a.info, _b = _a.variant, variant = _b === void 0 ? 'h4' : _b, props = __rest(_a, ["children", "info", "variant"]);
     return (react_1.default.createElement(Box_1.default, __assign({ fontScale: variant, is: variant, "rcx-card__title": true }, props),
         children,
-        info && react_1.default.createElement(LabelInfo_1.LabelInfo, { title: info, mis: 2 })));
+        info && react_1.default.createElement(LabelInfo_1.LabelInfo, { title: info })));
 };
 exports["default"] = CardTitle;
 
@@ -5305,6 +5305,78 @@ exports["default"] = {
 };
 
 
+/***/ }),
+
+/***/ "./src/components/FramedIcon/FramedIcon.tsx":
+/*!**************************************************!*\
+  !*** ./src/components/FramedIcon/FramedIcon.tsx ***!
+  \**************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.FramedIcon = void 0;
+var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+var FramedIcon = function (_a) {
+    var info = _a.info, success = _a.success, warning = _a.warning, danger = _a.danger, neutral = _a.neutral, icon = _a.icon, props = __rest(_a, ["info", "success", "warning", "danger", "neutral", "icon"]);
+    return (react_1.default.createElement(Icon_1.Icon, __assign({}, props, { "rcx-framed-icon": true, "rcx-framed-icon--info": info, "rcx-framed-icon--success": success, "rcx-framed-icon--warning": warning, "rcx-framed-icon--danger": danger, "rcx-framed-icon--neutral": neutral || (!info && !success && !warning && !danger), name: icon, size: 20 })));
+};
+exports.FramedIcon = FramedIcon;
+
+
+/***/ }),
+
+/***/ "./src/components/FramedIcon/index.ts":
+/*!********************************************!*\
+  !*** ./src/components/FramedIcon/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);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__exportStar(__webpack_require__(/*! ./FramedIcon */ "./src/components/FramedIcon/FramedIcon.tsx"), exports);
+
+
 /***/ }),
 
 /***/ "./src/components/Grid/Grid.tsx":
@@ -6422,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;
@@ -6436,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;
 
@@ -17159,6 +17233,7 @@ var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/index.t
 Object.defineProperty(exports, "Field", ({ enumerable: true, get: function () { return __importDefault(Field_1).default; } }));
 __exportStar(__webpack_require__(/*! ./Field */ "./src/components/Field/index.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./FieldGroup */ "./src/components/FieldGroup/index.ts"), exports);
+__exportStar(__webpack_require__(/*! ./FramedIcon */ "./src/components/FramedIcon/index.ts"), exports);
 var Flex_1 = __webpack_require__(/*! ./Flex */ "./src/components/Flex/index.ts");
 Object.defineProperty(exports, "Flex", ({ enumerable: true, get: function () { return __importDefault(Flex_1).default; } }));
 __exportStar(__webpack_require__(/*! ./Grid */ "./src/components/Grid/index.ts"), exports);