@rocket.chat/fuselage 0.38.0 → 0.38.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.38.1
+
+### Patch Changes
+
+- [#1222](https://github.com/RocketChat/fuselage/pull/1222) [`ab9e4bf83`](https://github.com/RocketChat/fuselage/commit/ab9e4bf83d01cffb11b3ab803838770040bd2f2a) Thanks [@yash-rajpal](https://github.com/yash-rajpal)! - Handle `onBlur` prop on AutoComplete
+
 ## 0.38.0
 
 ### Minor Changes

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

@@ -17,6 +17,6 @@ type AutoCompleteProps = {
     disabled?: boolean;
     multiple?: boolean;
 } & Omit<AllHTMLAttributes<HTMLInputElement>, 'onChange'>;
-export declare function AutoComplete({ value, filter, setFilter, options, renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, ...props }: AutoCompleteProps): ReactElement;
+export declare function AutoComplete({ value, filter, setFilter, options, renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, onBlur: onBlurAction, ...props }: 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,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,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,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,YAAY,CA0IlC"}
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../src/components/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AAKA,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,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,CA+IlC"}

package/dist/fuselage.development.js

@@ -1209,10 +1209,10 @@ var getSelected = function (value, options) {
         : 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, 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, props = __rest(_a, ["value", "filter", "setFilter", "options", "renderItem", "renderSelected", "onChange", "renderEmpty", "placeholder", "error", "disabled", "multiple"]);
+    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, _c = _a.onBlur, onBlurAction = _c === void 0 ? function () { } : _c, props = __rest(_a, ["value", "filter", "setFilter", "options", "renderItem", "renderSelected", "onChange", "renderEmpty", "placeholder", "error", "disabled", "multiple", "onBlur"]);
     var ref = (0, react_1.useRef)();
-    var _c = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _c.ref, borderBoxSize = _c.borderBoxSize;
-    var _d = __read((0, react_1.useState)(function () { return getSelected(value, options) || []; }), 2), selected = _d[0], setSelected = _d[1];
+    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];
     var handleSelect = (0, fuselage_hooks_1.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; })) {
@@ -1243,14 +1243,18 @@ function AutoComplete(_a) {
         var value = _a.value, label = _a.label;
         return [value, label];
     }); }, [options]);
-    var _e = __read((0, Options_1.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];
+    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 handleOnBlur = (0, fuselage_hooks_1.useMutableCallback)(function (event) {
+        hide();
+        onBlurAction(event);
+    });
     (0, react_1.useEffect)(reset, [filter]);
     return (react_1.default.createElement(Box_1.default, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useMutableCallback)(function () { return ref.current.focus(); }), flexGrow: 1, className: (0, react_1.useMemo)(function () { return [error && 'invalid', disabled && 'disabled']; }, [error, disabled]) },
         react_1.default.createElement(Box_1.default, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group' },
             react_1.default.createElement(Margins_1.default, { all: 'x4' },
                 react_1.default.createElement(InputBox_1.InputBox.Input, __assign({ ref: ref, onChange: (0, fuselage_hooks_1.useMutableCallback)(function (e) {
                         return setFilter(e.currentTarget.value);
-                    }), onBlur: hide, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible !== AnimatedVisibility_1.default.HIDDEN || !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 }, props)),
                 (selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&