@carbon/ibm-products 2.43.2-canary.63 → 2.43.2-canary.66

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js

@@ -22,7 +22,7 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
     invalidNumberWarnText = _useTranslations2[0];
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var value = _ref2.value;
-    if (checkIfValid(value)) {
+    if (!isNaN(value) && checkIfValid(value)) {
       var _config$unit;
       onChange("".concat(value, " ").concat((_config$unit = config.unit) !== null && _config$unit !== void 0 ? _config$unit : ''));
     } else {
@@ -44,12 +44,13 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
   }, /*#__PURE__*/React__default.createElement(NumberInput, _extends({
     label: conditionState.property,
     hideLabel: true,
-    defaultValue: getDefaultValue(),
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
     invalidText: invalidNumberWarnText,
     allowEmpty: true,
     onChange: onChangeHandler
-  }, config)));
+  }, config, {
+    defaultValue: getDefaultValue()
+  })));
 };
 ConditionBuilderItemNumber.propTypes = {
   /**

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.d.ts

@@ -9,7 +9,7 @@ export namespace ConditionBuilderItemText {
         let conditionState: PropTypes.Requireable<object>;
         let config: PropTypes.Requireable<object>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let type: PropTypes.Requireable<object>;
+        let type: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js

@@ -46,7 +46,7 @@ ConditionBuilderItemText.propTypes = {
   /**
    * current input type
    */
-  type: PropTypes.object
+  type: PropTypes.string
 };
 
 export { ConditionBuilderItemText };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js

