@carbon/ibm-products 2.72.0-rc.0 → 2.72.0

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -16,6 +16,7 @@ import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBui
 import { handleKeyDownForPopover } from '../utils/handleKeyboardEvents.js';
 import { checkForMultiSelectOperator, blockClass, getValue } from '../utils/util.js';
 import { translationsObject } from '../ConditionBuilderContext/translationObject.js';
+import { useEvent } from '../utils/useEvent.js';
 
 const ConditionBuilderItem = _ref => {
   let {
@@ -120,6 +121,24 @@ const ConditionBuilderItem = _ref => {
       }
     }
   }, [popoverRef, open]);
+
+  //This code is added to address the issue in ComposeModal, where popovers are not getting closed on outside click(#18872)
+  //This is added as a work around to unblock users to use conditionBuilder in Tearsheets or Compose modal
+  useEvent(popoverRef, 'focusout', event => {
+    const focusEvent = event;
+    const relatedTarget = focusEvent.relatedTarget;
+    const popoverEl = popoverRef.current;
+    if (!popoverEl) {
+      return;
+    }
+    const focusLeftPopover = !popoverEl.contains(relatedTarget);
+    const targetInsidePopover = popoverEl.contains(focusEvent.target);
+    const targetEl = focusEvent.target;
+    const focusMovedToDatePicker = targetEl?.closest('.flatpickr-calendar');
+    if ((focusLeftPopover || !targetInsidePopover) && !focusMovedToDatePicker) {
+      closePopover();
+    }
+  });
   const manageInvalidSelection = () => {
     //when the user didn't select any value , we need to show as incomplete
     if (rest['data-name'] === 'propertyField' && !condition?.property || rest['data-name'] === 'operatorField' && !condition?.operator || rest['data-name'] === 'valueField' && !condition?.value) {

package/es/components/ConditionBuilder/utils/useEvent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { RefObject } from 'react';
+export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | RefObject<Element | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;

package/es/components/ConditionBuilder/utils/useEvent.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useRef, useEffect } from 'react';
+
+const useEvent = (elementOrRef, eventName, callback) => {
+  const savedCallback = useRef(null);
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
+    if (!element) {
+      return;
+    }
+    const handler = event => {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    };
+    element.addEventListener(eventName, handler);
+    return () => {
+      element.removeEventListener(eventName, handler);
+    };
+  }, [elementOrRef, eventName]);
+};
+
+export { useEvent };

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -18,6 +18,7 @@ var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuil
 var handleKeyboardEvents = require('../utils/handleKeyboardEvents.js');
 var util = require('../utils/util.js');
 var translationObject = require('../ConditionBuilderContext/translationObject.js');
+var useEvent = require('../utils/useEvent.js');
 
 const ConditionBuilderItem = _ref => {
   let {
@@ -122,6 +123,24 @@ const ConditionBuilderItem = _ref => {
       }
     }
   }, [popoverRef, open]);
+
+  //This code is added to address the issue in ComposeModal, where popovers are not getting closed on outside click(#18872)
+  //This is added as a work around to unblock users to use conditionBuilder in Tearsheets or Compose modal
+  useEvent.useEvent(popoverRef, 'focusout', event => {
+    const focusEvent = event;
+    const relatedTarget = focusEvent.relatedTarget;
+    const popoverEl = popoverRef.current;
+    if (!popoverEl) {
+      return;
+    }
+    const focusLeftPopover = !popoverEl.contains(relatedTarget);
+    const targetInsidePopover = popoverEl.contains(focusEvent.target);
+    const targetEl = focusEvent.target;
+    const focusMovedToDatePicker = targetEl?.closest('.flatpickr-calendar');
+    if ((focusLeftPopover || !targetInsidePopover) && !focusMovedToDatePicker) {
+      closePopover();
+    }
+  });
   const manageInvalidSelection = () => {
     //when the user didn't select any value , we need to show as incomplete
     if (rest['data-name'] === 'propertyField' && !condition?.property || rest['data-name'] === 'operatorField' && !condition?.operator || rest['data-name'] === 'valueField' && !condition?.value) {

package/lib/components/ConditionBuilder/utils/useEvent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { RefObject } from 'react';
+export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | RefObject<Element | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;

package/lib/components/ConditionBuilder/utils/useEvent.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var React = require('react');
+
+const useEvent = (elementOrRef, eventName, callback) => {
+  const savedCallback = React.useRef(null);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  React.useEffect(() => {
+    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
+    if (!element) {
+      return;
+    }
+    const handler = event => {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    };
+    element.addEventListener(eventName, handler);
+    return () => {
+      element.removeEventListener(eventName, handler);
+    };
+  }, [elementOrRef, eventName]);
+};
+
+exports.useEvent = useEvent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.72.0-rc.0",
+  "version": "2.72.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "@storybook/react-vite": "^9.0.13",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.30.0-rc.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.30.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -90,7 +90,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.31.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.31.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all": "^4.1.5",
@@ -109,7 +109,7 @@
     "@babel/runtime": "^7.26.10",
     "@carbon-labs/react-resizer": "^0.5.0",
     "@carbon/feature-flags": "^0.28.1",
-    "@carbon/ibm-products-styles": "^2.68.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.68.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.7.0",
     "@carbon/utilities-react": "0.10.0",
@@ -131,5 +131,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "844a483091e668abe326d27da86108ec05be8860"
+  "gitHead": "996fe987dd30d6c6704e0d48079ec3346f58cd18"
 }