@carbon/ibm-products 2.59.0 → 2.60.0-rc.0

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

@@ -31,7 +31,7 @@ var useDataConfigs = require('../utils/useDataConfigs.js');
  * @returns
  */
 
-var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
+var _ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var _ConditionPreview, _ConditionPreview2;
   var group = _ref.group,
     aria = _ref.aria,
@@ -60,14 +60,18 @@ 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 == util.HIERARCHICAL_VARIANT ? handleFocusOnCloseHierarchical(evt) : handleFocusOnClose(evt, conditionIndex);
+      if (variant == util.HIERARCHICAL_VARIANT) {
+        handleFocusOnCloseHierarchical(evt);
+      } else {
+        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.
         //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 === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.reduce(function (acc, condition) {
+        var allConditions = group === null || group === undefined || (_group$conditions = group.conditions) === null || _group$conditions === undefined ? undefined : _group$conditions.reduce(function (acc, condition) {
           var _condition = condition;
           if (_condition.conditions) {
             //this is a subgroup
@@ -75,7 +79,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           }
           return acc;
         }, []);
-        onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+        onChange === null || onChange === undefined || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           conditions: allConditions
         }));
       } else {
@@ -85,16 +89,16 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         //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 ? void 0 : filteredConditions[0]).conditions) {
+        if ((filteredConditions === null || filteredConditions === undefined ? undefined : filteredConditions[0]).conditions) {
           var firstFilteredConditions = filteredConditions[0];
-          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_rollupPluginBabelHelpers.toConsumableArray(firstFilteredConditions === null || firstFilteredConditions === void 0 ? void 0 : firstFilteredConditions.conditions)));
+          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_rollupPluginBabelHelpers.toConsumableArray(firstFilteredConditions === null || firstFilteredConditions === undefined ? undefined : firstFilteredConditions.conditions)));
         }
-        onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+        onChange === null || onChange === undefined || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           conditions: filteredConditions
         }));
       }
     } else {
-      onRemove === null || onRemove === void 0 || onRemove(evt);
+      onRemove === null || onRemove === undefined || onRemove(evt);
     }
   };
   //check to identify a group without a plain condition
@@ -105,10 +109,10 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
     var _group$id;
-    var updatedConditions = [].concat(_rollupPluginBabelHelpers.toConsumableArray(group !== null && group !== void 0 && group.conditions ? group.conditions.slice(0, conditionIndex) : []), [updatedCondition], _rollupPluginBabelHelpers.toConsumableArray(group !== null && group !== void 0 && group.conditions ? group.conditions.slice(conditionIndex + 1) : []));
-    onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+    var updatedConditions = [].concat(_rollupPluginBabelHelpers.toConsumableArray(group !== null && group !== undefined && group.conditions ? group.conditions.slice(0, conditionIndex) : []), [updatedCondition], _rollupPluginBabelHelpers.toConsumableArray(group !== null && group !== undefined && group.conditions ? group.conditions.slice(conditionIndex + 1) : []));
+    onChange === null || onChange === undefined || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
       conditions: updatedConditions,
-      id: (_group$id = group === null || group === void 0 ? void 0 : group.id) !== null && _group$id !== void 0 ? _group$id : uuidv4.default()
+      id: (_group$id = group === null || group === undefined ? undefined : group.id) !== null && _group$id !== undefined ? _group$id : uuidv4.default()
     }));
   };
   var addConditionHandler = function addConditionHandler(conditionIndex) {
@@ -119,7 +123,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       popoverToOpen: 'propertyField',
       id: uuidv4.default()
     };
-    onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+    onChange === null || onChange === undefined || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
       conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions ? group.conditions.slice(0, conditionIndex + 1) : []), [newCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions ? group.conditions.slice(conditionIndex + 1) : []))
     }));
   };
@@ -128,7 +132,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     //get all close buttons.
     //if the last condition is closing, focus the second last one.
     //or focus the next one.
