@carbon/ibm-products 2.43.2-canary.161 → 2.43.2-canary.165

package/es/components/ConditionBuilder/ConditionBuilder.js

@@ -14,7 +14,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import ConditionBuilderContent from './ConditionBuilderContent/ConditionBuilderContent.js';
 import { ConditionBuilderProvider } from './ConditionBuilderContext/ConditionBuilderProvider.js';
 import { pkg } from '../../settings.js';
-import { blockClass } from './ConditionBuilderContext/DataConfigs.js';
+import { blockClass, NON_HIERARCHICAL_VARIANT } from './ConditionBuilderContext/DataConfigs.js';
 import { handleKeyDown } from './utils/handleKeyboardEvents.js';
 
 var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold", "getOptions", "initialState", "getConditionState", "getActionsState", "variant", "actions", "translateWithId"];
@@ -53,7 +53,7 @@ var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     getConditionState = _ref.getConditionState,
     getActionsState = _ref.getActionsState,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'sentence' : _ref$variant,
+    variant = _ref$variant === void 0 ? NON_HIERARCHICAL_VARIANT : _ref$variant,
     actions = _ref.actions,
     translateWithId = _ref.translateWithId,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -211,9 +211,9 @@ ConditionBuilder.propTypes = {
   translateWithId: PropTypes.func,
   /* TODO: add types and DocGen for all props. */
   /**
-   * Provide the condition builder variant: sentence/ tree
+   * Provide the condition builder variant: Non-Hierarchical/ Hierarchical
    */
-  variant: PropTypes.oneOf(['tree', 'sentence'])
+  variant: PropTypes.oneOf(['Non-Hierarchical', 'Hierarchical'])
 };
 
 export { ConditionBuilder };

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

@@ -129,7 +129,7 @@ export type ConditionBuilderProps = {
     className?: string;
     popOverSearchThreshold: number;
     startConditionLabel: string;
-    variant?: 'sentence' | 'tree';
+    variant?: 'Non-Hierarchical' | 'Hierarchical';
     translateWithId: (id: string) => string;
 };
 export interface ConditionBuilderContextInputProps extends PropsWithChildren {

package/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { useContext, useCallback } from 'react';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
 import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js';
-import { blockClass, connectorConfig } from '../ConditionBuilderContext/DataConfigs.js';
+import { HIERARCHICAL_VARIANT, blockClass, connectorConfig } from '../ConditionBuilderContext/DataConfigs.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { focusThisField } from '../utils/util.js';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
@@ -47,7 +47,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
     onChange === null || onChange === void 0 || onChange(op);
     focusThisField(evt, conditionBuilderRef);
   };
-  return variant == 'tree' ? /*#__PURE__*/React__default.createElement("span", {
+  return variant == HIERARCHICAL_VARIANT ? /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(className, " ").concat(blockClass, "__connector--disabled")
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
     label: operator

package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -12,7 +12,7 @@ import { Button, Section, Heading } from '@carbon/react';
 import { Add, TextNewLine } from '@carbon/react/icons';
 import ConditionGroupBuilder from '../ConditionGroupBuilder/ConditionGroupBuilder.js';
 import { ConditionBuilderContext, emptyState } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
-import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+import { blockClass, HIERARCHICAL_VARIANT } from '../ConditionBuilderContext/DataConfigs.js';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
 import uuidv4 from '../../../global/js/utils/uuidv4.js';
 import ConditionPreview from '../ConditionPreview/ConditionPreview.js';
@@ -41,10 +41,11 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showConditionGroupPreview = _useState4[0],
     setShowConditionGroupPreview = _useState4[1];
-  var _useTranslations = useTranslations(['addConditionGroupText', 'conditionHeadingText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 2),
+  var _useTranslations = useTranslations(['addConditionGroupText', 'conditionHeadingText', 'conditionBuilderHierarchicalText']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 3),
     addConditionGroupText = _useTranslations2[0],
-    conditionHeadingText = _useTranslations2[1];
+    conditionHeadingText = _useTranslations2[1],
+    conditionBuilderHierarchicalText = _useTranslations2[2];
   var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
     setShowConditionGroupPreview(true);
   };
@@ -135,7 +136,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(Heading, null, conditionHeadingText)), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content-container"),
     role: "treegrid",
-    "aria-label": "condition builder tree"
+    "aria-label": conditionBuilderHierarchicalText
   }, rootState && (rootState === null || rootState === void 0 || (_rootState$groups4 = rootState.groups) === null || _rootState$groups4 === void 0 ? void 0 : _rootState$groups4.map(function (eachGroup, groupIndex) {
     var _ref2;
     return /*#__PURE__*/React__default.createElement("div", {
@@ -156,7 +157,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
         onChangeHandler(updatedGroup, groupIndex);
       }
     }), rootState.groups && groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default.createElement(GroupConnector, null))));
