@rocket.chat/fuselage 0.78.1 → 0.79.1

package/dist/fuselage.development.js

@@ -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;
 
@@ -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;