@carbon/ibm-products 2.43.1 → 2.43.2-canary.100

package/es/components/Coachmark/Coachmark.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import cx from 'classnames';
 import PropTypes from '../../node_modules/prop-types/index.js';
@@ -17,8 +17,11 @@ import { useClickOutsideElement, useWindowEvent } from './utils/hooks.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { throttle } from 'lodash';
+import { Popover, PopoverContent } from '@carbon/react';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
+
+var _excluded = ["align", "autoAlign", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "positionTune", "portalTarget", "target", "theme"];
 
-var _excluded = ["align", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "portalTarget", "positionTune", "target", "theme"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark");
 var overlayBlockClass = "".concat(blockClass, "-overlay");
@@ -36,9 +39,10 @@ var defaults = {
  */
 
 var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _document$querySelect;
+  var _positionTune$y, _positionTune$x;
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
+    autoAlign = _ref.autoAlign,
     children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -47,15 +51,14 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$overlayKind = _ref.overlayKind,
     overlayKind = _ref$overlayKind === void 0 ? defaults.overlayKind : _ref$overlayKind,
     overlayRef = _ref.overlayRef,
-    portalTarget = _ref.portalTarget,
     positionTune = _ref.positionTune,
+    portalTarget = _ref.portalTarget,
     target = _ref.target,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isBeacon = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isStacked = overlayKind === COACHMARK_OVERLAY_KIND.STACKED;
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
   var _useState = useState(isStacked),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -79,6 +82,11 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var backupRef = useRef();
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
+  var portalNode = useRef(null);
+  useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   var closeOverlay = function closeOverlay() {
     setIsOpen(false);
   };
@@ -120,6 +128,10 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setShouldResetPosition(true);
     }
   };
+  var overlayPositionStyle = {
+    top: ((_positionTune$y = positionTune === null || positionTune === void 0 ? void 0 : positionTune.y) !== null && _positionTune$y !== void 0 ? _positionTune$y : 0) - 16,
+    left: ((_positionTune$x = positionTune === null || positionTune === void 0 ? void 0 : positionTune.x) !== null && _positionTune$x !== void 0 ? _positionTune$x : 0) - 16
+  };
   var contextValue = {
     buttonProps: {
       'aria-expanded': isOpen,
@@ -135,7 +147,8 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     targetRect: targetRect,
     targetOffset: targetOffset,
     align: align,
-    positionTune: positionTune
+    positionTune: positionTune,
+    isOpen: isOpen
   };
   var handleResize = throttle(function () {
     closeOverlay();
@@ -169,18 +182,35 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
     ref: _coachmarkRef
-  }, rest, getDevtoolsProps(componentName)), target, isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+  }, rest, getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, target, isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
     className: cx(overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
-  }, children),
-  // Default to `document.body` when `portalNode` is `null`
-  portalNode || document.body)));
+  }, children), // Default to `document.body` when `portalNode` is `null`
+  portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)) : /*#__PURE__*/React__default.createElement(Popover, {
+    highContrast: true,
+    caret: true,
+    style: _objectSpread2({
+      position: 'absolute'
+    }, overlayPositionStyle),
+    align: align,
+    autoAlign: autoAlign,
+    open: isOpen
+  }, target, /*#__PURE__*/React__default.createElement(PopoverContent, null, isOpen && /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+    ref: _overlayRef,
+    fixedIsVisible: false,
+    kind: overlayKind,
+    onClose: handleClose,
+    theme: theme,
+    className: cx(overlayClassName, _defineProperty({}, "".concat(overlayBlockClass, "--is-visible"), isOpen))
+  }, children)))));
 });
-var overlayRefType = typeof HTMLElement === 'undefined' ? PropTypes.object : PropTypes.instanceOf(HTMLElement);
+var overlayRefType = typeof HTMLElement === 'undefined' ? PropTypes.object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+PropTypes.instanceOf(HTMLElement);
 
 // Return a placeholder if not released and not enabled by feature flag
 Coachmark = pkg.checkComponentEnabled(Coachmark, componentName);