-    var currentGroupCloseButtons = (_e$currentTarget$clos = e.currentTarget.closest(".".concat(util.blockClass, "__group"))) === null || _e$currentTarget$clos === void 0 ? void 0 : _e$currentTarget$clos.querySelectorAll('[data-name="closeCondition"]');
+    var currentGroupCloseButtons = (_e$currentTarget$clos = e.currentTarget.closest(".".concat(util.blockClass, "__group"))) === null || _e$currentTarget$clos === undefined ? undefined : _e$currentTarget$clos.querySelectorAll('[data-name="closeCondition"]');
     if (conditionIndex == currentGroupCloseButtons.length - 1) {
       util.manageTabIndexAndFocus(currentGroupCloseButtons[conditionIndex - 1], conditionBuilderRef);
     } else {
@@ -138,25 +142,25 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   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');
-    var currentPos = (_evt$currentTarget2 = evt.currentTarget) === null || _evt$currentTarget2 === void 0 || (_evt$currentTarget2 = _evt$currentTarget2.closest('[role="row"]')) === null || _evt$currentTarget2 === void 0 ? void 0 : _evt$currentTarget2.getAttribute('aria-posinset');
+    var currentLevel = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === undefined || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === undefined ? undefined : _evt$currentTarget.getAttribute('aria-level');
+    var currentPos = (_evt$currentTarget2 = evt.currentTarget) === null || _evt$currentTarget2 === undefined || (_evt$currentTarget2 = _evt$currentTarget2.closest('[role="row"]')) === null || _evt$currentTarget2 === undefined ? undefined : _evt$currentTarget2.getAttribute('aria-posinset');
 
     //finding the next and previous items in same level
-    var nextElement = (_conditionBuilderCont = conditionBuilderContentRef.current) === null || _conditionBuilderCont === void 0 ? void 0 : _conditionBuilderCont.querySelector("[aria-level=\"".concat(currentLevel, "\"][aria-posinset=\"").concat(Number(currentPos) + 1, "\"]"));
-    var prevElement = (_conditionBuilderCont2 = conditionBuilderContentRef.current) === null || _conditionBuilderCont2 === void 0 ? void 0 : _conditionBuilderCont2.querySelector("[aria-level=\"".concat(currentLevel, "\"][aria-posinset=\"").concat(Number(currentPos) - 1, "\"]"));
+    var nextElement = (_conditionBuilderCont = conditionBuilderContentRef.current) === null || _conditionBuilderCont === undefined ? undefined : _conditionBuilderCont.querySelector("[aria-level=\"".concat(currentLevel, "\"][aria-posinset=\"").concat(Number(currentPos) + 1, "\"]"));
+    var prevElement = (_conditionBuilderCont2 = conditionBuilderContentRef.current) === null || _conditionBuilderCont2 === undefined ? undefined : _conditionBuilderCont2.querySelector("[aria-level=\"".concat(currentLevel, "\"][aria-posinset=\"").concat(Number(currentPos) - 1, "\"]"));
     //checking if next level is a valid condition. If then, focus the close button inside that condition
     //Otherwise , check the previous item is a valid condition
 
-    if (nextElement !== null && nextElement !== void 0 && nextElement.classList.contains("".concat(util.blockClass, "__condition-block"))) {
-      util.manageTabIndexAndFocus(nextElement === null || nextElement === void 0 ? void 0 : nextElement.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
-    } else if (prevElement !== null && prevElement !== void 0 && prevElement.classList.contains("".concat(util.blockClass, "__condition-block"))) {
-      util.manageTabIndexAndFocus(prevElement === null || prevElement === void 0 ? void 0 : prevElement.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
+    if (nextElement !== null && nextElement !== undefined && nextElement.classList.contains("".concat(util.blockClass, "__condition-block"))) {
+      util.manageTabIndexAndFocus(nextElement === null || nextElement === undefined ? undefined : nextElement.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
+    } else if (prevElement !== null && prevElement !== undefined && prevElement.classList.contains("".concat(util.blockClass, "__condition-block"))) {
+      util.manageTabIndexAndFocus(prevElement === null || prevElement === undefined ? undefined : prevElement.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
     }
     //If there are no valid condition in this group, focus next or previous row
     else {
       var _conditionBuilderCont3, _conditionBuilderCont4;
-      var prevRows = (_conditionBuilderCont3 = conditionBuilderContentRef.current) === null || _conditionBuilderCont3 === void 0 ? void 0 : _conditionBuilderCont3.querySelectorAll("[aria-level=\"".concat(Number(currentLevel) - 1, "\"][role=\"row\"]"));
-      var nextRow = (_conditionBuilderCont4 = conditionBuilderContentRef.current) === null || _conditionBuilderCont4 === void 0 ? void 0 : _conditionBuilderCont4.querySelector("[aria-level=\"".concat(Number(currentLevel) + 1, "\"][role=\"row\"]"));
+      var prevRows = (_conditionBuilderCont3 = conditionBuilderContentRef.current) === null || _conditionBuilderCont3 === undefined ? undefined : _conditionBuilderCont3.querySelectorAll("[aria-level=\"".concat(Number(currentLevel) - 1, "\"][role=\"row\"]"));
+      var nextRow = (_conditionBuilderCont4 = conditionBuilderContentRef.current) === null || _conditionBuilderCont4 === undefined ? undefined : _conditionBuilderCont4.querySelector("[aria-level=\"".concat(Number(currentLevel) + 1, "\"][role=\"row\"]"));
       if (nextRow) {
         //since there are no condition in current group, this group will move one level up
 
@@ -166,12 +170,12 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         };
         setTimeout(function () {
           var _conditionBuilderCont5;
-          var currentRowToFocus = (_conditionBuilderCont5 = conditionBuilderContentRef.current) === null || _conditionBuilderCont5 === void 0 ? void 0 : _conditionBuilderCont5.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
-          util.manageTabIndexAndFocus(currentRowToFocus === null || currentRowToFocus === void 0 ? void 0 : currentRowToFocus.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
+          var currentRowToFocus = (_conditionBuilderCont5 = conditionBuilderContentRef.current) === null || _conditionBuilderCont5 === undefined ? undefined : _conditionBuilderCont5.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
+          util.manageTabIndexAndFocus(currentRowToFocus === null || currentRowToFocus === undefined ? undefined : currentRowToFocus.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
         }, 0);
-      } else if (prevRows !== null && prevRows !== void 0 && prevRows.length && prevRows.length > 1) {
+      } else if (prevRows !== null && prevRows !== undefined && prevRows.length && prevRows.length > 1) {
         var _prevRows;
-        util.manageTabIndexAndFocus((_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 ? void 0 : _prevRows.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
+        util.manageTabIndexAndFocus((_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === undefined ? undefined : _prevRows.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
       }
     }
   };
@@ -210,7 +214,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     var _statementConfig$find;
     var groupOperator = (_statementConfig$find = statementConfig.find(function (statement) {
       return statement.id == updatedStatement;
-    })) === null || _statementConfig$find === void 0 ? void 0 : _statementConfig$find.connector;
+    })) === null || _statementConfig$find === undefined ? undefined : _statementConfig$find.connector;
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
       groupOperator: groupOperator,
       statement: updatedStatement
@@ -229,7 +233,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       className: "".concat(util.blockClass, "__condition-wrapper"),
       role: "grid",
       "aria-label": conditionBuilderText
-    }, group === null || group === void 0 || (_group$conditions2 = group.conditions) === null || _group$conditions2 === void 0 ? void 0 : _group$conditions2.map(function (eachCondition, conditionIndex) {
+    }, group === null || group === undefined || (_group$conditions2 = group.conditions) === null || _group$conditions2 === undefined ? undefined : _group$conditions2.map(function (eachCondition, conditionIndex) {
       var _group$conditions3;
       return /*#__PURE__*/React.createElement("div", {
         key: eachCondition.id,
@@ -239,7 +243,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: group === null || group === void 0 || (_group$conditions3 = group.conditions) === null || _group$conditions3 === void 0 ? void 0 : _group$conditions3.length
+          setsize: group === null || group === undefined || (_group$conditions3 = group.conditions) === null || _group$conditions3 === undefined ? undefined : _group$conditions3.length
         },
         isStatement: conditionIndex == 0,
         condition: eachCondition,
@@ -290,7 +294,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         options: statementConfig,
         isStatement: true
       }
-    }))), group === null || group === void 0 || (_group$conditions4 = group.conditions) === null || _group$conditions4 === void 0 ? void 0 : _group$conditions4.map(function (eachCondition, conditionIndex) {
+    }))), group === null || group === undefined || (_group$conditions4 = group.conditions) === null || _group$conditions4 === undefined ? undefined : _group$conditions4.map(function (eachCondition, conditionIndex) {
       var _group$conditions$len, _group$conditions5, _group$conditions$len2, _group$conditions6;
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: eachCondition.id
@@ -300,11 +304,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         className: "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-bottom ").concat(util.blockClass, "__groupConnector"),
         operator: group.groupOperator,
         "aria-hidden": true
-      }), /*#__PURE__*/React.createElement(ConditionGroupBuilder, {
+      }), /*#__PURE__*/React.createElement(_ConditionGroupBuilder, {
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: (_group$conditions$len = (_group$conditions5 = group.conditions) === null || _group$conditions5 === void 0 ? void 0 : _group$conditions5.length) !== null && _group$conditions$len !== void 0 ? _group$conditions$len : 0
+          setsize: (_group$conditions$len = (_group$conditions5 = group.conditions) === null || _group$conditions5 === undefined ? undefined : _group$conditions5.length) !== null && _group$conditions$len !== undefined ? _group$conditions$len : 0
         },
         className: "".concat(util.blockClass, "__group"),
         group: eachCondition,
@@ -319,7 +323,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: (_group$conditions$len2 = (_group$conditions6 = group.conditions) === null || _group$conditions6 === void 0 ? void 0 : _group$conditions6.length) !== null && _group$conditions$len2 !== void 0 ? _group$conditions$len2 : 0
+          setsize: (_group$conditions$len2 = (_group$conditions6 = group.conditions) === null || _group$conditions6 === undefined ? undefined : _group$conditions6.length) !== null && _group$conditions$len2 !== undefined ? _group$conditions$len2 : 0
         },
         isStatement: false,
         condition: eachCondition,
@@ -355,7 +359,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, variant == util.HIERARCHICAL_VARIANT && getHierarchicalVariant(), variant == util.NON_HIERARCHICAL_VARIANT && getNonHierarchicalVariant());
 };
