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

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

@@ -0,0 +1,122 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../../_virtual/index.js');
+var settings = require('../../../../settings.js');
+var Coachmark = require('./Coachmark.js');
+var CoachmarkBubble = require('./CoachmarkBubble/CoachmarkBubble.js');
+require('./CoachmarkBubble/CoachmarkBubbleHeader.js');
+var ContentHeader = require('./ContentHeader.js');
+var ContentBody = require('./ContentBody.js');
+var cx = require('classnames');
+
+const CoachmarkContent = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    className = '',
+    children,
+    highContrast,
+    dropShadow,
+    ...rest
+  } = props;
+  const coachmarkContentBlockClass = `${Coachmark.blockClass}--coachmark-content`;
+  const contentBodyClass = `${Coachmark.blockClass}--content-body`;
+  const {
+    align,
+    open,
+    setOpen,
+    triggerRef,
+    setContentRef,
+    floating
+  } = React.useContext(Coachmark.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}`);
+        if (contentBody) {
+          const firstFocusable = Array.from(contentBody.querySelectorAll('*')).find(el => el.tabIndex >= 0);
+          firstFocusable?.focus();
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  React.useEffect(() => {
+    const handleOutsideClick = event => {
+      const targetElement = document.getElementById(targetId || '');
+      const bubbleElement = bubbleRef.current;
+      if (bubbleElement && !bubbleElement.contains(event.target) && targetElement && !targetElement.contains(event.target)) {
+        setOpen?.(false);
+      }
+    };
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        setOpen?.(false);
+      }
+    };
+    if (open) {
+      document.addEventListener('click', handleOutsideClick);
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, targetId, setOpen]);
+  React.useEffect(() => {
+    if (open && bubbleRef.current) {
+      const dragContainer = bubbleRef.current.querySelector(`.${settings.pkg.prefix}__bubble`);
+      if (dragContainer instanceof HTMLElement) {
+        setContentRef(dragContainer);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, bubbleRef.current]);
+  return open && /*#__PURE__*/React.createElement("div", {
+    ref: bubbleRef
+  }, /*#__PURE__*/React.createElement(CoachmarkBubble.CoachmarkBubble, _rollupPluginBabelHelpers.extends({
+    className: cx(coachmarkContentBlockClass, className),
+    highContrast: highContrast,
+    dropShadow: dropShadow,
+    align: align,
+    open: open,
+    target: `#${targetId}`,
+    caret: floating
+  }, rest), children));
+});
+CoachmarkContent.Header = ContentHeader.default;
+CoachmarkContent.Body = ContentBody.default;
+CoachmarkContent.propTypes = {
+  /**
+   * This is a required callback that has to return the content to render in the body section.
+   * It can be a single child or an array of children depending on your need
+   */
+  children: index.default.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /**
+   * Specify whether a drop shadow should be rendered on the popover.
+   */
+  dropShadow: index.default.bool,
+  /**
+   * Specify whether the component should be rendered on high-contrast.
+   */
+  highContrast: index.default.bool
+};
+
+exports.default = CoachmarkContent;

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

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2024, 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 React, { ReactNode } from 'react';
+export interface ContentBodyProps {
+    /**
+     * Provide the optional content for header section and will be render after header titles and before progress indicator.
+     * People can make use of this if they want to have custom header.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
+export type EnrichedChildren = {
+    children: ReactNode;
+};
+declare const ContentBody: React.ForwardRefExoticComponent<ContentBodyProps & React.RefAttributes<HTMLDivElement>>;
+export default ContentBody;

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

@@ -0,0 +1,41 @@
+/**
+ * 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';
+
+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');
+
+const ContentBody = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    className = '',
+    children,
+    ...rest
+  } = props;
+  const ContentBodyBlockClass = `${Coachmark.blockClass}--content-body`;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: cx(ContentBodyBlockClass, className)
+  }, children);
+});
+ContentBody.propTypes = {
+  /**
+   * Provide the optional content for header section and will be render after header titles and before progress indicator.
+   * People can make use of this if they want to have custom header.
+   */
+  children: index.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string
+};
+
+exports.default = ContentBody;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ContentHeaderProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Tooltip text and aria label for the Drag button icon.
+     */
+    dragIconDescription?: string;
+    /**
+     * Optional contents of the Coachmark Header.
+     */
+    children?: string;
+}
+declare const ContentHeader: React.ForwardRefExoticComponent<ContentHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ContentHeader;

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

