@carbon/ibm-products 2.43.2-canary.81 → 2.43.2-canary.87

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,9 +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", "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(pkg.prefix, "--coachmark");
 var overlayBlockClass = "".concat(blockClass, "-overlay");
@@ -37,8 +39,10 @@ var defaults = {
  */
 
 var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  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,8 +51,8 @@ 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,
@@ -124,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,
@@ -139,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();
@@ -173,7 +182,7 @@ 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 && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__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,
@@ -181,7 +190,23 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     theme: theme,
     className: cx(overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
   }, children), // Default to `document.body` when `portalNode` is `null`
-  portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)));
+  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 :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
@@ -204,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
@@ -242,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/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useState, useEffect, useCallback } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Button, Section, Heading } from '@carbon/react';
@@ -20,7 +20,7 @@ import GroupConnector from '../ConditionBuilderConnector/GroupConnector.js';
 import ConditionBuilderActions from '../ConditionBuilderActions/ConditionBuilderActions.js';
 import { useTranslations } from '../utils/useTranslations.js';
 
-var _Heading, _GroupConnector;
+var _GroupConnector;
 var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _rootState$groups2;
   var startConditionLabel = _ref.startConditionLabel,
@@ -41,9 +41,10 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showConditionGroupPreview = _useState4[0],
     setShowConditionGroupPreview = _useState4[1];
-  var _useTranslations = useTranslations(['addConditionGroupText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 1),
-    addConditionGroupText = _useTranslations2[0];
+  var _useTranslations = useTranslations(['addConditionGroupText', 'conditionHeadingText']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 2),
+    addConditionGroupText = _useTranslations2[0],
+    conditionHeadingText = _useTranslations2[1];
   var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
     setShowConditionGroupPreview(true);
   };
@@ -109,21 +110,22 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
       groups: [].concat(_toConsumableArray(rootState.groups), [newGroup])
     }));
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
-    className: "".concat(blockClass, "__addConditionText-button"),
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(Add, _extends({
-        size: 16
-      }, props));
-    },
-    iconDescription: startConditionLabel,
-    kind: "ghost",
-    size: "sm",
-    onClick: onStartConditionBuilder
-  }, startConditionLabel), isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Section, {
+  if (!isConditionBuilderActive) {
+    return /*#__PURE__*/React__default.createElement(Button, {
+      className: "".concat(blockClass, "__addConditionText-button"),
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React__default.createElement(Add, props);
+      },
+      iconDescription: startConditionLabel,
+      kind: "ghost",
+      size: "sm",
+      onClick: onStartConditionBuilder
+    }, startConditionLabel);
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Section, {
     className: "".concat(blockClass, "__heading"),
     level: 4
-  }, _Heading || (_Heading = /*#__PURE__*/React__default.createElement(Heading, null, "Condition"))), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(Heading, null, conditionHeadingText)), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content-container"),
     role: "treegrid",
     "aria-label": "condition builder tree"
@@ -146,7 +148,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
         onChangeHandler(updatedGroup, groupIndex);
       }
     }), groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default.createElement(GroupConnector, null))));