@@ -199,6 +229,11 @@ Coachmark.propTypes = {
    * @see COACHMARK_ALIGNMENT
    */
   align: PropTypes.oneOf(['bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom', 'top', 'top-left', 'top-right']),
+  /**
+   * Auto aligns the coachmark based on screen boundaries
+   * Applies only to Tooltip Coachmarks.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Coachmark should use a single CoachmarkOverlayElements component as a child.
    * @see CoachmarkOverlayElements
@@ -237,6 +272,7 @@ Coachmark.propTypes = {
   /**
    * Fine tune the position of the target in pixels. Applies only to Beacons.
    */
+  // @ts-ignore
   positionTune: PropTypes.shape({
     x: PropTypes.number,
     y: PropTypes.number

package/es/components/Coachmark/CoachmarkOverlay.js

@@ -55,7 +55,7 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var coachmark = useCoachmark();
   var isBeacon = kind === COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isDraggable = kind === COACHMARK_OVERLAY_KIND.FLOATING;
-  var isVisible = className && className.includes('is-visible');
+  var isVisible = className === null || className === void 0 ? void 0 : className.includes('is-visible');
   var handleKeyPress = function handleKeyPress(event) {
     var shiftKey = event.shiftKey,
       key = event.key;
@@ -163,9 +163,7 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React__default.cloneElement(child, {
       isVisible: isVisible
     });
-  })), isBeacon && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "__caret")
-  }));
+  })));
 });
 function getWindowDimensions() {
   var _window = window,

package/es/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -26,7 +26,6 @@ var defaults = {
  * Use beacon for the target prop of a Coachmark component.
  */
 var CoachmarkBeacon = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _coachmark$positionTu, _coachmark$positionTu2, _coachmark$positionTu3, _coachmark$positionTu4;
   var label = _ref.label,
     className = _ref.className,
     _ref$kind = _ref.kind,
@@ -36,14 +35,9 @@ var CoachmarkBeacon = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   if (!coachmark) {
     return _div || (_div = /*#__PURE__*/React__default.createElement("div", null, "CoachmarkBeacon is to be use exclusively within the target prop of Coachmark"));
   }
-  var overlayPositionStyle = {
-    top: (_coachmark$positionTu = (_coachmark$positionTu2 = coachmark.positionTune) === null || _coachmark$positionTu2 === void 0 ? void 0 : _coachmark$positionTu2.y) !== null && _coachmark$positionTu !== void 0 ? _coachmark$positionTu : 0,
-    left: (_coachmark$positionTu3 = (_coachmark$positionTu4 = coachmark.positionTune) === null || _coachmark$positionTu4 === void 0 ? void 0 : _coachmark$positionTu4.x) !== null && _coachmark$positionTu3 !== void 0 ? _coachmark$positionTu3 : 0
-  };
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "-").concat(kind), className),
-    ref: ref,
-    style: overlayPositionStyle
+    ref: ref
   }, getDevtoolsProps(componentName), {
     role: "tooltip"
   }), /*#__PURE__*/React__default.createElement("button", _extends({

package/es/components/CoachmarkFixed/CoachmarkFixed.js

@@ -16,6 +16,8 @@ import { CoachmarkOverlay } from '../Coachmark/CoachmarkOverlay.js';
 import { CoachmarkTagline } from '../Coachmark/CoachmarkTagline.js';
 import { CoachmarkContext } from '../Coachmark/utils/context.js';
 import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums.js';
+import { useReducedMotion } from 'framer-motion';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "className", "onClose", "portalTarget", "tagline", "theme"];
 // Carbon and package components we use.
@@ -39,7 +41,6 @@ var defaults = {
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
  */
 var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -51,7 +52,7 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var overlayRef = useRef(null);
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
+  var portalNode = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -75,17 +76,19 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState10 = _slicedToArray(_useState9, 2),
     fixedIsVisible = _useState10[0],
     setFixedIsVisible = _useState10[1];
-  var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  var shouldReduceMotion = useReducedMotion();
+  useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   var handleClose = useCallback(function () {
-    console.log('HANDLING CLOSE HERE...');
-    if (prefersReducedMotion.matches) {
+    if (shouldReduceMotion) {
       setIsOpen(false);
     } else {
       setFixedIsVisible(false);
     }
-  }, [prefersReducedMotion.matches]);
+  }, [shouldReduceMotion]);
   var handleTransitionEnd = function handleTransitionEnd(e) {
-    console.log('Here at transition end... ', e.propertyName === 'transform' && !fixedIsVisible);
     if (e.propertyName === 'transform' && !fixedIsVisible) {
       setIsOpen(false);
       onClose();
@@ -164,7 +167,7 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(CoachmarkTagline, {
     title: tagline,
     onClose: onClose
-  }), isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+  }), isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
     ref: overlayRef,
     fixedIsVisible: fixedIsVisible,
     kind: COACHMARK_OVERLAY_KIND.FIXED,
@@ -172,9 +175,8 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     onTransitionEnd: handleTransitionEnd,
     theme: theme,
     className: cx(fixedIsVisible && "".concat(overlayBlockClass, "--is-visible"), overlayBlockClass)
-  }, children),
-  // Default to `document.body` when `portalNode` is `null`
-  portalNode || document.body)));
+  }, children), // Default to `document.body` when `portalNode` is `null`
+  portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/CoachmarkStack/CoachmarkStack.js

