@carbon/ibm-products 2.39.0 → 2.40.1-canary.6

package/es/global/js/hooks/useFocus.js

@@ -9,7 +9,7 @@ import { usePrefix } from '@carbon/react';
 import { pkg } from '../../../settings.js';
 import { useCallback, useEffect } from 'react';
 
-var useFocus = function useFocus(modalRef) {
+var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var carbonPrefix = usePrefix();
   var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
   // Querying focusable element in the modal
@@ -39,12 +39,14 @@ var useFocus = function useFocus(modalRef) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
+    var specifiedElement = selectorPrimaryFocus ? modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelector(selectorPrimaryFocus) : null;
     return {
       first: first,
       last: last,
-      all: all
+      all: all,
+      specifiedElement: specifiedElement
     };
-  }, [modalEl, query]);
+  }, [modalEl, query, selectorPrimaryFocus]);
   useEffect(function () {
     getFocusable();
   }, [getFocusable]);
@@ -76,6 +78,7 @@ var useFocus = function useFocus(modalRef) {
     firstElement: getFocusable().first,
     lastElement: getFocusable().last,
     allElements: getFocusable().all,
+    specifiedElement: getFocusable().specified,
     keyDownListener: handleKeyDown,
     getFocusable: getFocusable
   };

package/es/global/js/hooks/useRetrieveStepData.d.ts

@@ -5,5 +5,5 @@ export function useRetrieveStepData({ stepsContext, stepNumber, introStep, inval
     invalid: boolean;
     shouldIncludeStep: boolean;
     secondaryLabel: string;
-    title: string;
+    title: React.ReactNode;
 }): void;

package/es/global/js/hooks/useRetrieveStepData.js

@@ -18,7 +18,7 @@ import { useEffect } from 'react';
  * @param {boolean} useResetCreateComponent.invalid
  * @param {boolean} useResetCreateComponent.shouldIncludeStep
  * @param {string} useResetCreateComponent.secondaryLabel
- * @param {string} useResetCreateComponent.title
+ * @param {React.ReactNode} useResetCreateComponent.title
  */
 var useRetrieveStepData = function useRetrieveStepData(_ref) {
   var stepsContext = _ref.stepsContext,

package/lib/components/AddSelect/AddSelect.d.ts

@@ -1,2 +1,44 @@
-export let AddSelect: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Filter, Item, Theme } from './types';
+export interface AddSelectProps {
+    className?: string;
+    clearFiltersText?: string;
+    closeIconDescription?: string;
+    columnInputPlaceholder?: string;
+    description: string;
+    filterByLabel?: string;
+    globalFilters?: Filter[];
+    globalFiltersIconDescription?: string;
+    globalFiltersLabel?: string;
+    globalFiltersPlaceholderText?: string;
+    globalFiltersPrimaryButtonText?: string;
+    globalFiltersSecondaryButtonText?: string;
+    globalSearchLabel: string;
+    globalSearchPlaceholder?: string;
+    globalSortBy?: Array<any>;
+    illustrationTheme?: Theme;
+    influencerTitle?: string;
+    items: Item;
+    itemsLabel: string;
+    metaIconDescription?: string;
+    metaPanelTitle?: string;
+    multi: boolean;
+    navIconDescription?: string;
+    noResultsDescription: string;
+    noResultsTitle: string;
+    noSelectionDescription?: string;
+    noSelectionTitle?: string;
+    onClose: () => void;
+    onCloseButtonText: string;
+    onSubmit: () => void;
+    onSubmitButtonText: string;
+    open: boolean;
+    /**
+     * portal target for the all tags modal
+     */
+    portalTarget?: ReactNode;
+    searchResultsTitle?: string;
+    sortByLabel?: string;
+    title: string;
+}
+export declare const AddSelect: React.ForwardRefExoticComponent<AddSelectProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/AddSelect/AddSelect.js

