@rocket.chat/fuselage 0.32.0-dev.303 → 0.32.0-dev.304

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

@@ -1,31 +1,22 @@
 import type { ElementType, ReactElement } from 'react';
+type AutoCompleteOption = {
+    value: string;
+    label: unknown;
+};
 type AutoCompleteProps = {
-    value: unknown[];
+    value?: string | string[];
     filter: string;
     setFilter?: (filter: string) => void;
-    options?: {
-        label: string;
-        value: unknown;
-    }[];
+    options?: AutoCompleteOption[];
     renderItem?: ElementType;
     renderSelected?: ElementType;
-    onChange: (value: unknown, action: 'remove' | undefined) => void;
-    getLabel?: (option: {
-        label: string;
-        value: unknown;
-    }) => string;
-    getValue?: (option: {
-        label: string;
-        value: unknown;
-    }) => unknown;
+    onChange: (value: string | string[]) => void;
     renderEmpty?: ElementType;
     placeholder?: string;
     error?: boolean;
     disabled?: boolean;
+    multiple?: boolean;
 };
-/**
- * @deprecated in favor of Select and MultiSelect
- */
-export declare function AutoComplete({ value, filter, setFilter, options, renderItem, renderSelected: RenderSelected, onChange, getLabel, getValue, renderEmpty, placeholder, error, disabled, }: AutoCompleteProps): ReactElement;
+export declare function AutoComplete({ value, filter, setFilter, options, renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, }: AutoCompleteProps): ReactElement;
 export {};
 //# sourceMappingURL=AutoComplete.d.ts.map

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":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBvD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAC9C,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,CAAC;IACjE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC;IAClE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,SAAoB,EACpB,OAAY,EACZ,UAAU,EACV,cAAc,EAAE,cAAgC,EAChD,QAAmB,EACnB,QAAoC,EACpC,QAA+B,EAC/B,WAAW,EACX,WAAW,EACX,KAAK,EACL,QAAQ,GACT,EAAE,iBAAiB,GAAG,YAAY,CAyGlC"}
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../src/components/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAkB,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBvE,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,CAAC;AAcF,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,GACT,EAAE,iBAAiB,GAAG,YAAY,CA0IlC"}

package/dist/fuselage.development.js

@@ -4380,6 +4380,15 @@ var __read = (undefined && undefined.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 // @ts-nocheck
 
 
@@ -4391,42 +4400,51 @@ var __read = (undefined && undefined.__read) || function (o, n) {
 
 
 
-var Addon = function (props) { return react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], __assign({ "rcx-autocomplete__addon": true }, props)); };
-var SelectedOptions = react__WEBPACK_IMPORTED_MODULE_1___default().memo(function (props) { return react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_4__["default"], __assign({}, props)); });
-/**
- * @deprecated in favor of Select and MultiSelect
- */
+var Addon = function (props) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], __assign({ "rcx-autocomplete__addon": true }, props))); };
+var getSelected = function (value, options) {
+    if (!value) {
+        return [];
+    }
+    return typeof value === 'string'
+        ? options.filter(function (option) { return option.value === value; })
+        : options === null || options === void 0 ? void 0 : options.filter(function (option) { return value.includes(option.value); });
+};
 function AutoComplete(_a) {
-    var value = _a.value, filter = _a.filter, _b = _a.setFilter, setFilter = _b === void 0 ? function () { } : _b, _c = _a.options, options = _c === void 0 ? [] : _c, renderItem = _a.renderItem, _d = _a.renderSelected, RenderSelected = _d === void 0 ? SelectedOptions : _d, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.getLabel, getLabel = _f === void 0 ? function (_a) {
-        var _b = _a === void 0 ? {} : _a, label = _b.label;
-        return label;
-    } : _f, _g = _a.getValue, getValue = _g === void 0 ? function (_a) {
-        var value = _a.value;
-        return value;
-    } : _g, renderEmpty = _a.renderEmpty, placeholder = _a.placeholder, error = _a.error, disabled = _a.disabled;
-    var _h = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _h.ref, borderBoxSize = _h.borderBoxSize;
+    var value = _a.value, filter = _a.filter, setFilter = _a.setFilter, _b = _a.options, options = _b === void 0 ? [] : _b, renderItem = _a.renderItem, RenderSelected = _a.renderSelected, onChange = _a.onChange, renderEmpty = _a.renderEmpty, placeholder = _a.placeholder, error = _a.error, disabled = _a.disabled, multiple = _a.multiple;
     var ref = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
-    var _j = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(function () {
-        return options.find(function (option) { return getValue(option) === value; });
-    }), 2), selected = _j[0], setSelected = _j[1];
-    var selectByKeyboard = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (_a) {
-        var _b = __read(_a, 1), value = _b[0];
-        setSelected(options.find(function (option) { return getValue(option) === value; }));
-        onChange(value);
+    var _c = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _c.ref, borderBoxSize = _c.borderBoxSize;
+    var _d = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(function () { return getSelected(value, options) || []; }), 2), selected = _d[0], setSelected = _d[1];
+    var handleSelect = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(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; })) {
+            hide();
+            return;
+        }
+        if (multiple) {
+            setSelected(__spreadArray(__spreadArray([], __read(selected), false), __read(getSelected(currentValue, options)), false));
+            onChange(__spreadArray(__spreadArray([], __read(value), false), [currentValue], false));
+        }
+        else {
+            setSelected(getSelected(currentValue, options));
+            onChange(currentValue);
+        }
         setFilter('');