@@ -17,6 +17,7 @@ import { CoachmarkStackHome } from './CoachmarkStackHome.js';
 import { CoachmarkTagline } from '../Coachmark/CoachmarkTagline.js';
 import { CoachmarkContext } from '../Coachmark/utils/context.js';
 import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "className", "onClose", "description", "media", "navLinkLabels", "portalTarget", "closeButtonLabel", "tagline", "theme", "title"];
 
@@ -47,7 +48,6 @@ var defaults = {
  * This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
  */
 var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -63,7 +63,11 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
+  var portalNode = useRef();
+  useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   var stackHomeRef = useRef();
   var stackedCoachmarkRefs = useRef([]);
   var _useState = useState(false),
@@ -206,7 +210,7 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     portalTarget: portalTarget,
     closeButtonLabel: closeButtonLabel,
     title: title
-  }), /*#__PURE__*/createPortal(wrappedChildren, portalNode)));
+  }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/createPortal(wrappedChildren, portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -16,6 +16,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { createPortal } from 'react-dom';
 import { CoachmarkHeader } from '../Coachmark/CoachmarkHeader.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia/SteppedAnimatedMedia.js';
 
 var _excluded = ["className", "description", "isOpen", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
@@ -33,7 +34,6 @@ var componentName = 'CoachmarkStackHome';
  * of other Onboarding components.
  */
 var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var className = _ref.className,
     description = _ref.description,
     isOpen = _ref.isOpen,
@@ -57,11 +57,15 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }, 100);
   }, [isOpen]);
+  var portalNode = useRef();
+  useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   if (!navLinkLabels) {
     return pconsole.warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
   }
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref,
     role: "main"
@@ -103,7 +107,7 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setLinkFocusIndex(0);
       _onClose();
     }
