@carbon/ibm-products 2.40.0 → 2.40.1-canary.10

package/es/components/TagOverflow/TagOverflow.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -19,13 +19,13 @@ import { TagOverflowPopover } from './TagOverflowPopover.js';
 import { TagOverflowModal } from './TagOverflowModal.js';
 
 var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
-  _excluded2 = ["className", "id"];
+  _excluded2 = ["className", "id"],
+  _excluded3 = ["tagType"],
+  _excluded4 = ["id", "label", "tagType", "onClose"];
 var blockClass = "".concat(pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
 
-// TODO: support prop overflowType
-
 // Default values for props
 var defaults = {
   items: [],
@@ -164,39 +164,53 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
     }
     var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
-    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
-      return {
-        type: item.tagType,
-        label: item.label,
-        id: item.id
-      };
+    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
+      var tagType = _ref2.tagType,
+        other = _objectWithoutProperties(_ref2, _excluded3);
+      return _objectSpread2({
+        type: tagType
+      }, other);
     });
     setVisibleItems(visibleItemsArr);
     setOverflowItems(overflowItemsArr);
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
   }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
+  var handleTagOnClose = useCallback(function (onClose, index) {
+    onClose === null || onClose === void 0 || onClose();
+    if (index <= visibleItems.length - 1) {
+      setPopoverOpen(false);
+    }
+  }, [visibleItems]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
     ref: containerRef,
     role: "main"
-  }, getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
+  }, getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item, index) {
     // Render custom components
     if (tagComponent) {
       return getCustomComponent(item);
     } else {
+      var id = item.id,
+        label = item.label,
+        tagType = item.tagType,
+        _onClose = item.onClose,
+        other = _objectWithoutProperties(item, _excluded4);
       // If there is no template prop, then render items as Tags
       return /*#__PURE__*/React__default.createElement("div", {
         ref: function ref(node) {
-          return itemRefHandler(item.id, node);
+          return itemRefHandler(id, node);
         },
-        key: item.id
+        key: id
       }, /*#__PURE__*/React__default.createElement(Tooltip, {
-        align: "bottom",
-        label: item.label
-      }, /*#__PURE__*/React__default.createElement(Tag, {
+        align: overflowAlign,
+        label: label
+      }, /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
-        type: item.tagType
-      }, item.label)));
+        type: tagType,
+        onClose: function onClose() {
+          return handleTagOnClose(_onClose, index);
+        }
+      }), label)));
     }
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__indicator"),
@@ -218,6 +232,7 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     open: showAllModalOpen,
     title: allTagsModalTitle,
     onClose: handleModalClose,
+    overflowType: overflowType,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText,
     portalTarget: allTagsModalTarget
@@ -236,8 +251,8 @@ var tagTypes = Object.keys(TYPES);
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref2) {
-  var items = _ref2.items;
+var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref3) {
+  var items = _ref3.items;
   return items && items.length > allTagsModalSearchThreshold;
 });
 

package/es/components/TagOverflow/TagOverflowModal.d.ts

