@rocket.chat/fuselage 0.76.0 → 0.77.0

package/dist/fuselage.development.js

@@ -745,12 +745,12 @@ 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 AvatarContainer_1 = __importDefault(__webpack_require__(/*! ./AvatarContainer */ "./src/components/Avatar/AvatarContainer.tsx"));
-const Avatar = ({ size = 'x36', rounded = false, objectFit = false, url, className, alt, ...props }) => {
+const Avatar = ({ size = 'x36', rounded = false, objectFit, url, className, alt, ...props }) => {
     const innerClass = [
         'rcx-avatar__element',
-        objectFit && 'rcx-avatar__element--object-fit',
         size && `rcx-avatar__element--${size}`,
         rounded && 'rcx-avatar__element--rounded',
+        objectFit && `rcx-avatar__element--object-fit-${objectFit}`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -1188,6 +1188,7 @@ exports.propDefs = {
     overflow: stringProp,
     overflowX: stringProp,
     overflowY: stringProp,
+    objectFit: stringProp,
     position: stringProp,
     zIndex: numberOrStringProp,
     inset: insetProp,
@@ -5923,7 +5924,9 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
         innerRef.current?.focus();
         return show();
     });
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, disabled: disabled, ...props, children: [(0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(Flex_1.FlexContainer, { children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [renderAnchor({
+    const listboxId = props.id ? `${props.id}-listbox` : undefined;
+    const { id, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, ...containerProps } = props;
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, disabled: disabled, ...containerProps, children: [(0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(Flex_1.FlexContainer, { children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [renderAnchor({
                                             'ref': anchorRef,
                                             'children': internalValue.length === 0 ? placeholder : null,
                                             'disabled': disabled ?? false,
@@ -5931,8 +5934,17 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
                                             'onBlur': hide,
                                             'onKeyDown': handleKeyDown,
                                             'onKeyUp': handleKeyUp,
+                                            'role': 'combobox',
                                             'aria-expanded': visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE,
-                                            'aria-labelledby': props['aria-labelledby'],
+                                            'aria-haspopup': 'listbox',
+                                            'aria-controls': listboxId,
+                                            id,
+                                            name,
+                                            'aria-label': ariaLabel,
+                                            'aria-labelledby': ariaLabelledBy,
+                                            'aria-describedby': ariaDescribedBy,
+                                            'aria-invalid': ariaInvalid,
+                                            'aria-required': ariaRequired,
                                         }), internalValue.map((value) => {
                                             const currentOption = options.find(([val]) => val === value);
                                             return RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { value: value, label: getLabel(currentOption), onMouseDown: (e) => {
@@ -5946,7 +5958,7 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
                                                 }, children: getLabel(currentOption) }, String(value)));
                                         })] }) }) }) }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 0, shrink: 0, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                                 ? 'chevron-up'
-                                : addonIcon || 'chevron-down', size: 'x20' }) }) }) }), (0, jsx_runtime_1.jsx)(AnimatedVisibility_1.AnimatedVisibility, { visibility: visible, children: (0, jsx_runtime_1.jsx)(Position_1.Position, { anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, renderItem: renderItem || Option_1.CheckOption, role: 'listbox', options: filteredOptions, onSelect: internalChanged, cursor: cursor, customEmpty: customEmpty }) }) })] }));
+                                : addonIcon || 'chevron-down', size: 'x20' }) }) }) }), (0, jsx_runtime_1.jsx)(AnimatedVisibility_1.AnimatedVisibility, { visibility: visible, children: (0, jsx_runtime_1.jsx)(Position_1.Position, { anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, renderItem: renderItem || Option_1.CheckOption, id: listboxId, options: filteredOptions, onSelect: internalChanged, cursor: cursor, customEmpty: customEmpty }) }) })] }));
 });
 exports["default"] = MultiSelect;
 
