@carbon/ibm-products 2.43.2-canary.103 → 2.43.2-canary.105

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

@@ -44,11 +44,14 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useTranslations = useTranslations.useTranslations(['invalidText', 'addConditionText', label]),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 3),
+  var _useTranslations = useTranslations.useTranslations(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label]),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 6),
     invalidText = _useTranslations2[0],
     addConditionText = _useTranslations2[1],
-    labelText = _useTranslations2[2];
+    addPropertyText = _useTranslations2[2],
+    addOperatorText = _useTranslations2[3],
+    addValueText = _useTranslations2[4],
+    labelText = _useTranslations2[5];
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     conditionBuilderRef = _useContext.conditionBuilderRef;
   var getPropertyDetails = function getPropertyDetails() {
@@ -133,6 +136,19 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       manageInvalidSelection();
     }
   };
+  var getLabel = function getLabel() {
+    if (propertyLabel) {
+      return propertyLabel;
+    } else if (rest['data-name'] === 'propertyField') {
+      return addPropertyText;
+    } else if (rest['data-name'] === 'operatorField') {
+      return addOperatorText;
+    } else if (rest['data-name'] === 'valueField') {
+      return addValueText;
+    } else {
+      return addConditionText;
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement(react.Popover, {
     open: open,
     isTabTip: true,
@@ -141,7 +157,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     ref: popoverRef,
     onRequestClose: closePopover
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
-    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : addConditionText,
+    label: getLabel(),
     hideLabel: !label ? true : false,
     onClick: togglePopover,
     className: className,

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

@@ -59,6 +59,10 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    showDeletionPreviewForSubgroups = _useState6[0],
+    setShowDeletionPreviewForSubgroups = _useState6[1];
   var conditionBuilderContentRef = React.useRef();
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
@@ -89,9 +93,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
             groupedItems.conditions.push(item);
           }
         });
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-          conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(groupedItems.conditions), _rollupPluginBabelHelpers.toConsumableArray(groupedItems.groups))
-        }));
+        onRemove(evt);
+        // onChange({
+        //   ...group,
+        //   conditions: [...groupedItems.conditions, ...groupedItems.groups],
+        // });
       } else {
         onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           conditions: group.conditions.filter(function (condition) {
@@ -164,10 +170,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         };
         setTimeout(function () {
           var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
-          util.manageTabIndexAndFocus(currentRowToFocus, conditionBuilderRef);
+          util.manageTabIndexAndFocus(currentRowToFocus === null || currentRowToFocus === void 0 ? void 0 : currentRowToFocus.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
         }, 0);
       } else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
-        util.manageTabIndexAndFocus(prevRows[prevRows.length - 2], conditionBuilderRef);
+        var _prevRows;
+        util.manageTabIndexAndFocus((_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 ? void 0 : _prevRows.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
       }
     }
   };
@@ -288,7 +295,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
         key: eachCondition.id
       }, eachCondition.conditions ? /*#__PURE__*/React__default["default"].createElement("div", {
-        className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block subgroup  ").concat(DataConfigs.blockClass, "__gap"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1))
+        className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block subgroup  ").concat(DataConfigs.blockClass, "__gap"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), "".concat(DataConfigs.blockClass, "__subgroup_deletionPreview"), showDeletionPreviewForSubgroups), {})
       }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
         className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom ").concat(DataConfigs.blockClass, "__groupConnector"),
         operator: group.groupOperator,
@@ -336,7 +343,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           _showConditionPreviewHandler(conditionIndex);
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
-        isLastCondition: isLastCondition
+        isLastCondition: isLastCondition,
+        setShowDeletionPreviewForSubgroups: setShowDeletionPreviewForSubgroups
       })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
         previewType: "subGroup",
         group: group

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts

@@ -1,10 +1,12 @@
 export default ConditionPreview;