@@ -0,0 +1,93 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
+var React = require('react');
+var index = require('../../../../_virtual/index.js');
+var cx = require('classnames');
+var Coachmark = require('./Coachmark.js');
+require('./CoachmarkBubble/CoachmarkBubble.js');
+var CoachmarkBubbleHeader = require('./CoachmarkBubble/CoachmarkBubbleHeader.js');
+var icons = require('@carbon/react/icons');
+var makeDraggable = require('../../../../global/js/utils/makeDraggable/makeDraggable.js');
+
+const ContentHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    className = '',
+    closeIconDescription,
+    dragIconDescription,
+    children,
+    ...rest
+  } = props;
+  const {
+    setOpen,
+    onClose,
+    contentRef,
+    floating
+  } = React.useContext(Coachmark.CoachmarkContext);
+  const headerRef = React.useRef(null);
+  const dragRef = React.useRef(null);
+  const handleRef = ref || headerRef;
+  const contentHeaderBlockClass = `${Coachmark.blockClass}--content-header`;
+  const closeBubble = () => {
+    onClose?.();
+    setOpen(false);
+  };
+  React.useEffect(() => {
+    if (floating && contentRef && typeof handleRef === 'object' && handleRef !== null && 'current' in handleRef && handleRef.current && dragRef.current) {
+      makeDraggable.makeDraggable({
+        el: contentRef,
+        dragHandle: handleRef.current,
+        focusableDragHandle: dragRef.current
+      });
+    }
+  });
+  return /*#__PURE__*/React.createElement(CoachmarkBubbleHeader.CoachmarkBubbleHeader, _rollupPluginBabelHelpers.extends({
+    ref: handleRef,
+    className: cx(contentHeaderBlockClass, className)
+  }, rest), floating && /*#__PURE__*/React.createElement(react.Button, {
+    kind: "ghost",
+    size: "sm",
+    ref: dragRef,
+    renderIcon: icons.Draggable,
+    iconDescription: dragIconDescription,
+    hasIconOnly: true,
+    className: `${contentHeaderBlockClass}--drag-icon`
+  }), children, /*#__PURE__*/React.createElement(react.Button, {
+    kind: "ghost",
+    size: "sm",
+    renderIcon: icons.Close,
+    iconDescription: closeIconDescription,
+    hasIconOnly: true,
+    onClick: closeBubble
+  }));
+});
+ContentHeader.propTypes = {
+  /**
+   * Optional contents of the Coachmark Header.
+   */
+  children: index.default.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: index.default.string,
+  /**
+   * Tooltip text and aria label for the Drag button icon.
+   */
+  dragIconDescription: index.default.string
+};
+
+exports.default = ContentHeader;

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+export { Coachmark } from './Coachmark';

package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -40,7 +40,6 @@ exports.CoachmarkBeacon = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, devtools.getDevtoolsProps(componentName), {
     role: "tooltip"
   }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
-    tabIndex: 0,
     type: "button"
   }, buttonProps, {
     className: `${blockClass}__target`

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -14,7 +14,7 @@ var context = require('../Coachmark/utils/context.js');
 var CoachmarkOverlay = require('../Coachmark/CoachmarkOverlay.js');
 var CoachmarkTagline = require('../Coachmark/CoachmarkTagline.js');
 var index = require('../../_virtual/index.js');
-var reactDom = require('react-dom');
+var ReactDOM = require('react-dom');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
@@ -151,7 +151,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(CoachmarkTagline.CoachmarkTagline, {
     title: tagline,
     onClose: onClose
-  }), isOpen && portalNode?.current && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }), isOpen && portalNode?.current && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: overlayRef,
     fixedIsVisible: fixedIsVisible,
     kind: enums.COACHMARK_OVERLAY_KIND.FIXED,

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -9,7 +9,7 @@
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var reactDom = require('react-dom');
+var ReactDOM = require('react-dom');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
@@ -210,7 +210,7 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     closeButtonLabel: closeButtonLabel,
     title: title,
     tooltipAlign: tooltipAlign