-  }, closeButtonLabel))))), portalNode);
+  }, closeButtonLabel))))), portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null;
   function renderNavLink(index, label) {
     var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     return /*#__PURE__*/React__default.createElement("li", {

package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -10,8 +10,7 @@ import React__default, { useContext, useState } from 'react';
 import { Close } from '@carbon/react/icons';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import { blockClass, translateWithId, statementConfig, operatorConfig } from '../ConditionBuilderContext/DataConfigs.js';
-import { ConditionBuilderItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js';
+import { blockClass, statementConfig, operatorConfig } from '../ConditionBuilderContext/DataConfigs.js';
 import cx from 'classnames';
 import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector.js';
 import { ConditionBuilderItemNumber } from '../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js';
@@ -19,11 +18,15 @@ import { ConditionBuilderItemText } from '../ConditionBuilderItem/ConditionBuild
 import { ConditionBuilderItemDate } from '../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
-import { focusThisField } from '../utils/util.js';
+import { checkIsValid, focusThisField } from '../utils/util.js';
 import { ConditionBuilderItemTime } from '../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js';
 import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd.js';
+import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js';
+import { ItemOptionForValueField } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js';
+import { useTranslations } from '../utils/useTranslations.js';
 
 var _div;
+
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
@@ -52,41 +55,46 @@ var ConditionBlock = function ConditionBlock(props) {
     isLastCondition = props.isLastCondition;
   var _useContext = useContext(ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
-    variant = _useContext.variant;
-  //Below possible input types expected for value field.
-  var itemComponents = {
-    option: ConditionBuilderItemOption,
-    text: ConditionBuilderItemText,
-    number: ConditionBuilderItemNumber,
-    date: ConditionBuilderItemDate,
-    time: ConditionBuilderItemTime
-  };
+    variant = _useContext.variant,
+    conditionBuilderRef = _useContext.conditionBuilderRef;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showDeletionPreview = _useState2[0],
     setShowDeletionPreview = _useState2[1];
+  var _useTranslations = useTranslations(['conditionRowText', 'conditionText', 'propertyText', 'operatorText', 'removeConditionText']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 5),
+    conditionRowText = _useTranslations2[0],
+    conditionText = _useTranslations2[1],
+    propertyText = _useTranslations2[2],
+    operatorText = _useTranslations2[3],
+    removeConditionText = _useTranslations2[4];
 
   //filtering the current property to access its properties and config options
   var getCurrentConfig = function getCurrentConfig(property) {
     var _inputConfig$properti, _inputConfig$properti2;
-    return (_inputConfig$properti = (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.filter(function (eachProperty) {
+    return (_inputConfig$properti = (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.find(function (eachProperty) {
       return eachProperty.id == property;
-    })[0]) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
+    })) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
   };
   var _getCurrentConfig = getCurrentConfig(property),
     icon = _getCurrentConfig.icon,
     type = _getCurrentConfig.type,
     config = _getCurrentConfig.config,
     label = _getCurrentConfig.label;
-  var ItemComponent;
-  //   if (type == 'custom') {
-  //     ItemComponent = config.component;
-  //   } else {
-  ItemComponent = property ? itemComponents[type] : null;
-  //}
 
+  //Below possible input types expected for value field.
+  var itemComponents = {
+    text: ConditionBuilderItemText,
+    number: ConditionBuilderItemNumber,
+    date: ConditionBuilderItemDate,
+    time: ConditionBuilderItemTime,
+    option: ItemOptionForValueField,
+    custom: config === null || config === void 0 ? void 0 : config.component,
+    textarea: ConditionBuilderItemText
+  };
+  var ItemComponent = property ? itemComponents[type] : null;
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
-    focusThisField(evt);
+    focusThisField(evt, conditionBuilderRef);
     onStatementChange(v);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
@@ -94,20 +102,22 @@ var ConditionBlock = function ConditionBlock(props) {
       property: newProperty,
       operator: undefined,
       value: '',
-      popoverToOpen: 'operatorField'
+      popoverToOpen: checkIsValid(newProperty) ? 'operatorField' : ''
     }));
   };
   var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
     onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
       operator: newOperator,
       value: undefined,
-      popoverToOpen: 'valueField'
+      popoverToOpen: checkIsValid(newOperator) ? 'valueField' : ''
     }));
   };
-  var onValueChangeHandler = function onValueChangeHandler(newValue) {
-    onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
-      value: newValue,
-      popoverToOpen: ''
+  var onValueChangeHandler = function onValueChangeHandler(newValue, evt) {
+    var currentCondition = _objectSpread2({}, condition);
+    delete currentCondition.popoverToOpen;
+    focusThisField(evt, conditionBuilderRef);
+    onChange(_objectSpread2(_objectSpread2({}, currentCondition), {}, {
+      value: newValue
     }));
   };
   var handleShowDeletionPreview = function handleShowDeletionPreview() {
@@ -117,6 +127,9 @@ var ConditionBlock = function ConditionBlock(props) {
     setShowDeletionPreview(false);
   };
   var getOperators = function getOperators() {
+    if (config !== null && config !== void 0 && config.operators) {
+      return config.operators;
+    }
     return operatorConfig.filter(function (operator) {
       return operator.type.indexOf(type) != -1 || operator.type == 'all';
     });
@@ -128,11 +141,24 @@ var ConditionBlock = function ConditionBlock(props) {
       'aria-setsize': aria.setsize
     } : {};
   };
+  var renderChildren = function renderChildren(popoverRef) {
+    return /*#__PURE__*/React__default.createElement(ItemComponent, {
+      conditionState: {
+        property: property,
+        operator: operator,
+        value: value
+      },
+      onChange: onValueChangeHandler,
+      config: config,
+      "data-name": "valueField",
+      parentRef: popoverRef,
+      type: type
+    });
+  };
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx("".concat(blockClass, "__condition-block"), _defineProperty({}, "".concat(blockClass, "__condition__deletion-preview"), showDeletionPreview), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), variant == 'tree' && !(conditionIndex + 1 >= group.conditions.length)), _defineProperty({}, "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), variant == 'sentence')),
     role: "row",
-    "aria-label": translateWithId('condition_row'),
-    tabIndex: -1
+    "aria-label": conditionRowText
   }, getAriaAttributes()), conjunction ? /*#__PURE__*/React__default.createElement(ConditionConnector, {
     className: "".concat(blockClass, "__gap"),
     operator: conjunction,
@@ -143,74 +169,69 @@ var ConditionBlock = function ConditionBlock(props) {
     role: "gridcell"
   })), isStatement && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     label: group.statement,
-    title: translateWithId('condition'),
+    title: conditionText,
     "data-name": "connectorField",
     popOverClassName: "".concat(blockClass, "__gap"),
     className: "".concat(blockClass, "__statement-button")
-  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+  }, /*#__PURE__*/React__default.createElement(ItemOption, {
     conditionState: {
       value: group.statement,
-      label: translateWithId('condition')
+      label: conditionText
     },
     onChange: onStatementChangeHandler,
     config: {
       options: statementConfig
     }
   })), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
