@carbon/ibm-products 2.73.1 → 2.74.0-rc.0

package/lib/components/Coachmark/CoachmarkHeader.js

@@ -15,13 +15,13 @@ var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var context = require('./utils/context.js');
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${settings.pkg.prefix}--coachmark-header`;
 const overlayBlockClass = `${settings.pkg.prefix}--coachmark-overlay`;
 const componentName = 'CoachmarkHeader';
 const defaults = {
-  closeIconDescription: 'Close',
   onClose: () => {},
   showCloseButton: true,
   theme: 'light'
@@ -32,13 +32,13 @@ const defaults = {
  */
 exports.CoachmarkHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    closeIconDescription = defaults.closeIconDescription,
     onClose = defaults.onClose,
     showCloseButton = defaults.showCloseButton,
     theme = defaults.theme,
     // Collect any other property values passed in.
     ...rest
   } = _ref;
+  const closeIconDescription = context.useCoachmark()?.closeIconDescription;
   return /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, `${blockClass}__${theme}`),
     ref: ref

package/lib/components/Coachmark/CoachmarkTagline.js

@@ -23,9 +23,9 @@ var _Idea;
 const blockClass = `${settings.pkg.prefix}--coachmark-tagline`;
 const componentName = 'CoachmarkTagline';
 const defaults = {
-  closeIconDescription: 'Close',
   onClose: () => {},
-  theme: 'light'
+  theme: 'light',
+  closeIconDescription: 'Close'
 };
 /**
  * DO NOT USE. This component is for the exclusive use
@@ -40,6 +40,8 @@ exports.CoachmarkTagline = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const coachmark = context.useCoachmark();
+  const contextCloseIconDescription = context.useCoachmark()?.closeIconDescription;
+  const closeIconDesc = closeIconDescription ?? contextCloseIconDescription;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, `${blockClass}__${theme}`, coachmark?.isOpen && `${blockClass}--is-open`),
     ref: ref
@@ -57,7 +59,7 @@ exports.CoachmarkTagline = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     kind: "ghost",
     size: "sm",
     renderIcon: icons.Close,
-    iconDescription: closeIconDescription,
+    iconDescription: closeIconDesc,
     hasIconOnly: true,
     className: `${blockClass}--close-btn`,
     onClick: onClose

package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts

@@ -4,10 +4,9 @@
  * 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 React, { FC, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from 'react';
+import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { CoachmarkContentProps } from './CoachmarkContent';
 import { NewPopoverAlignment } from '@carbon/react';
-export declare const blockClass: string;
 export interface CoachmarkProps {
     /**
      * Provide the contents of the Coachmark.
@@ -17,10 +16,6 @@ export interface CoachmarkProps {
      * Provide an optional class to be applied to the containing node.
      */
     className?: string;
-    /**
-     * The aria label applied to the Coachmark component
-     */
-    ariaLabel?: string;
     /**
      * Specifies whether the component is currently open.
      */
@@ -48,25 +43,9 @@ export interface CoachmarkProps {
 export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkProps & RefAttributes<HTMLDivElement>> & {
     Content: FC<CoachmarkContentProps>;
 };
-interface CoachmarkContextType {
-    onClose?: () => void;
-    open?: boolean;
-    setOpen: (value: boolean) => void;
-    align?: NewPopoverAlignment;
-    triggerRef: RefObject<HTMLElement | null>;
-    position: {
-        x: number;
-        y: number;
-    };
-    contentRef: HTMLElement | null;
-    setContentRef: (value: any) => void;
-    floating?: boolean;
-}
-export declare const CoachmarkContext: React.Context<CoachmarkContextType>;
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  */
 export declare const Coachmark: CoachmarkComponent;
-export {};

package/lib/components/Coachmark/next/Coachmark/Coachmark.js

@@ -12,12 +12,12 @@ var React = require('react');
 var index = require('../../../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../../../global/js/utils/devtools.js');
-var settings = require('../../../../settings.js');
+var context = require('./context.js');
 var CoachmarkContent = require('./CoachmarkContent.js');
 var useIsomorphicEffect = require('../../../../global/js/hooks/useIsomorphicEffect.js');
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-const blockClass = `${settings.pkg.prefix}--coachmark__next`;
+
 const componentName = 'Coachmark';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -33,21 +33,6 @@ const componentName = 'Coachmark';
 
 // Define the type for Coachmark, extending it to include Trigger and Content
 
-const CoachmarkContext = /*#__PURE__*/React.createContext({
-  open: false,
-  setOpen: () => {},
-  align: 'bottom',
-  triggerRef: {
-    current: null
-  },
-  position: {
-    x: 0,
-    y: 0
-  },
-  contentRef: null,
-  setContentRef: value => {},
-  floating: false
-});
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
@@ -57,7 +42,6 @@ const Coachmark = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
     className,
-    ariaLabel,
     onClose,
     align = 'bottom',
     open,
@@ -92,6 +76,12 @@ const Coachmark = /*#__PURE__*/React.forwardRef((props, ref) => {
       triggerRef.current = firstFocusable;
     }
   }, [children]);
+  React.useEffect(() => {
+    const el = triggerRef.current;
+    if (el) {
+      el.setAttribute('aria-expanded', String(!!open));
+    }
+  }, [open]);
   useIsomorphicEffect.useIsomorphicEffect(() => {
     const {
       x = 0,
@@ -110,7 +100,7 @@ const Coachmark = /*#__PURE__*/React.forwardRef((props, ref) => {
       ref.current = node;
     }
   };
-  return /*#__PURE__*/React.createElement(CoachmarkContext.Provider, {
+  return /*#__PURE__*/React.createElement(context.CoachmarkContext.Provider, {
     value: {
       onClose,
       open: currentOpen,
@@ -123,17 +113,16 @@ const Coachmark = /*#__PURE__*/React.forwardRef((props, ref) => {
       floating
     }
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass,
+    className: cx(context.blockClass,
     // Apply the block class to the main HTML element
     className,
     // Apply any supplied class names to the main HTML element.
     {
-      [`${blockClass}--floating`]: floating
+      [`${context.blockClass}--floating`]: floating
     }),
-    "aria-label": ariaLabel,
     ref: setRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--container`