-  })), variant == 'tree' && /*#__PURE__*/React__default.createElement("div", {
+  })), variant == HIERARCHICAL_VARIANT && /*#__PURE__*/React__default.createElement("div", {
     role: "row",
     tabIndex: -1,
     "aria-level": 1,

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

@@ -117,7 +117,7 @@ ConditionBuilderProvider.propTypes = {
    */
   translateWithId: PropTypes.func,
   /**
-   * Provide the condition builder variant: sentence/ tree
+   * Provide the condition builder variant: Non-Hierarchical/ Hierarchical
    */
   variant: PropTypes.string.isRequired
 };

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

@@ -16,6 +16,8 @@ export const operatorConfig: {
     id: string;
     type: string;
 }[];
+export const NON_HIERARCHICAL_VARIANT: "Non-Hierarchical";
+export const HIERARCHICAL_VARIANT: "Hierarchical";
 export const blockClass: string;
 export namespace valueRenderers {
     function text(val: any): any;

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

@@ -72,6 +72,8 @@ var operatorConfig = [{
   id: 'between',
   type: 'date'
 }];
+var NON_HIERARCHICAL_VARIANT = 'Non-Hierarchical';
+var HIERARCHICAL_VARIANT = 'Hierarchical';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--condition-builder");
 var formatDate = function formatDate(date) {
@@ -120,4 +122,4 @@ var valueRenderers = {
   }
 };
 
-export { blockClass, connectorConfig, operatorConfig, statementConfig, valueRenderers };
+export { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, connectorConfig, operatorConfig, statementConfig, valueRenderers };

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

@@ -42,4 +42,5 @@ export namespace translationsObject {
     let addPropertyText: string;
     let addOperatorText: string;
     let addValueText: string;
+    let conditionBuilderHierarchicalText: string;
 }

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

@@ -48,7 +48,8 @@ var translationsObject = {
   conditionHeadingText: 'Condition',
   addPropertyText: 'Add property',
   addOperatorText: 'Add operator',
-  addValueText: 'Add value'
+  addValueText: 'Add value',
+  conditionBuilderHierarchicalText: 'Condition Builder Hierarchical'
 };
 
 export { translationsObject };

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

@@ -10,7 +10,7 @@ import React__default, { useContext, useState, useRef, Fragment } from 'react';
 import ConditionBlock from '../ConditionBlock/ConditionBlock.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { blockClass, statementConfig } from '../ConditionBuilderContext/DataConfigs.js';
+import { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, statementConfig } from '../ConditionBuilderContext/DataConfigs.js';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
 import { focusThisField, manageTabIndexAndFocus } from '../utils/util.js';
 import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector.js';
@@ -54,7 +54,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var conditionBuilderContentRef = useRef(null);
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group && group.conditions && group.conditions.length > 1) {
-      variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
+      variant == HIERARCHICAL_VARIANT ? handleFocusOnCloseHierarchical(evt) : handleFocusOnClose(evt, conditionIndex);
       if (!checkGroupHaveCondition(group.conditions, conditionId)) {
         var _group$conditions;
         //when we delete the last  condition of a group without deleting  the subgroup, we need to restructure the group.
@@ -129,7 +129,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       manageTabIndexAndFocus(currentGroupCloseButtons[conditionIndex + 1], conditionBuilderRef);
     }
   };
-  var handleFocusOnCloseTree = function handleFocusOnCloseTree(evt) {
+  var handleFocusOnCloseHierarchical = function handleFocusOnCloseHierarchical(evt) {
     var _evt$currentTarget, _evt$currentTarget2, _conditionBuilderCont, _conditionBuilderCont2;
     //getting the current aria-level and aria-posinset.
     var currentLevel = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.getAttribute('aria-level');
@@ -215,7 +215,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       groupOperator: op
     }));
   };
