@rocket.chat/fuselage 0.37.1 → 0.38.1

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 &&
@@ -4380,6 +4384,45 @@ var FieldLabel = function (props) {
 exports.FieldLabel = FieldLabel;
 
 
+/***/ }),
+
+/***/ "./src/components/Field/FieldLabelInfo.tsx":
+/*!*************************************************!*\
+  !*** ./src/components/Field/FieldLabelInfo.tsx ***!
+  \*************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __assign = (this && this.__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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.FieldLabelInfo = void 0;
+var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+var WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
+var LabelInfo_1 = __webpack_require__(/*! ../Label/LabelInfo */ "./src/components/Label/LabelInfo.tsx");
+var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
+var FieldLabelInfo = function (props) {
+    var component = react_1.default.createElement(LabelInfo_1.LabelInfo, __assign({}, props));
+    if (true) {
+        return (react_1.default.createElement(WithErrorWrapper_1.default, { context: Field_1.FieldContext, parentComponent: 'Field', componentName: exports.FieldLabelInfo.name }, component));
+    }
+    return component;
+};
+exports.FieldLabelInfo = FieldLabelInfo;
+
+
 /***/ }),
 
 /***/ "./src/components/Field/FieldLink.tsx":
@@ -4468,7 +4511,7 @@ exports.FieldRow = FieldRow;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.FieldRow = exports.FieldLink = exports.FieldLabel = exports.FieldHint = exports.FieldError = exports.FieldDescription = exports.Field = void 0;
+exports.FieldRow = exports.FieldLink = exports.FieldLabelInfo = exports.FieldLabel = exports.FieldHint = exports.FieldError = exports.FieldDescription = exports.Field = void 0;
 var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
 Object.defineProperty(exports, "Field", ({ enumerable: true, get: function () { return Field_1.Field; } }));
 var FieldDescription_1 = __webpack_require__(/*! ./FieldDescription */ "./src/components/Field/FieldDescription.tsx");
@@ -4479,6 +4522,8 @@ var FieldHint_1 = __webpack_require__(/*! ./FieldHint */ "./src/components/Field
 Object.defineProperty(exports, "FieldHint", ({ enumerable: true, get: function () { return FieldHint_1.FieldHint; } }));
 var FieldLabel_1 = __webpack_require__(/*! ./FieldLabel */ "./src/components/Field/FieldLabel.tsx");
 Object.defineProperty(exports, "FieldLabel", ({ enumerable: true, get: function () { return FieldLabel_1.FieldLabel; } }));
+var FieldLabelInfo_1 = __webpack_require__(/*! ./FieldLabelInfo */ "./src/components/Field/FieldLabelInfo.tsx");
+Object.defineProperty(exports, "FieldLabelInfo", ({ enumerable: true, get: function () { return FieldLabelInfo_1.FieldLabelInfo; } }));
 var FieldLink_1 = __webpack_require__(/*! ./FieldLink */ "./src/components/Field/FieldLink.tsx");
 Object.defineProperty(exports, "FieldLink", ({ enumerable: true, get: function () { return FieldLink_1.FieldLink; } }));
 var FieldRow_1 = __webpack_require__(/*! ./FieldRow */ "./src/components/Field/FieldRow.tsx");
@@ -5502,6 +5547,54 @@ function Label(_a) {
 exports.Label = Label;
 
 
+/***/ }),
+
+/***/ "./src/components/Label/LabelInfo.tsx":
+/*!********************************************!*\
+  !*** ./src/components/Label/LabelInfo.tsx ***!
+  \********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __assign = (this && this.__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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.LabelInfo = void 0;
+var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box/Box */ "./src/components/Box/Box.tsx"));
+var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+var LabelInfo = function (_a) {
+    var title = _a.title, id = _a.id, props = __rest(_a, ["title", "id"]);
+    return (react_1.default.createElement(Box_1.default, { is: 'span', mi: 2, "rcx-label__info": true },
+        react_1.default.createElement("span", { hidden: true, id: id }, title),
+        react_1.default.createElement(Icon_1.Icon, __assign({}, props, { name: 'info-circled', title: title }))));
+};
+exports.LabelInfo = LabelInfo;
+
+
 /***/ }),
 
 /***/ "./src/components/Label/index.tsx":