@@ -1,10 +1,11 @@
-export function TagOverflowModal({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
+export function TagOverflowModal({ allTags, className, title, onClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
     [x: string]: any;
     allTags: any;
     className: any;
     title: any;
     onClose: any;
     open: any;
+    overflowType: any;
     portalTarget: any;
     searchLabel?: string | undefined;
     searchPlaceholder: any;
@@ -17,6 +18,7 @@ export namespace TagOverflowModal {
         let className: PropTypes.Requireable<string>;
         let onClose: PropTypes.Requireable<(...args: any[]) => any>;
         let open: PropTypes.Requireable<boolean>;
+        let overflowType: PropTypes.Requireable<string>;
         let portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let searchLabel: PropTypes.Requireable<string>;
         let searchPlaceholder: PropTypes.Requireable<string>;

package/es/components/TagOverflow/TagOverflowModal.js

@@ -14,8 +14,8 @@ import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 
-var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
-  _excluded2 = ["label", "id"];
+var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"],
+  _excluded2 = ["label", "id", "filter"];
 var componentName = 'TagOverflowModal';
 var blockClass = "".concat(pkg.prefix, "--tag-overflow-modal");
 
@@ -30,6 +30,7 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     title = _ref.title,
     onClose = _ref.onClose,
     open = _ref.open,
+    overflowType = _ref.overflowType,
     portalTargetIn = _ref.portalTarget,
     _ref$searchLabel = _ref.searchLabel,
     searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
@@ -41,23 +42,13 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     setSearch = _useState2[1];
   var renderPortalUse = usePortalTarget(portalTargetIn);
   var getFilteredItems = function getFilteredItems() {
-    var newFilteredModalTags = [];
-    if (open) {
-      if (search === '') {
-        newFilteredModalTags = allTags.slice(0);
-      } else {
-        var lCaseSearch = search.toLocaleLowerCase();
-        allTags.forEach(function (tag) {
-          var _tag$dataSearch, _tag$label;
-          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
-          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);
-          if (dataSearch > -1 || labelSearch > -1) {
-            newFilteredModalTags.push(tag);
-          }
-        });
-      }
+    if (open && search) {
+      return allTags.filter(function (tag) {
+        var _tag$label;
+        return (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.includes(search.toLocaleLowerCase());
+      });
     }
-    return newFilteredModalTags;
+    return allTags;
   };
   var handleSearch = function handleSearch(evt) {
     setSearch(evt.target.value || '');
@@ -86,10 +77,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
+      filter = _ref2.filter,
       other = _objectWithoutProperties(_ref2, _excluded2);
+    var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-      filter: false,
-      key: id
+      key: id,
+      filter: isFilterable
     }), label);
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__fade")
@@ -102,6 +95,7 @@ TagOverflowModal.propTypes = {
   className: PropTypes.string,
   onClose: PropTypes.func,
   open: PropTypes.bool,
+  overflowType: PropTypes.oneOf(['default', 'tag']),
   portalTarget: PropTypes.node,
   searchLabel: PropTypes.string,
   searchPlaceholder: PropTypes.string,

package/es/components/TagOverflow/TagOverflowPopover.js

@@ -13,7 +13,8 @@ import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"],
+  _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
 var componentName = 'TagOverflowPopover';
 var blockClass = "".concat(pkg.prefix, "--tag-overflow-popover");
 
@@ -80,11 +81,25 @@ var TagOverflowPopover = /*#__PURE__*/React__default.forwardRef(function (_ref,
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React__default.createElement("ul", {
     className: "".concat(blockClass, "__tag-list")
-  }, getOverflowPopoverItems().map(function (tag) {
+  }, getOverflowPopoverItems().map(function (_ref2) {
+    var label = _ref2.label,
+      id = _ref2.id,
+      tagType = _ref2.tagType,
+      filter = _ref2.filter,
+      _onClose = _ref2.onClose,
+      other = _objectWithoutProperties(_ref2, _excluded2);
+    var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
+    var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default.createElement("li", {
       className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
-      key: tag.id
-    }, tag.label);
+      key: id
+    }, overflowType === 'tag' ? /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+      onClose: function onClose() {
+        return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+      },
+      type: typeValue,
+      filter: isFilterable
+    }), label) : label);
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default.createElement(Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -79,8 +79,8 @@ var ConditionBlock = function ConditionBlock(props) {
     config = _getCurrentConfig.config,
     label = _getCurrentConfig.label;
   var ItemComponent = property ? itemComponents[type] : null;
-  var onStatementChangeHandler = function onStatementChangeHandler(v, e) {
-    util.focusThisField(e);
+  var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
+    util.focusThisField(evt);
     onStatementChange(v);
   };
   var onConnectorOperatorChangeHandler = function onConnectorOperatorChangeHandler(op) {
@@ -119,7 +119,7 @@ var ConditionBlock = function ConditionBlock(props) {
     });
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block conditionBlockWrapper ").concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition-builder-condition__deletion-preview"), showDeletionPreview)),
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block conditionBlockWrapper ").concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition__deletion-preview"), showDeletionPreview)),
     key: conditionIndex,
     role: "row",
     "aria-label": DataConfigs.translateWithId('condition_row'),

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -19,6 +19,7 @@ var ConditionBuilderContent = require('./ConditionBuilderContent/ConditionBuilde
 var ConditionBuilderProvider = require('./ConditionBuilderContext/ConditionBuilderProvider.js');
 var settings = require('../../settings.js');
 var DataConfigs = require('./ConditionBuilderContext/DataConfigs.js');
+var handleKeyboardEvents = require('./utils/handleKeyboardEvents.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -64,6 +65,9 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var localRef = React.useRef();
   var conditionBuilderRef = ref || localRef;
+  var handleKeyDownHandler = function handleKeyDownHandler(evt) {
+    handleKeyboardEvents.handleKeyDown(evt, conditionBuilderRef);
+  };
   return /*#__PURE__*/React__default["default"].createElement(ConditionBuilderProvider.ConditionBuilderProvider, {
     inputConfig: inputConfig,
     popOverSearchThreshold: popOverSearchThreshold,
@@ -82,7 +86,8 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
     role: "main",
     ref: conditionBuilderRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.VStack, {
-    className: "".concat(DataConfigs.blockClass, "__").concat(variant)
+    className: "".concat(DataConfigs.blockClass, "__").concat(variant),
+    onKeyDown: handleKeyDownHandler
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderContent["default"], {
     startConditionLabel: startConditionLabel,
     conditionBuilderRef: conditionBuilderRef,

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

@@ -23,14 +23,14 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: className
+    className: className,
+    role: "gridcell"
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
     renderIcon: icons.AddAlt,
     onClick: onClick,
     className: "".concat(DataConfigs.blockClass, "__add-button"),
     hideLabel: true,
-    label: DataConfigs.translateWithId('add-condition'),
-    role: "gridcell"
+    label: DataConfigs.translateWithId('add-condition')
   }));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;

package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

@@ -36,7 +36,7 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
       // role={'gridcell'}
       tabIndex: -1,
-      className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__condition-builder-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel)]),
+      className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel)]),
       type: "button",
       onClick: onClick
     }, rest), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && label);

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

