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

package/es/settings.d.ts

@@ -25,6 +25,7 @@ export const pkg: {
         ErrorEmptyState: boolean;
         ExportModal: boolean;
         ExpressiveCard: boolean;
+        FullPageError: boolean;
         HTTPError403: boolean;
         HTTPError404: boolean;
         HTTPErrorOther: boolean;
@@ -66,7 +67,6 @@ export const pkg: {
         BigNumbers: boolean;
         TruncatedList: boolean;
         DelimitedList: boolean;
-        FullPageError: boolean;
         ScrollGradient: boolean;
         StringFormatter: boolean;
         StatusIndicator: boolean;

package/lib/components/ActionBar/ActionBarItem.js

@@ -43,7 +43,7 @@ exports.ActionBarItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     className: cx__default["default"](blockClass, className),
     kind: 'ghost',
     size: 'md',
-    align: 'bottom-right',
+    align: 'bottom-end',
     type: 'button',
     label: label
   }), Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, null) : null);

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

@@ -12,6 +12,11 @@ interface CoachmarkProps {
      * @see COACHMARK_ALIGNMENT
      */
     align?: '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?: boolean;
     /**
      * Coachmark should use a single CoachmarkOverlayElements component as a child.
      * @see CoachmarkOverlayElements
@@ -51,7 +56,7 @@ interface CoachmarkProps {
     positionTune?: {
         x: number;
         y: number;
-    } | object;
+    };
     /**
      * The optional button or beacon that the user will click to show the Coachmark.
      */

package/lib/components/Coachmark/Coachmark.js

@@ -21,13 +21,16 @@ var hooks = require('./utils/hooks.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var lodash = require('lodash');
+var react = require('@carbon/react');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["align", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "portalTarget", "positionTune", "target", "theme"];
+var _excluded = ["align", "autoAlign", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "positionTune", "portalTarget", "target", "theme"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark");
 var overlayBlockClass = "".concat(blockClass, "-overlay");
@@ -45,9 +48,10 @@ var defaults = {
  */
 
 exports.Coachmark = /*#__PURE__*/React.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,
@@ -56,15 +60,14 @@ exports.Coachmark = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var isBeacon = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isStacked = overlayKind === enums.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 = React.useState(isStacked),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -88,6 +91,11 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var backupRef = React.useRef();
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
+  var portalNode = React.useRef(null);
+  useIsomorphicEffect.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);
   };
@@ -129,6 +137,10 @@ exports.Coachmark = /*#__PURE__*/React.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,
@@ -144,7 +156,8 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     targetRect: targetRect,
     targetOffset: targetOffset,
     align: align,
-    positionTune: positionTune
+    positionTune: positionTune,
+    isOpen: isOpen
   };
   var handleResize = lodash.throttle(function () {
     closeOverlay();
@@ -178,18 +191,35 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](blockClass, "".concat(blockClass, "__").concat(theme), className),
     ref: _coachmarkRef
-  }, rest, devtools.getDevtoolsProps(componentName)), target, isOpen && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }, rest, devtools.getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, target, isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
     className: cx__default["default"](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["default"].createElement(react.Popover, {
+    highContrast: true,
+    caret: true,
+    style: _rollupPluginBabelHelpers.objectSpread2({
+      position: 'absolute'
+    }, overlayPositionStyle),
+    align: align,
+    autoAlign: autoAlign,
+    open: isOpen
+  }, target, /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, isOpen && /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
+    ref: _overlayRef,
+    fixedIsVisible: false,
+    kind: overlayKind,
+    onClose: handleClose,
+    theme: theme,
+    className: cx__default["default"](overlayClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(overlayBlockClass, "--is-visible"), isOpen))
+  }, children)))));
 });
