@rocket.chat/fuselage 0.66.3 → 0.66.4

package/dist/components/AutoComplete/AutoComplete.d.ts

@@ -3,8 +3,7 @@ type AutoCompleteOption = {
     value: string;
     label: unknown;
 };
-type AutoCompleteProps = {
-    value?: string | string[];
+type AutoCompleteProps = Omit<AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'is'> & {
     filter: string;
     setFilter?: (filter: string) => void;
     options?: AutoCompleteOption[];
@@ -16,7 +15,8 @@ type AutoCompleteProps = {
     error?: boolean;
     disabled?: boolean;
     multiple?: boolean;
-} & Omit<AllHTMLAttributes<HTMLInputElement>, 'onChange'>;
+    value?: string | string[];
+};
 /**
  * An input for selection of options.
  */

package/dist/components/AutoComplete/AutoComplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../src/components/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,iBAAiB,EAEjB,WAAW,EACX,YAAY,EACb,MAAM,OAAO,CAAC;AAgBf,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;AAc1D;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,SAAS,EACT,OAAY,EACZ,UAAU,EACV,cAAc,EAAE,cAAc,EAC9B,QAAQ,EACR,WAAW,EACX,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EAAE,YAAuB,EAC/B,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,YAAY,CA8IlC"}
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../src/components/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAGjB,WAAW,EAGX,YAAY,EAEb,MAAM,OAAO,CAAC;AAgBf,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAC3B,iBAAiB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GAAG,UAAU,GAAG,IAAI,CAC5B,GAAG;IACF,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC3B,CAAC;AAyBF;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,SAAS,EACT,OAAY,EACZ,UAAU,EACV,cAAc,EAAE,cAAc,EAC9B,QAAQ,EACR,WAAW,EACX,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EAAE,YAAuB,EAC/B,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,YAAY,CA8JlC"}

package/dist/fuselage.development.js

@@ -2514,8 +2514,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.AutoComplete = AutoComplete;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 var react_1 = __webpack_require__(/*! react */ "react");
 var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts"));
@@ -2535,6 +2533,14 @@ var getSelected = function (value, options) {
         ? options.filter(function (option) { return option.value === value; })
         : options === null || options === void 0 ? void 0 : options.filter(function (option) { return value.includes(option.value); });
 };
+var isSelectedValid = function (value) { return function (selected) {
+    if (!value) {
+        return false;
+    }
+    return typeof value === 'string'
+        ? selected.value === value
+        : value.includes(selected.value);
+}; };
 /**
  * An input for selection of options.
  */
@@ -2543,28 +2549,38 @@ 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];
+    (0, react_1.useEffect)(function () {
+        // Validates if selected items are still valid after value changes
+        setSelected(function (selected) {
+            return !selected.every(isSelectedValid(value))
+                ? selected.filter(isSelectedValid(value))
+                : selected;
+        });
+    }, [value]);
     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; })) {
+        var _b = __read(_a, 1), newValue = _b[0];
+        if (selected.some(function (item) { return item.value === newValue; })) {
             hide();
             return;
         }
         if (multiple) {
-            setSelected(__spreadArray(__spreadArray([], __read(selected), false), __read(getSelected(currentValue, options)), false));
-            onChange(__spreadArray(__spreadArray([], __read(value), false), [currentValue], false));
+            setSelected(__spreadArray(__spreadArray([], __read(selected), false), __read(getSelected(newValue, options)), false));
+            onChange(__spreadArray(__spreadArray([], __read((value || [])), false), [newValue], false));
         }
         else {
-            setSelected(getSelected(currentValue, options));
-            onChange(currentValue);
+            setSelected(getSelected(newValue, options));
+            onChange(newValue);
         }
-        setFilter('');
+        setFilter === null || setFilter === void 0 ? void 0 : setFilter('');
         hide();
     });
     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; });
-        var filteredValue = value.filter(function (item) { return item !== event.currentTarget.value; });
+        var filteredValue = multiple && Array.isArray(value)
+            ? (value === null || value === void 0 ? void 0 : value.filter(function (item) { return item !== event.currentTarget.value; })) || []
+            : '';
         setSelected(filtered);
         onChange(filteredValue);
         hide();
@@ -2573,18 +2589,20 @@ function AutoComplete(_a) {
         var value = _a.value, label = _a.label;
         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 firstSelectedIndex = (0, react_1.useMemo)(function () { return options.findIndex(function (option) { var _a; return ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.value) === option.value; }); }, [options, selected]);
+    var _f = __read((0, Options_1.useCursor)(firstSelectedIndex, 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.useEffectEvent)(function (event) {
         hide();
         onBlurAction(event);
     });
-    (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
+    (0, react_1.useEffect)(reset, [filter, reset]);
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useEffectEvent)(function () { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.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 === null || setFilter === void 0 ? void 0 : 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, 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
+                                : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled }, props)), 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, children: itemSelected.label, onClick: handleRemove }, itemSelected.value));
+                        })] }) }), (0, jsx_runtime_1.jsx)(Addon, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.default.VISIBLE
                         ? 'cross'
                         : 'magnifier', size: 'x20', color: 'default' }) }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.default, { 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 }) })] }));
 }