-ConditionGroupBuilder.propTypes = {
+_ConditionGroupBuilder.propTypes = {
   /**
    * object contains the aria attributes
    */
@@ -378,4 +382,4 @@ ConditionGroupBuilder.propTypes = {
   onRemove: index.default.func
 };
 
-exports.default = ConditionGroupBuilder;
+exports.default = _ConditionGroupBuilder;

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

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ConditionGroup } from '../ConditionBuilder.types';
 interface ConditionPreviewProps {
     previewType: 'newGroup' | 'subGroup' | 'condition';
@@ -18,15 +17,15 @@ declare const ConditionPreview: {
         /**
          * index of the color for next group
          */
-        colorIndex: PropTypes.Requireable<number>;
+        colorIndex: any;
         /**
          * current conditional group
          */
-        group: PropTypes.Requireable<object>;
+        group: any;
         /**
          * type of review to be displayed
          */
-        previewType: PropTypes.Requireable<string>;
+        previewType: any;
     };
 };
 export default ConditionPreview;

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

@@ -13,7 +13,7 @@ var util = require('./util.js');
 var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef, variant) {
   var _activeElement$closes;
   var activeElement = document.activeElement;
-  if (!((_activeElement$closes = activeElement.closest(".".concat(util.blockClass, "__popover"))) !== null && _activeElement$closes !== void 0 && _activeElement$closes.querySelector('[role="dialog"]'))) {
+  if (!((_activeElement$closes = activeElement.closest(".".concat(util.blockClass, "__popover"))) !== null && _activeElement$closes !== undefined && _activeElement$closes.querySelector('[role="dialog"]'))) {
     handleKeyPressForMainContent(evt, conditionBuilderRef, variant);
   }
 };
@@ -21,7 +21,7 @@ var handleKeyDownForPopover = function handleKeyDownForPopover(evt, conditionBui
   if (excludeKeyPress(evt)) {
     return;
   }
-  handleKeyPressForPopover(evt, popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current, conditionBuilderRef);
+  handleKeyPressForPopover(evt, popoverRef === null || popoverRef === undefined ? undefined : popoverRef.current, conditionBuilderRef);
 };
 
 //skipping keyboard handling for date and time fields to get take carbon's
@@ -32,8 +32,8 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
   var _parentContainer$quer, _parentContainer$quer2, _evt$target$closest$q, _evt$target$closest;
   var key = evt.key;
   var isHoldingShiftKey = util.checkForHoldingKey(evt, 'shiftKey');
-  var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
-  var isOptionInput = (_parentContainer$quer2 = parentContainer.querySelectorAll("[role=\"option\"]")) === null || _parentContainer$quer2 === void 0 ? void 0 : _parentContainer$quer2.length;
+  var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === undefined ? undefined : _parentContainer$quer.dataset.multiSelect;
+  var isOptionInput = (_parentContainer$quer2 = parentContainer.querySelectorAll("[role=\"option\"]")) === null || _parentContainer$quer2 === undefined ? undefined : _parentContainer$quer2.length;
   var allItems = [];
   if (key === 'Escape') {
     //focus the corresponding field in which the popover is triggered from
@@ -49,7 +49,7 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
           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$q = (_evt$target$closest = evt.target.closest('ul')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('li')) !== null && _evt$target$closest$q !== void 0 ? _evt$target$closest$q : []).indexOf(evt.target) === 1) {
+        if (Array.from((_evt$target$closest$q = (_evt$target$closest = evt.target.closest('ul')) === null || _evt$target$closest === undefined ? undefined : _evt$target$closest.querySelectorAll('li')) !== null && _evt$target$closest$q !== undefined ? _evt$target$closest$q : []).indexOf(evt.target) === 1) {
           parentContainer.querySelector(".".concat(util.blockClass, "__popover-content-wrapper")).scrollTop = 0;
         }
         break;
@@ -76,7 +76,7 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
           if (document.activeElement.type !== 'button') {
             var _document$activeEleme;
             //for button , enter key is click which already handled by framework, for other elements trigger click
-            (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
+            (_document$activeEleme = document.activeElement) === null || _document$activeEleme === undefined || _document$activeEleme.click();
           }
           evt.preventDefault();
         }
@@ -87,14 +87,14 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
             var _document$activeEleme2;
             //for button , enter key is click which already handled by framework, for other elements trigger click
             evt.preventDefault();
-            (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+            (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === undefined || _document$activeEleme2.click();
           }
         } 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$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || _document$activeEleme3.click();
+            (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === undefined || _document$activeEleme3.click();
           }
         }
         break;