-var overlayRefType = typeof HTMLElement === 'undefined' ? index["default"].object : index["default"].instanceOf(HTMLElement);
+var overlayRefType = typeof HTMLElement === 'undefined' ? index["default"].object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+index["default"].instanceOf(HTMLElement);
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.Coachmark = settings.pkg.checkComponentEnabled(exports.Coachmark, componentName);
@@ -208,6 +238,11 @@ exports.Coachmark.propTypes = {
    * @see COACHMARK_ALIGNMENT
    */
   align: index["default"].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: index["default"].bool,
   /**
    * Coachmark should use a single CoachmarkOverlayElements component as a child.
    * @see CoachmarkOverlayElements
@@ -246,6 +281,7 @@ exports.Coachmark.propTypes = {
   /**
    * Fine tune the position of the target in pixels. Applies only to Beacons.
    */
+  // @ts-ignore
   positionTune: index["default"].shape({
     x: index["default"].number,
     y: index["default"].number

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -64,7 +64,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var coachmark = context.useCoachmark();
   var isBeacon = kind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isDraggable = kind === enums.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;
@@ -172,9 +172,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React__default["default"].cloneElement(child, {
       isVisible: isVisible
     });
-  })), isBeacon && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(blockClass, "__caret")
-  }));
+  })));
 });
 function getWindowDimensions() {
   var _window = window,

package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -35,7 +35,6 @@ var defaults = {
  * Use beacon for the target prop of a Coachmark component.
  */
 exports.CoachmarkBeacon = /*#__PURE__*/React__default["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,
@@ -45,14 +44,9 @@ exports.CoachmarkBeacon = /*#__PURE__*/React__default["default"].forwardRef(func
   if (!coachmark) {
     return _div || (_div = /*#__PURE__*/React__default["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["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, "".concat(blockClass, "-").concat(kind), className),
-    ref: ref,
-    style: overlayPositionStyle
+    ref: ref
   }, devtools.getDevtoolsProps(componentName), {
     role: "tooltip"
   }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -20,6 +20,8 @@ var CoachmarkOverlay = require('../Coachmark/CoachmarkOverlay.js');
 var CoachmarkTagline = require('../Coachmark/CoachmarkTagline.js');
 var context = require('../Coachmark/utils/context.js');
 var enums = require('../Coachmark/utils/enums.js');
+var framerMotion = require('framer-motion');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,7 +50,6 @@ var defaults = {
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
  */
 exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -60,7 +61,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var overlayRef = React.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 = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -84,17 +85,19 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
     fixedIsVisible = _useState10[0],
     setFixedIsVisible = _useState10[1];
-  var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  var shouldReduceMotion = framerMotion.useReducedMotion();
+  useIsomorphicEffect.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 = React.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();
@@ -173,7 +176,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(CoachmarkTagline.CoachmarkTagline, {
     title: tagline,
     onClose: onClose
-  }), isOpen && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }), isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: overlayRef,
     fixedIsVisible: fixedIsVisible,
     kind: enums.COACHMARK_OVERLAY_KIND.FIXED,
@@ -181,9 +184,8 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     onTransitionEnd: handleTransitionEnd,
     theme: theme,
     className: cx__default["default"](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/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -21,6 +21,7 @@ var CoachmarkStackHome = require('./CoachmarkStackHome.js');
 var CoachmarkTagline = require('../Coachmark/CoachmarkTagline.js');
 var context = require('../Coachmark/utils/context.js');
 var enums = require('../Coachmark/utils/enums.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -56,7 +57,6 @@ var defaults = {
  * This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
  */
 exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -72,7 +72,11 @@ exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(funct
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.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 = React.useRef();
+  useIsomorphicEffect.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 = React.useRef();
   var stackedCoachmarkRefs = React.useRef([]);
   var _useState = React.useState(false),
@@ -215,7 +219,7 @@ exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(funct
     portalTarget: portalTarget,
     closeButtonLabel: closeButtonLabel,
     title: title
-  }), /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode)));
+  }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.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/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -20,6 +20,7 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var reactDom = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -42,7 +43,6 @@ var componentName = 'CoachmarkStackHome';
  * of other Onboarding components.
  */
 exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var className = _ref.className,
     description = _ref.description,
     isOpen = _ref.isOpen,
@@ -66,11 +66,15 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       }
     }, 100);
   }, [isOpen]);
+  var portalNode = React.useRef();
+  useIsomorphicEffect.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["default"].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__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className),
     ref: ref,
     role: "main"
@@ -112,7 +116,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.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["default"].createElement("li", {

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

@@ -15,7 +15,6 @@ var icons = require('@carbon/react/icons');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
-var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
 var cx = require('classnames');
 var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
 var ConditionBuilderItemNumber = require('../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js');
@@ -26,6 +25,9 @@ var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilder
 var util = require('../utils/util.js');
 var ConditionBuilderItemTime = require('../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js');
 var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js');
+var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
+var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js');
+var useTranslations = require('../utils/useTranslations.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,6 +35,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _div;
+
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
@@ -61,41 +64,46 @@ var ConditionBlock = function ConditionBlock(props) {
     isLastCondition = props.isLastCondition;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
-    variant = _useContext.variant;
-  //Below possible input types expected for value field.
-  var itemComponents = {
-    option: ConditionBuilderItemOption.ConditionBuilderItemOption,
-    text: ConditionBuilderItemText.ConditionBuilderItemText,
-    number: ConditionBuilderItemNumber.ConditionBuilderItemNumber,
-    date: ConditionBuilderItemDate.ConditionBuilderItemDate,
-    time: ConditionBuilderItemTime.ConditionBuilderItemTime
-  };
+    variant = _useContext.variant,
+    conditionBuilderRef = _useContext.conditionBuilderRef;
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     showDeletionPreview = _useState2[0],
     setShowDeletionPreview = _useState2[1];
+  var _useTranslations = useTranslations.useTranslations(['conditionRowText', 'conditionText', 'propertyText', 'operatorText', 'removeConditionText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.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.ConditionBuilderItemText,
+    number: ConditionBuilderItemNumber.ConditionBuilderItemNumber,
+    date: ConditionBuilderItemDate.ConditionBuilderItemDate,
+    time: ConditionBuilderItemTime.ConditionBuilderItemTime,
+    option: ItemOptionForValueField.ItemOptionForValueField,
+    custom: config === null || config === void 0 ? void 0 : config.component,
+    textarea: ConditionBuilderItemText.ConditionBuilderItemText
+  };
+  var ItemComponent = property ? itemComponents[type] : null;
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
-    util.focusThisField(evt);
+    util.focusThisField(evt, conditionBuilderRef);
     onStatementChange(v);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
@@ -103,20 +111,22 @@ var ConditionBlock = function ConditionBlock(props) {
       property: newProperty,
       operator: undefined,
       value: '',
-      popoverToOpen: 'operatorField'
+      popoverToOpen: util.checkIsValid(newProperty) ? 'operatorField' : ''
     }));
   };
   var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
       operator: newOperator,
       value: undefined,
-      popoverToOpen: 'valueField'
+      popoverToOpen: util.checkIsValid(newOperator) ? 'valueField' : ''
     }));
   };