@@ -31,10 +31,12 @@ var AddSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var normalizedItems = useNormalizedItems ? addSelectUtils.normalize(items) : null;
   var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== void 0 && globalFilters.length ? addSelectUtils.getGlobalFilterValues(globalFilters, normalizedItems) : null;
   var defaultModifiers = props.multi && items.modifiers ? items.entries.map(function (item) {
-    var modifierAttribute = items.modifiers.id;
-    return _rollupPluginBabelHelpers.defineProperty({
+    var _items$modifiers;
+    var modifierAttribute = items === null || items === void 0 || (_items$modifiers = items.modifiers) === null || _items$modifiers === void 0 ? void 0 : _items$modifiers.id;
+    var modifier = {
       id: item.id
-    }, modifierAttribute, item[modifierAttribute]);
+    };
+    return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, modifier), modifierAttribute && _rollupPluginBabelHelpers.defineProperty({}, modifierAttribute, item[modifierAttribute]));
   }) : [];
   return /*#__PURE__*/React__default["default"].createElement(AddSelectBody.AddSelectBody, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref,
@@ -52,6 +54,7 @@ AddSelect.propTypes = {
   columnInputPlaceholder: index["default"].string,
   description: index["default"].string.isRequired,
   filterByLabel: index["default"].string,
+  /**@ts-ignore */
   globalFilters: index["default"].arrayOf(index["default"].shape({
     id: index["default"].string,
     label: index["default"].string
@@ -66,6 +69,7 @@ AddSelect.propTypes = {
   globalSortBy: index["default"].array,
   illustrationTheme: index["default"].oneOf(['light', 'dark']),
   influencerTitle: index["default"].string,
+  /**@ts-ignore */
   items: index["default"].shape({
     modifiers: index["default"].shape({
       id: index["default"].string,

package/lib/components/AddSelect/AddSelectBody.d.ts

@@ -1,2 +1,44 @@
-export let AddSelectBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Item, Theme } from './types';
+export interface AddSelectBodyProps {
+    className?: string;
+    clearFiltersText?: string;
+    closeIconDescription?: string;
+    columnInputPlaceholder?: string;
+    defaultModifiers?: Array<any>;
+    description?: string;
+    filterByLabel?: string;
+    globalFilterOpts?: Array<any>;
+    globalFiltersIconDescription?: string;
+    globalFiltersLabel?: string;
+    globalFiltersPlaceholderText?: string;
+    globalFiltersPrimaryButtonText?: string;
+    globalFiltersSecondaryButtonText?: string;
+    globalSearchLabel: string;
+    globalSearchPlaceholder?: string;
+    globalSortBy?: Array<any>;
+    illustrationTheme?: Theme;
+    influencerTitle?: string;
+    items?: Item;
+    itemsLabel?: string;
+    metaIconDescription?: string;
+    metaPanelTitle?: string;
+    multi?: boolean;
+    navIconDescription?: string;
+    noResultsDescription?: string;
+    noResultsTitle?: string;
+    noSelectionDescription?: string;
+    noSelectionTitle?: string;
+    normalizedItems?: object;
+    onClose?: () => void;
+    onCloseButtonText?: string;
+    onSubmit?: (selection: any) => void;
+    onSubmitButtonText?: string;
+    open?: boolean;
+    portalTarget?: ReactNode;
+    searchResultsTitle?: string;
+    sortByLabel?: string;
+    title?: string;
+    useNormalizedItems?: boolean;
+}
+export declare const AddSelectBody: React.ForwardRefExoticComponent<AddSelectBodyProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/AddSelect/AddSelectBody.js

@@ -131,7 +131,7 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var onCloseHandler = function onCloseHandler() {
     resetState();
-    onClose();
+    onClose === null || onClose === void 0 || onClose();
   };
   var tearsheetClassnames = cx__default["default"](className, blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__single"), !multi), "".concat(blockClass, "__multi"), multi));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
@@ -145,17 +145,17 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setAppliedGlobalFilters(filters);
   };
   var submitHandler = function submitHandler() {
-    if (multi && appliedModifiers.length > 0) {
+    if (multi && appliedModifiers && (appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.length) > 0) {
       var selections = multiSelection.map(function (item) {
         return appliedModifiers.find(function (mod) {
           return mod.id === item;
         });
       });
-      onSubmit(selections);
-    } else if (multi && appliedModifiers.length === 0) {
-      onSubmit(multiSelection);
+      onSubmit === null || onSubmit === void 0 || onSubmit(selections);
+    } else if (multi && (appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.length) === 0) {
+      onSubmit === null || onSubmit === void 0 || onSubmit(multiSelection);
     } else {
-      onSubmit(singleSelection);
+      onSubmit === null || onSubmit === void 0 || onSubmit(singleSelection);
     }
     onCloseHandler();
   };
@@ -222,9 +222,9 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     displayMetalPanel: displayMetalPanel,
     illustrationTheme: illustrationTheme,
     influencerTitle: influencerTitle,
-    items: useNormalizedItems ? normalizedItems : items.entries,
+    items: useNormalizedItems ? normalizedItems : items === null || items === void 0 ? void 0 : items.entries,
     metaPanelTitle: metaPanelTitle,
-    modifiers: items.modifiers,
+    modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
     multiSelection: multiSelection,
     noSelectionDescription: noSelectionDescription,
     noSelectionTitle: noSelectionTitle,
@@ -266,11 +266,8 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type: "gray",
     size: "sm"
   }, itemsToDisplay.length)), showSort && /*#__PURE__*/React__default["default"].createElement(AddSelectSort.AddSelectSort, {
-    items: itemsToDisplay,
     setSortAttribute: setSortAttribute,
     setSortDirection: setSortDirection,
-    sortAttribute: sortAttribute,
-    sortDirection: sortDirection,
     sortBy: globalSortBy
   }))), displayColumnView ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__columns")
@@ -282,7 +279,7 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     sortByLabel: sortByLabel
   }))) : /*#__PURE__*/React__default["default"].createElement("div", null, hasResults ? /*#__PURE__*/React__default["default"].createElement(AddSelectList.AddSelectList, _rollupPluginBabelHelpers["extends"]({}, commonListProps, {
     filteredItems: itemsToDisplay,
-    modifiers: items.modifiers,
+    modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
     appliedModifiers: appliedModifiers,
     setAppliedModifiers: setAppliedModifiers,
     setParentSelected: parentSelectionHandler,
@@ -322,6 +319,7 @@ AddSelectBody.propTypes = {
   globalSortBy: index["default"].array,
   illustrationTheme: index["default"].oneOf(['light', 'dark']),
   influencerTitle: index["default"].string,
+  /**@ts-ignore */
   items: index["default"].shape({
     modifiers: index["default"].shape({
       id: index["default"].string,

package/lib/components/AddSelect/AddSelectSort.d.ts

@@ -1,18 +1,17 @@
-export function AddSelectSort({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: {
-    setSortAttribute: any;
-    setSortDirection: any;
-    sortBy: any;
-    sortByLabel: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace AddSelectSort {
-    export namespace propTypes {
-        let setSortAttribute: PropTypes.Requireable<(...args: any[]) => any>;
-        let setSortDirection: PropTypes.Requireable<(...args: any[]) => any>;
-        let sortBy: PropTypes.Requireable<any[]>;
-        let sortByLabel: PropTypes.Requireable<string>;
-    }
-    export { componentName as displayName };
-}
 import PropTypes from 'prop-types';
-declare const componentName: "AddSelectSort";
-export {};
+export interface AddSelectSortProps {
+    setSortAttribute?: (attribute: any) => void;
+    setSortDirection?: (direction: any) => void;
+    sortBy?: Array<string>;
+    sortByLabel?: string;
+}
+export declare const AddSelectSort: {
+    ({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: AddSelectSortProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        setSortAttribute: PropTypes.Requireable<(...args: any[]) => any>;
+        setSortDirection: PropTypes.Requireable<(...args: any[]) => any>;
+        sortBy: PropTypes.Requireable<any[]>;
+        sortByLabel: PropTypes.Requireable<string>;
+    };
+    displayName: string;
+};

package/lib/components/AddSelect/AddSelectSort.js

@@ -28,7 +28,7 @@ var AddSelectSort = function AddSelectSort(_ref) {
     setSortDirection = _ref.setSortDirection,
     sortBy = _ref.sortBy,
     sortByLabel = _ref.sortByLabel;
-  var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
+  var sortByOpts = sortBy ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.reduce(function (acc, cur) {
     var opts = [{
       id: "".concat(cur, "-asc"),
       itemText: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React__default["default"].createElement(icons.ArrowUp, {
@@ -51,8 +51,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   var sortHandler = function sortHandler(_ref2) {
     var direction = _ref2.direction,
       attribute = _ref2.attribute;
-    setSortAttribute(attribute);
-    setSortDirection(direction);
+    setSortAttribute === null || setSortAttribute === void 0 || setSortAttribute(attribute);
+    setSortDirection === null || setSortDirection === void 0 || setSortDirection(direction);
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: blockClass
@@ -69,8 +69,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, {
       className: "".concat(blockClass, "_overflow-item"),
-      key: opt.id,
-      itemText: opt.itemText,
+      key: opt === null || opt === void 0 ? void 0 : opt.id,
+      itemText: opt === null || opt === void 0 ? void 0 : opt.itemText,
       onClick: function onClick() {
         return sortHandler(opt);
       }

package/lib/components/AddSelect/types/index.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+export type Theme = 'light' | 'dark';
+export interface Filter {
+    id?: string;
+    label?: string;
+}
+export interface Modifier {
+    id?: string;
+    label?: string;
+    options?: string[];
+}
+export interface Avatar {
+    alt?: string;
+    icon?: () => void;
+    src?: string;
+    theme?: Theme;
+}
+export interface Meta {
+    id?: string;
+    title?: string;
+    value?: string;
+}
+export interface Entry {
+    id: string;
+    title: string;
+    value: string;
+    avatar?: Avatar;
+    children?: ReactNode;
+    icon?: () => void | object;
+    meta?: Meta[] | ReactNode;
+    subtitle?: string;
+}
+export interface Item {
+    entries: Entry[];
+    modifiers?: Modifier;
+    sortBy?: string[];
+    filterBy?: string[];
+}
+export interface SortOption {
+    id?: string;
+    direction?: string;
+    attribute?: string;
+    itemText?: object;
+}

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts

@@ -27,7 +27,11 @@ export namespace BreadcrumbWithOverflow {
              */
             label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             /**
-             * A string based alternative to the children, required only if children is not of type string.
+             * An optional title label for extra long breadcrumb
+             */
+            shortTitle: PropTypes.Requireable<string>;
+            /**
+             * A string based alternative to the children, required only if children is not of type string
              */
             title: any;
         }> | null | undefined)[]>;

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -28,8 +28,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _TooltipTrigger;
 var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel", "overflowTooltipAlign"],
-  _excluded2 = ["label", "key", "title", "id"],
-  _excluded3 = ["className", "key", "label", "title"];
+  _excluded2 = ["label", "key", "title", "id", "shortTitle"],
+  _excluded3 = ["className", "key", "label", "shortTitle", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--breadcrumb-with-overflow");
@@ -115,8 +115,9 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       var label = _ref3.label,
         key = _ref3.key,
         title = _ref3.title,
-        id = _ref3.id,
-        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
+        id = _ref3.id;
+        _ref3.shortTitle;
+        var rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
       return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers["extends"]({
         key: key
       }, rest, {
@@ -137,13 +138,14 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       var className = _ref4.className,
         key = _ref4.key,
         label = _ref4.label,
+        shortTitle = _ref4.shortTitle,
         title = _ref4.title,
         rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded3);
       return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers["extends"]({
         key: key,
         className: index > 0 || displayCount > 1 ? cx__default["default"]([className, "".concat(blockClass, "__displayed-breadcrumb")]) : className,
         title: index + 1 === breadcrumbs.length ? title : null
-      }, rest), label);
+      }, rest), shortTitle || label);
     });
 
     // The breadcrumb has the form [first item] [overflow] [items 2...(n-1)] [last item].
@@ -305,7 +307,11 @@ exports.BreadcrumbWithOverflow.propTypes = {
      */
     label: index["default"].node,
     /**
-     * A string based alternative to the children, required only if children is not of type string.
+     * An optional title label for extra long breadcrumb
+     */
+    shortTitle: index["default"].string,
+    /**
+     * A string based alternative to the children, required only if children is not of type string
      */
     title: index["default"].string.isRequired.if(function (_ref5) {
       var label = _ref5.label;

package/lib/components/Card/Card.js

@@ -268,7 +268,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, status === 'incomplete' && (_Incomplete || (_Incomplete = /*#__PURE__*/React__default["default"].createElement(icons.Incomplete, null))), status === 'complete' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__content-container")
   }, /*#__PURE__*/React__default["default"].createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__header-container")
+    className: "".concat(blockClass, "__header-wrapper")
   }, /*#__PURE__*/React__default["default"].createElement(CardHeader.CardHeader, getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("div", getBodyProps(), children)), getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));

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,