@rocket.chat/fuselage 0.32.0-dev.297 → 0.32.0-dev.299

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

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

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

@@ -0,0 +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"}

package/dist/components/Banner/Banner.stories.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    export const title: string;
+    export { Banner as component };
+}
+export default _default;
+export function _Banner(): JSX.Element;
+export namespace _Banner {
+    const storyName: string;
+}
+export function Variations(): JSX.Element;
+export function Inline(): JSX.Element;
+export function Actionable(): JSX.Element;
+import Banner from "./Banner";
+//# sourceMappingURL=Banner.stories.d.ts.map

package/dist/components/Banner/Banner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.stories.js"],"names":[],"mappings":";;;;;AAWO,uCAWN;;;;AAGM,0CAyDN;AAEM,sCA+DN;AAEM,0CAYN"}

package/dist/fuselage.development.js

@@ -2462,251 +2462,6 @@ var cssSupports = typeof window !== 'undefined' && typeof window.CSS !== 'undefi
 
 /***/ }),
 
-/***/ "./src/components/AutoComplete/AutoComplete.js":
-/*!*****************************************************!*\
-  !*** ./src/components/AutoComplete/AutoComplete.js ***!
-  \*****************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "AutoComplete": function() { return /* binding */ AutoComplete; }
-/* harmony export */ });
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js");
-/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
-/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
-/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
-
-var _jsxFileName = "/home/runner/work/fuselage/fuselage/packages/fuselage/src/components/AutoComplete/AutoComplete.js",
-  _this = undefined;
-
-
-
-
-
-
-
-
-
-
-var Addon = function Addon(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], Object.assign({
-    "rcx-autocomplete__addon": true
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 16,
-      columnNumber: 26
-    }
-  }));
-};
-var SelectedOptions = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().memo(function (props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_5__["default"], Object.assign({}, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 18,
-      columnNumber: 47
-    }
-  }));
-});
-function AutoComplete(_ref) {
-  var value = _ref.value,
-    filter = _ref.filter,
-    _ref$setFilter = _ref.setFilter,
-    setFilter = _ref$setFilter === void 0 ? function () {} : _ref$setFilter,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? [] : _ref$options,
-    renderItem = _ref.renderItem,
-    _ref$renderSelected = _ref.renderSelected,
-    RenderSelected = _ref$renderSelected === void 0 ? SelectedOptions : _ref$renderSelected,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-    _ref$getLabel = _ref.getLabel,
-    getLabel = _ref$getLabel === void 0 ? function () {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        label = _ref2.label;
-      return label;
-    } : _ref$getLabel,
-    _ref$getValue = _ref.getValue,
-    getValue = _ref$getValue === void 0 ? function (_ref3) {
-      var value = _ref3.value;
-      return value;
-    } : _ref$getValue,
-    renderEmpty = _ref.renderEmpty,
-    placeholder = _ref.placeholder,
-    error = _ref.error,
-    disabled = _ref.disabled;
-  var _useResizeObserver = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useResizeObserver)(),
-    containerRef = _useResizeObserver.ref,
-    borderBoxSize = _useResizeObserver.borderBoxSize;
-  var ref = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(function () {
-      return options.find(function (option) {
-        return getValue(option) === value;
-      });
-    }),
-    _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var selectByKeyboard = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function (_ref4) {
-    var _ref5 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_ref4, 1),
-      value = _ref5[0];
-    setSelected(options.find(function (option) {
-      return getValue(option) === value;
-    }));
-    onChange(value);
-    setFilter('');
-  });
-  var memoizedOptions = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {
-    return options.map(function (_ref6) {
-      var label = _ref6.label,
-        value = _ref6.value;
-      return [value, label];
-    });
-  }, [options]);
-  var _useCursor = (0,_Options__WEBPACK_IMPORTED_MODULE_9__.useCursor)(value, memoizedOptions, selectByKeyboard),
-    _useCursor2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_useCursor, 5),
-    cursor = _useCursor2[0],
-    handleKeyDown = _useCursor2[1],
-    reset = _useCursor2[3],
-    _useCursor2$ = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_useCursor2[4], 3),
-    optionsAreVisible = _useCursor2$[0],
-    hide = _useCursor2$[1],
-    show = _useCursor2$[2];
-  var onSelect = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function (_ref7) {
-    var _ref8 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_ref7, 1),
-      value = _ref8[0];
-    setSelected(options.find(function (option) {
-      return getValue(option) === value;
-    }));
-    onChange(value);
-    setFilter('');
-    hide();
-  });
-  (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(reset, [filter]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], {
-    "rcx-autocomplete": true,
-    ref: containerRef,
-    onClick: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function () {
-      return ref.current.focus();
-    }),
-    flexGrow: 1,
-    className: (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {
-      return [error && 'invalid', disabled && 'disabled'];
-    }, [error, disabled]),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 66,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], {
-    display: "flex",
-    flexGrow: 1,
-    alignItems: "center",
-    flexWrap: "wrap",
-    margin: "neg-x4",
-    role: "listbox",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 76,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_8__["default"], {
-    all: "x4",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 84,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_7__.InputBox.Input, {
-    ref: ref,
-    onChange: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function (e) {
-      return setFilter(e.currentTarget.value);
-    }),
-    onBlur: hide,
-    onFocus: show,
-    onKeyDown: handleKeyDown,
-    placeholder: optionsAreVisible !== _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].HIDDEN || !value ? placeholder : undefined,
-    order: 1,
-    "rcx-input-box--undecorated": true,
-    value: filter,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 85,
-      columnNumber: 11
-    }
-  }), selected && optionsAreVisible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].HIDDEN && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(RenderSelected, {
-    role: "option",
-    value: value,
-    label: getLabel(selected),
-    children: getLabel(selected),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 103,
-      columnNumber: 13
-    }
-  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(Addon, {
-    children: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_6__.Icon, {
-      name: optionsAreVisible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].VISIBLE ? 'cross' : 'magnifier',
-      size: "x20",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 114,
-        columnNumber: 11
-      }
-    }),
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 112,
-      columnNumber: 7
-    }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_PositionAnimated__WEBPACK_IMPORTED_MODULE_10__["default"], {
-    visible: optionsAreVisible,
-    anchor: containerRef,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 124,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Options__WEBPACK_IMPORTED_MODULE_9__.Options, {
-    role: "option",
-    width: borderBoxSize.inlineSize,
-    onSelect: onSelect,
-    renderItem: renderItem,
-    renderEmpty: renderEmpty,
-    cursor: cursor,
-    value: value,
-    options: memoizedOptions,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 125,
-      columnNumber: 9
-    }
-  })));
-}
-
-/***/ }),
-
 /***/ "../memo/dist/esm/index.js":
 /*!*********************************!*\
   !*** ../memo/dist/esm/index.js ***!
@@ -4574,6 +4329,122 @@ __webpack_require__.r(__webpack_exports__);
 }));
 
 
+/***/ }),
+
+/***/ "./src/components/AutoComplete/AutoComplete.tsx":
+/*!******************************************************!*\
+  !*** ./src/components/AutoComplete/AutoComplete.tsx ***!
+  \******************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "AutoComplete": function() { return /* binding */ AutoComplete; }
+/* harmony export */ });
+/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
+/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
+/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
+/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (undefined && undefined.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+// @ts-nocheck
+
+
+
+
+
+
+
+
+
+
+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
+ */
+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 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);
+        setFilter('');
+    });
+    var memoizedOptions = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return options.map(function (_a) {
+        var label = _a.label, value = _a.value;
+        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();
+    });
+    (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' },
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_7__["default"], { all: 'x4' },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_6__.InputBox.Input, { ref: ref, onChange: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (e) {
+                        return setFilter(e.currentTarget.value);
+                    }), 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) })))),
+        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 }))));
+}
+
+
 /***/ }),
 
 /***/ "./src/components/AutoComplete/index.ts":