-  var onValueChangeHandler = function onValueChangeHandler(newValue) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
-      value: newValue,
-      popoverToOpen: ''
+  var onValueChangeHandler = function onValueChangeHandler(newValue, evt) {
+    var currentCondition = _rollupPluginBabelHelpers.objectSpread2({}, condition);
+    delete currentCondition.popoverToOpen;
+    util.focusThisField(evt, conditionBuilderRef);
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, currentCondition), {}, {
+      value: newValue
     }));
   };
   var handleShowDeletionPreview = function handleShowDeletionPreview() {
@@ -126,6 +136,9 @@ var ConditionBlock = function ConditionBlock(props) {
     setShowDeletionPreview(false);
   };
   var getOperators = function getOperators() {
+    if (config !== null && config !== void 0 && config.operators) {
+      return config.operators;
+    }
     return DataConfigs.operatorConfig.filter(function (operator) {
       return operator.type.indexOf(type) != -1 || operator.type == 'all';
     });
@@ -137,11 +150,24 @@ var ConditionBlock = function ConditionBlock(props) {
       'aria-setsize': aria.setsize
     } : {};
   };
+  var renderChildren = function renderChildren(popoverRef) {
+    return /*#__PURE__*/React__default["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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'tree' && !(conditionIndex + 1 >= group.conditions.length)), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'sentence')),
     role: "row",
-    "aria-label": DataConfigs.translateWithId('condition_row'),
-    tabIndex: -1
+    "aria-label": conditionRowText
   }, getAriaAttributes()), conjunction ? /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
     className: "".concat(DataConfigs.blockClass, "__gap"),
     operator: conjunction,
@@ -152,74 +178,69 @@ var ConditionBlock = function ConditionBlock(props) {
     role: "gridcell"
   })), isStatement && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: group.statement,
-    title: DataConfigs.translateWithId('condition'),
+    title: conditionText,
     "data-name": "connectorField",
     popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
     className: "".concat(DataConfigs.blockClass, "__statement-button")
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+  }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     conditionState: {
       value: group.statement,
-      label: DataConfigs.translateWithId('condition')
+      label: conditionText
     },
     onChange: onStatementChangeHandler,
     config: {
       options: DataConfigs.statementConfig
     }
   })), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    label: label,
-    title: DataConfigs.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(DataConfigs.blockClass, "__property-field"),
     "data-name": "propertyField",
     condition: condition,
-    type: type
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    type: type,
+    onChange: onPropertyChangeHandler
+  }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     conditionState: {
       value: property,
-      label: DataConfigs.translateWithId('property')
+      label: propertyText
     },
     onChange: onPropertyChangeHandler,
     config: {
       options: inputConfig.properties
     }
-  })), property && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+  })), util.checkIsValid(property) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: operator,
-    title: DataConfigs.translateWithId('operator'),
+    title: operatorText,
     "data-name": "operatorField",
     condition: condition,
-    type: type
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    type: type,
+    onChange: onOperatorChangeHandler
+  }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     config: {
       options: getOperators()
     },
     conditionState: {
       value: operator,
-      label: DataConfigs.translateWithId('operator')
+      label: operatorText
     },
     onChange: onOperatorChangeHandler
-  })), property && operator && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+  })), util.checkIsValid(property) && util.checkIsValid(operator) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: value,
     type: type,
     title: label,
     showToolTip: true,
     "data-name": "valueField",
     condition: condition,
-    config: config
-  }, /*#__PURE__*/React__default["default"].createElement(ItemComponent, {
-    conditionState: {
-      property: property,
-      operator: operator,
-      value: value
-    },
-    onChange: onValueChangeHandler,
     config: config,
-    "data-name": "valueField"
-  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    onChange: onValueChangeHandler,
+    renderChildren: renderChildren
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
     role: "gridcell",
-    "aria-label": DataConfigs.translateWithId('remove_condition')
+    "aria-label": removeConditionText
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
     hideLabel: true,
-    label: DataConfigs.translateWithId('remove_condition'),
+    label: removeConditionText,
     onClick: onRemove,
     onMouseEnter: handleShowDeletionPreview,
     onMouseLeave: handleHideDeletionPreview,