@@ -5967,8 +5979,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 SelectFocus_1 = __importDefault(__webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx"));
-const MultiSelectAnchor = (0, react_1.forwardRef)(function MultiSelectAnchor(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(SelectFocus_1.default, { "rcx-input-box--undecorated": true, ref: ref, "aria-haspopup": 'listbox', order: 1, ...props }));
+const MultiSelectAnchor = (0, react_1.forwardRef)(function MultiSelectAnchor({ children, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(SelectFocus_1.default, { "rcx-input-box--undecorated": true, ref: ref, order: 1, ...props, children: children }));
 });
 exports["default"] = MultiSelectAnchor;
 
@@ -5990,10 +6002,10 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const MultiSelect_1 = __importDefault(__webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/MultiSelect.tsx"));
 const MultiSelectFilteredAnchor_1 = __importDefault(__webpack_require__(/*! ./MultiSelectFilteredAnchor */ "./src/components/MultiSelect/MultiSelectFilteredAnchor.tsx"));
-const MultiSelectFiltered = ({ options, placeholder, filter: propFilter, setFilter: propSetFilter, ...props }) => {
+const MultiSelectFiltered = (0, react_1.forwardRef)(({ options, placeholder, filter: propFilter, setFilter: propSetFilter, ...props }, ref) => {
     const [filter, setFilter] = (0, react_1.useState)('');
-    return ((0, jsx_runtime_1.jsx)(MultiSelect_1.default, { ...props, filter: propFilter || filter, setFilter: propSetFilter || setFilter, options: options, anchor: (params) => ((0, jsx_runtime_1.jsx)(MultiSelectFilteredAnchor_1.default, { placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter, ...params })) }));
-};
+    return ((0, jsx_runtime_1.jsx)(MultiSelect_1.default, { ...props, ref: ref, filter: propFilter || filter, setFilter: propSetFilter || setFilter, options: options, anchor: (params) => ((0, jsx_runtime_1.jsx)(MultiSelectFilteredAnchor_1.default, { placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter, ...params })) }));
+});
 exports["default"] = MultiSelectFiltered;
 
 
@@ -6012,7 +6024,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const Flex_1 = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const MultiSelectFilteredAnchor = (0, react_1.forwardRef)(function MultiSelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, "aria-haspopup": 'listbox', order: 1 }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, order: 1 }) }));
 });
 exports["default"] = MultiSelectFilteredAnchor;
 
@@ -6570,7 +6582,7 @@ const Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/i
 const Scrollable_1 = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
 const Tile_1 = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
 const OptionsEmpty_1 = __importDefault(__webpack_require__(/*! ./OptionsEmpty */ "./src/components/Options/OptionsEmpty.tsx"));
-const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', multiple, renderEmpty: EmptyComponent = OptionsEmpty_1.default, options, cursor, renderItem: OptionComponent = Option_1.Option, onSelect, customEmpty, ...props }, ref) {
+const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', multiple, renderEmpty: EmptyComponent = OptionsEmpty_1.default, options, cursor, renderItem: OptionComponent = Option_1.Option, onSelect, customEmpty, id, ...props }, ref) {
     const liRef = (0, react_1.useRef)(null);
     (0, react_1.useLayoutEffect)(() => {
         if (!liRef.current) {
@@ -6604,7 +6616,7 @@ const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', m
                     }, value: value, selected: selected || (multiple !== true && undefined), disabled: disabled, focus: cursor === i || undefined }, value));
         }
     }), [options, multiple, cursor, onSelect, OptionComponent]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsxs)(Tile_1.Tile, { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent_1.prevent, onClick: prevent_1.prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', "aria-activedescendant": options?.[cursor]?.[0]
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsxs)(Tile_1.Tile, { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent_1.prevent, onClick: prevent_1.prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', id: id, "aria-activedescendant": options?.[cursor]?.[0]
                         ? String(options?.[cursor]?.[0])
                         : undefined, children: [!options.length && (0, jsx_runtime_1.jsx)(EmptyComponent, { customEmpty: customEmpty }), optionsMemoized] }) }) }) }));
 });
@@ -8210,7 +8222,7 @@ exports.SelectAria = (0, react_1.forwardRef)(function SelectAria({ error, placeh
     const mergedRef = (0, fuselage_hooks_1.useMergedRefs)(outerRef, ref);
     const { triggerProps, valueProps, menuProps } = (0, react_aria_1.useSelect)({ isDisabled, ...props }, state, ref);
     const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(SelectTrigger_1.SelectTrigger, { ...(0, react_aria_1.mergeProps)(focusProps, triggerProps), ref: mergedRef, small: small, focus: isFocusVisible || state.isOpen, error: error, id: id, children: [(0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', color: state.selectedItem ? 'default' : 'hint', ...valueProps, ...(small && { fontScale: 'c1' }), children: state.selectedItem ? state.selectedItem.rendered : placeholder }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })] }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8, children: (0, jsx_runtime_1.jsx)(Options_1.OptionContainer, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name, isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(SelectTrigger_1.SelectTrigger, { ...(0, react_aria_1.mergeProps)(focusProps, triggerProps), ref: mergedRef, small: small, focus: isFocusVisible || state.isOpen, error: error, id: id, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', color: state.selectedItem ? 'default' : 'hint', ...valueProps, ...(small && { fontScale: 'c1' }), children: state.selectedItem ? state.selectedItem.rendered : placeholder }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })] }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8, children: (0, jsx_runtime_1.jsx)(Options_1.OptionContainer, { style: {
                         width: borderBoxSize?.inlineSize,
                     }, children: (0, jsx_runtime_1.jsx)(Listbox_1.ListBox, { ...menuProps, state: state }) }) }))] }));
 });