@rocket.chat/fuselage 0.64.0 → 0.66.0

package/dist/fuselage.development.js

@@ -2581,7 +2581,7 @@ function AutoComplete(_a) {
     (0, react_1.useEffect)(reset, [filter]);
     return ((0, jsx_runtime_1.jsxs)(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]), children: [(0, jsx_runtime_1.jsx)(Box_1.default, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group', children: (0, jsx_runtime_1.jsxs)(Margins_1.default, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(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 &&
+                                : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled }, props)), (selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
                             selected.map(function (itemSelected) {
                                 return RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.default, { value: itemSelected.value, label: itemSelected.label, children: itemSelected.label, onClick: handleRemove, selected: selected }, itemSelected.value));
                             })] }) }), (0, jsx_runtime_1.jsx)(Addon, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.default.VISIBLE
@@ -4665,7 +4665,7 @@ var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@
 var react_1 = __webpack_require__(/*! react */ "react");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.CheckBox = (0, react_1.forwardRef)(function CheckBox(_a, ref) {
-    var indeterminate = _a.indeterminate, onChange = _a.onChange, className = _a.className, props = __rest(_a, ["indeterminate", "onChange", "className"]);
+    var indeterminate = _a.indeterminate, onChange = _a.onChange, className = _a.className, labelChildren = _a.labelChildren, props = __rest(_a, ["indeterminate", "onChange", "className", "labelChildren"]);
     var innerRef = (0, react_1.useRef)(null);
     var mergedRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     (0, react_1.useLayoutEffect)(function () {
@@ -4679,7 +4679,7 @@ exports.CheckBox = (0, react_1.forwardRef)(function CheckBox(_a, ref) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange.call(innerRef.current, event);
     }, [innerRef, indeterminate, onChange]);
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { is: 'label', className: className, "rcx-check-box": true, children: [(0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', type: 'checkbox', "rcx-check-box__input": true, ref: mergedRef, onChange: handleChange }, props)), (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'i', "rcx-check-box__fake": true, "aria-hidden": 'true' })] }));
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { is: 'label', className: className, "rcx-check-box": true, children: [labelChildren, (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', type: 'checkbox', "rcx-check-box__input": true, ref: mergedRef, onChange: handleChange }, props)), (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'i', "rcx-check-box__fake": true, "aria-hidden": 'true' })] }));
 });
 
 
@@ -6366,19 +6366,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FieldLabel = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
+var react_1 = __webpack_require__(/*! react */ "react");
 var WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Label_1 = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
 var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
-var FieldLabel = function (props) {
-    var component = (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: Label_1.Label, "rcx-field__label": true }, props));
+exports.FieldLabel = (0, react_1.forwardRef)(function FieldLabel(props, ref) {
+    var component = (0, jsx_runtime_1.jsx)(Label_1.Label, __assign({ "rcx-field__label": true }, props, { ref: ref }));
     if (true) {
-        return ((0, jsx_runtime_1.jsx)(WithErrorWrapper_1.default, { context: Field_1.FieldContext, parentComponent: 'Field', componentName: exports.FieldLabel.name, children: component }));
+        return ((0, jsx_runtime_1.jsx)(WithErrorWrapper_1.default, { context: Field_1.FieldContext, parentComponent: 'Field', componentName: FieldLabel.name, children: component }));
     }
     // removed by dead control flow
 {}
-};
-exports.FieldLabel = FieldLabel;
+});
 
 
 /***/ }),
@@ -7406,7 +7405,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Label = Label;
+exports.Label = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
@@ -7414,12 +7413,12 @@ var LabelContext = (0, react_1.createContext)(false);
 /**
  * A caption for an input component.
  */
-function Label(_a) {
+exports.Label = (0, react_1.forwardRef)(function Label(_a, ref) {
     var disabled = _a.disabled, is = _a.is, required = _a.required, children = _a.children, props = __rest(_a, ["disabled", "is", "required", "children"]);
     var isInsideLabel = (0, react_1.useContext)(LabelContext);
     var component = is || (isInsideLabel && 'span') || 'label';
-    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.default, __assign({ is: component, "rcx-label": true, "rcx-label--disabled": disabled }, props, { children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.default, { is: 'span', "rcx-label__required": true, mis: 'x4', "aria-hidden": 'true', children: "*" }))] })) }));
-}
+    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.default, __assign({ is: component, "rcx-label": true, "rcx-label--disabled": disabled }, props, { ref: ref, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.default, { is: 'span', "rcx-label__required": true, mis: 'x4', "aria-hidden": 'true', children: "*" }))] })) }));
+});
 
 
 /***/ }),
