@torq-north/react-tools 1.4.6 → 1.4.7

package/dist/index.es.js

@@ -480,7 +480,18 @@ function SelectFormField(_a) {
                 var _a;
                 setIsFocused(false);
                 (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
-            } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), (hasEndAdornment && {
+            } }), select: __assign(__assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { onClose: function (e) {
+                var _a, _b;
+                typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === "function"
+                    ? undefined
+                    : (_b = (_a = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                //When opening a select and then moving the mouse away, the input does not register as
+                // being unhovered. We can fudge this by setting the hover state to false when the options
+                // menu is closed. If the mouse is still over the input when the menu is closed, the hover state
+                // will be set to true automatically by the onMouseEnter event handler (and the focus state is
+                // always true the whole time so the clear button won't flicker)
+                setIsMousedOver(false);
+            } }), (hasEndAdornment && {
             endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable &&
                         (isMousedOver || isFocused) &&
                         value != null &&
@@ -531,7 +542,18 @@ function MultiSelectFormField(_a) {
                 var _a;
                 setIsFocused(false);
                 (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
-            } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable && (isMousedOver || isFocused) && (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsx(IconButton, { size: "small", onClick: function () { return onChange([]); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })), multiple: true, renderValue: function (selected) { return (jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: selected.map(function (s, index) {
+            } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { onClose: function (e) {
+                var _a, _b;
+                typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === "function"
+                    ? undefined
+                    : (_b = (_a = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                //When opening a select and then moving the mouse away, the input does not register as
+                // being unhovered. We can fudge this by setting the hover state to false when the options
+                // menu is closed. If the mouse is still over the input when the menu is closed, the hover state
+                // will be set to true automatically by the onMouseEnter event handler (and the focus state is
+                // always true the whole time so the clear button won't flicker)
+                setIsMousedOver(false);
+            }, endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable && (isMousedOver || isFocused) && (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsx(IconButton, { size: "small", onClick: function () { return onChange([]); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })), multiple: true, renderValue: function (selected) { return (jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: selected.map(function (s, index) {
                     var _a;
                     return (jsxs(React.Fragment, { children: [index > 0 && ", ", (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"] }, s));
                 }) })); } }) });