@carbon/ibm-products 2.54.0-canary.8 → 2.54.0-canary.80

package/lib/components/Checklist/ChecklistChart.js

@@ -9,10 +9,10 @@
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../_virtual/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var clamp = require('lodash/clamp');
-var index = require('../../node_modules/@carbon/colors/es/index.js');
+var index$1 = require('../../node_modules/@carbon/colors/es/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var Checklist_types = require('./Checklist.types.js');
@@ -38,8 +38,8 @@ function (_ref, ref) {
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var numDegrees = clamp(value * 360, 0, 360);
-  var circleColor = theme === Checklist_types.Themes.light ? index.gray20 : index.gray70; // $ui-03 (-ish)
-  var progressColor = index.purple50;
+  var circleColor = theme === Checklist_types.Themes.light ? index$1.gray20 : index$1.gray70; // $ui-03 (-ish)
+  var progressColor = index$1.purple50;
   React.useEffect(function () {
     var ele = document.getElementsByClassName("".concat(blockClass));
     setTimeout(function () {
@@ -75,15 +75,15 @@ ChecklistChart.propTypes = {
   /**
    * Optional class name for this component.
    */
-  className: index$1.default.string,
+  className: index.default.string,
   /**
    * Determines the theme of the component.
    */
-  theme: index$1.default.oneOf([Checklist_types.Themes.light, Checklist_types.Themes.dark]),
+  theme: index.default.oneOf([Checklist_types.Themes.light, Checklist_types.Themes.dark]),
   /**
    * Number between 0 and 1.
    */
-  value: index$1.default.number.isRequired
+  value: index.default.number.isRequired
 };
 
 exports.ChecklistChart = ChecklistChart;

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

@@ -65,6 +65,11 @@ export interface CoachmarkProps {
      * Determines the theme of the component.
      */
     theme?: 'light' | 'dark';
+    /**
+     * Determines if the coachmark is open by default.
+     * Does nothing if `overlayKind=stacked`.
+     */
+    isOpenByDefault?: boolean;
 }
 /**
  * Coachmarks are used to call out specific functionality or concepts

package/lib/components/Coachmark/Coachmark.js

@@ -22,7 +22,7 @@ var lodash = require('lodash');
 var react = require('@carbon/react');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["align", "autoAlign", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "positionTune", "portalTarget", "target", "theme"];
+var _excluded = ["align", "autoAlign", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "positionTune", "portalTarget", "target", "theme", "isOpenByDefault"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark");
@@ -32,7 +32,8 @@ var defaults = {
   align: 'bottom',
   onClose: function onClose() {},
   overlayKind: 'tooltip',
-  theme: 'light'
+  theme: 'light',
+  isOpenByDefault: false
 };
 /**
  * Coachmarks are used to call out specific functionality or concepts
@@ -57,10 +58,12 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     target = _ref.target,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    _ref$isOpenByDefault = _ref.isOpenByDefault,
+    isOpenByDefault = _ref$isOpenByDefault === void 0 ? defaults.isOpenByDefault : _ref$isOpenByDefault,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var isBeacon = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isStacked = overlayKind === enums.COACHMARK_OVERLAY_KIND.STACKED;
-  var _useState = React.useState(isStacked),
+  var _useState = React.useState(isStacked || isOpenByDefault),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
@@ -252,6 +255,11 @@ exports.Coachmark.propTypes = {
    * Optional class name for this component.
    */
   className: index.default.string,
+  /**
+   * Determines if the coachmark is open by default.
+   * Does nothing if `overlayKind=stacked`.
+   */
+  isOpenByDefault: index.default.bool,
   /**
    * Function to call when the Coachmark closes.
    */

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -62,6 +62,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var handleKeyPress = function handleKeyPress(event) {
     var shiftKey = event.shiftKey,
       key = event.key;
+    /* istanbul ignore next */
     if (key === 'Enter' || key === ' ') {
       setA11yDragMode(function (prevVal) {
         return !prevVal;
@@ -105,6 +106,8 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     return style;
   }, [isBeacon, isDraggable, coachmark, kind]);
+
+  /* istanbul ignore next */
   function handleDragBounds(x, y) {
     var xRes = x;
     var yRes = y;
@@ -193,6 +196,7 @@ var useWindowDimensions = function useWindowDimensions() {
     windowDimensions = _useState4[0],
     setWindowDimensions = _useState4[1];
   React.useEffect(function () {
+    /* istanbul ignore next */
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -24,11 +24,16 @@ export interface CoachmarkOverlayElementsProps {
      * The object describing an image in one of two shapes.
      * If a single media element is required, use `{render}`.
      * If a stepped animation is required, use `{filePaths}`.
+     * * @deprecated please use the `renderMedia` prop
      */
     media?: {
         render?: () => ReactNode;
         filePaths?: string[];
     };
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: (params: any) => ReactNode;
     /**
      * The label for the Next button.
      */
@@ -41,6 +46,18 @@ export interface CoachmarkOverlayElementsProps {
      * The label for the Close button.
      */
     closeButtonLabel?: string;
+    /**
+     * Callback called when clicking on the Next button.
+     */
+    onNext?: () => void;
+    /**
+     * Callback called when clicking on the Previous button.
+     */
+    onBack?: () => void;
+    /**
+     * Current step of the coachmarks.
+     */
+    currentStep?: number;
 }
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -22,7 +22,7 @@ var settings = require('../../settings.js');
 require('../Coachmark/Coachmark.js');
 var context = require('../Coachmark/utils/context.js');
 
-var _excluded = ["className", "children", "isVisible", "media", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
+var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "currentStep", "nextButtonText", "previousButtonLabel", "closeButtonLabel", "onNext", "onBack"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-elements");
@@ -43,7 +43,10 @@ var defaults = {
   isVisible: false,
   nextButtonText: 'Next',
   previousButtonLabel: 'Back',
-  closeButtonLabel: 'Got it'
+  closeButtonLabel: 'Got it',
+  onNext: undefined,
+  onBack: undefined,
+  currentStep: 0
 };
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
@@ -55,12 +58,19 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
+    _ref$currentStep = _ref.currentStep,
+    currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
     _ref$nextButtonText = _ref.nextButtonText,
     nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
     _ref$previousButtonLa = _ref.previousButtonLabel,
     previousButtonLabel = _ref$previousButtonLa === void 0 ? defaults.previousButtonLabel : _ref$previousButtonLa,
     _ref$closeButtonLabel = _ref.closeButtonLabel,
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
+    _ref$onNext = _ref.onNext,
+    onNext = _ref$onNext === void 0 ? defaults.onNext : _ref$onNext,
+    _ref$onBack = _ref.onBack,
+    onBack = _ref$onBack === void 0 ? defaults.onBack : _ref$onBack,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var buttonFocusRef = React.useRef(undefined);
   var scrollRef = React.useRef(undefined);
@@ -68,11 +78,12 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],
     setScrollPosition = _useState2[1];
-  var _useState3 = React.useState(0),
+  var _useState3 = React.useState(currentStep),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     currentProgStep = _useState4[0],
     _setCurrentProgStep = _useState4[1];
   var coachmark = context.useCoachmark();
+  var hasMedia = media || renderMedia;
   var setCurrentProgStep = function setCurrentProgStep(value) {
     if (currentProgStep > 0 && value === 0 && buttonFocusRef.current) {
       setTimeout(function () {
@@ -85,6 +96,20 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
   var numProgSteps = React.Children.count(children);
   var progStepFloor = 0;
   var progStepCeil = numProgSteps - 1;
+  var renderMediaContent = React.useMemo(function () {
+    return renderMedia === null || renderMedia === void 0 ? void 0 : renderMedia({
+      playStep: currentProgStep
+    });
+  }, [currentProgStep, renderMedia]);
+  React.useEffect(function () {
+    var _scrollRef$current, _scrollRef$current$sc;
+    // When current step is set by props
+    // scroll to the appropriate view on the carrousel
+    var targetStep = lodash.clamp(currentStep, progStepFloor, progStepCeil);
+    scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
+    // Avoid circular call to this hook
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStep]);
   React.useEffect(function () {
     // On mount, one of the two primary buttons ("next" or "close")
     // will be rendered and must have focus. (a11y)
@@ -113,18 +138,19 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), media && (media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }, devtools.getDevtoolsProps(componentName)), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: currentProgStep
-  })), numProgSteps === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React.createElement("div", {
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__element-stepped-media")
+  }, renderMediaContent), numProgSteps === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__footer"), 'coachmark-carousel-controls')
   }, /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
     size: "sm"
   }, coachmark.closeButtonProps, {
     ref: buttonFocusRef
   }), closeButtonLabel))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Carousel.Carousel, {
-    disableArrowScroll: true,
     ref: scrollRef,
     onScroll: function onScroll(scrollPercent) {
       setScrollPosition(scrollPercent);
@@ -139,10 +165,11 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
     onClick: function onClick() {
-      var _scrollRef$current, _scrollRef$current$sc;
+      var _scrollRef$current2, _scrollRef$current2$s;
       var targetStep = lodash.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
       setCurrentProgStep(targetStep);
+      onBack === null || onBack === void 0 || onBack();
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React.createElement(react.Button, {
     size: "sm",
@@ -150,10 +177,11 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     title: nextButtonText,
     disabled: scrollPosition === 1,
     onClick: function onClick() {
-      var _scrollRef$current2, _scrollRef$current2$s;
+      var _scrollRef$current3, _scrollRef$current3$s;
       var targetStep = lodash.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === void 0 || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
       setCurrentProgStep(targetStep);
+      onNext === null || onNext === void 0 || onNext();
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
     size: "sm",
@@ -187,6 +215,10 @@ exports.CoachmarkOverlayElements.propTypes = {
    * The label for the Close button.
    */
   closeButtonLabel: index.default.string,
+  /**
+   * Current step of the coachmarks
+   */
+  currentStep: index.default.number,
   /**
    * The visibility of CoachmarkOverlayElements is
    * managed in the parent component.
@@ -196,6 +228,7 @@ exports.CoachmarkOverlayElements.propTypes = {
    * The object describing an image in one of two shapes.
    * If a single media element is required, use `{render}`.
    * If a stepped animation is required, use `{filePaths}`.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: index.default.oneOfType([index.default.shape({
@@ -207,8 +240,20 @@ exports.CoachmarkOverlayElements.propTypes = {
    * The label for the Next button.
    */
   nextButtonText: index.default.string,
+  /**
+   * Optional callback called when clicking on the Previous button.
+   */
+  onBack: index.default.func,
+  /**
+   * Optional callback called when clicking on the Next button.
+   */
+  onNext: index.default.func,
   /**
    * The label for the Previous button.
    */
-  previousButtonLabel: index.default.string
+  previousButtonLabel: index.default.string,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func
 };

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

@@ -39,6 +39,10 @@ interface CoachmarkStackHomeProps {
      * @see {@link MEDIA_PROP_TYPE}.
      */
     media?: Media;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: (params: any) => ReactNode;
     /**
      * The labels used to link to the stackable Coachmarks.
      */

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -19,9 +19,10 @@ var settings = require('../../settings.js');
 var reactDom = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
 var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["className", "description", "isOpen", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+var _excluded = ["className", "description", "isOpen", "media", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -39,6 +40,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     description = _ref.description,
     isOpen = _ref.isOpen,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     navLinkLabels = _ref.navLinkLabels,
     onClickNavItem = _ref.onClickNavItem,
     _onClose = _ref.onClose,
@@ -51,6 +53,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     linkFocusIndex = _useState2[0],
     setLinkFocusIndex = _useState2[1];
+  var hasMedia = media || renderMedia;
   React.useEffect(function () {
     setTimeout(function () {
       if (isOpen && buttonFocusRef.current) {
@@ -92,13 +95,17 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(overlayClass, "__body")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(overlayClass, "-element")
-  }, !media && /*#__PURE__*/React.createElement(icons.Idea, {
+  }, !hasMedia && /*#__PURE__*/React.createElement(icons.Idea, {
     size: 20,
     className: "".concat(blockClass, "__icon-idea")
-  }), media && (media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
-    className: "".concat(overlayClass, "__element-stepped-media"),
+  }), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+    className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: 0
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__element-stepped-media")
+  }, renderMedia({
+    playStep: 0
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(overlayClass, "-element__content")
   }, title && /*#__PURE__*/React.createElement("h2", {
@@ -158,12 +165,13 @@ exports.CoachmarkStackHome.propTypes = {
    * If a stepped animation is required, use `{filePaths}`.
    *
    * @see {@link MEDIA_PROP_TYPE}.
+   * @deprecated please use the `renderMedia` prop
    */
-  media: index.default.oneOfType([index.default.shape({
+  media: propsHelper.deprecateProp(index.default.oneOfType([index.default.shape({
     render: index.default.func
   }), index.default.shape({
     filePaths: index.default.arrayOf(index.default.string)
-  })]),
+  })]), ''),
   /**
    * The labels used to link to the stackable Coachmarks.
    */
@@ -187,6 +195,10 @@ exports.CoachmarkStackHome.propTypes = {
    * element is hidden or component is unmounted, the CoachmarkStackHome will disappear.
    */
   portalTarget: index.default.string,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func,
   /**
    * The title of the Coachmark.
    */

package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js

@@ -54,6 +54,5 @@ var GroupConnector = function GroupConnector() {
     }
   })));
 };
-var GroupConnector$1 = GroupConnector;
 
-exports.default = GroupConnector$1;
+exports.default = GroupConnector;

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

@@ -76,8 +76,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   }, [actionState]);
   React.useEffect(function () {
     if (initialState !== null && initialState !== void 0 && initialState.enabledDefault) {
-      setRootState === null || setRootState === void 0 || setRootState(initialConditionState.current);
-      initialConditionState.current = null;
+      setRootState === null || setRootState === void 0 || setRootState(initialState.state);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialState]);
@@ -96,11 +95,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   };
   var _onRemove = React.useCallback(function (groupId) {
     var _rootState$groups2;
+    var groups = rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.filter(function (group) {
+      return groupId !== (group === null || group === void 0 ? void 0 : group.id);
+    });
     setRootState === null || setRootState === void 0 || setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
-      groups: rootState ? rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.filter(function (group) {
-        return groupId !== (group === null || group === void 0 ? void 0 : group.id);
-      }) : []
+      groups: rootState ? groups : []
     }));
+    //set the initial state to empty.
+    if ((groups === null || groups === void 0 ? void 0 : groups.length) === 0) {
+      initialConditionState.current = null;
+    }
   }, [setRootState, rootState]);
   var onChangeHandler = function onChangeHandler(updatedGroup, groupIndex) {
     /**

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

@@ -65,9 +65,6 @@ var ItemOption = function ItemOption(_ref) {
       className: "".concat(util.blockClass, "__statement_wrapper")
     }, /*#__PURE__*/React.createElement("div", null, option.text1, " (", option.connector, ")"), /*#__PURE__*/React.createElement("div", null, option.text2));
   };
-  var preventDefault = function preventDefault(evt) {
-    return evt.preventDefault();
-  };
   if (!allOptions) {
     return;
   }
@@ -80,8 +77,7 @@ var ItemOption = function ItemOption(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler,
-    onKeyDown: preventDefault
+    onChange: onSearchChangeHandler
   })), /*#__PURE__*/React.createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox"

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

@@ -131,13 +131,14 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     } else {
       onChange(option, evt);
     }
+    if (evt.target instanceof SVGElement) {
+      evt.stopPropagation();
+      //stop propagate event , since this closes the popover when clicked on checkboxes which are SVGs.
+    }
   };
   var getAriaLabel = function getAriaLabel() {
     return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
   };
-  var preventDefault = function preventDefault(evt) {
-    return evt.preventDefault();
-  };
   if (!allOptions) {
     return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React.createElement(react.SelectSkeleton, null));
   }
@@ -150,8 +151,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler,
-    onKeyDown: preventDefault
+    onChange: onSearchChangeHandler
   })), multiSelectable && /*#__PURE__*/React.createElement("div", {
     className: "".concat(util.blockClass, "__multiselectSelectionStatusContainer")
   }, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React.createElement(react.Button, {

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

@@ -50,10 +50,6 @@ var traverseReverse = function traverseReverse(eachElem, index, allElements, rot
   }
 };
 var checkForHoldingKey = function checkForHoldingKey(evt, key) {
-  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
-  if (key === 'cmd') {
-    return evt.metaKey || evt.ctrlKey;
-  }
   return evt[key];
 };
 var checkIsValid = function checkIsValid(item) {

package/lib/components/CreateTearsheet/CreateTearsheet.d.ts

@@ -8,7 +8,7 @@ import React, { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'r
 import { ExperimentalSecondarySubmit } from './CreateTearsheetStep';
 export interface StepsContextType {
     currentStep: number;
-    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit>>;
+    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit | undefined>>;
     setIsDisabled: Dispatch<SetStateAction<boolean>>;
     setOnPrevious: (fn: any) => void;
     setOnNext: (fn: any) => void;

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -107,7 +107,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
     lastIncludedStep = _useState24[0],
     setLastIncludedStep = _useState24[1];
-  var _useState25 = React.useState({}),
+  var _useState25 = React.useState(),
     _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
     experimentalSecondarySubmit = _useState26[0],
     setExperimentalSecondarySubmit = _useState26[1];
@@ -178,7 +178,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isSubmitting: isSubmitting,
     componentBlockClass: blockClass,
     experimentalSecondarySubmit: experimentalSecondarySubmit,
-    experimentalSecondarySubmitText: experimentalSecondarySubmit.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
+    experimentalSecondarySubmitText: experimentalSecondarySubmit !== null && experimentalSecondarySubmit !== void 0 && experimentalSecondarySubmit.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
     setCreateComponentActions: setCreateTearsheetActions
   });
   return /*#__PURE__*/React.createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), rest, {
@@ -198,7 +198,8 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     slug: slug,
     title: title,
     verticalPosition: verticalPosition,
-    closeIconDescription: ''
+    closeIconDescription: '',
+    currentStep: currentStep
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -84,7 +84,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   React.useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnMount(onMount);
-      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(_rollupPluginBabelHelpers.objectSpread2({}, experimentalSecondarySubmit));
+      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
   }, [onMount, experimentalSecondarySubmit, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
 
@@ -120,8 +120,11 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       stepsContext.setIsDisabled(!!disableSubmit);
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
+
+      //Handle props for experimentalSecondarySubmit button, depending on state change
+      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
-  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue]);
+  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue, experimentalSecondarySubmit]);
   var renderDescription = function renderDescription() {
     if (description) {
       if (typeof description === 'string') {

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -61,12 +61,12 @@ var ResizeHeader = function ResizeHeader(_ref) {
       if (key === 'ArrowLeft') {
         if (currentColumnWidth - incrementAmount > Math.max(Number(minWidth), 50)) {
           var newWidth = currentColumnWidth - incrementAmount;
-          stateReducer.handleColumnResizingEvent(dispatch, header, newWidth, true);
+          stateReducer.handleColumnResizingEvent(dispatch, header, newWidth);
         }
       }
       if (key === 'ArrowRight') {
         var _newWidth = currentColumnWidth + incrementAmount;
-        stateReducer.handleColumnResizingEvent(dispatch, header, _newWidth, true);
+        stateReducer.handleColumnResizingEvent(dispatch, header, _newWidth);
       }
     }
   };

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -47,6 +47,8 @@ var SelectAll = function SelectAll(datagridState) {
     dispatch = datagridState.dispatch,
     rows = datagridState.rows,
     getRowId = datagridState.getRowId,
+    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+    withVirtualScroll = datagridState.withVirtualScroll,
     onAllRowSelect = datagridState.onAllRowSelect;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
@@ -71,12 +73,39 @@ var SelectAll = function SelectAll(datagridState) {
     onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
+  var handleSelectAllChange = function handleSelectAllChange(event) {
+    if (indeterminate) {
+      stateReducer.handleSelectAllRowData({
+        dispatch: dispatch,
+        rows: rows,
+        getRowId: getRowId,
+        indeterminate: true,
+        isChecked: undefined
+      });
+      toggleAllRowsSelected(false);
+      onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
+      return onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          checked: false
+        }
+      });
+    }
+    stateReducer.handleSelectAllRowData({
+      dispatch: dispatch,
+      rows: rows,
+      getRowId: getRowId,
+      isChecked: event.target.checked,
+      indeterminate: indeterminate
+    });
+    onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  };
   return /*#__PURE__*/React.createElement(react.TableSelectAll, _rollupPluginBabelHelpers.extends({}, selectProps, {
     checked: (selectProps === null || selectProps === void 0 ? void 0 : selectProps.checked) || false,
     className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
     isFirstColumnStickyLeft && Number(windowSize) > 671)),
     name: "".concat(tableId, "-select-all-checkbox-name"),
-    onSelect: handleOnPageSelectAllChange,
+    onSelect: withVirtualScroll ? handleSelectAllChange : handleOnPageSelectAllChange,
     disabled: isFetching || (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled),
     id: "".concat(tableId, "-select-all-checkbox-id")
   }));