-  })), isConditionBuilderActive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant == 'tree' && /*#__PURE__*/React__default.createElement("div", {
+  })), variant == 'tree' && /*#__PURE__*/React__default.createElement("div", {
     role: "row",
     tabIndex: -1,
     "aria-level": 1,
@@ -170,7 +172,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     group: {
       groupOperator: rootState.operator
     }
-  }))), isConditionBuilderActive && actions && /*#__PURE__*/React__default.createElement(ConditionBuilderActions, {
+  })), actions && /*#__PURE__*/React__default.createElement(ConditionBuilderActions, {
     actions: actions,
     className: "".concat(blockClass, "__actions-container"),
     variant: variant

package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts

@@ -38,4 +38,5 @@ export namespace translationsObject {
     let invalidNumberWarnText: string;
     let conditionBuilderText: string;
     let actionSectionText: string;
+    let conditionHeadingText: string;
 }

package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js

@@ -44,7 +44,8 @@ var translationsObject = {
   invalidText: 'Incomplete',
   invalidNumberWarnText: 'Invalid number, must be 0 or greater',
   conditionBuilderText: 'Condition Builder',
-  actionSectionText: 'Action Section'
+  actionSectionText: 'Action Section',
+  conditionHeadingText: 'Condition'
 };
 
 export { translationsObject };

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -54,10 +54,12 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
       variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
-      if (group.conditions[1].conditions) {
+      if (group.conditions[1].conditions && group.conditions[1].id !== conditionId) {
         //when we remove every plain conditions of a group without deleting  the subgroup, we need to restructure the group
         //the inner group become outer group and same level subgroups become plain conditions
 
+        //ensure we are deleting last condition , not the subgroup
+
         //spreading out the condition inside the subgroup
         var allConditions = group.conditions.reduce(function (acc, item) {
           if (item.conditions) {
@@ -145,9 +147,17 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       var prevRows = (_conditionBuilderCont3 = conditionBuilderContentRef.current) === null || _conditionBuilderCont3 === void 0 ? void 0 : _conditionBuilderCont3.querySelectorAll("[aria-level=\"".concat(Number(currentLevel) - 1, "\"][role=\"row\"]"));
       var nextRow = (_conditionBuilderCont4 = conditionBuilderContentRef.current) === null || _conditionBuilderCont4 === void 0 ? void 0 : _conditionBuilderCont4.querySelector("[aria-level=\"".concat(Number(currentLevel) + 1, "\"][role=\"row\"]"));
       if (nextRow) {
-        manageTabIndexAndFocus(nextRow, conditionBuilderRef);
+        //since there are no condition in current group, this group will move one level up
+
+        var rowIdentity = {
+          ariaLevel: Number(nextRow.ariaLevel) - 1,
+          ariaPosInSet: nextRow.ariaPosInSet
+        };
+        setTimeout(function () {
+          var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
+          manageTabIndexAndFocus(currentRowToFocus, conditionBuilderRef);
+        }, 0);
       } else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
-        // prevRows[prevRows.length - 2].setAttribute('tabindex', '0');
         manageTabIndexAndFocus(prevRows[prevRows.length - 2], conditionBuilderRef);
       }
     }

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

@@ -203,8 +203,7 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   var nextRow = rows[nextRowIndex];
   var itemName = evt.target.dataset.name;
   if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
-    var _nextRow$querySelecto;
-    nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
+    manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
   } else if (variant === 'tree') {
     //when the next row is a if statement , then that row is focused. From any cell of last row of an group , arrow down select the next row (if)
     manageTabIndexAndFocus(nextRow, conditionBuilderRef);

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

@@ -3,6 +3,5 @@ export function focusThisItem(currentElement: any, conditionBuilderRef: any): vo
 export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
 export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
 export function checkForHoldingKey(evt: any, key: any): any;
-export function checkDuplicateAction(actionState: any, selectedId: any, currentActionId: any): boolean;
 export function checkIsValid(item: any): any;
 export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;

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,6 +21,7 @@ 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 }; }
@@ -28,7 +29,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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");
@@ -46,8 +48,10 @@ var defaults = {
  */
 
 exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  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,8 +60,8 @@ 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,
@@ -133,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,
@@ -148,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();
@@ -182,7 +191,7 @@ 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 && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__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,
@@ -190,7 +199,23 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     theme: theme,
     className: cx__default["default"](overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
   }, children), // Default to `document.body` when `portalNode` is `null`
-  portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)));
+  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 :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
@@ -213,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
@@ -251,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/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -28,7 +28,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _Heading, _GroupConnector;
+var _GroupConnector;
 var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _rootState$groups2;
   var startConditionLabel = _ref.startConditionLabel,
@@ -49,9 +49,10 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     showConditionGroupPreview = _useState4[0],
     setShowConditionGroupPreview = _useState4[1];