@@ -11555,8 +11554,9 @@ exports.ModalTitle = ModalTitle;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ModalFooterAnnotation = exports.ModalFooterControllers = exports.ModalHeroImage = exports.ModalHeaderText = exports.ModalTagline = exports.ModalIcon = exports.ModalTitle = exports.ModalThumb = exports.ModalHeader = exports.ModalFooter = exports.ModalContent = exports.ModalClose = exports.ModalBackdrop = void 0;
+exports.ModalFooterAnnotation = exports.ModalFooterControllers = exports.ModalHeroImage = exports.ModalHeaderText = exports.ModalTagline = exports.ModalIcon = exports.ModalTitle = exports.ModalThumb = exports.ModalHeader = exports.ModalFooter = exports.ModalContent = exports.ModalClose = exports.ModalBackdrop = exports.Modal = void 0;
 var Modal_1 = __webpack_require__(/*! ./Modal */ "./src/components/Modal/Modal.tsx");
+Object.defineProperty(exports, "Modal", ({ enumerable: true, get: function () { return Modal_1.Modal; } }));
 var ModalBackdrop_1 = __webpack_require__(/*! ./ModalBackdrop */ "./src/components/Modal/ModalBackdrop.tsx");
 Object.defineProperty(exports, "ModalBackdrop", ({ enumerable: true, get: function () { return ModalBackdrop_1.ModalBackdrop; } }));
 var ModalClose_1 = __webpack_require__(/*! ./ModalClose */ "./src/components/Modal/ModalClose.tsx");
@@ -11583,22 +11583,6 @@ var ModalThumb_1 = __webpack_require__(/*! ./ModalThumb */ "./src/components/Mod
 Object.defineProperty(exports, "ModalThumb", ({ enumerable: true, get: function () { return ModalThumb_1.ModalThumb; } }));
 var ModalTitle_1 = __webpack_require__(/*! ./ModalTitle */ "./src/components/Modal/ModalTitle.tsx");
 Object.defineProperty(exports, "ModalTitle", ({ enumerable: true, get: function () { return ModalTitle_1.ModalTitle; } }));
-/* @deprecated use named exports */
-exports["default"] = Object.assign(Modal_1.Modal, {
-    Backdrop: ModalBackdrop_1.ModalBackdrop,
-    Close: ModalClose_1.ModalClose,
-    Content: ModalContent_1.ModalContent,
-    Footer: ModalFooter_1.ModalFooter,
-    Header: ModalHeader_1.ModalHeader,
-    Icon: ModalIcon_1.ModalIcon,
-    Thumb: ModalThumb_1.ModalThumb,
-    Title: ModalTitle_1.ModalTitle,
-    Tagline: ModalTagline_1.ModalTagline,
-    HeaderText: ModalHeaderText_1.ModalHeaderText,
-    HeroImage: ModalHeroImage_1.ModalHeroImage,
-    FooterControllers: ModalFooterControllers_1.ModalFooterControllers,
-    FooterAnnotation: ModalFooterAnnotation_1.ModalFooterAnnotation,
-});
 
 
 /***/ }),
