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

package/es/components/AddSelect/AddSelect.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { AddSelectBody } from './AddSelectBody.js';
@@ -23,10 +23,12 @@ var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var normalizedItems = useNormalizedItems ? normalize(items) : null;
   var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== void 0 && globalFilters.length ? getGlobalFilterValues(globalFilters, normalizedItems) : null;
   var defaultModifiers = props.multi && items.modifiers ? items.entries.map(function (item) {
-    var modifierAttribute = items.modifiers.id;
-    return _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 _objectSpread2(_objectSpread2({}, modifier), modifierAttribute && _defineProperty({}, modifierAttribute, item[modifierAttribute]));
   }) : [];
   return /*#__PURE__*/React__default.createElement(AddSelectBody, _extends({}, props, {
     ref: ref,
@@ -44,6 +46,7 @@ AddSelect.propTypes = {
   columnInputPlaceholder: PropTypes.string,
   description: PropTypes.string.isRequired,
   filterByLabel: PropTypes.string,
+  /**@ts-ignore */
   globalFilters: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     label: PropTypes.string
@@ -58,6 +61,7 @@ AddSelect.propTypes = {
   globalSortBy: PropTypes.array,
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
   influencerTitle: PropTypes.string,
+  /**@ts-ignore */
   items: PropTypes.shape({
     modifiers: PropTypes.shape({
       id: PropTypes.string,

package/es/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/es/components/AddSelect/AddSelectBody.js

@@ -122,7 +122,7 @@ var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var onCloseHandler = function onCloseHandler() {
     resetState();
-    onClose();
+    onClose === null || onClose === void 0 || onClose();
   };
   var tearsheetClassnames = cx(className, blockClass, _defineProperty(_defineProperty({}, "".concat(blockClass, "__single"), !multi), "".concat(blockClass, "__multi"), multi));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
@@ -136,17 +136,17 @@ var AddSelectBody = /*#__PURE__*/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();
   };
@@ -213,9 +213,9 @@ var AddSelectBody = /*#__PURE__*/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,
@@ -257,11 +257,8 @@ var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     type: "gray",
     size: "sm"
   }, itemsToDisplay.length)), showSort && /*#__PURE__*/React__default.createElement(AddSelectSort, {
-    items: itemsToDisplay,
     setSortAttribute: setSortAttribute,
     setSortDirection: setSortDirection,
-    sortAttribute: sortAttribute,
-    sortDirection: sortDirection,
     sortBy: globalSortBy
   }))), displayColumnView ? /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__columns")
@@ -273,7 +270,7 @@ var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     sortByLabel: sortByLabel
   }))) : /*#__PURE__*/React__default.createElement("div", null, hasResults ? /*#__PURE__*/React__default.createElement(AddSelectList, _extends({}, commonListProps, {
     filteredItems: itemsToDisplay,
-    modifiers: items.modifiers,
+    modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
     appliedModifiers: appliedModifiers,
     setAppliedModifiers: setAppliedModifiers,
     setParentSelected: parentSelectionHandler,
@@ -313,6 +310,7 @@ AddSelectBody.propTypes = {
   globalSortBy: PropTypes.array,
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
   influencerTitle: PropTypes.string,
+  /**@ts-ignore */
   items: PropTypes.shape({
     modifiers: PropTypes.shape({
       id: PropTypes.string,

package/es/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/es/components/AddSelect/AddSelectSort.js

@@ -20,7 +20,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.createElement(React__default.Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React__default.createElement(ArrowUp, {
@@ -43,8 +43,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.createElement("div", {
     className: blockClass
@@ -61,8 +61,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/React__default.createElement(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/es/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/es/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/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -19,8 +19,8 @@ import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
 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(pkg.prefix, "--breadcrumb-with-overflow");
@@ -106,8 +106,9 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       var label = _ref3.label,
         key = _ref3.key,
         title = _ref3.title,
-        id = _ref3.id,
-        rest = _objectWithoutProperties(_ref3, _excluded2);
+        id = _ref3.id;
+        _ref3.shortTitle;
+        var rest = _objectWithoutProperties(_ref3, _excluded2);
       return /*#__PURE__*/React__default.createElement(BreadcrumbItem, _extends({
         key: key
       }, rest, {
@@ -128,13 +129,14 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       var className = _ref4.className,
         key = _ref4.key,
         label = _ref4.label,
+        shortTitle = _ref4.shortTitle,
         title = _ref4.title,
         rest = _objectWithoutProperties(_ref4, _excluded3);
       return /*#__PURE__*/React__default.createElement(BreadcrumbItem, _extends({
         key: key,
         className: index > 0 || displayCount > 1 ? cx([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].
@@ -296,7 +298,11 @@ BreadcrumbWithOverflow.propTypes = {
      */
     label: PropTypes.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: PropTypes.string,
+    /**
+     * A string based alternative to the children, required only if children is not of type string
      */
     title: PropTypes.string.isRequired.if(function (_ref5) {
       var label = _ref5.label;

package/es/components/Card/Card.js

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

package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

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

package/es/components/ConditionBuilder/ConditionBuilder.js

@@ -15,6 +15,7 @@ import ConditionBuilderContent from './ConditionBuilderContent/ConditionBuilderC
 import { ConditionBuilderProvider } from './ConditionBuilderContext/ConditionBuilderProvider.js';
 import { pkg } from '../../settings.js';
 import { blockClass } from './ConditionBuilderContext/DataConfigs.js';
+import { handleKeyDown } from './utils/handleKeyboardEvents.js';
 
 var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold", "getOptions", "initialState", "getConditionState", "variant"];
 
@@ -55,6 +56,9 @@ var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     rest = _objectWithoutProperties(_ref, _excluded);
   var localRef = useRef();
   var conditionBuilderRef = ref || localRef;
+  var handleKeyDownHandler = function handleKeyDownHandler(evt) {
+    handleKeyDown(evt, conditionBuilderRef);
+  };
   return /*#__PURE__*/React__default.createElement(ConditionBuilderProvider, {
     inputConfig: inputConfig,
     popOverSearchThreshold: popOverSearchThreshold,
@@ -73,7 +77,8 @@ var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     role: "main",
     ref: conditionBuilderRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(VStack, {
-    className: "".concat(blockClass, "__").concat(variant)
+    className: "".concat(blockClass, "__").concat(variant),
+    onKeyDown: handleKeyDownHandler
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderContent, {
     startConditionLabel: startConditionLabel,
     conditionBuilderRef: conditionBuilderRef,

package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

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

package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

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

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

@@ -67,7 +67,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     className: "".concat(blockClass, "__content-container"),
     tabIndex: -1
   }, !isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
-    className: "".concat(blockClass, "__condition-builder"),
+    className: "".concat(blockClass, "__add-condition-button"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default.createElement(Add, _extends({
         size: 16
@@ -79,7 +79,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.createElement(ConditionGroupBuilder, {
-      className: "".concat(blockClass, "__condition-builder__group"),
+      className: "".concat(blockClass, "__group"),
       key: groupIndex,
       aria: {
         level: 1,

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

@@ -69,7 +69,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   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();
       }
@@ -95,11 +95,11 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     renderIcon: renderIcon ? renderIcon : label == undefined ? Add : null,
     showToolTip: showToolTip
   }, rest)), /*#__PURE__*/React__default.createElement(PopoverContent, {
-    className: "".concat(blockClass, "__condition-builder-item__content"),
+    className: "".concat(blockClass, "__item__content"),
     role: "dialog",
     "aria-label": "".concat(title)
   }, /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement("h1", {
-    className: "".concat(blockClass, "__condition-builder-item__title")
+    className: "".concat(blockClass, "__item__title")
   }, title), /*#__PURE__*/React__default.createElement("div", {
     ref: contentRef
   }, open && children))));

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

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

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

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

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

@@ -6,7 +6,7 @@
  */
 
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useEffect } from 'react';
+import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { Search, Button, SelectSkeleton } from '@carbon/react';
 import { CheckboxCheckedFilled, Checkbox, Checkmark } from '@carbon/react/icons';
 import PropTypes from '../../../../node_modules/prop-types/index.js';
@@ -33,6 +33,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 = useRef();
   useEffect(function () {
     if (!allOptions && getOptions) {
       var fetchData = /*#__PURE__*/function () {
@@ -63,8 +64,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') {
+  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) {
@@ -72,31 +83,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(_toConsumableArray(selection), [option.id]), e);
+        onChange([].concat(_toConsumableArray(selection), [option.id]), evt);
       }
     } else {
-      onChange(option.id, e);
+      onChange(option.id, evt);
     }
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, allOptions && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-option")
+    className: "".concat(blockClass, "__item-option"),
+    ref: contentRef
   }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-option__search")
+    className: "".concat(blockClass, "__item-option__search")
   }, /*#__PURE__*/React__default.createElement(Search, {
     size: "sm",
     labelText: translateWithId('clear_search'),
@@ -122,25 +134,25 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(blockClass, "__condition-builder-item-option__option"),
+      className: "".concat(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.createElement("div", {
-      className: "".concat(blockClass, "__condition-builder-item-option__option-content")
+      className: "".concat(blockClass, "__item-option__option-content")
     }, multiSelectable ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(blockClass, "__option-check-box")
     }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__condition-builder-item-option__option-label")
+      className: "".concat(blockClass, "__item-option__option-label")
     }, option.label), Icon && /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(blockClass, "__option-icon")
     }, /*#__PURE__*/React__default.createElement(Icon, null))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__condition-builder-item-option__option-label")
+      className: "".concat(blockClass, "__item-option__option-label")
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
-      className: "".concat(blockClass, "__condition-builder-checkmark")
+      className: "".concat(blockClass, "__checkmark")
     }))));
   }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default.createElement(SelectSkeleton, null))));
 };

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

@@ -15,14 +15,14 @@ var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
   var conditionState = _ref.conditionState,
     _onChange = _ref.onChange;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-text")
+    className: "".concat(blockClass, "__item-text")
   }, /*#__PURE__*/React__default.createElement(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);
     }
   }));
 };