-declare function ConditionPreview({ previewType, group }: {
+declare function ConditionPreview({ previewType, group, colorIndex }: {
     previewType: any;
     group: any;
+    colorIndex: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionPreview {
     namespace propTypes {
+        let colorIndex: PropTypes.Requireable<number>;
         let group: PropTypes.Requireable<object>;
         let previewType: PropTypes.Requireable<string>;
     }

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -27,7 +27,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var ConditionPreview = function ConditionPreview(_ref) {
   var _ConditionBuilderItem, _ConditionBuilderItem2, _ConditionBuilderItem3;
   var previewType = _ref.previewType,
-    group = _ref.group;
+    group = _ref.group,
+    colorIndex = _ref.colorIndex;
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     animate = _useState2[0],
@@ -59,6 +60,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__statement-button"),
     label: group.groupOperator
   })), /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-color-index": colorIndex,
     "aria-hidden": true,
     className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -67,7 +69,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__statement-button"),
     label: ifText
   })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -80,7 +82,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
     operator: ifText
   }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -91,6 +93,10 @@ var ConditionPreview = function ConditionPreview(_ref) {
 };
 var ConditionPreview$1 = ConditionPreview;
 ConditionPreview.propTypes = {
+  /**
+   * index of the color for next group
+   */
+  colorIndex: index["default"].number,
   /**
    * current conditional group
    */

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

@@ -39,12 +39,18 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
   var allItems = [];
   switch (key) {
     case 'ArrowUp':
+      evt.preventDefault();
       //traverse through the popover options, search box, selectAll button
       parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
         util.traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
       });
+      //scroll to top when we reach a the top of the list to make search box visible
+      if (Array.from(evt.target.closest('ul').querySelectorAll('li')).indexOf(evt.target) === 1) {
+        parentContainer.querySelector(".".concat(DataConfigs.blockClass, "__popover-content-wrapper")).scrollTop = 0;
+      }
       break;
     case 'ArrowDown':
+      evt.preventDefault();
       //traverse through the popover options, search box, selectAll button
       parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
         util.traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
@@ -72,12 +78,19 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
       }
       break;
     case 'Enter':
-      if (isMultiSelect !== 'true') {
+      if (isMultiSelect === 'true') {
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme2;
+          //for button , enter key is click which already handled by framework, for other elements trigger click
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+        }
+        evt.preventDefault();
+      } else {
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme3;
           //for button , enter key is click which already handled by framework, else trigger click
           util.focusThisField(evt, conditionBuilderRef);
-          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || _document$activeEleme3.click();
         }
       }
       break;
@@ -88,7 +101,7 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
   }
 };
 var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
-  var _document$activeEleme3;
+  var _document$activeEleme4;
   switch (evt.key) {
     case 'ArrowRight':
       evt.preventDefault();
@@ -148,9 +161,9 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       }
       break;
     case 'Enter':
-      if (((_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || (_document$activeEleme3 = _document$activeEleme3.querySelectorAll("button")) === null || _document$activeEleme3 === void 0 ? void 0 : _document$activeEleme3.length) === 1) {
-        var _document$activeEleme4;
-        (_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === void 0 || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")[0]) === null || _document$activeEleme4 === void 0 || _document$activeEleme4.click();
+      if (((_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === void 0 || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")) === null || _document$activeEleme4 === void 0 ? void 0 : _document$activeEleme4.length) === 1) {
+        var _document$activeEleme5;
+        (_document$activeEleme5 = document.activeElement) === null || _document$activeEleme5 === void 0 || (_document$activeEleme5 = _document$activeEleme5.querySelectorAll("button")[0]) === null || _document$activeEleme5 === void 0 || _document$activeEleme5.click();
       }
       break;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.103+95b756345",
+  "version": "2.43.2-canary.105+30b4fdb2a",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "95b7563457730ea24fed77e9aca2c964d9d713ac"
+  "gitHead": "30b4fdb2a315b501d3e33f93ea45b6f967117aed"
 }

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -73,3 +73,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__group-separator {
   width: fit-content;
 }
+.#{$block-class}__tooltip {
+  word-break: break-all;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -36,6 +36,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   background-color: $tag-background-red;
   color: $tag-color-red;
 }
+.#{$block-class}__subgroup_deletionPreview {
+  .#{$block-class}__group {
+    /* stylelint-disable max-nesting-depth */
+    button {
+      background-color: $tag-background-red;
+      color: $tag-color-red;
+    }
+  }
+}
 
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
@@ -63,6 +72,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__group-preview-animate {
   height: auto;
+  color: $text-secondary;
   opacity: 0.5;
   pointer-events: none;
   transition: all $duration-moderate-02 motion(exit, expressive);
@@ -70,10 +80,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__connector--disabled {
   display: flex;
   min-width: $spacing-10;
-  align-items: center;
   background-color: $layer;
   color: $text-helper;
-  padding-inline: $spacing-03;
+  pointer-events: none;
 }
 .#{$block-class}__condition-wrapper
   > .#{$block-class}__condition-block:last-child

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:math';
 @use 'sass:string';
 @use '@carbon/react/scss/theme' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
@@ -167,21 +168,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 //need to revamp to a simpler logic
 $colors: (
-  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30, $purple-20),
-  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30, $cyan-20),
-  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30, $teal-20),
-  (
-    $magenta-70,
-    $magenta-60,
-    $magenta-50,
-    $magenta-40,
-    $magenta-30,
-    $magenta-20
-  ),
-  ($red-70, $red-60, $red-50, $red-40, $red-30, $red-20),
-  ($orange-70, $orange-60, $orange-50, $orange-40, $orange-30, $orange-20),
-  ($yellow-70, $yellow-60, $yellow-50, $yellow-40, $yellow-30, $yellow-20),
-  ($green-70, $green-60, $green-50, $green-40, $green-30, $green-20)
+  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30),
+  ($blue-70, $blue-60, $blue-50, $blue-40, $blue-30),
+  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30),
+  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30),
+  ($green-70, $green-60, $green-50, $green-40, $green-30)
 );
 
 @for $i from 1 through list.length($colors) {
@@ -191,10 +182,30 @@ $colors: (
     )
   );
   $group-colors: list.nth($colors, $i);