@@ -75,7 +75,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     className: "".concat(DataConfigs.blockClass, "__content-container"),
     tabIndex: -1
   }, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder"),
+    className: "".concat(DataConfigs.blockClass, "__add-condition-button"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
         size: 16
@@ -87,7 +87,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     onClick: onStartConditionBuilder
   }, startConditionLabel), rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function (eachGroup, groupIndex) {
     return /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder["default"], {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder__group"),
+      className: "".concat(DataConfigs.blockClass, "__group"),
       key: groupIndex,
       aria: {
         level: 1,

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

@@ -77,7 +77,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   React.useEffect(function () {
     //this will focus the first input field in the popover
     if (open && contentRef.current) {
-      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      var firstFocusableElement = contentRef.current.querySelector('input');
       if (firstFocusableElement) {
         firstFocusableElement.focus();
       }
@@ -103,11 +103,11 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     renderIcon: renderIcon ? renderIcon : label == undefined ? icons.Add : null,
     showToolTip: showToolTip
   }, rest)), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item__content"),
+    className: "".concat(DataConfigs.blockClass, "__item__content"),
     role: "dialog",
     "aria-label": "".concat(title)
   }, /*#__PURE__*/React__default["default"].createElement(react.Layer, null, /*#__PURE__*/React__default["default"].createElement("h1", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item__title")
+    className: "".concat(DataConfigs.blockClass, "__item__title")
   }, title), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: contentRef
   }, open && children))));

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

@@ -26,7 +26,7 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
   var DatePickerInputRef = React.useRef();
   var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-date ")