-  var _useTranslations = useTranslations.useTranslations(['addConditionGroupText']),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
-    addConditionGroupText = _useTranslations2[0];
+  var _useTranslations = useTranslations.useTranslations(['addConditionGroupText', 'conditionHeadingText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+    addConditionGroupText = _useTranslations2[0],
+    conditionHeadingText = _useTranslations2[1];
   var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
     setShowConditionGroupPreview(true);
   };
@@ -117,21 +118,22 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
       groups: [].concat(_rollupPluginBabelHelpers.toConsumableArray(rootState.groups), [newGroup])
     }));
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-    className: "".concat(DataConfigs.blockClass, "__addConditionText-button"),
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
-        size: 16
-      }, props));
-    },
-    iconDescription: startConditionLabel,
-    kind: "ghost",
-    size: "sm",
-    onClick: onStartConditionBuilder
-  }, startConditionLabel), isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Section, {
+  if (!isConditionBuilderActive) {
+    return /*#__PURE__*/React__default["default"].createElement(react.Button, {
+      className: "".concat(DataConfigs.blockClass, "__addConditionText-button"),
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React__default["default"].createElement(icons.Add, props);
+      },
+      iconDescription: startConditionLabel,
+      kind: "ghost",
+      size: "sm",
+      onClick: onStartConditionBuilder
+    }, startConditionLabel);
+  }
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Section, {
     className: "".concat(DataConfigs.blockClass, "__heading"),
     level: 4
-  }, _Heading || (_Heading = /*#__PURE__*/React__default["default"].createElement(react.Heading, null, "Condition"))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(react.Heading, null, conditionHeadingText)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__content-container"),
     role: "treegrid",
     "aria-label": "condition builder tree"
@@ -154,7 +156,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
         onChangeHandler(updatedGroup, groupIndex);
       }
     }), groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default["default"].createElement(GroupConnector["default"], null))));
-  })), isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, variant == 'tree' && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), variant == 'tree' && /*#__PURE__*/React__default["default"].createElement("div", {
     role: "row",
     tabIndex: -1,
     "aria-level": 1,
@@ -178,7 +180,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     group: {
       groupOperator: rootState.operator
     }
-  }))), isConditionBuilderActive && actions && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderActions["default"], {
+  })), actions && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderActions["default"], {
     actions: actions,
     className: "".concat(DataConfigs.blockClass, "__actions-container"),
     variant: variant

package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts

@@ -38,4 +38,5 @@ export namespace translationsObject {
     let invalidNumberWarnText: string;
     let conditionBuilderText: string;
     let actionSectionText: string;
+    let conditionHeadingText: string;
 }

package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js

@@ -48,7 +48,8 @@ var translationsObject = {
   invalidText: 'Incomplete',
   invalidNumberWarnText: 'Invalid number, must be 0 or greater',
   conditionBuilderText: 'Condition Builder',
-  actionSectionText: 'Action Section'
+  actionSectionText: 'Action Section',
+  conditionHeadingText: 'Condition'
 };
 
 exports.translationsObject = translationsObject;

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

@@ -63,10 +63,12 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
       variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
-      if (group.conditions[1].conditions) {
+      if (group.conditions[1].conditions && group.conditions[1].id !== conditionId) {
         //when we remove every plain conditions of a group without deleting  the subgroup, we need to restructure the group
         //the inner group become outer group and same level subgroups become plain conditions
 
+        //ensure we are deleting last condition , not the subgroup
+
         //spreading out the condition inside the subgroup
         var allConditions = group.conditions.reduce(function (acc, item) {
           if (item.conditions) {
@@ -154,9 +156,17 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       var prevRows = (_conditionBuilderCont3 = conditionBuilderContentRef.current) === null || _conditionBuilderCont3 === void 0 ? void 0 : _conditionBuilderCont3.querySelectorAll("[aria-level=\"".concat(Number(currentLevel) - 1, "\"][role=\"row\"]"));
       var nextRow = (_conditionBuilderCont4 = conditionBuilderContentRef.current) === null || _conditionBuilderCont4 === void 0 ? void 0 : _conditionBuilderCont4.querySelector("[aria-level=\"".concat(Number(currentLevel) + 1, "\"][role=\"row\"]"));
       if (nextRow) {
-        util.manageTabIndexAndFocus(nextRow, conditionBuilderRef);
+        //since there are no condition in current group, this group will move one level up
+
+        var rowIdentity = {
+          ariaLevel: Number(nextRow.ariaLevel) - 1,
+          ariaPosInSet: nextRow.ariaPosInSet
+        };
+        setTimeout(function () {
+          var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
+          util.manageTabIndexAndFocus(currentRowToFocus, conditionBuilderRef);
+        }, 0);
       } else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
-        // prevRows[prevRows.length - 2].setAttribute('tabindex', '0');
         util.manageTabIndexAndFocus(prevRows[prevRows.length - 2], conditionBuilderRef);
       }
     }