-  }), portalNode?.current ? /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode?.current) : null));
+  }), portalNode?.current ? /*#__PURE__*/ReactDOM.createPortal(wrappedChildren, portalNode?.current) : null));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -16,7 +16,7 @@ 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 reactDom = require('react-dom');
+var ReactDOM = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
@@ -101,7 +101,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: `${blockClass}__navLinkLabels-text`
     }, label)) : label));
   }
-  return portalNode?.current ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+  return portalNode?.current ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(CoachmarkHeader.CoachmarkHeader, {

package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -193,9 +193,10 @@ const ConditionBuilderContent = _ref => {
       role: 'gridcell',
       'aria-label': addConditionGroupText
     }
-  })), showConditionGroupPreview && /*#__PURE__*/React.createElement(ConditionPreview.default, {
+  })), /*#__PURE__*/React.createElement(ConditionPreview.default, {
     previewType: "newGroup",
     colorIndex: getColorIndex(),
+    className: showConditionGroupPreview ? `${util.blockClass}__visible` : `${util.blockClass}__hidden`,
     group: {
       groupOperator: rootState?.operator,
       id: uuidv4.default()

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

@@ -53,6 +53,11 @@ const ConditionBuilderItem = _ref => {
     statementIdMap[statement.id] = statement.label;
   });
   const [invalidText, addConditionText, addPropertyText, addOperatorText, addValueText, labelText] = useTranslations.useTranslations(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label], statementIdMap);
+  const getCustomOperatorLabel = propertyLabel => {
+    return propertyLabel && config?.operators?.find(operator => {
+      return operator.id === propertyLabel;
+    });
+  };
   const getPropertyDetails = () => {
     const {
       property,
@@ -64,6 +69,12 @@ const ConditionBuilderItem = _ref => {
         isInvalid: true
       };
     }
+    if (rest['data-name'] == 'operatorField' && type == 'custom') {
+      return {
+        isInvalid: false,
+        propertyLabel: getCustomOperatorLabel(label)?.id
+      };
+    }
     const propertyId = rest['data-name'] == 'valueField' && type ? util.getValue(type, label, config) : labelText;
     return {
       isInvalid: false,
@@ -135,11 +146,6 @@ const ConditionBuilderItem = _ref => {
       manageInvalidSelection();
     }
   };
-  const getCustomOperatorLabel = propertyLabel => {
-    return propertyLabel && config?.operators?.find(operator => {
-      return operator.id === propertyLabel;
-    });
-  };
   const getLabel = () => {
     if (config?.operators && rest['data-name'] === 'operatorField') {
       return getCustomOperatorLabel(propertyLabel)?.label ?? addOperatorText;

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

@@ -25,7 +25,7 @@ const ConditionBuilderItemDate = _ref => {
   const DatePickerInputRef = React.useRef(null);
   const [startText, endText] = useTranslations.useTranslations(['startText', 'endText']);
   const [dateFromState, setDateFromState] = React.useState();
-  const dateFormat = config.dateFormat || 'm/d/Y';
+  const dateFormat = config?.dateFormat || 'm/d/Y';
   const {
     conditionBuilderRef
   } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);

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

@@ -26,19 +26,26 @@ const ConditionBuilderItemNumber = _ref => {
       value
     } = _ref2;
     if (value !== '' && !isNaN(value) && checkIfValid(value)) {
-      onChange(`${value} ${config.unit ?? ''}`);
+      onChange(config?.unit ? `${value} ${config.unit}` : String(value));
     } else {
       onChange('INVALID');
     }
   };
   const checkIfValid = value => {
-    if (config.max !== undefined && config.min === undefined && value > config.max) {
+    if (!config) {
+      return true;
+    }
+    const {
+      min,
+      max
+    } = config;
+    if (max !== undefined && min === undefined && value > max) {
       return false;
     }
-    if (config.min !== undefined && config.max === undefined && value < config.min) {
+    if (min !== undefined && max === undefined && value < min) {
       return false;
     }
-    if (config.max !== undefined && config.min !== undefined && (value > config.max || value < config.min)) {
+    if (min !== undefined && max !== undefined && (value < min || value > max)) {
       return false;
     }
     return true;

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

@@ -30,7 +30,7 @@ const ItemOption = _ref => {
   const {
     conditionBuilderRef
   } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
-  const allOptions = config.options;
+  const allOptions = config?.options;
   const [searchValue, setSearchValue] = React.useState('');
   const selection = conditionState.value;
   const filteredItems = searchValue ? allOptions?.filter(opt => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
@@ -97,7 +97,7 @@ const ItemOption = _ref => {
       className: `${util.blockClass}__item-option__option-content`
     }, /*#__PURE__*/React.createElement("span", {
       className: `${util.blockClass}__item-option__option-label`
-    }, Icon && /*#__PURE__*/React.createElement(Icon, null), config.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React.createElement(icons.Checkmark, {
+    }, Icon && /*#__PURE__*/React.createElement(Icon, null), config?.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React.createElement(icons.Checkmark, {
       className: `${util.blockClass}__checkmark`
     })));
   })));

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

@@ -34,7 +34,7 @@ const ItemOptionForValueField = _ref => {
     conditionBuilderRef
   } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
   const contentRef = React.useRef(null);
-  const [allOptions, setAllOptions] = React.useState(config.options);
+  const [allOptions, setAllOptions] = React.useState(config?.options);
   const [searchValue, setSearchValue] = React.useState('');
   const filteredItems = allOptions?.filter(opt => opt.label.toLowerCase().includes(searchValue.toLowerCase()));
   const selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];

package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -51,6 +51,45 @@ const ConditionGroupBuilder = _ref => {
   const [showConditionSubGroupPreview, setShowConditionSubGroupPreview] = React.useState(-1);
   React.useState(false);
   const conditionBuilderContentRef = React.useRef(null);
+  const scrollParentRef = React.useRef(null);
+  React.useEffect(() => {
+    // getting scrollable parent initially
+    if (typeof conditionBuilderRef !== 'function' && conditionBuilderRef?.current) {
+      scrollParentRef.current = getScrollableParent(conditionBuilderRef.current);
+    }
+  }, [conditionBuilderRef]);
+  React.useEffect(() => {
+    // This fix addresses a flickering issue when hovering over "Add Condition" or "Add Subgroup".
+    // On hover, the component inserts a preview element below, ideally pushing the layout downward to create space.
+    // However, if the container is scrolled to the bottom, the layout may instead shift content upward,
+    // breaking the hover chain and causing the preview to flicker.
+    // Fix: When showing the preview on hover, if the scroll position is at the bottom,
+    // scrolling up by 1px prevents layout shift from breaking the hover chain and eliminates flickering.
+
+    const parent = scrollParentRef.current;
+    let atBottom = false;
+    if (parent instanceof Window || parent === document.body || parent === document.documentElement) {
+      atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight;
+    } else if (scrollParentRef.current) {
+      const parent = scrollParentRef.current;
+      atBottom = parent.scrollTop + parent.clientHeight >= parent.scrollHeight;
+    }
+    if ((showConditionPreview || showConditionSubGroupPreview) && atBottom) {
+      scrollParentRef.current?.scrollBy(0, -1);
+    }
+  }, [showConditionPreview, showConditionSubGroupPreview]);
+  const getScrollableParent = element => {
+    while (element && element !== document.body) {
+      const style = getComputedStyle(element);
+      const overflowY = style.overflowY;
+      const isScrollable = overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay';
+      if (isScrollable && element.scrollHeight > element.clientHeight) {
+        return element;
+      }
+      element = element.parentElement;
+    }
+    return window; // fallback to window
+  };
   const onRemoveHandler = (conditionId, evt, conditionIndex) => {
     if (group && group.conditions && group.conditions.length > 1) {
       if (variant == util.HIERARCHICAL_VARIANT) {
@@ -331,10 +370,10 @@ const ConditionGroupBuilder = _ref => {
       },
       hideConditionPreviewHandler: hideConditionPreviewHandler,
       isLastCondition: isLastCondition
-    })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React.createElement(ConditionPreview.default, {
+    })), conditionIndex === showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React.createElement(ConditionPreview.default, {
       previewType: "subGroup",
       group: group
-    }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React.createElement(ConditionPreview.default, {
+    }))), conditionIndex === showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React.createElement(ConditionPreview.default, {
       previewType: "condition",
       group: group
     }))))));

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts

@@ -10,10 +10,12 @@ interface ConditionPreviewProps {
     previewType: 'newGroup' | 'subGroup' | 'condition';
     group: ConditionGroup;
     colorIndex?: number;
+    className?: string;
 }
 declare const ConditionPreview: {
-    ({ previewType, group, colorIndex, }: ConditionPreviewProps): React.JSX.Element;
+    ({ previewType, group, colorIndex, className, }: ConditionPreviewProps): React.JSX.Element;
     propTypes: {
+        className: any;
         /**
          * index of the color for next group
          */

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -23,7 +23,8 @@ const ConditionPreview = _ref => {
   let {
     previewType,
     group,
-    colorIndex
+    colorIndex,
+    className
   } = _ref;
   const [animate, setAnimate] = React.useState(false);
   const [propertyText, operatorText, valueText, ifText] = useTranslations.useTranslations(['valueText', 'operatorText', 'propertyText', 'ifText']);
@@ -43,7 +44,7 @@ const ConditionPreview = _ref => {
     })));
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: cx([`${util.blockClass}__group__row ${util.blockClass}__group-preview `, {
+    className: cx([`${util.blockClass}__group__row ${util.blockClass}__group-preview ${className}`, {
       [`${util.blockClass}__group-preview-animate`]: animate
     }])
   }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -52,7 +53,7 @@ const ConditionPreview = _ref => {
   })), /*#__PURE__*/React.createElement("div", {
     "data-color-index": colorIndex,
     "aria-hidden": true,
-    className: cx([`${util.blockClass}__group ${util.blockClass}__condition-wrapper ${util.blockClass}__group-preview ${util.blockClass}__group-wrapper `, {
+    className: cx([`${util.blockClass}__group  ${util.blockClass}__condition-wrapper ${util.blockClass}__group-preview ${util.blockClass}__group-wrapper ${className}`, {
       [`${util.blockClass}__group-preview-animate`]: animate
     }])
   }, /*#__PURE__*/React.createElement("div", {
@@ -88,6 +89,7 @@ const ConditionPreview = _ref => {
   }), getConditionSection())));
 };
 ConditionPreview.propTypes = {
+  className: index.default.string,
   /**
    * index of the color for next group
    */

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

@@ -19,7 +19,7 @@ const useTranslations = (translationKeys, alterTranslationKeyMap) => {
     if (alterTranslationKeyMap?.[translationKey]) {
       translationKey = alterTranslationKeyMap[translationKey];
     }
-    if (translateWithId?.(translationKey)) {
+    if (translateWithId?.(translationKey) && translateWithId?.(translationKey) !== translationKey) {
       return translateWithId(translationKey);
     } else if (translationObject.translationsObject[translationKey]) {
       return translationObject.translationsObject[translationKey];

package/lib/components/EditInPlace/EditInPlace.js

@@ -181,7 +181,6 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     label: cancelLabel,
     onClick: onCancelHandler,
     kind: "ghost",
-    tabIndex: 0,
     key: "cancel",
     className: `${blockClass}__btn ${blockClass}__btn-cancel`
   }, _Close || (_Close = /*#__PURE__*/React.createElement(icons.Close, {
@@ -192,7 +191,6 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     label: saveLabel,
     onClick: onSaveHandler,
     kind: "ghost",
-    tabIndex: 0,
     key: "save",
     className: `${blockClass}__btn ${blockClass}__btn-save`,
     disabled: !canSave
@@ -207,7 +205,6 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     label: editLabel,
     onClick: onFocusHandler,
     kind: "ghost",
-    tabIndex: 0,
     key: "edit"
   }, _Edit || (_Edit = /*#__PURE__*/React.createElement(icons.Edit, {
     size: 16

package/lib/components/EmptyStates/EmptyState.d.ts

@@ -67,8 +67,8 @@ export interface EmptyStateProps {
      */
     title: string | ReactNode;
     /**
-     * Designates which version of the EmptyState component is being used.
-     * Refer to V2 documentation separately.
+     * **Deprecated:** Designates which version of the EmptyState component is being used. Refer to V2 documentation separately.
+     * @deprecated
      */
     v2?: boolean;
 }