@@ -108,7 +108,7 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       evt.preventDefault();
       if (variant == util.HIERARCHICAL_VARIANT) {
         var _evt$target$closest2;
-        var allCellsInRow = Array.from((_evt$target$closest2 = evt.target.closest('[role="row"]')) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.querySelectorAll('[role="gridcell"] button'));
+        var allCellsInRow = Array.from((_evt$target$closest2 = evt.target.closest('[role="row"]')) === null || _evt$target$closest2 === undefined ? undefined : _evt$target$closest2.querySelectorAll('[role="gridcell"] button'));
         if (allCellsInRow.length === 1) {
           evt.target = evt.target.closest('[role="row"]');
           handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
@@ -138,7 +138,7 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
           var _evt$target$closest3;
           //when any cell is focussed, arrow left will select the previous cell or current row
 
-          var _allCellsInRow = Array.from((_evt$target$closest3 = evt.target.closest('[role="row"]')) === null || _evt$target$closest3 === void 0 ? void 0 : _evt$target$closest3.querySelectorAll('[role="gridcell"] button'));
+          var _allCellsInRow = Array.from((_evt$target$closest3 = evt.target.closest('[role="row"]')) === null || _evt$target$closest3 === undefined ? undefined : _evt$target$closest3.querySelectorAll('[role="gridcell"] button'));
           var _currentItemIndex = _allCellsInRow.indexOf(evt.target);
           if (_currentItemIndex > 0) {
             util.focusThisItem(_allCellsInRow[_currentItemIndex - 1], conditionBuilderRef);
@@ -162,16 +162,16 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       }
       break;
     case 'Enter':
-      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) {
+      if (((_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === undefined || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")) === null || _document$activeEleme4 === undefined ? undefined : _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();
+        (_document$activeEleme5 = document.activeElement) === null || _document$activeEleme5 === undefined || (_document$activeEleme5 = _document$activeEleme5.querySelectorAll("button")[0]) === null || _document$activeEleme5 === undefined || _document$activeEleme5.click();
       }
       break;
   }
 };
 var getRows = function getRows(conditionBuilderRef) {
   var _conditionBuilderRef$;
-  return Array.from((_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 ? void 0 : _conditionBuilderRef$.querySelectorAll('[role="row"]'));
+  return Array.from((_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === undefined ? undefined : _conditionBuilderRef$.querySelectorAll('[role="row"]'));
 };
 var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
   var rows = getRows(conditionBuilderRef);
@@ -220,8 +220,8 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   }
   var nextRow = rows[nextRowIndex];
   var itemName = evt.target.dataset.name;
-  if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
-    util.manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
+  if (nextRow !== null && nextRow !== undefined && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
+    util.manageTabIndexAndFocus(nextRow === null || nextRow === undefined ? undefined : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
   } else if (variant === util.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/lib/components/ConditionBuilder/utils/useDataConfigs.js

@@ -113,7 +113,7 @@ var useDataConfigs = function useDataConfigs() {
     type: 'date'
   }];
   return {
-    statementConfig: statementConfigCustom !== null && statementConfigCustom !== void 0 ? statementConfigCustom : statementConfigDefault,
+    statementConfig: statementConfigCustom !== null && statementConfigCustom !== undefined ? statementConfigCustom : statementConfigDefault,
     connectorConfig: connectorConfig,
     operatorConfig: operatorConfig
   };

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

@@ -15,10 +15,10 @@ var useTranslations = function useTranslations(translationKeys, alterTranslation
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     translateWithId = _useContext.translateWithId;
   return translationKeys.map(function (translationKey) {
-    if (alterTranslationKeyMap !== null && alterTranslationKeyMap !== void 0 && alterTranslationKeyMap[translationKey]) {
+    if (alterTranslationKeyMap !== null && alterTranslationKeyMap !== undefined && alterTranslationKeyMap[translationKey]) {
       translationKey = alterTranslationKeyMap[translationKey];
     }
-    if (translateWithId !== null && translateWithId !== void 0 && translateWithId(translationKey)) {
+    if (translateWithId !== null && translateWithId !== undefined && translateWithId(translationKey)) {
       return translateWithId(translationKey);
     } else if (translationObject.translationsObject[translationKey]) {
       return translationObject.translationsObject[translationKey];

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

@@ -8,12 +8,5 @@ export function traverseReverse(eachElem: any, index: any, allElements: any, rot
 export function checkForHoldingKey(evt: any, key: any): any;
 export function checkIsValid(item: any): any;
 export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;
-export namespace getValue {
-    function text(value: any): any;
-    function textarea(value: any): any;
-    function time(value: any): any;
-    function number(value: any): any;
-    function option(value: any): any;
-    function date(value: any): any;
-    function custom(value: any): any;
-}
+export function getValue(type: any, value: any, config: any): any;
+export function checkForMultiSelectOperator(condition: any, config: any): any;

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

@@ -16,9 +16,9 @@ var focusThisField = function focusThisField(evt, conditionBuilderRef) {
   if (evt) {
     setTimeout(function () {
       var _evt$target$closest, _evt$target$closest2, _evt$target$closest3;
-      manageTabIndexAndFocus((_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelector('button'), conditionBuilderRef);
-      (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.click();
-      (_evt$target$closest3 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest3 === void 0 || (_evt$target$closest3 = _evt$target$closest3.querySelector('button')) === null || _evt$target$closest3 === void 0 || _evt$target$closest3.focus();
+      manageTabIndexAndFocus((_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === undefined ? undefined : _evt$target$closest.querySelector('button'), conditionBuilderRef);
+      (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === undefined || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === undefined || _evt$target$closest2.click();
+      (_evt$target$closest3 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest3 === undefined || (_evt$target$closest3 = _evt$target$closest3.querySelector('button')) === null || _evt$target$closest3 === undefined || _evt$target$closest3.focus();
     }, 0);
   }
 };
@@ -57,13 +57,13 @@ var checkIsValid = function checkIsValid(item) {
 };
 var manageTabIndexAndFocus = function manageTabIndexAndFocus(currentElement, conditionBuilderRef) {
   var _currentElement$close, _conditionBuilderRef$;
-  var contentContainer = (_currentElement$close = currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(blockClass, "__content-container"))) !== null && _currentElement$close !== void 0 ? _currentElement$close : currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(blockClass, "__actions-container"));
+  var contentContainer = (_currentElement$close = currentElement === null || currentElement === undefined ? undefined : currentElement.closest(".".concat(blockClass, "__content-container"))) !== null && _currentElement$close !== undefined ? _currentElement$close : currentElement === null || currentElement === undefined ? undefined : currentElement.closest(".".concat(blockClass, "__actions-container"));
   contentContainer && Array.from(contentContainer.querySelectorAll('[tabindex="0"]')).map(function (element) {
-    return element === null || element === void 0 ? void 0 : element.setAttribute('tabindex', '-1');
+    return element === null || element === undefined ? undefined : element.setAttribute('tabindex', '-1');
   });
-  currentElement === null || currentElement === void 0 || currentElement.setAttribute('tabindex', '0');
-  (_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === void 0 || _conditionBuilderRef$.setAttribute('tabindex', '1');
-  currentElement === null || currentElement === void 0 || currentElement.focus();
+  currentElement === null || currentElement === undefined || currentElement.setAttribute('tabindex', '0');
+  (_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === undefined || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === undefined || _conditionBuilderRef$.setAttribute('tabindex', '1');
+  currentElement === null || currentElement === undefined || currentElement.focus();
 };
 var formatDate = function formatDate(date) {
   var day = String(date.getDate()).padStart(2, '0');
@@ -71,48 +71,64 @@ var formatDate = function formatDate(date) {
   var year = date.getFullYear();
   return "".concat(day, "/").concat(month, "/").concat(year);
 };
-var getValue = {
-  text: function text(value) {
-    return value;
-  },
-  textarea: function textarea(value) {
-    return value;
-  },
-  time: function time(value) {
-    return value;
-  },
-  number: function number(value) {
-    return value;
-  },
-  option: function option(value) {
-    if (value && typeof value !== 'string') {
-      var selectedValues = Array.isArray(value) ? value : [value];
-      return selectedValues.map(function (option) {
-        return option.label;
-      }).join(', ');
-    }
-    return value;
-  },
-  date: function date(value) {
-    if (Array.isArray(value) && value.length > 1) {
-      var start = value !== null && value !== void 0 && value[0] && !isNaN(new Date(value[0])) ? formatDate(new Date(value[0])) : '';
-      var end = value !== null && value !== void 0 && value[1] && !isNaN(new Date(value[1])) ? formatDate(new Date(value[1])) : '';
-      return "".concat(start, " To ").concat(end);
-    } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
-      return formatDate(new Date(value[0]));
-    } else {
-      return value;
-    }
-  },
-  custom: function custom(value) {
-    return value;
+var getValue = function getValue(type, value, config) {
+  if (config !== null && config !== undefined && config.valueFormatter && ['date', 'custom'].includes(type)) {
+    return config.valueFormatter(value);
+  } else {
+    var formatters = {
+      text: function text(value) {
+        return value;
+      },
+      textarea: function textarea(value) {
+        return value;
+      },
+      time: function time(value) {
+        return value;
+      },
+      number: function number(value) {
+        return value;
+      },
+      option: function option(value) {
+        if (value && typeof value !== 'string') {
+          var selectedValues = Array.isArray(value) ? value : [value];
+          return selectedValues.map(function (option) {
+            return option.label;
+          }).join(', ');
+        }
+        return value;
+      },
+      date: function date(value) {
+        if (Array.isArray(value) && value.length > 1) {
+          var start = value !== null && value !== undefined && value[0] && !isNaN(new Date(value[0])) ? formatDate(new Date(value[0])) : '';
+          var end = value !== null && value !== undefined && value[1] && !isNaN(new Date(value[1])) ? formatDate(new Date(value[1])) : '';
+          return "".concat(start, " To ").concat(end);
+        } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
+          return formatDate(new Date(value[0]));
+        } else {
+          return value;
+        }
+      },
+      custom: function custom(value) {
+        return value;
+      }
+    };
+    return formatters[type](value, config);
   }
 };
 
+//check if the operator is configured as multiSelect in the input configuration or operator is on of
+var checkForMultiSelectOperator = function checkForMultiSelectOperator(condition, config) {
+  var _config$operators;
+  return (condition === null || condition === undefined ? undefined : condition.operator) === 'oneOf' || (config === null || config === undefined || (_config$operators = config.operators) === null || _config$operators === undefined ? undefined : _config$operators.find(function (operator) {
+    return (condition === null || condition === undefined ? undefined : condition.operator) === operator.id && operator.isMultiSelect;
+  }));
+};
+
 exports.HIERARCHICAL_VARIANT = HIERARCHICAL_VARIANT;
 exports.NON_HIERARCHICAL_VARIANT = NON_HIERARCHICAL_VARIANT;
 exports.blockClass = blockClass;
 exports.checkForHoldingKey = checkForHoldingKey;
+exports.checkForMultiSelectOperator = checkForMultiSelectOperator;
 exports.checkIsValid = checkIsValid;
 exports.focusThisField = focusThisField;
 exports.focusThisItem = focusThisItem;

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -72,16 +72,16 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     title = _ref.title,
     secondaryTitle = _ref.secondaryTitle,
     _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
-    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? 'right' : _ref$breadcrumbOverfl,
+    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === undefined ? 'right' : _ref$breadcrumbOverfl,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState([]),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     createFullPageActions = _useState2[0],
     setCreateFullPageActions = _useState2[1];
   var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    shouldViewAll = _useState4[0],
-    setShouldViewAll = _useState4[1];
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2);
+    _useState4[0];
+    _useState4[1];
   var _useState5 = React.useState(1),
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     currentStep = _useState6[0],
@@ -94,7 +94,6 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
     modalIsOpen = _useState10[0],
     setModalIsOpen = _useState10[1];
-  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
   var previousState = usePreviousValue.usePreviousValue({
     currentStep: currentStep,
     open: open
@@ -129,7 +128,7 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setLastIncludedStep = _useState24[1];
   React.useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
-      return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
+      return item === null || item === undefined ? undefined : item.shouldIncludeStep;
     }) + 1;
     var lastItem = lastIndexInArray.lastIndexInArray(stepData, 'shouldIncludeStep', true);
     if (firstItem !== firstIncludedStep) {
@@ -161,7 +160,7 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     stepData: stepData,
     /**@ts-ignore */
     initialStep: initialStep,
-    totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
+    totalSteps: stepData === null || stepData === undefined ? undefined : stepData.length,
     componentName: componentName
   });
   useCreateComponentStepChange.useCreateComponentStepChange({
@@ -173,13 +172,10 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
     setIsSubmitting: setIsSubmitting,
-    /**@ts-ignore */
-    setShouldViewAll: setShouldViewAll,
     onClose: onClose,
     onRequestSubmit: onRequestSubmit,
     componentName: componentName,
     currentStep: currentStep,
-    shouldViewAll: shouldViewAll,
     backButtonText: backButtonText,
     cancelButtonText: cancelButtonText,
     submitButtonText: submitButtonText,