@carbon/ibm-products 2.47.0 → 2.48.0

package/es/components/CoachmarkStack/CoachmarkStack.js

@@ -31,7 +31,8 @@ var elementBlockClass = "".concat(pkg.prefix, "--coachmark-stack-element");
 var defaults = {
   onClose: function onClose() {},
   // Pass through to CoachmarkStackHome
-  theme: 'light'
+  theme: 'light',
+  portalTarget: 'body'
 };
 
 // NOTE
@@ -63,12 +64,12 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var portalNode = useRef();
+  var portalNode = useRef(null);
   useIsomorphicEffect(function () {
     var _document$querySelect, _document, _document2, _document3;
     portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
   }, [portalTarget]);
-  var stackHomeRef = useRef();
+  var stackHomeRef = useRef(null);
   var stackedCoachmarkRefs = useRef([]);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -82,7 +83,7 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     selectedItemNumber = _useState4[0],
     setSelectedItemNumber = _useState4[1];
   // // The parent height and width values to return to after unstacked
-  var _useState5 = useState(null),
+  var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
     parentHeight = _useState6[0],
     setParentHeight = _useState6[1];
@@ -163,14 +164,20 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     if (!parentHeight) {
       return;
     }
-    stackHomeRef.current.style.height = "".concat(parentHeight, "px");
+    if (stackHomeRef.current) {
+      stackHomeRef.current.style.height = "".concat(parentHeight, "px");
+    }
     if (!isOpen || targetSelectedItem < 0) {
-      stackHomeRef.current.focus();
+      if (stackHomeRef.current) {
+        stackHomeRef.current.focus();
+      }
       return;
     }
     var targetHomeHeight = stackedCoachmarkRefs.current[targetSelectedItem].clientHeight;
-    stackHomeRef.current.style.height = "".concat(targetHomeHeight, "px");
-    stackedCoachmarkRefs.current[targetSelectedItem].focus();
+    if (stackHomeRef.current) {
+      stackHomeRef.current.style.height = "".concat(targetHomeHeight, "px");
+      stackedCoachmarkRefs.current[targetSelectedItem].focus();
+    }
   }, [selectedItemNumber, isOpen, parentHeight]);
   var wrappedChildren = Children.map(childArray, function (child, idx) {
     var mountedClass = mountedRef.current ? "".concat(elementBlockClass, "--is-mounted") : '';
@@ -258,7 +265,7 @@ CoachmarkStack.propTypes = {
   /**
    * The labels used to link to the stackable Coachmarks.
    */
-  navLinkLabels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  navLinkLabels: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   /**
    * Function to call when the CoachmarkStack closes.
    */

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

@@ -1,6 +1,75 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+type Media = {
+    render?: () => ReactNode;
+    filePaths?: never;
+} | {
+    render?: never;
+    filePaths?: string[];
+};
+interface CoachmarkStackHomeProps {
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The label for the button that will close the stack
+     */
+    closeButtonLabel?: string;
+    /**
+     * The description of the Coachmark.
+     */
+    description: React.ReactNode;
+    /**
+     * If the stack home is open.
+     */
+    isOpen: boolean;
+    /**
+     * 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}`.
+     *
+     * @see {@link MEDIA_PROP_TYPE}.
+     */
+    media?: Media;
+    /**
+     * The labels used to link to the stackable Coachmarks.
+     */
+    navLinkLabels: string[];
+    /**
+     * For internal use only by CoachmarkStack and CoachmarkStackHome.
+     */
+    onClickNavItem: (index: number) => void;
+    /**
+     * Function to call when the stack closes.
+     */
+    onClose: () => void;
+    /**
+     * By default, the CoachmarkStackHome will be appended to the end of `document.body`.
+     * The CoachmarkStackHome will remain persistent as the user navigates the app until
+     * the user closes the CoachmarkStackHome.
+     *
+     * Alternatively, the app developer can tightly couple the CoachmarkStackHome to a DOM
+     * element or other component by specifying a CSS selector. The CoachmarkStackHome will
+     * remain visible as long as that element remains visible or mounted. When the
+     * element is hidden or component is unmounted, the CoachmarkStackHome will disappear.
+     */
+    portalTarget?: string;
+    /**
+     * The title of the Coachmark.
+     */
+    title: string;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-export let CoachmarkStackHome: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkStackHome: React.ForwardRefExoticComponent<CoachmarkStackHomeProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -16,11 +16,10 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { createPortal } from 'react-dom';
 import { CoachmarkHeader } from '../Coachmark/CoachmarkHeader.js';
-import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia/SteppedAnimatedMedia.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["className", "description", "isOpen", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -45,7 +44,7 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
     closeButtonLabel = _ref.closeButtonLabel,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var buttonFocusRef = useRef();
+  var buttonFocusRef = useRef(null);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     linkFocusIndex = _useState2[0],
@@ -57,7 +56,7 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }, 100);
   }, [isOpen]);
-  var portalNode = useRef();
+  var portalNode = useRef(null);
   useIsomorphicEffect(function () {
     var _document$querySelect, _document, _document2, _document3;
     portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
@@ -65,6 +64,20 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
   if (!navLinkLabels) {
     return pconsole.warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
   }
+  function renderNavLink(index, label) {
+    var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: index
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      kind: "ghost",
+      size: "sm",
+      onClick: function onClick() {
+        setLinkFocusIndex(index);
+        onClickNavItem(index + 1);
+      },
+      ref: ref
+    }, label));
+  }
   return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref,