@@ -58,7 +58,7 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
     value: "PM",
     text: "PM"
   }))), /*#__PURE__*/React__default.createElement(TimePickerSelect, {
-    id: "time-picker-select-2",
+    id: "time-picker-time-zone",
     onChange: setTimeZone
   }, config === null || config === void 0 || (_config$timeZones2 = config.timeZones) === null || _config$timeZones2 === void 0 ? void 0 : _config$timeZones2.map(function (timeZone, index) {
     return /*#__PURE__*/React__default.createElement(SelectItem, {

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

@@ -50,8 +50,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
   var conditionBuilderContentRef = useRef();
-  var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
+  var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
+      variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
       onChange(_objectSpread2(_objectSpread2({}, group), {}, {
         conditions: group.conditions.filter(function (condition) {
           return conditionId !== condition.id;
@@ -79,6 +80,52 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       conditions: [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _toConsumableArray(group.conditions.slice(conditionIndex + 1)))
     }));
   };
+  var handleFocusOnClose = function handleFocusOnClose(e, conditionIndex) {
+    var _e$currentTarget$clos;
+    //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(blockClass, "__group"))) === null || _e$currentTarget$clos === void 0 ? void 0 : _e$currentTarget$clos.querySelectorAll('[data-name="closeCondition"]');
+    if (conditionIndex == currentGroupCloseButtons.length - 1) {
+      var _currentGroupCloseBut;
+      (_currentGroupCloseBut = currentGroupCloseButtons[conditionIndex - 1]) === null || _currentGroupCloseBut === void 0 || _currentGroupCloseBut.focus();
+    } else {
+      var _currentGroupCloseBut2;
+      (_currentGroupCloseBut2 = currentGroupCloseButtons[conditionIndex + 1]) === null || _currentGroupCloseBut2 === void 0 || _currentGroupCloseBut2.focus();
+    }
+  };
+  var handleFocusOnCloseTree = function handleFocusOnCloseTree(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');
+
+    //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, "\"]"));
+    //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(blockClass, "__condition-block"))) {
+      var _nextElement$querySel;
+      nextElement === null || nextElement === void 0 || (_nextElement$querySel = nextElement.querySelector('[data-name="closeCondition"]')) === null || _nextElement$querySel === void 0 || _nextElement$querySel.focus();
+    } else if (prevElement !== null && prevElement !== void 0 && prevElement.classList.contains("".concat(blockClass, "__condition-block"))) {
+      var _prevElement$querySel;
+      prevElement === null || prevElement === void 0 || (_prevElement$querySel = prevElement.querySelector('[data-name="closeCondition"]')) === null || _prevElement$querySel === void 0 || _prevElement$querySel.focus();
+    }
+    //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\"]"));
+      if (nextRow) {
+        nextRow === null || nextRow === void 0 || nextRow.focus();
+      } else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
+        var _prevRows;
+        (_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 || _prevRows.focus();
+      }
+    }
+  };
   var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
     onChange(_objectSpread2(_objectSpread2({}, group), {}, {
       conditions: [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
@@ -153,7 +200,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         },
         addConditionHandler: addConditionHandler,
         onRemove: function onRemove(e) {
-          onRemoveHandler(eachCondition.id, e);
+          onRemoveHandler(eachCondition.id, e, conditionIndex);
         },
         onConnectorOperatorChange: onConnectorOperatorChange,
         onStatementChange: onStatementChangeHandler,

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts

@@ -1 +1 @@
-export function handleKeyDown(evt: any, conditionBuilderRef: any): void;
+export function handleKeyDown(evt: any, conditionBuilderRef: any, variant: any): void;

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

@@ -7,16 +7,24 @@
 
 import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
-import { checkForHoldingKey, focusThisField, traverseReverse, traverseClockVise } from './util.js';
+import { checkForHoldingKey, focusThisField, traverseReverse, traverseClockVise, focusThisItem } from './util.js';
 
-var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
+var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef, variant) {
   var activeElement = document.activeElement;
+  if (excludeKeyPress(evt)) {
+    return;
+  }
   if (activeElement.closest("[role=\"dialog\"]")) {
     handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
   } else {
-    handleKeyPressForMainContent(evt, conditionBuilderRef);
+    handleKeyPressForMainContent(evt, conditionBuilderRef, variant);
   }
 };
+//skipping keyboard handling for date and time fields to get take carbon's
+var excludeKeyPress = function excludeKeyPress(evt) {
+  var _evt$target$closest, _evt$target$closest2;
+  return !['Escape'].includes(evt.key) && (((_evt$target$closest = evt.target.closest(".".concat(blockClass, "__item-date"))) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.length) || ((_evt$target$closest2 = evt.target.closest(".".concat(blockClass, "__item-time"))) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.length));
+};
 var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
   var _parentContainer$quer;
   var key = evt.key;
@@ -62,8 +70,8 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme2;
           //for button , enter key is click which already handled by framework, else trigger click
-          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
           focusThisField(evt);
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
         }
       }
       break;
@@ -73,8 +81,70 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
       break;
   }
 };
+var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
+  switch (evt.key) {
+    case 'ArrowRight':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        var _evt$target$closest3;
+        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'));
+        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
+          if (allCellsInRow.length === 1) {
+            handleRowNavigationTree(evt, conditionBuilderRef, variant);
+            //focus next row
+          } else {
+            var _allCellsInRow$;
+            (_allCellsInRow$ = allCellsInRow[0]) === null || _allCellsInRow$ === void 0 || _allCellsInRow$.focus();
+          }
+        } else {
+          //finding the next cell to be focussed
+          //next cell = current cell index + 1
+
+          var currentItemIndex = allCellsInRow.indexOf(evt.target);
+          if (currentItemIndex < allCellsInRow.length - 1) {
+            focusThisItem(allCellsInRow[currentItemIndex + 1]);
+          }
+        }
+      } else {
+        handleCellNavigation(evt, conditionBuilderRef);
+      }
+      break;
+    case 'ArrowLeft':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        if (evt.target.getAttribute('role') !== 'row') {
+          var _evt$target$closest4;
+          //when any cell is focussed, arrow left will select the previous cell or current row
+
+          var allItems = Array.from((_evt$target$closest4 = evt.target.closest('[role="row"]')) === null || _evt$target$closest4 === void 0 ? void 0 : _evt$target$closest4.querySelectorAll('[role="gridcell"] button'));
+          var _currentItemIndex = allItems.indexOf(evt.target);
+          if (_currentItemIndex > 0) {
+            focusThisItem(allItems[_currentItemIndex - 1]);
+          } else {
+            //focus the row
+            var wrapper = evt.target.closest("[role=\"row\"]");
+            wrapper.focus();
+          }
+        }
+      } else {
+        handleCellNavigation(evt, conditionBuilderRef);
+      }
+      break;
+    case 'ArrowUp':
+    case 'ArrowDown':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        handleRowNavigationTree(evt, conditionBuilderRef, variant);
+      } else {
+        handleRowNavigation(evt, conditionBuilderRef, variant);
+      }
+      break;
+  }
+};
 var getRows = function getRows(conditionBuilderRef) {
-  return Array.from(conditionBuilderRef.current.querySelectorAll('[role="row"]'));
+  var _conditionBuilderRef$;
+  return Array.from((_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 ? void 0 : _conditionBuilderRef$.querySelectorAll('[role="row"]'));
 };
 var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
   var rows = getRows(conditionBuilderRef);
@@ -82,14 +152,39 @@ var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
     return row.contains(element);
   });
 };