+    className: `${context.blockClass}--container`
   }, children)));
 });
 Coachmark.Content = CoachmarkContent.default;
@@ -150,10 +139,6 @@ Coachmark.propTypes = {
    * Where to render the Coachmark relative to its target.
    */
   align: index.default.string,
-  /**
-   * The aria label applied to the Coachmark component
-   */
-  ariaLabel: index.default.string,
   /**
    * Provide the contents of the CoachmarkV2.
    */
@@ -162,10 +147,6 @@ Coachmark.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
-  /**
-   * Specifies whether the component is currently open.
-   */
-  defaultOpen: index.default.bool,
   /**
    * Specifies whether the component is floating or not.
    */
@@ -174,6 +155,10 @@ Coachmark.propTypes = {
    * Function to call when the close button is clicked.
    */
   onClose: index.default.func,
+  /**
+   * Specifies whether the component is currently open.
+   */
+  open: index.default.bool,
   /**
    * Fine tune the position of the target in pixels. Applies only to Beacons.
    */
@@ -185,5 +170,3 @@ Coachmark.propTypes = {
 };
 
 exports.Coachmark = Coachmark;
-exports.CoachmarkContext = CoachmarkContext;
-exports.blockClass = blockClass;

package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -17,6 +17,7 @@ export interface CoachmarkButtonProps extends ButtonProps<ElementType> {
     onDoubleClick?(): void;
     tabIndex?: number;
     ['aria-expanded']?: boolean;
+    id?: string;
 }
 export interface CoachmarkBeaconProps {
     /**

package/lib/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.js

@@ -15,7 +15,7 @@ var settings = require('../../../../../settings.js');
 var floatingUi_reactDom = require('../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 var floatingUi_dom = require('../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 
-const CoachmarkBubble = /*#__PURE__*/React.forwardRef(props => {
+const CoachmarkBubble = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
     align,
@@ -37,6 +37,9 @@ const CoachmarkBubble = /*#__PURE__*/React.forwardRef(props => {
   React.useLayoutEffect(() => {
     if (target) {
       if (typeof target === 'string') {
+        if (target === '#' || target.trim() === '') {
+          return;
+        }
         targetRef.current = document.querySelector(target);
       } else if ('current' in target) {
         targetRef.current = target.current;
@@ -104,8 +107,16 @@ const CoachmarkBubble = /*#__PURE__*/React.forwardRef(props => {
   if (!target) {
     return null;
   }
+  const mergedRefs = node => {
+    tooltipRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    ref: tooltipRef,
+    ref: mergedRefs,
     className: cx({
       [`${carbonPrefix}--g100`]: theme === 'white' && highContrast || theme === 'g100' && !highContrast,
       [`${carbonPrefix}--g90`]: theme === 'g10' && highContrast || theme === 'g90' && !highContrast,

package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabel
 var React = require('react');
 var index = require('../../../../_virtual/index.js');
 var settings = require('../../../../settings.js');
-var Coachmark = require('./Coachmark.js');
+var context = require('./context.js');
 var CoachmarkBubble = require('./CoachmarkBubble/CoachmarkBubble.js');
 require('./CoachmarkBubble/CoachmarkBubbleHeader.js');
 var ContentHeader = require('./ContentHeader.js');
@@ -28,8 +28,8 @@ const CoachmarkContent = /*#__PURE__*/React.forwardRef((props, ref) => {
     dropShadow,
     ...rest
   } = props;
-  const coachmarkContentBlockClass = `${Coachmark.blockClass}--coachmark-content`;
-  const contentBodyClass = `${Coachmark.blockClass}--content-body`;
+  const coachmarkContentBlockClass = `${context.blockClass}--coachmark-content`;
+  const contentBodyClass = `${context.blockClass}--content-body`;
   const {
     align,
     open,
@@ -37,14 +37,14 @@ const CoachmarkContent = /*#__PURE__*/React.forwardRef((props, ref) => {
     triggerRef,
     setContentRef,
     floating
-  } = React.useContext(Coachmark.CoachmarkContext);
+  } = React.useContext(context.CoachmarkContext);
   const targetId = open ? triggerRef?.current?.id : null;
   const handleRef = React.useRef(null);
   const bubbleRef = ref && typeof ref !== 'function' ? ref : handleRef;
   React.useEffect(() => {
     if (open && bubbleRef.current) {
       requestAnimationFrame(() => {
-        const contentBody = bubbleRef.current.querySelector(`.${contentBodyClass}`);
+        const contentBody = bubbleRef.current?.querySelector(`.${contentBodyClass}`);
         if (contentBody) {
           const firstFocusable = Array.from(contentBody.querySelectorAll('*')).find(el => el.tabIndex >= 0);
           firstFocusable?.focus();

package/lib/components/Coachmark/next/Coachmark/ContentBody.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var index = require('../../../../_virtual/index.js');
 var cx = require('classnames');
-var Coachmark = require('./Coachmark.js');
+var context = require('./context.js');
 
 const ContentBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -20,7 +20,7 @@ const ContentBody = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const ContentBodyBlockClass = `${Coachmark.blockClass}--content-body`;
+  const ContentBodyBlockClass = `${context.blockClass}--content-body`;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: cx(ContentBodyBlockClass, className)

package/lib/components/Coachmark/next/Coachmark/ContentHeader.js

@@ -14,7 +14,7 @@ var react = require('@carbon/react');
 var React = require('react');
 var index = require('../../../../_virtual/index.js');
 var cx = require('classnames');
-var Coachmark = require('./Coachmark.js');
+var context = require('./context.js');
 require('./CoachmarkBubble/CoachmarkBubble.js');
 var CoachmarkBubbleHeader = require('./CoachmarkBubble/CoachmarkBubbleHeader.js');
 var icons = require('@carbon/react/icons');
@@ -33,11 +33,11 @@ const ContentHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClose,
     contentRef,
     floating
-  } = React.useContext(Coachmark.CoachmarkContext);
+  } = React.useContext(context.CoachmarkContext);
   const headerRef = React.useRef(null);
   const dragRef = React.useRef(null);
   const handleRef = ref || headerRef;
-  const contentHeaderBlockClass = `${Coachmark.blockClass}--content-header`;
+  const contentHeaderBlockClass = `${context.blockClass}--content-header`;
   const closeBubble = () => {
     onClose?.();
     setOpen(false);
@@ -49,6 +49,20 @@ const ContentHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
         dragHandle: handleRef.current,
         focusableDragHandle: dragRef.current
       });
+      const onDragStart = () => {
+        if (contentRef) {
+          contentRef.classList.add(`${contentHeaderBlockClass}--is-dragging`);
+          contentRef.setAttribute('aria-label', 'Coachmark is being dragged');
+        }
+      };
+      const onDragEnd = () => {
+        if (contentRef) {
+          contentRef.classList.remove(`${contentHeaderBlockClass}--is-dragging`);
+          contentRef.removeAttribute('aria-label');
+        }
+      };
+      contentRef.addEventListener('dragstart', onDragStart);
+      contentRef.addEventListener('dragend', onDragEnd);
     }
   });
   return /*#__PURE__*/React.createElement(CoachmarkBubbleHeader.CoachmarkBubbleHeader, _rollupPluginBabelHelpers.extends({

package/lib/components/Coachmark/next/Coachmark/context.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 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';
+import { NewPopoverAlignment } from '@carbon/react';
+interface CoachmarkContextType {
+    onClose?: () => void;
+    open?: boolean;
+    setOpen: (value: boolean) => void;
+    align?: NewPopoverAlignment;
+    triggerRef: RefObject<HTMLElement | null>;
+    position: {
+        x: number;
+        y: number;
+    };
+    contentRef: HTMLElement | null;
+    setContentRef: (value: any) => void;
+    floating?: boolean;
+}
+export declare const CoachmarkContext: import("react").Context<CoachmarkContextType>;
+export declare const blockClass: string;
+export {};

package/lib/components/Coachmark/next/Coachmark/context.js

@@ -0,0 +1,31 @@
+/**
+ * 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');
+var settings = require('../../../../settings.js');
+
+const CoachmarkContext = /*#__PURE__*/React.createContext({
+  open: false,
+  setOpen: () => {},
+  align: 'bottom',
+  triggerRef: {
+    current: null
+  },
+  position: {
+    x: 0,
+    y: 0
+  },
+  contentRef: null,
+  setContentRef: value => {},
+  floating: false
+});
+const blockClass = `${settings.pkg.prefix}--coachmark__next`;
+
+exports.CoachmarkContext = CoachmarkContext;
+exports.blockClass = blockClass;

package/lib/components/Coachmark/utils/context.d.ts

@@ -6,7 +6,7 @@
  */
 import { PopoverAlignment } from '@carbon/react';
 import { ButtonProps } from '@carbon/react';
-interface CoachmarkContextType {
+export interface CoachmarkContextType {
     buttonProps: ButtonProps<React.ElementType>;
     closeButtonProps: {
         onClick: () => void;
@@ -22,7 +22,7 @@ interface CoachmarkContextType {
         y: number;
     };
     isOpen: boolean;
+    closeIconDescription?: string;
 }
 export declare const CoachmarkContext: import("react").Context<CoachmarkContextType | null>;
 export declare const useCoachmark: () => CoachmarkContextType | null;
-export {};

package/lib/components/CoachmarkFixed/CoachmarkFixed.d.ts

@@ -37,6 +37,10 @@ export interface CoachmarkFixedProps {
      * Determines the theme of the component.
      */
     theme?: 'light' | 'dark';
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
 }
 /**
  * Fixed coachmarks are used to call out specific functionality or concepts

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -49,6 +49,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     portalTarget,
     tagline = defaults.tagline,
     theme = defaults.theme,
+    closeIconDescription,
     // Collect any other property values passed in.
     ...rest
   } = _ref;
@@ -115,7 +116,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     targetRect: targetRect,
     targetOffset: targetOffset,
     isOpen: isOpen,
-    tacos: 'tacos'
+    closeIconDescription
   };
 
   // instead of toggling on/off,
@@ -184,6 +185,10 @@ exports.CoachmarkFixed.propTypes = {
    * Optional class name for this component.
    */
   className: index.default.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: index.default.string,
   /**
    * Function to call when the Coachmark closes.
    */

package/lib/components/CoachmarkStack/CoachmarkStack.d.ts

@@ -56,6 +56,10 @@ interface CoachmarkStackProps {
      * Label's tooltip position
      */
     tooltipAlign?: TooltipAlignment;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
 }
 /**
  * Stacked coachmarks are used to call out specific functionality or concepts

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -63,6 +63,7 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     theme = defaults.theme,
     title,
     tooltipAlign,
+    closeIconDescription,
     ...rest
   } = _ref;
   const portalNode = React.useRef(null);
@@ -135,7 +136,8 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     closeButtonProps: {
       onClick: () => handleClose(false)
     },
-    isOpen: isOpen
+    isOpen: isOpen,
+    closeIconDescription
   };
   React.useEffect(() => {
     mountedRef.current = true;
@@ -236,6 +238,10 @@ exports.CoachmarkStack.propTypes = {
    * The label for the button that will close the Stack
    */
   closeButtonLabel: index.default.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: index.default.string,
   // Pass through to CoachmarkStackHome
   /**
    * The description of the Coachmark.

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -61,7 +61,8 @@ const ConditionBlock = props => {
   const {
     inputConfig,
     variant,
-    conditionBuilderRef
+    conditionBuilderRef,
+    readOnly
   } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
   const [showDeletionPreview, setShowDeletionPreview] = React.useState(false);
   const [showAllActions, setShowAllActions] = React.useState(false);
@@ -181,7 +182,8 @@ const ConditionBlock = props => {
       config: {
         options: inputConfig?.properties
       },
-      closePopover: closePopover
+      closePopover: closePopover,
+      group: group
     });
   };
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
@@ -209,7 +211,7 @@ const ConditionBlock = props => {
     label: group.statement,
     title: conditionText,
     "data-name": "connectorField",
-    popOverClassName: `${util.blockClass}__gap`,
+    popOverClassName: `${util.blockClass}__gap ${util.blockClass}__connector`,
     className: `${util.blockClass}__statement-button`,
     tabIndex: 0
   }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
@@ -222,7 +224,9 @@ const ConditionBlock = props => {
       options: statementConfig,
       isStatement: true
     }
-  })), /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${util.blockClass}__condition-inner-block`
+  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: label ?? condition?.property,
     title: propertyText,
     renderIcon: icon ?? undefined,
@@ -260,7 +264,7 @@ const ConditionBlock = props => {
     config: config,
     onChange: onValueChangeHandler,
     renderChildren: renderChildren
-  }), /*#__PURE__*/React.createElement("span", {
+  })), !readOnly && /*#__PURE__*/React.createElement("span", {
     role: "gridcell",
     "aria-label": removeConditionText
   }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, {
@@ -275,7 +279,7 @@ const ConditionBlock = props => {
     className: `${util.blockClass}__close-condition`,
     "data-name": "closeCondition",
     wrapperClassName: `${util.blockClass}__close-condition-wrapper`
-  })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
+  })), !readOnly && manageActionButtons(conditionIndex, group.conditions) ? /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
     onClick: () => {
       addConditionHandler?.(conditionIndex);
     },
@@ -289,7 +293,7 @@ const ConditionBlock = props => {
     hideConditionPreviewHandler: hideConditionPreviewHandler,
     className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
     group: group
-  }));
+  }) : null);
 };
 ConditionBlock.propTypes = {
   /**

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -59,6 +59,7 @@ exports.ConditionBuilder = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     translateWithId,
     statementConfigCustom,
     onAddItem,
+    readOnly,
     ...rest
   } = _ref;
   const localRef = React.useRef(null);
@@ -74,14 +75,16 @@ exports.ConditionBuilder = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     translateWithId: translateWithId,
     conditionBuilderRef: conditionBuilderRef,
     statementConfigCustom: statementConfigCustom,
-    onAddItem: onAddItem
+    onAddItem: onAddItem,
+    readOnly: !!readOnly
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(util.blockClass,
     // Apply the block class to the main HTML element
     className,
     // Apply any supplied class names to the main HTML element.
-    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
     {
+      [`${util.blockClass}__readonly`]: readOnly
+    }, {
       // switched classes dependant on props or state
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
@@ -175,6 +178,8 @@ exports.ConditionBuilder.propTypes = {
       type: index.default.oneOf(['text', 'textarea', 'number', 'date', 'option', 'time', 'custom']).isRequired,
       description: index.default.string,
       //will be displayed on hover of property field
+      getIsDisabled: index.default.func,
+      getIsHidden: index.default.func,
       config: index.default.shape({
         options: index.default.arrayOf(index.default.shape({
           id: index.default.string.isRequired,
@@ -199,6 +204,10 @@ exports.ConditionBuilder.propTypes = {
    * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
    */
   popOverSearchThreshold: index.default.number.isRequired,
+  /**
+   * Whether the conditionBuilder should be readOnly
+   */
+  readOnly: index.default.bool,
   /**
    * Provide a label to the button that starts condition builder
    */