@@ -13468,11 +13452,11 @@ var SelectAddon_1 = __importDefault(__webpack_require__(/*! ../Select/SelectAddo
 var SelectFocus_1 = __importDefault(__webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx"));
 var PaginatedSelectWrapper_1 = __importDefault(__webpack_require__(/*! ./PaginatedSelectWrapper */ "./src/components/PaginatedSelect/PaginatedSelectWrapper.tsx"));
 var PaginatedSelect = function (_a) {
-    var value = _a.value, withTitle = _a.withTitle, filter = _a.filter, _setFilter = _a.setFilter, error = _a.error, disabled = _a.disabled, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.anchor, Anchor = _c === void 0 ? SelectFocus_1.default : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.renderOptions, _Options = _f === void 0 ? OptionsPaginated_1.OptionsPaginated : _f, _g = _a.renderItem, renderItem = _g === void 0 ? Option_1.default : _g, endReached = _a.endReached, props = __rest(_a, ["value", "withTitle", "filter", "setFilter", "error", "disabled", "options", "anchor", "onChange", "placeholder", "renderOptions", "renderItem", "endReached"]);
-    var _h = __read((0, react_1.useState)(value), 2), internalValue = _h[0], setInternalValue = _h[1];
+    var value = _a.value, withTitle = _a.withTitle, filter = _a.filter, _setFilter = _a.setFilter, error = _a.error, disabled = _a.disabled, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.anchor, Anchor = _c === void 0 ? SelectFocus_1.default : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, placeholder = _a.placeholder, _e = _a.renderOptions, _Options = _e === void 0 ? OptionsPaginated_1.OptionsPaginated : _e, _f = _a.renderItem, renderItem = _f === void 0 ? Option_1.default : _f, endReached = _a.endReached, props = __rest(_a, ["value", "withTitle", "filter", "setFilter", "error", "disabled", "options", "anchor", "onChange", "placeholder", "renderOptions", "renderItem", "endReached"]);
+    var _g = __read((0, react_1.useState)(value), 2), internalValue = _g[0], setInternalValue = _g[1];
     var currentValue = value !== undefined ? value : internalValue;
     var option = options.find(function (option) { return (option === null || option === void 0 ? void 0 : option.value) === currentValue; });
-    var _j = __read((0, useVisible_1.useVisible)(), 3), visible = _j[0], hide = _j[1], show = _j[2];
+    var _h = __read((0, useVisible_1.useVisible)(), 3), visible = _h[0], hide = _h[1], show = _h[2];
     var internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
@@ -13480,10 +13464,12 @@ var PaginatedSelect = function (_a) {
         hide();
     });
     var ref = (0, react_1.useRef)(null);
-    var _k = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _k.ref, borderBoxSize = _k.borderBoxSize;
+    var _j = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _j.ref, borderBoxSize = _j.borderBoxSize;
     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 isUnfilteredOrHidden = filter === undefined || visible === AnimatedVisibility_1.default.HIDDEN;
+    var visibleText = isUnfilteredOrHidden
+        ? valueLabel || placeholder
+        : undefined;
     var handleClick = (0, fuselage_hooks_1.useEffectEvent)(function () {
         if (visible === AnimatedVisibility_1.default.VISIBLE) {
             return hide();
@@ -14672,8 +14658,8 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.RadioButton = (0, react_1.forwardRef)(function RadioButton(_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { is: 'label', className: className, "rcx-radio-button": true, children: [(0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', "rcx-radio-button__input": true, type: 'radio', ref: ref }, props)), (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'i', "rcx-radio-button__fake": true, "aria-hidden": 'true' })] }));
+    var className = _a.className, labelChildren = _a.labelChildren, props = __rest(_a, ["className", "labelChildren"]);
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { is: 'label', className: className, "rcx-radio-button": true, children: [labelChildren, (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', "rcx-radio-button__input": true, type: 'radio', ref: ref }, props)), (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'i', "rcx-radio-button__fake": true, "aria-hidden": 'true' })] }));
 });
 
 
@@ -17850,7 +17836,7 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var SidepanelDivider_1 = __webpack_require__(/*! ./SidepanelDivider */ "./src/components/Sidepanel/SidepanelDivider.tsx");
 var SidepanelHeader = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: ['rcx-sidepanel-header', className].filter(Boolean).join(' ') }, props)), (0, jsx_runtime_1.jsx)(SidepanelDivider_1.SidepanelDivider, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'rcx-sidepanel-header-wrapper', children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: ['rcx-sidepanel-header', className].filter(Boolean).join(' ') }, props)), (0, jsx_runtime_1.jsx)(SidepanelDivider_1.SidepanelDivider, {})] }));
 };
 exports.SidepanelHeader = SidepanelHeader;
 