-var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef) {
+var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef, variant) {
   var rows = getRows(conditionBuilderRef);
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
-  navigateToNextRowCell(evt, currentRowIndex, rows);
+  navigateToNextRowCell(evt, currentRowIndex, rows, variant);
 };
-var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows) {
-  var _nextRow$querySelecto;
-  //when the focussed element is a cell of the row which has only 1 cell (connector or statement) , focus the next row
+function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
+  var rows = getRows(conditionBuilderRef);
+  var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
+  var nextRowIndex = currentRowIndex;
+  if (evt.target.getAttribute('role') == 'row') {
+    if (['ArrowDown', 'ArrowRight'].includes(evt.key)) {
+      nextRowIndex += 1;
+    } else if (evt.key === 'ArrowUp') {
+      nextRowIndex -= 1;
+    }
+
+    //maintaining selection for first and last rows
+    if (nextRowIndex < 0) {
+      nextRowIndex = 0;
+    } else if (nextRowIndex >= rows.length) {
+      nextRowIndex = rows.length - 1;
+    }
+    if (nextRowIndex !== currentRowIndex) {
+      rows[currentRowIndex].setAttribute('tabindex', '-1');
+      rows[nextRowIndex].setAttribute('tabindex', '0');
+      rows[nextRowIndex].focus();
+    }
+  } else {
+    navigateToNextRowCell(evt, currentRowIndex, rows, variant);
+  }
+}
+var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows, variant) {
+  //when the current focussed element is a cell of any row, arrow up/down will focus the next row same cell.
 
   var nextRowIndex = currentRowIndex;
   if (evt.key === 'ArrowUp') {
@@ -100,25 +195,22 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   }
   var nextRow = rows[nextRowIndex];
   var itemName = evt.target.dataset.name;
-  nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
-};
-var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef) {
-  switch (evt.key) {
-    case 'ArrowRight':
-    case 'ArrowLeft':
-      conditionBuilderRef.current.querySelectorAll("[role=\"gridcell\"] button").forEach(function (eachElem, index, allElements) {
-        if (evt.key === 'ArrowRight') {
-          traverseClockVise(eachElem, index, allElements);
-        } else {
-          traverseReverse(eachElem, index, allElements);
-        }
-      });
-      break;
-    case 'ArrowUp':
-    case 'ArrowDown':
-      handleRowNavigation(evt, conditionBuilderRef);
-      break;
+  if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
+    var _nextRow$querySelecto;
+    nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
+  } else if (variant === 'tree') {
+    //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)
+    nextRow === null || nextRow === void 0 || nextRow.focus();
   }
 };
+var handleCellNavigation = function handleCellNavigation(evt, conditionBuilderRef) {
+  conditionBuilderRef.current.querySelectorAll("[role=\"gridcell\"] button").forEach(function (eachElem, index, allElements) {
+    if (evt.key === 'ArrowRight') {
+      traverseClockVise(eachElem, index, allElements);
+    } else {
+      traverseReverse(eachElem, index, allElements);
+    }
+  });
+};
 
 export { handleKeyDown };

