carbon-react 142.0.2 → 142.0.4

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -297,6 +297,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     if (onClick) {
       onClick(event);
     }
+    setOpen(true);
   }
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;

package/esm/components/select/multi-select/multi-select.component.js

@@ -66,6 +66,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const isClickTriggeredBySelect = useRef(false);
   const isMouseDownReported = useRef(false);
   const isMouseDownOnInput = useRef(false);
+  const isOpenedByFocus = useRef(false);
   const isControlled = useRef(value !== undefined);
   const [textboxRef, setTextboxRef] = useState();
   const [isOpen, setOpenState] = useState(false);
@@ -271,6 +272,17 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     if (onClick) {
       onClick(event);
     }
+    if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
+      if (isOpen) {
+        setFilterText("");
+        setOpenState(false);
+        return;
+      }
+      onOpen?.();
+      setOpenState(true);
+    } else {
+      isOpenedByFocus.current = false;
+    }
   }
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;
@@ -329,8 +341,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
             isInputFocused.current = true;
           }
           if (isMouseDownReported.current && !isMouseDownOnInput.current) {
+            isOpenedByFocus.current = false;
             return false;
           }
+          if (isMouseDownOnInput.current) {
+            isOpenedByFocus.current = true;
+          }
           return true;
         });
       });

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -13,6 +13,7 @@ import { InputGroupContext } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import Logger from "../../__internal__/utils/logger";
 let deprecateUncontrolledWarnTriggered = false;
+const isBlurBlockedDeprecateWarnTriggered = false;
 const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
@@ -145,9 +146,13 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const handleOnBlur = ev => {
     ev.preventDefault();
-    if (!blurBlocked && onBlur) {
-      onBlur(ev);
-    }
+    setTimeout(() => {
+      const hasBlurred = !gridItemRefs?.current?.find(colorRef => colorRef === document.activeElement);
+      /* istanbul ignore else */
+      if (onBlur && hasBlurred && !blurBlocked) {
+        onBlur(ev);
+      }
+    }, 5);
   };
   const handleOnMouseDown = ev => {
     setIsBlurBlocked(true);
@@ -177,6 +182,10 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!isBlurBlockedDeprecateWarnTriggered && isBlurBlocked) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate(`The 'isBlurBlocked' prop in ${SimpleColorPicker.displayName} is deprecated and support will soon be removed.`);
+  }
   return /*#__PURE__*/React.createElement(Fieldset, _extends({
     role: "radiogroup",
     legend: legend,

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -306,6 +306,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     if (onClick) {
       onClick(event);
     }
+    setOpen(true);
   }
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;

package/lib/components/select/multi-select/multi-select.component.js

@@ -75,6 +75,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   const isClickTriggeredBySelect = (0, _react.useRef)(false);
   const isMouseDownReported = (0, _react.useRef)(false);
   const isMouseDownOnInput = (0, _react.useRef)(false);
+  const isOpenedByFocus = (0, _react.useRef)(false);
   const isControlled = (0, _react.useRef)(value !== undefined);
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
@@ -280,6 +281,17 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     if (onClick) {
       onClick(event);
     }
+    if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
+      if (isOpen) {
+        setFilterText("");
+        setOpenState(false);
+        return;
+      }
+      onOpen?.();
+      setOpenState(true);
+    } else {
+      isOpenedByFocus.current = false;
+    }
   }
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;
@@ -338,8 +350,12 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
             isInputFocused.current = true;
           }
           if (isMouseDownReported.current && !isMouseDownOnInput.current) {
+            isOpenedByFocus.current = false;
             return false;
           }
+          if (isMouseDownOnInput.current) {
+            isOpenedByFocus.current = true;
+          }
           return true;
         });
       });

package/lib/components/simple-color-picker/simple-color-picker.component.js

@@ -22,6 +22,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
+const isBlurBlockedDeprecateWarnTriggered = false;
 const SimpleColorPicker = exports.SimpleColorPicker = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     children,
@@ -154,9 +155,13 @@ const SimpleColorPicker = exports.SimpleColorPicker = /*#__PURE__*/_react.defaul
   });
   const handleOnBlur = ev => {
     ev.preventDefault();
-    if (!blurBlocked && onBlur) {
-      onBlur(ev);
-    }
+    setTimeout(() => {
+      const hasBlurred = !gridItemRefs?.current?.find(colorRef => colorRef === document.activeElement);
+      /* istanbul ignore else */
+      if (onBlur && hasBlurred && !blurBlocked) {
+        onBlur(ev);
+      }
+    }, 5);
   };
   const handleOnMouseDown = ev => {
     setIsBlurBlocked(true);
@@ -186,6 +191,10 @@ const SimpleColorPicker = exports.SimpleColorPicker = /*#__PURE__*/_react.defaul
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!isBlurBlockedDeprecateWarnTriggered && isBlurBlocked) {
+    deprecateUncontrolledWarnTriggered = true;
+    _logger.default.deprecate(`The 'isBlurBlocked' prop in ${SimpleColorPicker.displayName} is deprecated and support will soon be removed.`);
+  }
   return /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     role: "radiogroup",
     legend: legend,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.0.2",
+  "version": "142.0.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",