-  var getSentenceVariant = function getSentenceVariant() {
+  var getNonHierarchicalVariant = function getNonHierarchicalVariant() {
     var _group$conditions2;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(className, "  eachGroup")
@@ -252,7 +252,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       }));
     })));
   };
-  var getTreeVariant = function getTreeVariant() {
+  var getHierarchicalVariant = function getHierarchicalVariant() {
     var _group$conditions4;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(className, " ").concat(blockClass, "__condition-wrapper"),
@@ -346,7 +346,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       }))));
     }));
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant == 'tree' && getTreeVariant(), variant == 'sentence' && getSentenceVariant());
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant == HIERARCHICAL_VARIANT && getHierarchicalVariant(), variant == NON_HIERARCHICAL_VARIANT && getNonHierarchicalVariant());
 };
 ConditionGroupBuilder.propTypes = {
   /**

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

@@ -6,7 +6,7 @@
  */
 
 import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+import { blockClass, HIERARCHICAL_VARIANT } from '../ConditionBuilderContext/DataConfigs.js';
 import { focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse, checkForHoldingKey, focusThisField } from './util.js';
 
 var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef, variant) {
@@ -101,12 +101,12 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
   switch (evt.key) {
     case 'ArrowRight':
       evt.preventDefault();
-      if (variant == 'tree') {
+      if (variant == HIERARCHICAL_VARIANT) {
         var _evt$target$closest;
         var allCellsInRow = Array.from((_evt$target$closest = evt.target.closest('[role="row"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('[role="gridcell"] button'));
         if (allCellsInRow.length === 1) {
           evt.target = evt.target.closest('[role="row"]');
-          handleRowNavigationTree(evt, conditionBuilderRef, variant);
+          handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
           //focus next row
         } else if (evt.target.getAttribute('role') == 'row') {
           //when current focus is on a row, then we need to enter inside and focus the first cell of that row
@@ -128,7 +128,7 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       break;
     case 'ArrowLeft':
       evt.preventDefault();
-      if (variant == 'tree') {
+      if (variant == HIERARCHICAL_VARIANT) {
         if (evt.target.getAttribute('role') !== 'row') {
           var _evt$target$closest2;
           //when any cell is focussed, arrow left will select the previous cell or current row
@@ -150,8 +150,8 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
     case 'ArrowUp':
     case 'ArrowDown':
       evt.preventDefault();
-      if (variant == 'tree') {
-        handleRowNavigationTree(evt, conditionBuilderRef, variant);
+      if (variant == HIERARCHICAL_VARIANT) {
+        handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
       } else {
         handleRowNavigation(evt, conditionBuilderRef, variant);
       }
@@ -179,7 +179,7 @@ var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef,
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
   navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef);
 };
-var handleRowNavigationTree = function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
+var handleRowNavigationHierarchical = function handleRowNavigationHierarchical(evt, conditionBuilderRef, variant) {
   var rows = getRows(conditionBuilderRef);
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
   var nextRowIndex = currentRowIndex;
@@ -217,7 +217,7 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   var itemName = evt.target.dataset.name;
   if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
     manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
-  } else if (variant === 'tree') {
+  } else if (variant === HIERARCHICAL_VARIANT) {
     //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/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -145,7 +145,7 @@ var ConditionBlock = function ConditionBlock(props) {
     setShowDeletionPreview(false);
   };
   var manageActionButtons = function manageActionButtons(conditionIndex, conditions) {
-    if (variant === 'tree') {
+    if (variant === DataConfigs.HIERARCHICAL_VARIANT) {
       return true;
     }
     return isLastCondition(conditionIndex, conditions);
@@ -159,7 +159,7 @@ var ConditionBlock = function ConditionBlock(props) {
     });
   };
   var getAriaAttributes = function getAriaAttributes() {
-    return variant == 'tree' ? {
+    return variant == DataConfigs.HIERARCHICAL_VARIANT ? {
       'aria-level': aria.level,
       'aria-posinset': aria.posinset,
       'aria-setsize': aria.setsize
@@ -180,7 +180,7 @@ var ConditionBlock = function ConditionBlock(props) {
     });
   };
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'tree'), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'sentence'), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition--interacting"), showAllActions)),
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), variant == DataConfigs.HIERARCHICAL_VARIANT), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), variant == DataConfigs.NON_HIERARCHICAL_VARIANT), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition--interacting"), showAllActions)),
     role: "row",
     "aria-label": conditionRowText
   }, getAriaAttributes(), {
@@ -279,7 +279,7 @@ var ConditionBlock = function ConditionBlock(props) {
     },
     showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
     hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
-    enableSubGroup: variant == 'tree',
+    enableSubGroup: variant == DataConfigs.HIERARCHICAL_VARIANT,
     showConditionPreviewHandler: showConditionPreviewHandler,
     hideConditionPreviewHandler: hideConditionPreviewHandler,
     className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-left")

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -62,7 +62,7 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
     getConditionState = _ref.getConditionState,
     getActionsState = _ref.getActionsState,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'sentence' : _ref$variant,
+    variant = _ref$variant === void 0 ? DataConfigs.NON_HIERARCHICAL_VARIANT : _ref$variant,
     actions = _ref.actions,
     translateWithId = _ref.translateWithId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -220,7 +220,7 @@ exports.ConditionBuilder.propTypes = {
   translateWithId: index["default"].func,
   /* TODO: add types and DocGen for all props. */
   /**
-   * Provide the condition builder variant: sentence/ tree
+   * Provide the condition builder variant: Non-Hierarchical/ Hierarchical
    */
-  variant: index["default"].oneOf(['tree', 'sentence'])
+  variant: index["default"].oneOf(['Non-Hierarchical', 'Hierarchical'])
 };

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

@@ -129,7 +129,7 @@ export type ConditionBuilderProps = {
     className?: string;
     popOverSearchThreshold: number;
     startConditionLabel: string;
-    variant?: 'sentence' | 'tree';
+    variant?: 'Non-Hierarchical' | 'Hierarchical';
     translateWithId: (id: string) => string;
 };
 export interface ConditionBuilderContextInputProps extends PropsWithChildren {

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

@@ -55,7 +55,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
     onChange === null || onChange === void 0 || onChange(op);
     util.focusThisField(evt, conditionBuilderRef);
   };
-  return variant == 'tree' ? /*#__PURE__*/React__default["default"].createElement("span", {
+  return variant == DataConfigs.HIERARCHICAL_VARIANT ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(className, " ").concat(DataConfigs.blockClass, "__connector--disabled")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
     label: operator

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

@@ -49,10 +49,11 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     showConditionGroupPreview = _useState4[0],
     setShowConditionGroupPreview = _useState4[1];
-  var _useTranslations = useTranslations.useTranslations(['addConditionGroupText', 'conditionHeadingText']),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+  var _useTranslations = useTranslations.useTranslations(['addConditionGroupText', 'conditionHeadingText', 'conditionBuilderHierarchicalText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 3),
     addConditionGroupText = _useTranslations2[0],
-    conditionHeadingText = _useTranslations2[1];
+    conditionHeadingText = _useTranslations2[1],
+    conditionBuilderHierarchicalText = _useTranslations2[2];
   var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
     setShowConditionGroupPreview(true);
   };
@@ -143,7 +144,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   }, /*#__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"
+    "aria-label": conditionBuilderHierarchicalText
   }, rootState && (rootState === null || rootState === void 0 || (_rootState$groups4 = rootState.groups) === null || _rootState$groups4 === void 0 ? void 0 : _rootState$groups4.map(function (eachGroup, groupIndex) {
     var _ref2;
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -164,7 +165,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
         onChangeHandler(updatedGroup, groupIndex);
       }
     }), rootState.groups && groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default["default"].createElement(GroupConnector["default"], null))));
-  })), variant == 'tree' && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), variant == DataConfigs.HIERARCHICAL_VARIANT && /*#__PURE__*/React__default["default"].createElement("div", {
     role: "row",
     tabIndex: -1,
     "aria-level": 1,

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

@@ -125,7 +125,7 @@ ConditionBuilderProvider.propTypes = {
    */
   translateWithId: index["default"].func,
   /**
-   * Provide the condition builder variant: sentence/ tree
+   * Provide the condition builder variant: Non-Hierarchical/ Hierarchical
    */
   variant: index["default"].string.isRequired
 };

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

@@ -16,6 +16,8 @@ export const operatorConfig: {
     id: string;
     type: string;
 }[];
+export const NON_HIERARCHICAL_VARIANT: "Non-Hierarchical";
+export const HIERARCHICAL_VARIANT: "Hierarchical";
 export const blockClass: string;
 export namespace valueRenderers {
     function text(val: any): any;

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

@@ -76,6 +76,8 @@ var operatorConfig = [{
   id: 'between',
   type: 'date'
 }];
+var NON_HIERARCHICAL_VARIANT = 'Non-Hierarchical';
+var HIERARCHICAL_VARIANT = 'Hierarchical';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
 var formatDate = function formatDate(date) {
@@ -124,6 +126,8 @@ var valueRenderers = {
   }
 };
 
+exports.HIERARCHICAL_VARIANT = HIERARCHICAL_VARIANT;
+exports.NON_HIERARCHICAL_VARIANT = NON_HIERARCHICAL_VARIANT;
 exports.blockClass = blockClass;
 exports.connectorConfig = connectorConfig;
 exports.operatorConfig = operatorConfig;

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

@@ -42,4 +42,5 @@ export namespace translationsObject {
     let addPropertyText: string;
     let addOperatorText: string;
     let addValueText: string;
+    let conditionBuilderHierarchicalText: string;
 }

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

@@ -52,7 +52,8 @@ var translationsObject = {
   conditionHeadingText: 'Condition',
   addPropertyText: 'Add property',
   addOperatorText: 'Add operator',
-  addValueText: 'Add value'
+  addValueText: 'Add value',
+  conditionBuilderHierarchicalText: 'Condition Builder Hierarchical'
 };
 
 exports.translationsObject = translationsObject;

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

@@ -63,7 +63,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var conditionBuilderContentRef = React.useRef(null);
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group && group.conditions && group.conditions.length > 1) {
-      variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
+      variant == DataConfigs.HIERARCHICAL_VARIANT ? handleFocusOnCloseHierarchical(evt) : handleFocusOnClose(evt, conditionIndex);
       if (!checkGroupHaveCondition(group.conditions, conditionId)) {
         var _group$conditions;
         //when we delete the last  condition of a group without deleting  the subgroup, we need to restructure the group.
@@ -138,7 +138,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       util.manageTabIndexAndFocus(currentGroupCloseButtons[conditionIndex + 1], conditionBuilderRef);
     }
   };
-  var handleFocusOnCloseTree = function handleFocusOnCloseTree(evt) {
+  var handleFocusOnCloseHierarchical = function handleFocusOnCloseHierarchical(evt) {
     var _evt$currentTarget, _evt$currentTarget2, _conditionBuilderCont, _conditionBuilderCont2;
     //getting the current aria-level and aria-posinset.
     var currentLevel = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.getAttribute('aria-level');
@@ -224,7 +224,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       groupOperator: op
     }));
   };
-  var getSentenceVariant = function getSentenceVariant() {
+  var getNonHierarchicalVariant = function getNonHierarchicalVariant() {
     var _group$conditions2;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(className, "  eachGroup")
@@ -261,7 +261,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       }));
     })));
   };
-  var getTreeVariant = function getTreeVariant() {
+  var getHierarchicalVariant = function getHierarchicalVariant() {
     var _group$conditions4;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(className, " ").concat(DataConfigs.blockClass, "__condition-wrapper"),
@@ -355,7 +355,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       }))));
     }));
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, variant == 'tree' && getTreeVariant(), variant == 'sentence' && getSentenceVariant());
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, variant == DataConfigs.HIERARCHICAL_VARIANT && getHierarchicalVariant(), variant == DataConfigs.NON_HIERARCHICAL_VARIANT && getNonHierarchicalVariant());
 };
 ConditionGroupBuilder.propTypes = {
   /**

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

@@ -105,12 +105,12 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
   switch (evt.key) {
     case 'ArrowRight':
       evt.preventDefault();
-      if (variant == 'tree') {
+      if (variant == DataConfigs.HIERARCHICAL_VARIANT) {
         var _evt$target$closest;
         var allCellsInRow = Array.from((_evt$target$closest = evt.target.closest('[role="row"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('[role="gridcell"] button'));
         if (allCellsInRow.length === 1) {
           evt.target = evt.target.closest('[role="row"]');
-          handleRowNavigationTree(evt, conditionBuilderRef, variant);
+          handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
           //focus next row
         } else if (evt.target.getAttribute('role') == 'row') {
           //when current focus is on a row, then we need to enter inside and focus the first cell of that row
@@ -132,7 +132,7 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       break;
     case 'ArrowLeft':
       evt.preventDefault();
-      if (variant == 'tree') {
+      if (variant == DataConfigs.HIERARCHICAL_VARIANT) {
         if (evt.target.getAttribute('role') !== 'row') {
           var _evt$target$closest2;
           //when any cell is focussed, arrow left will select the previous cell or current row
@@ -154,8 +154,8 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
     case 'ArrowUp':
     case 'ArrowDown':
       evt.preventDefault();
-      if (variant == 'tree') {
-        handleRowNavigationTree(evt, conditionBuilderRef, variant);
+      if (variant == DataConfigs.HIERARCHICAL_VARIANT) {
+        handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
       } else {
         handleRowNavigation(evt, conditionBuilderRef, variant);
       }
@@ -183,7 +183,7 @@ var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef,
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
   navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef);
 };
-var handleRowNavigationTree = function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
+var handleRowNavigationHierarchical = function handleRowNavigationHierarchical(evt, conditionBuilderRef, variant) {
   var rows = getRows(conditionBuilderRef);
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
   var nextRowIndex = currentRowIndex;
@@ -221,7 +221,7 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   var itemName = evt.target.dataset.name;
   if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
     util.manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
-  } else if (variant === 'tree') {
+  } else if (variant === DataConfigs.HIERARCHICAL_VARIANT) {
     //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)
     util.manageTabIndexAndFocus(nextRow, conditionBuilderRef);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.161+f7010028d",
+  "version": "2.43.2-canary.165+13a8d28ba",
   "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": "f7010028dbedae7178244b4123a3b0bc485efa70"
+  "gitHead": "13a8d28ba4cb2631a5ad5be9a94d79d5f36c77c7"
 }

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

@@ -61,7 +61,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   margin-top: $spacing-03;
   margin-bottom: $spacing-03;
 }
-.#{$block-class}__tree
+.#{$block-class}__Hierarchical
   .#{$block-class}__actions-container
   .#{$block-class}__condition-wrapper {
   flex-direction: column;

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

@@ -231,7 +231,7 @@ $colors: (
   }
 }
 
-.#{$block-class}__tree {
+.#{$block-class}__Hierarchical {
   .#{$block-class}__condition-wrapper > :nth-child(n + 3) {
     flex-basis: 100%;
   }