+    className: "".concat(blockClass, "__item-date ")
   }, datePickerType == 'single' && /*#__PURE__*/React__default["default"].createElement(react.DatePicker, {
     ref: DatePickerInputRef,
     dateFormat: "d/m/Y",

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

@@ -29,7 +29,7 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
     onChange(value + '');
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-number")
+    className: "".concat(blockClass, "__item-number")
   }, /*#__PURE__*/React__default["default"].createElement(react.NumberInput, {
     label: conditionState.property,
     hideLabel: true,

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

@@ -41,6 +41,7 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     filteredItems = _useState4[0],
     setFilteredItems = _useState4[1];
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
+  var contentRef = React.useRef();
   React.useEffect(function () {
     if (!allOptions && getOptions) {
       var fetchData = /*#__PURE__*/function () {
@@ -71,8 +72,18 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var handleSelectAll = function handleSelectAll(e) {
-    if (e.currentTarget.dataset.selectedAll == 'false') {
+  React.useEffect(function () {
+    //this will focus the first input field in the popover
+
+    if (contentRef.current) {
+      var _contentRef$current;
+      var firstFocusableElement = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('input, button,li');
+      firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allOptions]);
+  var handleSelectAll = function handleSelectAll(evt) {
+    if (evt.currentTarget.dataset.selectedAll == 'false') {
       onChange(undefined);
     } else {
       onChange(allOptions.map(function (op) {
@@ -80,31 +91,32 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
       }));
     }
   };
-  var onSearchChangeHandler = function onSearchChangeHandler(e) {
-    var value = e.target.value;
+  var onSearchChangeHandler = function onSearchChangeHandler(evt) {
+    var value = evt.target.value;
     var _filteredItems = allOptions.filter(function (opt) {
       return opt.label.toLowerCase().includes(value.toLowerCase());
     });
     setFilteredItems(_filteredItems);
   };
-  var onClickHandler = function onClickHandler(e, option, isSelected) {
+  var onClickHandler = function onClickHandler(evt, option, isSelected) {
     if (multiSelectable) {
       if (isSelected) {
         var items = selection.filter(function (v) {
           return v !== option.id;
         });
-        onChange(items.length > 0 ? items : undefined, e);
+        onChange(items.length > 0 ? items : undefined, evt);
       } else {
-        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option.id]), e);
+        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option.id]), evt);
       }
     } else {
-      onChange(option.id, e);
+      onChange(option.id, evt);
     }
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, allOptions && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option")
+    className: "".concat(DataConfigs.blockClass, "__item-option"),
+    ref: contentRef
   }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__search")
+    className: "".concat(DataConfigs.blockClass, "__item-option__search")
   }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     size: "sm",
     labelText: DataConfigs.translateWithId('clear_search'),
@@ -130,25 +142,25 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__option"),
+      className: "".concat(DataConfigs.blockClass, "__item-option__option"),
       onKeyUp: function onKeyUp() {
         return false;
       },
-      onClick: function onClick(e) {
-        return onClickHandler(e, option, isSelected);
+      onClick: function onClick(evt) {
+        return onClickHandler(evt, option, isSelected);
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__option-content")
+      className: "".concat(DataConfigs.blockClass, "__item-option__option-content")
     }, multiSelectable ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "".concat(DataConfigs.blockClass, "__option-check-box")
     }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(icons.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(icons.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__option-label")
+      className: "".concat(DataConfigs.blockClass, "__item-option__option-label")
     }, option.label), Icon && /*#__PURE__*/React__default["default"].createElement("span", {
       className: "".concat(DataConfigs.blockClass, "__option-icon")
     }, /*#__PURE__*/React__default["default"].createElement(Icon, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__option-label")
+      className: "".concat(DataConfigs.blockClass, "__item-option__option-label")
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default["default"].createElement(icons.Checkmark, {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-checkmark")
+      className: "".concat(DataConfigs.blockClass, "__checkmark")
     }))));
   }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null))));
 };

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

@@ -23,14 +23,14 @@ var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
   var conditionState = _ref.conditionState,
     _onChange = _ref.onChange;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item-text")
+    className: "".concat(DataConfigs.blockClass, "__item-text")
   }, /*#__PURE__*/React__default["default"].createElement(react.TextInput, {
     labelText: conditionState.property,
     hideLabel: true,
     value: (_conditionState$value = conditionState.value) !== null && _conditionState$value !== void 0 ? _conditionState$value : '',
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
-    onChange: function onChange(e) {
-      _onChange(e.target.value);
+    onChange: function onChange(evt) {
+      _onChange(evt.target.value);
     }
   }));
 };

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