@@ -18481,10 +18467,24 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-var StatesAction = function (props) { return ((0, jsx_runtime_1.jsx)(__1.Button, __assign({}, props, { primary: true }))); };
+var StatesAction = function (_a) {
+    var _b = _a.primary, primary = _b === void 0 ? true : _b, props = __rest(_a, ["primary"]);
+    return ((0, jsx_runtime_1.jsx)(__1.Button, __assign({}, props, { primary: primary })));
+};
 exports["default"] = StatesAction;
 
 
@@ -20268,8 +20268,8 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.ToggleSwitch = (0, react_1.forwardRef)(function ToggleSwitch(_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { is: 'label', className: className, "rcx-toggle-switch": true, children: [(0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', ref: ref, "rcx-toggle-switch__input": true, type: 'checkbox' }, props)), (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'i', "rcx-toggle-switch__fake": true, "aria-hidden": 'true' })] }));
+    var className = _a.className, labelChildren = _a.labelChildren, props = __rest(_a, ["className", "labelChildren"]);
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { is: 'label', className: className, "rcx-toggle-switch": true, children: [labelChildren, (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', ref: ref, "rcx-toggle-switch__input": true, type: 'checkbox' }, props)), (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'i', "rcx-toggle-switch__fake": true, "aria-hidden": 'true' })] }));
 });
 
 
@@ -20464,7 +20464,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.UrlInput = exports.Tooltip = exports.Tile = exports.Sidebar = exports.Scrollable = exports.PositionAnimated = exports.Position = exports.PasswordInput = exports.Option = exports.Options = exports.Modal = exports.Message = exports.Margins = exports.Flex = exports.Field = exports.Chip = exports.CodeSnippet = exports.IconButton = exports.ActionButton = exports.Button = exports.useArrayLikeClassNameProp = exports.Box = exports.Banner = exports.AnimatedVisibility = void 0;
+exports.UrlInput = exports.Tooltip = exports.Tile = exports.Sidebar = exports.Scrollable = exports.PositionAnimated = exports.Position = exports.PasswordInput = exports.Option = exports.Options = exports.Message = exports.Margins = exports.Flex = exports.Field = exports.Chip = exports.CodeSnippet = exports.IconButton = exports.ActionButton = exports.Button = exports.useArrayLikeClassNameProp = exports.Box = exports.Banner = exports.AnimatedVisibility = void 0;
 __exportStar(__webpack_require__(/*! ./Accordion */ "./src/components/Accordion/index.ts"), exports);
 var AnimatedVisibility_1 = __webpack_require__(/*! ./AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
 Object.defineProperty(exports, "AnimatedVisibility", ({ enumerable: true, get: function () { return __importDefault(AnimatedVisibility_1).default; } }));
@@ -20516,8 +20516,6 @@ __exportStar(__webpack_require__(/*! ./Menu */ "./src/components/Menu/index.ts")
 var Message_1 = __webpack_require__(/*! ./Message */ "./src/components/Message/index.tsx");
 Object.defineProperty(exports, "Message", ({ enumerable: true, get: function () { return __importDefault(Message_1).default; } }));
 __exportStar(__webpack_require__(/*! ./Message */ "./src/components/Message/index.tsx"), exports);
-var Modal_1 = __webpack_require__(/*! ./Modal */ "./src/components/Modal/index.ts");
-Object.defineProperty(exports, "Modal", ({ enumerable: true, get: function () { return __importDefault(Modal_1).default; } }));
 __exportStar(__webpack_require__(/*! ./Modal */ "./src/components/Modal/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./NavBar */ "./src/components/NavBar/index.ts"), exports);