@rocket.chat/fuselage 0.78.0 → 0.79.0

package/dist/fuselage.development.js

@@ -659,7 +659,7 @@ const isSelectedValid = (value) => (selected) => {
         ? selected.value === value
         : value.includes(selected.value);
 };
-function AutoComplete({ value, filter, setFilter, options = [], renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, onBlur: onBlurAction = () => { }, ...props }, ref) {
+const AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ value, filter, setFilter, options = [], renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, onBlur: onBlurAction = () => { }, ...props }, ref) {
     const innerRef = (0, react_1.useRef)(null);
     const mergedRefs = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     const { ref: containerRef, borderBoxSize } = (0, fuselage_hooks_1.useResizeObserver)();
@@ -711,8 +711,8 @@ function AutoComplete({ value, filter, setFilter, options = [], renderItem, rend
                                 : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled, ...props }), selected.map((itemSelected) => RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { value: itemSelected.value, children: itemSelected.label, onClick: handleRemove }, itemSelected.value)))] }) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-autocomplete__addon": true, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                         ? 'cross'
                         : 'magnifier', size: 'x20', color: 'default' }) }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: optionsAreVisible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(Options_1.Options, { width: borderBoxSize.inlineSize, onSelect: handleSelect, renderItem: renderItem, renderEmpty: renderEmpty, cursor: cursor, value: value, options: memoizedOptions }) })] }));
-}
-exports["default"] = (0, react_1.forwardRef)(AutoComplete);
+});
+exports["default"] = AutoComplete;
 
 
 /***/ },
@@ -3456,33 +3456,34 @@ const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.t
 const Input_1 = __importDefault(__webpack_require__(/*! ./Input */ "./src/components/InputBox/Input.tsx"));
 const InputBoxAddon_1 = __importDefault(__webpack_require__(/*! ./InputBoxAddon */ "./src/components/InputBox/InputBoxAddon.tsx"));
 const InputBoxWrapper_1 = __importDefault(__webpack_require__(/*! ./InputBoxWrapper */ "./src/components/InputBox/InputBoxWrapper.tsx"));
-const InputBox = (0, react_1.forwardRef)(function InputBox({ className, addon, error, hidden, invisible, multiple, placeholderVisible, type = 'text', small, onChange, ...props }, ref) {
+const InputBox = (0, react_1.forwardRef)(function InputBox({ className, addon, startAddon, endAddon, error, hidden, invisible, multiple, placeholderVisible, type = 'text', small, onChange, ...props }, ref) {
     const innerRef = (0, react_1.useRef)(null);
     const mergedRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
+    let defaultAddon = endAddon ?? addon;
     (0, react_1.useLayoutEffect)(() => {
         if (innerRef.current && innerRef.current.setCustomValidity) {
             innerRef.current.setCustomValidity(error || '');
         }
     }, [error]);
     (0, react_1.useLayoutEffect)(() => {
-        if (addon && innerRef.current && innerRef.current.parentElement) {
+        if (defaultAddon && innerRef.current && innerRef.current.parentElement) {
             innerRef.current.parentElement.classList.toggle('invalid', !innerRef.current.checkValidity());
         }
-    }, [addon, error]);
+    }, [defaultAddon, error]);
     const handleChange = (0, react_1.useCallback)((event) => {
-        if (addon && innerRef.current && innerRef.current.parentElement) {
+        if (defaultAddon && innerRef.current && innerRef.current.parentElement) {
             innerRef.current.parentElement.classList.toggle('invalid', !innerRef.current.checkValidity());
         }
         onChange?.call(event.currentTarget, event);
-    }, [addon, onChange]);
+    }, [defaultAddon, onChange]);
     const handleAddonClick = () => innerRef.current.showPicker();
     if (type === 'date') {
-        addon = (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'calendar', size: 'x20', onClick: handleAddonClick });
+        defaultAddon = ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'calendar', size: 'x20', onClick: handleAddonClick }));
     }
     if (type === 'time') {
-        addon = (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'clock', size: 'x20', onClick: handleAddonClick });
+        defaultAddon = (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'clock', size: 'x20', onClick: handleAddonClick });
     }