-    label: label,
-    title: translateWithId('property'),
+    label: label !== null && label !== void 0 ? label : condition === null || condition === void 0 ? void 0 : condition.property,
+    title: propertyText,
     renderIcon: icon !== null && icon !== void 0 ? icon : null,
     className: "".concat(blockClass, "__property-field"),
     "data-name": "propertyField",
     condition: condition,
-    type: type
-  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+    type: type,
+    onChange: onPropertyChangeHandler
+  }, /*#__PURE__*/React__default.createElement(ItemOption, {
     conditionState: {
       value: property,
-      label: translateWithId('property')
+      label: propertyText
     },
     onChange: onPropertyChangeHandler,
     config: {
       options: inputConfig.properties
     }
-  })), property && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+  })), checkIsValid(property) && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     label: operator,
-    title: translateWithId('operator'),
+    title: operatorText,
     "data-name": "operatorField",
     condition: condition,
-    type: type
-  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+    type: type,
+    onChange: onOperatorChangeHandler
+  }, /*#__PURE__*/React__default.createElement(ItemOption, {
     config: {
       options: getOperators()
     },
     conditionState: {
       value: operator,
-      label: translateWithId('operator')
+      label: operatorText
     },
     onChange: onOperatorChangeHandler
-  })), property && operator && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+  })), checkIsValid(property) && checkIsValid(operator) && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     label: value,
     type: type,
     title: label,
     showToolTip: true,
     "data-name": "valueField",
     condition: condition,
-    config: config
-  }, /*#__PURE__*/React__default.createElement(ItemComponent, {
-    conditionState: {
-      property: property,
-      operator: operator,
-      value: value
-    },
-    onChange: onValueChangeHandler,
     config: config,
-    "data-name": "valueField"
-  })), /*#__PURE__*/React__default.createElement("span", {
+    onChange: onValueChangeHandler,
+    renderChildren: renderChildren
+  }), /*#__PURE__*/React__default.createElement("span", {
     role: "gridcell",
-    "aria-label": translateWithId('remove_condition')
+    "aria-label": removeConditionText
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
     hideLabel: true,
-    label: translateWithId('remove_condition'),
+    label: removeConditionText,
     onClick: onRemove,
     onMouseEnter: handleShowDeletionPreview,
     onMouseLeave: handleHideDeletionPreview,