@@ -96,9 +109,8 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, navLinkLabels.map(function (label, index) {
     if (index === linkFocusIndex) {
       return renderNavLink(index, label, buttonFocusRef);
-    } else {
-      return renderNavLink(index, label);
     }
+    return renderNavLink(index, label);
   })), closeButtonLabel && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(overlayClass, "__footer")
   }, /*#__PURE__*/React__default.createElement(Button, {
@@ -108,20 +120,6 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _onClose();
     }
   }, closeButtonLabel))))), portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null;
-  function renderNavLink(index, label) {
-    var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    return /*#__PURE__*/React__default.createElement("li", {
-      key: index
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      kind: "ghost",
-      size: "sm",
-      onClick: function onClick() {
-        setLinkFocusIndex(index);
-        onClickNavItem(index + 1);
-      },
-      ref: ref
-    }, label));
-  }
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -168,7 +166,7 @@ CoachmarkStackHome.propTypes = {
   /**
    * The labels used to link to the stackable Coachmarks.
    */
-  navLinkLabels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  navLinkLabels: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   /**
    * For internal use only by CoachmarkStack and CoachmarkStackHome.
    */

package/es/components/ComboButton/ComboButton.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ComponentProps, ReactNode } from 'react';
-interface ComboButtonProps extends ComponentProps<'div'> {
+export interface ComboButtonProps extends ComponentProps<'div'> {
     /** Provide the contents of the `ComboButton` */
     children?: ReactNode;
     /** Provide an optional class to be applied to the containing node */

package/es/components/ComboButton/ComboButton.js

@@ -6,13 +6,13 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toArray as _toArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { OverflowMenu, Button, OverflowMenuItem } from '@carbon/react';
 import { ChevronUp, ChevronDown } from '@carbon/react/icons';
-import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import cx from 'classnames';
-import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
 import React__default, { forwardRef, useRef, useState, Children, createElement } from 'react';
+import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _excluded = ["children", "className", "overflowMenu"],
   _excluded2 = ["children", "renderIcon"];

package/es/components/ComboButton/index.d.ts

@@ -1,2 +1,9 @@
-export { ComboButton } from "./ComboButton";
-export { ComboButtonItem } from "./ComboButtonItem";
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { ComboButton } from './ComboButton';
+export { ComboButtonItem } from './ComboButtonItem';
+export type { ComboButtonProps } from './ComboButton';

package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.d.ts

@@ -20,7 +20,6 @@ declare namespace ConditionBlock {
         let onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         let onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let setShowDeletionPreviewForSubgroups: PropTypes.Requireable<(...args: any[]) => any>;
         let showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let state: PropTypes.Requireable<object>;

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

@@ -6,7 +6,7 @@
  */
 
 import { slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useEffect } from 'react';
+import React__default, { useContext, useState } from 'react';
 import { Close } from '@carbon/react/icons';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
@@ -52,8 +52,7 @@ var ConditionBlock = function ConditionBlock(props) {
     showConditionSubGroupPreviewHandler = props.showConditionSubGroupPreviewHandler,
     hideConditionPreviewHandler = props.hideConditionPreviewHandler,
     showConditionPreviewHandler = props.showConditionPreviewHandler,
-    isLastCondition = props.isLastCondition,
-    setShowDeletionPreviewForSubgroups = props.setShowDeletionPreviewForSubgroups;
+    isLastCondition = props.isLastCondition;
   var _useContext = useContext(ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
     variant = _useContext.variant,
@@ -62,6 +61,10 @@ var ConditionBlock = function ConditionBlock(props) {
     _useState2 = _slicedToArray(_useState, 2),
     showDeletionPreview = _useState2[0],
     setShowDeletionPreview = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showAllActions = _useState4[0],
+    setShowAllActions = _useState4[1];
   var _useTranslations = useTranslations(['conditionRowText', 'conditionText', 'propertyText', 'operatorText', 'removeConditionText']),
     _useTranslations2 = _slicedToArray(_useTranslations, 5),
     conditionRowText = _useTranslations2[0],
@@ -94,15 +97,12 @@ var ConditionBlock = function ConditionBlock(props) {
     textarea: ConditionBuilderItemText
   };
   var ItemComponent = property ? itemComponents[type] : null;
-  useEffect(function () {
-    var _group$conditions, _group$conditions2;
-    if (showDeletionPreview && (group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.length) > 1 && group !== null && group !== void 0 && (_group$conditions2 = group.conditions) !== null && _group$conditions2 !== void 0 && _group$conditions2[1].conditions && group.conditions[1].id !== condition.id) {
-      setShowDeletionPreviewForSubgroups === null || setShowDeletionPreviewForSubgroups === void 0 || setShowDeletionPreviewForSubgroups(true);
-    } else {
-      setShowDeletionPreviewForSubgroups === null || setShowDeletionPreviewForSubgroups === void 0 || setShowDeletionPreviewForSubgroups(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showDeletionPreview]);
+  var showAllActionsHandler = function showAllActionsHandler() {
+    setShowAllActions(true);
+  };
+  var hideAllActionsHandler = function hideAllActionsHandler() {
+    setShowAllActions(false);
+  };
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     focusThisField(evt, conditionBuilderRef);
     onStatementChange(v);
@@ -135,6 +135,12 @@ var ConditionBlock = function ConditionBlock(props) {
   var handleHideDeletionPreview = function handleHideDeletionPreview() {
     setShowDeletionPreview(false);
   };
+  var manageActionButtons = function manageActionButtons(conditionIndex, conditions) {
+    if (variant === 'tree') {
+      return true;
+    }
+    return isLastCondition(conditionIndex, conditions);
+  };
   var getOperators = function getOperators() {
     if (config !== null && config !== void 0 && config.operators) {
       return config.operators;
@@ -165,10 +171,15 @@ var ConditionBlock = function ConditionBlock(props) {
     });
   };
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx("".concat(blockClass, "__condition-block"), _defineProperty({}, "".concat(blockClass, "__condition__deletion-preview"), showDeletionPreview), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), variant == 'tree' && !(conditionIndex + 1 >= group.conditions.length)), _defineProperty({}, "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), variant == 'sentence')),
+    className: cx("".concat(blockClass, "__condition-block"), _defineProperty({}, "".concat(blockClass, "__condition__deletion-preview"), showDeletionPreview), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), variant == 'tree'), _defineProperty({}, "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), variant == 'sentence'), _defineProperty({}, "".concat(blockClass, "__condition--interacting"), showAllActions)),
     role: "row",
     "aria-label": conditionRowText
-  }, getAriaAttributes()), conjunction ? /*#__PURE__*/React__default.createElement(ConditionConnector, {
+  }, getAriaAttributes(), {
+    tabIndex: -1,
+    onMouseEnter: showAllActionsHandler,
+    onMouseLeave: hideAllActionsHandler,
+    onBlur: hideAllActionsHandler
+  }), conjunction ? /*#__PURE__*/React__default.createElement(ConditionConnector, {
     className: "".concat(blockClass, "__gap"),
     operator: conjunction,
     onChange: function onChange(op) {
@@ -181,7 +192,8 @@ var ConditionBlock = function ConditionBlock(props) {
     title: conditionText,
     "data-name": "connectorField",
     popOverClassName: "".concat(blockClass, "__gap"),
-    className: "".concat(blockClass, "__statement-button")
+    className: "".concat(blockClass, "__statement-button"),
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(ItemOption, {
     conditionState: {
       value: group.statement,
@@ -249,7 +261,7 @@ var ConditionBlock = function ConditionBlock(props) {
     renderIcon: Close,
     className: "".concat(blockClass, "__close-condition"),
     "data-name": "closeCondition"
-  })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
+  })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
     onClick: function onClick() {
       addConditionHandler(conditionIndex);
     },
@@ -317,10 +329,6 @@ ConditionBlock.propTypes = {
    * callback to handle the statement(if/ excl.if) change
    */
   onStatementChange: PropTypes.func,
-  /**
-   * method to set ShowDeletionPreviewForSubgroups
-   */
-  setShowDeletionPreviewForSubgroups: PropTypes.func,
   /**
    * handler for showing add condition preview
    */

package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState } from 'react';
+import { slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
 import cx from 'classnames';
 import { AddAlt, TextNewLine } from '@carbon/react/icons';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
@@ -25,21 +25,11 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     enableSubGroup = _ref.enableSubGroup,
     buttonLabel = _ref.buttonLabel,
     tabIndex = _ref.tabIndex;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isAddSubgroup = _useState2[0],
-    setIsAddSubgroup = _useState2[1];
   var _useTranslations = useTranslations(['addConditionText', 'addConditionRowText', 'addSubgroupText']),
     _useTranslations2 = _slicedToArray(_useTranslations, 3),
     addConditionText = _useTranslations2[0],
     addConditionRowText = _useTranslations2[1],
     addSubgroupText = _useTranslations2[2];
-  var showAddSubGroup = function showAddSubGroup() {
-    setIsAddSubgroup(true);
-  };
-  var hideAddSubGroup = function hideAddSubGroup() {
-    setIsAddSubgroup(false);
-  };
   var onClickHandler = function onClickHandler() {
     hideConditionPreviewHandler === null || hideConditionPreviewHandler === void 0 || hideConditionPreviewHandler();
     onClick();
@@ -69,11 +59,7 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(className, " ").concat(blockClass, "__add-button-wrapper"),
     role: !enableSubGroup ? 'gridcell' : 'none',
-    "aria-label": getAriaLabel(),
-    onMouseEnter: showAddSubGroup,
-    onMouseLeave: hideAddSubGroup,
-    onFocus: showAddSubGroup,
-    onBlur: hideAddSubGroup
+    "aria-label": getAriaLabel()
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
     renderIcon: AddAlt,
     onClick: onClickHandler
@@ -83,7 +69,8 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     hideLabel: true,
     "data-name": "addButton",
     label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : addConditionText,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    wrapperClassName: "".concat(blockClass, "__add-condition-wrapper")
   })), enableSubGroup && /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
     renderIcon: TextNewLine,
     onClick: addConditionSubGroupHandler,
@@ -91,7 +78,7 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     hideLabel: true,
     label: addSubgroupText,
     wrapperProps: wrapperProps,
-    wrapperClassName: cx("".concat(blockClass, "__add-condition-sub-group-wrapper ").concat(blockClass, "__gap-left"), _defineProperty({}, "".concat(blockClass, "__add-condition-sub-group-wrapper--show"), isAddSubgroup))
+    wrapperClassName: "".concat(blockClass, "__add-condition-sub-group-wrapper ").concat(blockClass, "__gap-left")
   }, previewHandlersForSubgroup())));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;

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

@@ -50,56 +50,50 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showDeletionPreviewForSubgroups = _useState6[0],
-    setShowDeletionPreviewForSubgroups = _useState6[1];
+  useState(false);
   var conditionBuilderContentRef = useRef();
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
       variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
-      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
+      if (!checkGroupHaveCondition(group.conditions, conditionId)) {
+        //when we delete the last  condition of a group without deleting  the subgroup, we need to restructure the group.
+        //we will shift the group one level up. The subgroups will open up as conditions.
 
         //spreading out the condition inside the subgroup
-        var allConditions = group.conditions.reduce(function (acc, item) {
-          if (item.conditions) {
-            return acc.concat(item.conditions);
+        var allConditions = group.conditions.reduce(function (acc, condition) {
+          if (condition.conditions) {
+            //this is a subgroup
+            return acc.concat(condition.conditions);
           }
           return acc;
         }, []);
-
-        //we always have conditions first and then subgroups, so ordering accordingly
-        var groupedItems = {
-          groups: [],
-          conditions: []
-        };
-        allConditions.forEach(function (item) {
-          if (item.conditions) {
-            groupedItems.groups.push(item);
-          } else {
-            groupedItems.conditions.push(item);
-          }
-        });
-        onRemove(evt);
-        // onChange({
-        //   ...group,
-        //   conditions: [...groupedItems.conditions, ...groupedItems.groups],
-        // });
+        onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+          conditions: allConditions
+        }));
       } else {
+        var filteredConditions = group.conditions.filter(function (condition) {
+          return conditionId !== condition.id;
+        });
+        //This is to handle a edge case.
+        //When a group has structure as 1 condition,1 subgroup, 1 condition and if we delete first condition,
+        //the group will start with a subgroup. To avoid this,opening up that subgroup.
+        if (filteredConditions !== null && filteredConditions !== void 0 && filteredConditions[0].conditions) {
+          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_toConsumableArray(filteredConditions[0].conditions)));
+        }
         onChange(_objectSpread2(_objectSpread2({}, group), {}, {
-          conditions: group.conditions.filter(function (condition) {
-            return conditionId !== condition.id;
-          })
+          conditions: filteredConditions
         }));
       }
     } else {
       onRemove(evt);
     }
   };
+  //check to identify a group without a plain condition
+  var checkGroupHaveCondition = function checkGroupHaveCondition(conditions, conditionId) {
+    return conditions.find(function (eachCondition) {
+      return !eachCondition.conditions && eachCondition.id !== conditionId;
+    });
+  };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
     var updatedConditions = [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex)), [updatedCondition], _toConsumableArray(group.conditions.slice(conditionIndex + 1)));
     onChange(_objectSpread2(_objectSpread2({}, group), {}, {
@@ -286,7 +280,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       return /*#__PURE__*/React__default.createElement(Fragment, {
         key: eachCondition.id
       }, eachCondition.conditions ? /*#__PURE__*/React__default.createElement("div", {
-        className: cx("".concat(blockClass, "__condition-block subgroup  ").concat(blockClass, "__gap"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), "".concat(blockClass, "__subgroup_deletionPreview"), showDeletionPreviewForSubgroups), {})
+        className: cx("".concat(blockClass, "__condition-block subgroup  ").concat(blockClass, "__gap"), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), {})
       }, /*#__PURE__*/React__default.createElement(ConditionConnector, {
         className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom ").concat(blockClass, "__groupConnector"),
         operator: group.groupOperator,
@@ -334,8 +328,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           _showConditionPreviewHandler(conditionIndex);
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
-        isLastCondition: isLastCondition,
-        setShowDeletionPreviewForSubgroups: setShowDeletionPreviewForSubgroups
+        isLastCondition: isLastCondition
       })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default.createElement(ConditionPreview, {
         previewType: "subGroup",
         group: group

package/es/components/CreateFullPage/CreateFullPage.d.ts

@@ -117,7 +117,7 @@ type CreateFullPageBaseProps = {
      */
     title?: string;
 };
-type CreateFullPageProps = CreateFullPageBaseProps & CreateFullPageBreadcrumbsProps;
+export type CreateFullPageProps = CreateFullPageBaseProps & CreateFullPageBreadcrumbsProps;
 /**
  * Use with creations that must be completed in order for a service to be usable.
  *

package/es/components/CreateFullPage/CreateFullPage.js

@@ -6,22 +6,22 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
 import React__default, { useState, useEffect, createContext } from 'react';
+import { overflowAriaLabel_required_if_breadcrumbs_exist, SimpleHeader } from '../SimpleHeader/SimpleHeader.js';
+import { ActionSet } from '../ActionSet/ActionSet.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { pkg } from '../../settings.js';
-import { Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
-import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray.js';
 import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps.js';
-import { SimpleHeader, overflowAriaLabel_required_if_breadcrumbs_exist } from '../SimpleHeader/SimpleHeader.js';
+import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray.js';
+import { pkg } from '../../settings.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useCreateComponentFocus } from '../../global/js/hooks/useCreateComponentFocus.js';
 import { useValidCreateStepCount } from '../../global/js/hooks/useValidCreateStepCount.js';
 import { useResetCreateComponent } from '../../global/js/hooks/useResetCreateComponent.js';
 import { useCreateComponentStepChange } from '../../global/js/hooks/useCreateComponentStepChange.js';
 import { CreateInfluencer } from '../CreateInfluencer/CreateInfluencer.js';
-import { ActionSet } from '../ActionSet/ActionSet.js';
 
 var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle"];
 var blockClass = "".concat(pkg.prefix, "--create-full-page");

package/es/components/CreateFullPage/index.d.ts

@@ -1,2 +1,9 @@
-export { CreateFullPage } from "./CreateFullPage";
-export { CreateFullPageStep } from "./CreateFullPageStep";
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { CreateFullPage } from './CreateFullPage';
+export { CreateFullPageStep } from './CreateFullPageStep';
+export type { CreateFullPageProps } from './CreateFullPage';

package/es/components/CreateModal/CreateModal.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
 import { ComposedModal } from '@carbon/react';
-interface CreateModalProps extends React.ComponentProps<typeof ComposedModal> {
+import React, { ReactNode } from 'react';
+export interface CreateModalProps extends React.ComponentProps<typeof ComposedModal> {
     /**
      * Specify an optional className to be applied to the modal root node
      */
@@ -69,4 +69,3 @@ immediately apparent to the user, with a clear and obvious path to completion.
 export declare let CreateModal: React.ForwardRefExoticComponent<CreateModalProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
-export {};

package/es/components/CreateModal/CreateModal.js

@@ -6,8 +6,8 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
 import { ComposedModal, ModalHeader, ModalBody, Form, ModalFooter, Button } from '@carbon/react';
+import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';