-    if (!addon) {
+    if (!defaultAddon && !startAddon) {
         return ((0, jsx_runtime_1.jsx)(Input_1.default, { is: (type === 'textarea' && 'textarea') ||
                 (type === 'select' && 'select') ||
                 'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, hidden: hidden, invisible: invisible, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--small": small, ...props }));
@@ -3490,9 +3491,9 @@ const InputBox = (0, react_1.forwardRef)(function InputBox({ className, addon, e
     return ((0, jsx_runtime_1.jsxs)(InputBoxWrapper_1.default, { className: [
             props.disabled && 'disabled',
             ...(Array.isArray(className) ? className : [className]),
-        ], hidden: hidden, invisible: invisible, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { is: (type === 'textarea' && 'textarea') ||
+        ], hidden: hidden, invisible: invisible, children: [startAddon && (0, jsx_runtime_1.jsx)(InputBoxAddon_1.default, { children: startAddon }), (0, jsx_runtime_1.jsx)(Input_1.default, { is: (type === 'textarea' && 'textarea') ||
                     (type === 'select' && 'select') ||
-                    'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--undecorated": true, "rcx-input-box--small": small, ...props }), (0, jsx_runtime_1.jsx)(InputBoxAddon_1.default, { children: addon })] }));
+                    'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--undecorated": true, "rcx-input-box--small": small, ...props }), defaultAddon && (0, jsx_runtime_1.jsx)(InputBoxAddon_1.default, { children: defaultAddon })] }));
 });
 exports["default"] = InputBox;
 
@@ -6031,7 +6032,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, 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, autoComplete: 'off' }) }));
 });
 exports["default"] = MultiSelectFilteredAnchor;
 
@@ -8001,7 +8002,7 @@ const pollTouchingEdges = (element, touchingEdgesRef, onScrollContent) => {
     }
 };
 const Scrollable = ({ children, horizontal, vertical, smooth, onScrollContent, }) => {
-    const scrollTimeoutRef = (0, react_1.useRef)();
+    const scrollTimeoutRef = (0, react_1.useRef)(undefined);
     const touchingEdgesRef = (0, react_1.useRef)({});
     const handleScroll = (0, fuselage_hooks_1.useStableCallback)((event) => {
         const element = event.currentTarget;
@@ -8239,7 +8240,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.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: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { position: 'relative', size: 0, 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 }) }) }))] }));
 });
@@ -12008,7 +12009,7 @@ 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 }));
-exports.useArrayLikeClassNameProp = exports.__setThrowErrorOnInvalidToken__ = exports.Palette = void 0;
+exports.useArrayLikeClassNameProp = exports.Var = exports.__setThrowErrorOnInvalidToken__ = exports.Palette = void 0;
 __webpack_require__(/*! ./index.scss */ "./src/index.scss");
 __exportStar(__webpack_require__(/*! ./components */ "./src/components/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./styleTokens */ "./src/styleTokens.ts"), exports);
@@ -12016,6 +12017,7 @@ __exportStar(__webpack_require__(/*! ./contexts */ "./src/contexts/index.ts"), e
 var Theme_1 = __webpack_require__(/*! ./Theme */ "./src/Theme.ts");
 Object.defineProperty(exports, "Palette", ({ enumerable: true, get: function () { return Theme_1.Palette; } }));
 Object.defineProperty(exports, "__setThrowErrorOnInvalidToken__", ({ enumerable: true, get: function () { return Theme_1.__setThrowErrorOnInvalidToken__; } }));
+Object.defineProperty(exports, "Var", ({ enumerable: true, get: function () { return Theme_1.Var; } }));
 var useArrayLikeClassNameProp_1 = __webpack_require__(/*! ./hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
 Object.defineProperty(exports, "useArrayLikeClassNameProp", ({ enumerable: true, get: function () { return useArrayLikeClassNameProp_1.useArrayLikeClassNameProp; } }));