@@ -41,17 +41,17 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
     onChange(timeValue ? timeToUpdate : undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timeValue, dayZoneValue, timeZoneValue]);
-  var setTimeZone = function setTimeZone(e) {
-    setTimeZoneValue(e.target.value);
+  var setTimeZone = function setTimeZone(evt) {
+    setTimeZoneValue(evt.target.value);
   };
-  var setDayZone = function setDayZone(e) {
-    setDayZoneValue(e.target.value);
+  var setDayZone = function setDayZone(evt) {
+    setDayZoneValue(evt.target.value);
   };
-  var setTime = function setTime(e) {
-    setTimeValue(e.target.value);
+  var setTime = function setTime(evt) {
+    setTimeValue(evt.target.value);
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item-time")
+    className: "".concat(DataConfigs.blockClass, "__item-time")
   }, /*#__PURE__*/React__default["default"].createElement(react.TimePicker, {
     id: "time-picker",
     labelText: "Select a time",

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

@@ -36,17 +36,17 @@ function ConditionConnector(_ref) {
       parentGroup.classList.remove('hoveredConnector');
     }
   }, []);
-  var activeConnectorHandler = function activeConnectorHandler(e) {
-    var parentGroup = e.currentTarget.closest('.eachGroup');
+  var activeConnectorHandler = function activeConnectorHandler(evt) {
+    var parentGroup = evt.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, true);
   };
-  var inActiveConnectorHandler = function inActiveConnectorHandler(e) {
-    var parentGroup = e.currentTarget.closest('.eachGroup');
+  var inActiveConnectorHandler = function inActiveConnectorHandler(evt) {
+    var parentGroup = evt.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, false);
   };
-  var onChangeHandler = function onChangeHandler(op, e) {
+  var onChangeHandler = function onChangeHandler(op, evt) {
     onChange(op);
-    util.focusThisField(e);
+    util.focusThisField(evt);
   };
   return (
     /*#__PURE__*/

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

@@ -34,16 +34,16 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     onChange = _ref.onChange,
     conditionBuilderRef = _ref.conditionBuilderRef,
     className = _ref.className;
-  var onRemoveHandler = function onRemoveHandler(conditionId, e) {
+  var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
     if (group.conditions.length > 1) {
       onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
         conditions: group.conditions.filter(function (condition) {
           return conditionId !== condition.id;
         })
       }));
-      handleFocusOnClose(e);
+      handleFocusOnClose(evt);
     } else {
-      onRemove();
+      onRemove(evt);
     }
   };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
@@ -67,9 +67,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
     return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
   };
-  var handleFocusOnClose = function handleFocusOnClose(e) {
-    var _e$currentTarget;
-    var previousClose = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.closest('[role="row"]')) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.previousSibling) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.querySelector('[data-name="closeCondition"]');
+  var handleFocusOnClose = function handleFocusOnClose(evt) {
+    var _evt$currentTarget;
+    var previousClose = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.parentElement) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.previousSibling) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.querySelector('[data-name="closeCondition"]');
     if (previousClose) {
       previousClose.focus();
     }
@@ -84,7 +84,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: eachCondition.id
     }, eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder, {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder__group"),
+      className: "".concat(DataConfigs.blockClass, "__group"),
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
@@ -94,8 +94,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       onChange: function onChange(updatedCondition) {
         onChangeHandler(updatedCondition, conditionIndex);
       },
-      onRemove: function onRemove(e) {
-        onRemoveHandler(eachCondition.id, e);
+      onRemove: function onRemove(evt) {
+        onRemoveHandler(eachCondition.id, evt);
       },
       conditionBuilderRef: conditionBuilderRef
     }), !eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
@@ -114,8 +114,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         onChangeHandler(updatedConditions, conditionIndex);
       },
       addConditionHandler: addConditionHandler,
-      onRemove: function onRemove(e) {
-        onRemoveHandler(eachCondition.id, e);
+      onRemove: function onRemove(evt) {
+        onRemoveHandler(eachCondition.id, evt);
       },
       onConnectorOperatorChange: function onConnectorOperatorChange(op) {
         onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {

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

@@ -0,0 +1 @@
+export function checkForHoldingKey(evt: any, key: any): any;