@rocket.chat/fuselage 0.41.0 → 0.43.0

package/dist/fuselage.development.js

@@ -1213,7 +1213,7 @@ function AutoComplete(_a) {
     var ref = (0, react_1.useRef)();
     var _d = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _d.ref, borderBoxSize = _d.borderBoxSize;
     var _e = __read((0, react_1.useState)(function () { return getSelected(value, options) || []; }), 2), selected = _e[0], setSelected = _e[1];
-    var handleSelect = (0, fuselage_hooks_1.useMutableCallback)(function (_a) {
+    var handleSelect = (0, fuselage_hooks_1.useEffectEvent)(function (_a) {
         var _b = __read(_a, 1), currentValue = _b[0];
         if (selected === null || selected === void 0 ? void 0 : selected.some(function (item) { return item.value === currentValue; })) {
             hide();
@@ -1230,7 +1230,7 @@ function AutoComplete(_a) {
         setFilter('');
         hide();
     });
-    var handleRemove = (0, fuselage_hooks_1.useMutableCallback)(function (event) {
+    var handleRemove = (0, fuselage_hooks_1.useEffectEvent)(function (event) {
         event.stopPropagation();
         event.preventDefault();
         var filtered = selected.filter(function (item) { return item.value !== event.currentTarget.value; });
@@ -1244,17 +1244,15 @@ function AutoComplete(_a) {
         return [value, label];
     }); }, [options]);
     var _f = __read((0, Options_1.useCursor)(value, memoizedOptions, handleSelect), 5), cursor = _f[0], handleKeyDown = _f[1], reset = _f[3], _g = __read(_f[4], 3), optionsAreVisible = _g[0], hide = _g[1], show = _g[2];
-    var handleOnBlur = (0, fuselage_hooks_1.useMutableCallback)(function (event) {
+    var handleOnBlur = (0, fuselage_hooks_1.useEffectEvent)(function (event) {
         hide();
         onBlurAction(event);
     });
     (0, react_1.useEffect)(reset, [filter]);
-    return (react_1.default.createElement(Box_1.default, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useMutableCallback)(function () { return ref.current.focus(); }), flexGrow: 1, className: (0, react_1.useMemo)(function () { return [error && 'invalid', disabled && 'disabled']; }, [error, disabled]) },
+    return (react_1.default.createElement(Box_1.default, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useEffectEvent)(function () { return ref.current.focus(); }), flexGrow: 1, className: (0, react_1.useMemo)(function () { return [error && 'invalid', disabled && 'disabled']; }, [error, disabled]) },
         react_1.default.createElement(Box_1.default, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group' },
             react_1.default.createElement(Margins_1.default, { all: 'x4' },
-                react_1.default.createElement(InputBox_1.InputBox.Input, __assign({ ref: ref, onChange: (0, fuselage_hooks_1.useMutableCallback)(function (e) {
-                        return setFilter(e.currentTarget.value);
-                    }), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible !== AnimatedVisibility_1.default.HIDDEN || !value
+                react_1.default.createElement(InputBox_1.InputBox.Input, __assign({ ref: ref, onChange: (0, fuselage_hooks_1.useEffectEvent)(function (e) { return setFilter(e.currentTarget.value); }), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible !== AnimatedVisibility_1.default.HIDDEN || !value
                         ? placeholder
                         : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter }, props)),
                 (selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
@@ -2218,6 +2216,83 @@ var withBoxStyling = function (Component) {
 exports.withBoxStyling = withBoxStyling;
 
 
+/***/ }),
+
+/***/ "./src/components/Bubble/Bubble.tsx":
+/*!******************************************!*\
+  !*** ./src/components/Bubble/Bubble.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.Bubble = void 0;
+var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+var Bubble = function (_a) {
+    var children = _a.children, onClick = _a.onClick, icon = _a.icon, onDismiss = _a.onDismiss, contentProps = _a.contentProps, dismissProps = _a.dismissProps, props = __rest(_a, ["children", "onClick", "icon", "onDismiss", "contentProps", "dismissProps"]);
+    return (react_1.default.createElement("div", __assign({ className: "rcx-bubble rcx-box rcx-box--full ".concat(onDismiss ? 'rcx-bubble__group' : '') }, props),
+        react_1.default.createElement("button", __assign({ className: 'rcx-bubble__content', onClick: onClick }, contentProps),
+            icon && react_1.default.createElement(Icon_1.Icon, { name: icon, size: 'x16', mie: 8 }),
+            react_1.default.createElement("span", null, children)),
+        onDismiss && (react_1.default.createElement("button", __assign({ "aria-label": "Dismiss ".concat(children), className: 'rcx-bubble__dismiss', onClick: onDismiss }, dismissProps),
+            react_1.default.createElement(Icon_1.Icon, { name: 'cross-small', size: 'x16' })))));
+};
+exports.Bubble = Bubble;
+
+
+/***/ }),
+
+/***/ "./src/components/Bubble/index.ts":
+/*!****************************************!*\
+  !*** ./src/components/Bubble/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__(/*! ./Bubble */ "./src/components/Bubble/Bubble.tsx"), exports);
+
+
 /***/ }),
 
 /***/ "./src/components/Button/ActionButton.tsx":
@@ -6494,13 +6569,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 +6584,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;
 
@@ -10248,7 +10325,7 @@ exports.MultiSelect = (0, react_1.forwardRef)(function (_a, ref) {
         }
         return null;
     };
-    var handleClick = (0, fuselage_hooks_1.useMutableCallback)(function () {
+    var handleClick = (0, fuselage_hooks_1.useEffectEvent)(function () {
         var _a;
         if (visible === AnimatedVisibility_1.default.VISIBLE) {
             return hide();
@@ -11477,14 +11554,14 @@ var useCursor = function (initial, options, onChange) {
     var _a = __read((0, react_1.useState)(initial), 2), cursor = _a[0], setCursor = _a[1];
     var visibilityHandler = (0, useVisible_1.useVisible)();
     var _b = __read(visibilityHandler, 3), visibility = _b[0], hide = _b[1], show = _b[2];
-    var reset = (0, fuselage_hooks_1.useMutableCallback)(function () { return setCursor(0); });
-    var handleKeyUp = (0, fuselage_hooks_1.useMutableCallback)(function (e) {
+    var reset = (0, fuselage_hooks_1.useEffectEvent)(function () { return setCursor(0); });
+    var handleKeyUp = (0, fuselage_hooks_1.useEffectEvent)(function (e) {
         var keyCode = e.keyCode;
         if (AnimatedVisibility_1.default.HIDDEN === visibility && keyCode === keyCodes.TAB) {
             return show();
         }
     });
-    var handleKeyDown = (0, fuselage_hooks_1.useMutableCallback)(function (e) {
+    var handleKeyDown = (0, fuselage_hooks_1.useEffectEvent)(function (e) {
         var isSelectableOption = function (_a) {
             var _b = __read(_a, 4), type = _b[3];
             return !type || type === 'option';
@@ -11593,8 +11670,8 @@ var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVi
 var useVisible = function (initialVisibility) {
     if (initialVisibility === void 0) { initialVisibility = AnimatedVisibility_1.default.HIDDEN; }
     var _a = __read((0, fuselage_hooks_1.useDebouncedState)(initialVisibility, 10), 2), visible = _a[0], setVisible = _a[1];
-    var hide = (0, fuselage_hooks_1.useMutableCallback)(function () { return setVisible(AnimatedVisibility_1.default.HIDDEN); });
-    var show = (0, fuselage_hooks_1.useMutableCallback)(function () { return setVisible(AnimatedVisibility_1.default.VISIBLE); });
+    var hide = (0, fuselage_hooks_1.useEffectEvent)(function () { return setVisible(AnimatedVisibility_1.default.HIDDEN); });
+    var show = (0, fuselage_hooks_1.useEffectEvent)(function () { return setVisible(AnimatedVisibility_1.default.VISIBLE); });
     return [visible, hide, show];
 };
 exports.useVisible = useVisible;
@@ -11710,8 +11787,8 @@ exports.OptionsPaginated = (0, react_1.forwardRef)(function (_a, ref) {
 var useVisible = function (initialVisibility) {
     if (initialVisibility === void 0) { initialVisibility = AnimatedVisibility_1.default.HIDDEN; }
     var _a = __read((0, fuselage_hooks_1.useDebouncedState)(initialVisibility, 10), 2), visible = _a[0], setVisible = _a[1];
-    var hide = (0, fuselage_hooks_1.useMutableCallback)(function () { return setVisible(AnimatedVisibility_1.default.HIDDEN); });
-    var show = (0, fuselage_hooks_1.useMutableCallback)(function () { return setVisible(AnimatedVisibility_1.default.VISIBLE); });
+    var hide = (0, fuselage_hooks_1.useEffectEvent)(function () { return setVisible(AnimatedVisibility_1.default.HIDDEN); });
+    var show = (0, fuselage_hooks_1.useEffectEvent)(function () { return setVisible(AnimatedVisibility_1.default.VISIBLE); });
     return [visible, hide, show];
 };
 exports.useVisible = useVisible;
@@ -11852,7 +11929,7 @@ var PaginatedMultiSelect = function (_a) {
     var _h = __read((0, useVisible_1.useVisible)(), 3), visible = _h[0], hide = _h[1], show = _h[2];
     var ref = (0, react_1.useRef)(null);
     var _j = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _j.ref, borderBoxSize = _j.borderBoxSize;
-    var handleClick = (0, fuselage_hooks_1.useMutableCallback)(function () {
+    var handleClick = (0, fuselage_hooks_1.useEffectEvent)(function () {
         if (visible === AnimatedVisibility_1.default.VISIBLE) {
             return hide();
         }
@@ -12084,7 +12161,7 @@ var PaginatedSelect = function (_a) {
     var currentValue = value !== undefined ? value : internalValue;
     var option = options.find(function (option) { return (option === null || option === void 0 ? void 0 : option.value) === currentValue; });
     var _h = __read((0, useVisible_1.useVisible)(), 3), visible = _h[0], hide = _h[1], show = _h[2];
-    var internalChangedByClick = (0, fuselage_hooks_1.useMutableCallback)(function (_a) {
+    var internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
         onChange(value);
@@ -12095,7 +12172,7 @@ var PaginatedSelect = function (_a) {
     var valueLabel = option === null || option === void 0 ? void 0 : option.label;
     var visibleText = (filter === undefined || visible === AnimatedVisibility_1.default.HIDDEN) &&
         (valueLabel || placeholder || typeof placeholder === 'string');
-    var handleClick = (0, fuselage_hooks_1.useMutableCallback)(function () {
+    var handleClick = (0, fuselage_hooks_1.useEffectEvent)(function () {
         if (visible === AnimatedVisibility_1.default.VISIBLE) {
             return hide();
         }
@@ -12184,7 +12261,7 @@ var PaginatedSelectFiltered = function (_a) {
     var anchor = (0, react_1.useMemo)(function () {
         return (0, react_1.forwardRef)(function (_a, ref) {
             var filter = _a.filter, _onChange = _a.onChange, props = __rest(_a, ["filter", "onChange"]);
-            return (react_1.default.createElement(InputBox_1.InputBox.Input, __assign({ mi: 4, flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onChange: (0, fuselage_hooks_1.useMutableCallback)(function (e) {
+            return (react_1.default.createElement(InputBox_1.InputBox.Input, __assign({ mi: 4, flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onChange: (0, fuselage_hooks_1.useEffectEvent)(function (e) {
                     setFilter(e.currentTarget.value);
                 }) }, props, { "rcx-input-box--undecorated": true })));
         });
@@ -12945,7 +13022,7 @@ var Scrollable = function (_a) {
     var children = _a.children, horizontal = _a.horizontal, vertical = _a.vertical, smooth = _a.smooth, onScrollContent = _a.onScrollContent;
     var scrollTimeoutRef = (0, react_1.useRef)();
     var touchingEdgesRef = (0, react_1.useRef)({});
-    var handleScroll = (0, fuselage_hooks_1.useMutableCallback)(function (event) {
+    var handleScroll = (0, fuselage_hooks_1.useEffectEvent)(function (event) {
         var element = event.currentTarget;
         if (!scrollTimeoutRef.current) {
             pollTouchingEdges(element, touchingEdgesRef, onScrollContent);
@@ -13747,7 +13824,7 @@ var SelectFocus_1 = __importDefault(__webpack_require__(/*! ./SelectFocus */ "./
 var Wrapper = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Box_1.default, __assign({ is: 'div', "rcx-select__wrapper": true, ref: ref }, props))); });
 var useDidUpdate = function (func, deps) {
     var didMount = (0, react_1.useRef)(false);
-    var fn = (0, fuselage_hooks_1.useMutableCallback)(func);
+    var fn = (0, fuselage_hooks_1.useEffectEvent)(func);
     (0, react_1.useEffect)(function () {
         if (didMount.current) {
             fn();
@@ -13764,7 +13841,7 @@ exports.SelectLegacy = (0, react_1.forwardRef)(function (_a, ref) {
         return label;
     } : _f, _g = _a.placeholder, placeholder = _g === void 0 ? '' : _g, renderItem = _a.renderItem, RenderSelected = _a.renderSelected, _h = _a.renderOptions, _Options = _h === void 0 ? Options_1.Options : _h, addonIcon = _a.addonIcon, customEmpty = _a.customEmpty, props = __rest(_a, ["value", "filter", "error", "disabled", "options", "anchor", "onChange", "getValue", "getLabel", "placeholder", "renderItem", "renderSelected", "renderOptions", "addonIcon", "customEmpty"]);
     var _j = __read((0, react_1.useState)(value || ''), 2), internalValue = _j[0], setInternalValue = _j[1];
-    var internalChangedByKeyboard = (0, fuselage_hooks_1.useMutableCallback)(function (_a) {
+    var internalChangedByKeyboard = (0, fuselage_hooks_1.useEffectEvent)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
         onChange(value);
@@ -13789,7 +13866,7 @@ exports.SelectLegacy = (0, react_1.forwardRef)(function (_a, ref) {
     var innerRef = (0, react_1.useRef)(null);
     var anchorRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     var removeFocusClass = function () { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove('focus-visible'); };
-    var internalChangedByClick = (0, fuselage_hooks_1.useMutableCallback)(function (_a) {
+    var internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
         onChange(value);
@@ -13811,7 +13888,7 @@ exports.SelectLegacy = (0, react_1.forwardRef)(function (_a, ref) {
     var valueLabel = getLabel(option);
     var visibleText = (filter === undefined || visible === AnimatedVisibility_1.default.HIDDEN) &&
         (valueLabel || placeholder || typeof placeholder === 'string');
-    var handleClick = (0, fuselage_hooks_1.useMutableCallback)(function () {
+    var handleClick = (0, fuselage_hooks_1.useEffectEvent)(function () {
         var _a, _b, _c;
         if ((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains('focus-visible')) {
             removeFocusClass();
@@ -17212,6 +17289,7 @@ var Button_1 = __webpack_require__(/*! ./Button */ "./src/components/Button/inde
 Object.defineProperty(exports, "Button", ({ enumerable: true, get: function () { return __importDefault(Button_1).default; } }));
 Object.defineProperty(exports, "ActionButton", ({ enumerable: true, get: function () { return Button_1.ActionButton; } }));
 Object.defineProperty(exports, "IconButton", ({ enumerable: true, get: function () { return Button_1.IconButton; } }));
+__exportStar(__webpack_require__(/*! ./Bubble */ "./src/components/Bubble/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./ButtonGroup */ "./src/components/ButtonGroup/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Callout */ "./src/components/Callout/index.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./Card */ "./src/components/Card/index.ts"), exports);