-  @each $color in $group-colors {
+  $group-colors-length: list.length($group-colors);
+
+  //this is to select and add color to the new group preview
+  .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}']
+    button {
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    $next-group-color: list.nth($colors, ($i%list.length($colors)) +1);
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1);
+  }
+
+  //we need to select the group color from the $colors array and need to repeat the colors after $colors.length subgroups
+  @for $el-index from 1 through 50 {
+    $item-index: $el-index;
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    $item-index: ((($item-index - 1) % $group-colors-length) +1);
     #{$selector} {
-      /* stylelint-disable-next-line carbon/theme-token-use */
-      --#{$block-class}__condition-wrapper-color: #{$color};
+      @if $item-index != 1 {
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        --#{$block-class}__condition-wrapper-color: #{list.nth(
+            $group-colors,
+            $item-index
+          )}; // stylelint-disable-line carbon/theme-token-use
+      }
     }
 
     $selector: list.append(
@@ -211,13 +222,12 @@ $colors: (
   .#{$block-class}__groupConnector {
     background-color: $layer;
   }
-  .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
-  .#{$block-class}__condition-wrapper
+  .#{$block-class}__condition-wrapper:not(.#{$block-class}__group-preview)
+    > :nth-child(1)
+    .#{$block-class}__button,
+  .#{$block-class}__condition-wrapper:not(.#{$block-class}__group-preview)
     > :nth-child(2)
-    .#{$block-class}__button:not(
-      .#{$block-class}__add-button,
-      .#{$block-class}__add-condition-sub-group
-    ) {
+    .#{$block-class}__button {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
@@ -237,24 +247,24 @@ $colors: (
 .#{$block-class}__add-condition-sub-group-wrapper {
   z-index: -1;
   width: 0;
-  margin-left: -50%;
-  opacity: 0;
   pointer-events: none;
+  transform: translateX(-100%);
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-  transition: all linear $duration-fast-02;
+  transition: transform motion(exit, productive) $duration-fast-02;
 }
 .#{$block-class}__add-condition-sub-group-wrapper--show {
   z-index: 0;
   width: auto;
-  margin-left: 0;
-  opacity: 1;
   pointer-events: all;
-  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-  transition: all linear $duration-fast-02;
+  transform: translateX(0);
 }
 .#{$block-class}__invalid-input {
   display: flex;
 }
 .#{$block-class}__invalid-input > svg {
   color: $support-warning;
+  /* stylelint-disable max-nesting-depth */
+  > path:first-child {
+    fill: $icon-primary;
+  }
 }