+        hide();
+    });
+    var handleRemove = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(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; });
+        setSelected(filtered);
+        onChange(filteredValue);
+        hide();
     });
     var memoizedOptions = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return options.map(function (_a) {
-        var label = _a.label, value = _a.value;
+        var value = _a.value, label = _a.label;
         return [value, label];
     }); }, [options]);
-    var _k = __read((0,_Options__WEBPACK_IMPORTED_MODULE_8__.useCursor)(value, memoizedOptions, selectByKeyboard), 5), cursor = _k[0], handleKeyDown = _k[1], reset = _k[3], _l = __read(_k[4], 3), optionsAreVisible = _l[0], hide = _l[1], show = _l[2];
-    var onSelect = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (_a) {
-        var _b = __read(_a, 1), value = _b[0];
-        setSelected(options.find(function (option) { return getValue(option) === value; }));
-        onChange(value);
-        setFilter('');
-        hide();
-    });
+    var _e = __read((0,_Options__WEBPACK_IMPORTED_MODULE_8__.useCursor)(value, memoizedOptions, handleSelect), 5), cursor = _e[0], handleKeyDown = _e[1], reset = _e[3], _f = __read(_e[4], 3), optionsAreVisible = _f[0], hide = _f[1], show = _f[2];
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(reset, [filter]);
     return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], { "rcx-autocomplete": true, ref: containerRef, onClick: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return ref.current.focus(); }), flexGrow: 1, className: (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return [error && 'invalid', disabled && 'disabled']; }, [error, disabled]) },
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'listbox' },
@@ -4436,12 +4454,15 @@ function AutoComplete(_a) {
                     }), onBlur: hide, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible !== _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN || !value
                         ? placeholder
                         : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter }),
-                selected && optionsAreVisible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RenderSelected, { role: 'option', value: value, label: getLabel(selected), children: getLabel(selected) })))),
+                selected &&
+                    selected.map(function (itemSelected) {
+                        return RenderSelected ? (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RenderSelected, { key: itemSelected.value, selected: itemSelected, onRemove: handleRemove })) : (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_4__["default"], { role: 'option', key: itemSelected.value, value: itemSelected.value, label: itemSelected.label, children: itemSelected.label, onClick: handleRemove, selected: selected }));
+                    }))),
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Addon, { children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_5__.Icon, { name: optionsAreVisible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE
                     ? 'cross'
                     : 'magnifier', size: 'x20' }) }),
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_PositionAnimated__WEBPACK_IMPORTED_MODULE_9__["default"], { visible: optionsAreVisible, anchor: containerRef },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options__WEBPACK_IMPORTED_MODULE_8__.Options, { role: 'option', width: borderBoxSize.inlineSize, onSelect: onSelect, renderItem: renderItem, renderEmpty: renderEmpty, cursor: cursor, value: value, options: memoizedOptions }))));
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options__WEBPACK_IMPORTED_MODULE_8__.Options, { role: 'option', width: borderBoxSize.inlineSize, onSelect: handleSelect, renderItem: renderItem, renderEmpty: renderEmpty, cursor: cursor, value: value, options: memoizedOptions }))));
 }