@@ -4586,7 +4457,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "AutoComplete": function() { return /* reexport safe */ _AutoComplete__WEBPACK_IMPORTED_MODULE_0__.AutoComplete; }
 /* harmony export */ });
-/* harmony import */ var _AutoComplete__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AutoComplete */ "./src/components/AutoComplete/AutoComplete.js");
+/* harmony import */ var _AutoComplete__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AutoComplete */ "./src/components/AutoComplete/AutoComplete.tsx");
 
 
 
@@ -16905,142 +16776,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
 
 /***/ }),
 
-/***/ "../../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js":
-/*!*************************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js ***!
-  \*************************************************************************/
-/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* binding */ _arrayLikeToArray; }
-/* harmony export */ });
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-  return arr2;
-}
-
-/***/ }),
-
-/***/ "../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js":
-/*!***********************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js ***!
-  \***********************************************************************/
-/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* binding */ _arrayWithHoles; }
-/* harmony export */ });
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-/***/ }),
-
-/***/ "../../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js":
-/*!*****************************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js ***!
-  \*****************************************************************************/
-/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* binding */ _iterableToArrayLimit; }
-/* harmony export */ });
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _s, _e;
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-  return _arr;
-}
-
-/***/ }),
-
-/***/ "../../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js":
-/*!************************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js ***!
-  \************************************************************************/
-/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* binding */ _nonIterableRest; }
-/* harmony export */ });
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-/***/ }),
-
-/***/ "../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js":
-/*!**********************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js ***!
-  \**********************************************************************/
-/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* binding */ _slicedToArray; }
-/* harmony export */ });
-/* harmony import */ var _arrayWithHoles_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./arrayWithHoles.js */ "../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js");
-/* harmony import */ var _iterableToArrayLimit_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./iterableToArrayLimit.js */ "../../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js");
-/* harmony import */ var _unsupportedIterableToArray_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./unsupportedIterableToArray.js */ "../../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js");
-/* harmony import */ var _nonIterableRest_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./nonIterableRest.js */ "../../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js");
-
-
-
-
-function _slicedToArray(arr, i) {
-  return (0,_arrayWithHoles_js__WEBPACK_IMPORTED_MODULE_0__["default"])(arr) || (0,_iterableToArrayLimit_js__WEBPACK_IMPORTED_MODULE_1__["default"])(arr, i) || (0,_unsupportedIterableToArray_js__WEBPACK_IMPORTED_MODULE_2__["default"])(arr, i) || (0,_nonIterableRest_js__WEBPACK_IMPORTED_MODULE_3__["default"])();
-}
-
-/***/ }),
-
-/***/ "../../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js":
-/*!***********************************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js ***!
-  \***********************************************************************************/
-/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* binding */ _unsupportedIterableToArray; }
-/* harmony export */ });
-/* harmony import */ var _arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./arrayLikeToArray.js */ "../../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js");
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return (0,_arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__["default"])(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return (0,_arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__["default"])(o, minLen);
-}
-
-/***/ }),
-
 /***/ "../../node_modules/stylis/src/Enum.js":
 /*!*********************************************!*\
   !*** ../../node_modules/stylis/src/Enum.js ***!