package/es/components/EditTearsheet/EditTearsheet.d.ts

@@ -51,7 +51,8 @@ interface EditTearsheetProps extends PropsWithChildren {
      */
     onFormChange?: (formIndex: number) => number;
     /**
-     * Specify a handler for submitting the tearsheet.
+     * Specify a handler for submitting the tearsheet. Throughout its execution
+     * the submit button will be disabled and include a loading indicator.
      */
     onRequestSubmit: () => void;
     /**

package/es/components/EditTearsheet/EditTearsheet.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, createContext } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -59,10 +59,45 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var handleOnRequestSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsSubmitting(true);
+            _context.prev = 1;
+            _context.next = 4;
+            return onRequestSubmit();
+          case 4:
+            _context.next = 9;
+            break;
+          case 6:
+            _context.prev = 6;
+            _context.t0 = _context["catch"](1);
+            console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
+          case 9:
+            setIsSubmitting(false);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 6]]);
+    }));
+    return function handleOnRequestSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var actions = [{
     key: 'edit-action-button-submit',
     label: submitButtonText,
-    onClick: onRequestSubmit,
+    onClick: function onClick() {
+      return handleOnRequestSubmit();
+    },
+    loading: isSubmitting,
     kind: 'primary'
   }, {
     key: 'edit-action-button-cancel',
@@ -70,14 +105,14 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: onClose,
     kind: 'ghost'
   }];
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentForm = _useState2[0],
-    setCurrentForm = _useState2[1];
-  var _useState3 = useState([]),
+  var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    formTitles = _useState4[0],
-    setFormTitles = _useState4[1];
+    currentForm = _useState4[0],
+    setCurrentForm = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    formTitles = _useState6[0],
+    setFormTitles = _useState6[1];
   var contentRef = useRef(null);
   var handleCurrentForm = function handleCurrentForm(formIndex) {
     setCurrentForm(formIndex);

package/es/components/SearchBar/SearchBar.d.ts

@@ -17,7 +17,7 @@ interface SearchBarProps extends PropsWithChildren {
      */
     hideScopesLabel?: boolean;
     /** @type {string} The label text for the search text input. */
-    labelText?: string;
+    labelText: string;
     /** @type {Function} Function handler for when the user changes their query search. */
     onChange?: (event: any) => void;
     /** @type {Function} Function handler for when the user submits a search. */

package/es/components/SearchBar/SearchBar.js

@@ -135,7 +135,7 @@ var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   })) : null, /*#__PURE__*/React__default.createElement(Search, {
     className: "".concat(blockClass, "__input"),
     closeButtonLabelText: clearButtonLabelText,
-    labelText: labelText || '',
+    labelText: labelText,
     name: "search-input",
     onChange: handleInputChange,
     placeholder: placeholderText,
@@ -188,7 +188,7 @@ SearchBar.propTypes = _objectSpread2({
    */
   hideScopesLabel: PropTypes.bool,
   /** @type {string} The label text for the search text input. */
-  labelText: PropTypes.string,
+  labelText: PropTypes.string.isRequired,
   /** @type {Function} Function handler for when the user changes their query search. */
   onChange: PropTypes.func,
   /** @type {Function} Function handler for when the user submits a search. */

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -70,7 +70,7 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
   var localRef = React.useRef();
   var conditionBuilderRef = ref || localRef;
   var handleKeyDownHandler = function handleKeyDownHandler(evt) {
-    handleKeyboardEvents.handleKeyDown(evt, conditionBuilderRef);
+    handleKeyboardEvents.handleKeyDown(evt, conditionBuilderRef, variant);
   };
   return /*#__PURE__*/React__default["default"].createElement(ConditionBuilderProvider.ConditionBuilderProvider, {
     inputConfig: inputConfig,
@@ -118,7 +118,7 @@ exports.ConditionBuilder.propTypes = {
    * optional array of actions
    */
   actions: index["default"].arrayOf(index["default"].shape({
-    id: index["default"].oneOfType([index["default"].string | index["default"].number]).isRequired,
+    id: index["default"].oneOfType([index["default"].string, index["default"].number]).isRequired,
     label: index["default"].string.isRequired
   })),
   /**

package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -94,11 +94,11 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
   })), enableSubGroup && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
     renderIcon: icons.TextNewLine,
     onClick: addConditionSubGroupHandler,
-    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__add_condition_group ").concat(DataConfigs.blockClass, "__gap-left")),
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group ").concat(DataConfigs.blockClass, "__gap-left")),
     hideLabel: true,
     label: addSubgroupText,
     wrapperProps: wrapperProps,
-    wrapperClassName: cx__default["default"]("".concat(DataConfigs.blockClass, "__add_condition_group-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__add_condition_group-wrapper--show"), isAddSubgroup))
+    wrapperClassName: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper--show"), isAddSubgroup))
   }, previewHandlersForSubgroup())));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;

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

@@ -53,6 +53,12 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _useTranslations = useTranslations.useTranslations(['addConditionGroupText']),
     _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
     addConditionGroupText = _useTranslations2[0];
+  var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
+    setShowConditionGroupPreview(true);
+  };
+  var hideConditionGroupPreviewHandler = function hideConditionGroupPreviewHandler() {
+    setShowConditionGroupPreview(false);
+  };
   React.useEffect(function () {
     var _rootState$groups;
     if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
@@ -157,13 +163,11 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
     renderIcon: icons.TextNewLine,
     onClick: addConditionGroupHandler,
-    onMouseEnter: function onMouseEnter() {
-      setShowConditionGroupPreview(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      setShowConditionGroupPreview(false);
-    },
-    className: "".concat(DataConfigs.blockClass, "__addConditionGroupText "),
+    onMouseEnter: showConditionGroupPreviewHandler,
+    onMouseLeave: hideConditionGroupPreviewHandler,
+    onFocus: showConditionGroupPreviewHandler,
+    onBlur: hideConditionGroupPreviewHandler,
+    className: "".concat(DataConfigs.blockClass, "__add-condition-group "),
     hideLabel: true,
     label: addConditionGroupText,
     wrapperProps: {

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

@@ -30,7 +30,7 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
     invalidNumberWarnText = _useTranslations2[0];
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var value = _ref2.value;
-    if (checkIfValid(value)) {
+    if (!isNaN(value) && checkIfValid(value)) {
       var _config$unit;
       onChange("".concat(value, " ").concat((_config$unit = config.unit) !== null && _config$unit !== void 0 ? _config$unit : ''));
     } else {
@@ -52,12 +52,13 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(react.NumberInput, _rollupPluginBabelHelpers["extends"]({
     label: conditionState.property,
     hideLabel: true,
-    defaultValue: getDefaultValue(),
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
     invalidText: invalidNumberWarnText,
     allowEmpty: true,
     onChange: onChangeHandler
-  }, config)));
+  }, config, {
+    defaultValue: getDefaultValue()
+  })));
 };
 ConditionBuilderItemNumber.propTypes = {
   /**

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.d.ts

@@ -9,7 +9,7 @@ export namespace ConditionBuilderItemText {
         let conditionState: PropTypes.Requireable<object>;
         let config: PropTypes.Requireable<object>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let type: PropTypes.Requireable<object>;
+        let type: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from 'prop-types';

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

@@ -54,7 +54,7 @@ ConditionBuilderItemText.propTypes = {
   /**
    * current input type
    */
-  type: index["default"].object
+  type: index["default"].string
 };
 
 exports.ConditionBuilderItemText = ConditionBuilderItemText;

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

@@ -66,7 +66,7 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
     value: "PM",
     text: "PM"
   }))), /*#__PURE__*/React__default["default"].createElement(react.TimePickerSelect, {
-    id: "time-picker-select-2",
+    id: "time-picker-time-zone",
     onChange: setTimeZone
   }, config === null || config === void 0 || (_config$timeZones2 = config.timeZones) === null || _config$timeZones2 === void 0 ? void 0 : _config$timeZones2.map(function (timeZone, index) {
     return /*#__PURE__*/React__default["default"].createElement(react.SelectItem, {