@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.27

package/es/components/ExampleComponent/ExampleComponent.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "size", "style"];
+var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "usesExampleHook", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "secondaryIcon", "size", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -14,13 +15,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * LICENSE file in the root directory of this source tree.
  */
 // Import portions of React that are needed.
-import React from 'react'; // Other standard imports.
+import React, { useRef, useEffect, useState } from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Button, ButtonSet } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { Button, ButtonSet } from '@carbon/react';
+import useExample from './useExample'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--example-component");
 var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -29,6 +31,7 @@ var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not impor
 var defaults = {
   primaryKind: 'primary',
   secondaryKind: 'secondary',
+  secondaryIcon: null,
   size: 'lg'
 };
 /**
@@ -40,6 +43,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       boxedBorder = _ref.boxedBorder,
       className = _ref.className,
       disabled = _ref.disabled,
+      usesExampleHook = _ref.usesExampleHook,
       onPrimaryClick = _ref.onPrimaryClick,
       onSecondaryClick = _ref.onSecondaryClick,
       primaryButtonLabel = _ref.primaryButtonLabel,
@@ -48,11 +52,22 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       secondaryButtonLabel = _ref.secondaryButtonLabel,
       _ref$secondaryKind = _ref.secondaryKind,
       secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
+      _ref$secondaryIcon = _ref.secondaryIcon,
+      secondaryIcon = _ref$secondaryIcon === void 0 ? defaults.secondaryIcon : _ref$secondaryIcon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? defaults.size : _ref$size,
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var _useState = useState(primaryButtonLabel),
+      _useState2 = _slicedToArray(_useState, 2),
+      thePrimaryButtonLabel = _useState2[0],
+      setThePrimaryButtonLabel = _useState2[1];
+
+  var _useExample = useExample(usesExampleHook),
+      _useExample2 = _slicedToArray(_useExample, 1),
+      exampleUse = _useExample2[0];
+
   var modeClass = boxedBorder ? "".concat(blockClass, "--boxed-set") : "".concat(blockClass, "--shadow-set");
 
   var handlePrimaryClick = function handlePrimaryClick(e) {
@@ -67,6 +82,14 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }
   };
 
+  var theSecondaryIcon = useRef(secondaryIcon && pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon') ? secondaryIcon : null);
+  useEffect(function () {
+    if (usesExampleHook !== undefined && pkg.checkReportFeatureEnabled('ExampleComponent.useExample')) {
+      setThePrimaryButtonLabel("".concat(primaryButtonLabel, " ").concat(exampleUse.toFixed(1), "s"));
+    } else {
+      setThePrimaryButtonLabel(primaryButtonLabel);
+    }
+  }, [primaryButtonLabel, usesExampleHook, exampleUse]);
   return /*#__PURE__*/React.createElement(ButtonSet, _extends({}, rest, {
     className: cx(blockClass, // Apply the block class to the main HTML element
     className, // Apply any supplied class names to the main HTML element.
@@ -78,6 +101,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__secondary-button"),
     kind: secondaryKind,
     onClick: handleSecondaryClick,
+    renderIcon: theSecondaryIcon.current,
     disabled: disabled,
     size: size
   }, secondaryButtonLabel), /*#__PURE__*/React.createElement(Button, {
@@ -86,7 +110,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onClick: handlePrimaryClick,
     disabled: disabled,
     size: size
-  }, primaryButtonLabel));
+  }, thePrimaryButtonLabel));
 }); // Return a placeholder if not released and not enabled by feature flag.
 
 ExampleComponent = pkg.checkComponentEnabled(ExampleComponent, componentName); // The display name of the component, used by React. Note that displayName
@@ -142,6 +166,11 @@ ExampleComponent.propTypes = {
    */
   secondaryButtonLabel: PropTypes.string.isRequired,
 
+  /**
+   * The icon to use for the secondary button.
+   */
+  secondaryIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /**
    * The kind of button for the secondary button ('secondary' or 'tertiary').
    */
@@ -155,5 +184,10 @@ ExampleComponent.propTypes = {
   /**
    * Optional style settings for the containing node.
    */
-  style: PropTypes.object
+  style: PropTypes.object,
+
+  /**
+   * Hook example timeout (in seconds) or undefined
+   */
+  usesExampleHook: PropTypes.number
 };

package/es/components/ExampleComponent/useExample.js

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useState, useEffect } from 'react';
+import { pkg } from '../../settings';
+
+var useExample = function useExample(initialTime) {
+  // NOTE: hooks cannot be called conditionally.
+  //
+  // ** If the hook uses other hooks then they must be called,
+  // ** this could lead to unexpected behavior.
+  // ** As some hooks may still be called even if the condition is false.
+  var _useState = useState( // Disable hook in a safe way if possible, else use despite feature disabled.
+  // Either a console error or warning will be logged.
+  initialTime),
+      _useState2 = _slicedToArray(_useState, 2),
+      time = _useState2[0],
+      setTime = _useState2[1]; // Use of the feature flag to
+
+
+  var feature = 'ExampleComponent.useExample';
+  var tryFeature = initialTime !== undefined;
+  var featureEnabled = tryFeature && pkg.checkReportFeatureEnabled(feature);
+
+  if (tryFeature && !featureEnabled) {
+    // Output a useful message if the feature is disabled.
+    console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
+  } // Actual hook is code is below
+
+
+  useEffect(function () {
+    if (!featureEnabled) {
+      return;
+    } // turn off all or part of the feature
+
+
+    if (time > 0) {
+      setTimeout(function () {
+        setTime(Math.max(0, time - 0.1));
+      }, 100);
+    }
+  }, [featureEnabled, time]);
+  return [time];
+};
+
+export default useExample;

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -46,12 +46,12 @@ ExpressiveCard.propTypes = {
   /**
    * Optional header description
    */
-  description: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Optional label for the top of the card
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Optional media content like an image to be placed in the card
@@ -126,6 +126,6 @@ ExpressiveCard.propTypes = {
   /**
    * Title that's displayed at the top of the card
    */
-  title: PropTypes.string
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node])
 };
 ExpressiveCard.displayName = componentName;

package/es/components/InlineEditV1/InlineEditV1.js

@@ -21,7 +21,7 @@ import { pkg } from '../../settings'; // Carbon and package components we use.
 
 /* TODO: @use(s) of carbon components and other package components. */
 
-import { Button, IconButton, usePrefix } from '@carbon/react';
+import { IconButton, usePrefix } from '@carbon/react';
 import { Close, Edit, EditOff, Checkmark, WarningFilled } from '@carbon/react/icons'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--inline-edit");
@@ -285,35 +285,30 @@ export var InlineEditV1 = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       className: cx("".concat(blockClass, "__toolbar"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), _defineProperty(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
     }, showValidation && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__validation-icon")
-    }, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
+    }, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, _extends({
       className: "".concat(blockClass, "__cancel"),
       kind: "ghost",
-      hasIconOnly: true,
-      iconDescription: cancelDescription,
+      label: cancelDescription,
       onClick: handleCancel,
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(Close, _extends({
-          size: 16
-        }, props));
-      }
-    }, tipPositions.cancel)), /*#__PURE__*/React.createElement(Button, _extends({
+      size: size
+    }, tipPositions.cancel), /*#__PURE__*/React.createElement(Close, {
+      size: 16
+    })), /*#__PURE__*/React.createElement(IconButton, _extends({
       className: "".concat(blockClass, "__save"),
       kind: "ghost",
-      hasIconOnly: true,
-      iconDescription: saveDescription,
+      label: saveDescription,
       onClick: handleSave,
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(Checkmark, _extends({
-          size: 16
-        }, props));
-      },
-      disabled: value === internalValue
-    }, tipPositions.save))) : /*#__PURE__*/React.createElement(IconButton, _extends({
+      disabled: value === internalValue,
+      size: size
+    }, tipPositions.save), /*#__PURE__*/React.createElement(Checkmark, {
+      size: 16
+    }))) : /*#__PURE__*/React.createElement(IconButton, _extends({
       className: cx("".concat(blockClass, "__edit"), _defineProperty({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
       kind: "ghost",
       label: editDescription,
       onClick: handleEdit,
-      disabled: disabled
+      disabled: disabled,
+      size: size
     }, tipPositions.edit), disabled ? /*#__PURE__*/React.createElement(EditOff, {
       size: 16
     }) : /*#__PURE__*/React.createElement(Edit, {

package/es/components/InlineEditV2/InlineEditV2.js

@@ -11,7 +11,7 @@ var _excluded = ["cancelLabel", "editLabel", "id", "invalid", "invalidLabel", "l
  * LICENSE file in the root directory of this source tree.
  */
 import React, { useState, useEffect, forwardRef, useRef } from 'react';
-import { Button } from '@carbon/react';
+import { IconButton } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Edit, Checkmark, Close, // EditOff,
@@ -21,6 +21,8 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 var componentName = 'InlineEditV2';
 var blockClass = "".concat(pkg.prefix, "--inline-edit-v2");
 export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _cx;
+
   var cancelLabel = _ref.cancelLabel,
       editLabel = _ref.editLabel,
       id = _ref.id,
@@ -147,7 +149,7 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "-focused"), focused)),
+    className: cx(blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--focused"), focused), _defineProperty(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
   }, /*#__PURE__*/React.createElement("label", {
@@ -162,55 +164,43 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: inputRef // readOnly={readOnly}
     ,
     onKeyDown: onKeyHandler
-  }), focused ? /*#__PURE__*/React.createElement(React.Fragment, null, invalid && /*#__PURE__*/React.createElement(WarningFilled, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__toolbar")
+  }, focused ? /*#__PURE__*/React.createElement(React.Fragment, null, invalid && /*#__PURE__*/React.createElement(WarningFilled, {
     size: 16,
     className: "".concat(blockClass, "__warning-icon")
-  }), /*#__PURE__*/React.createElement(Button, {
-    hasIconOnly: true,
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(Close, {
-        size: 24
-      });
-    },
+  }), /*#__PURE__*/React.createElement(IconButton, {
     size: "sm",
-    iconDescription: cancelLabel,
+    label: cancelLabel,
     onClick: onCancelHandler,
     kind: "ghost",
     tabIndex: 0,
     key: "cancel",
     className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-cancel")
-  }), /*#__PURE__*/React.createElement(Button, {
-    hasIconOnly: true,
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(Checkmark, {
-        size: 24
-      });
-    },
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: 16
+  })), /*#__PURE__*/React.createElement(IconButton, {
     size: "sm",
-    iconDescription: saveLabel,
+    label: saveLabel,
     onClick: onSaveHandler,
     kind: "ghost",
     tabIndex: 0,
     key: "save",
     className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
     disabled: !canSave
-  })) : /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Checkmark, {
+    size: 16
+  }))) : /*#__PURE__*/React.createElement(IconButton, {
     className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
-    hasIconOnly: true // renderIcon={readOnly ? EditOff24 : Edit24}
-    ,
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(Edit, {
-        size: 24
-      });
-    },
-    size: "sm" // iconDescription={readOnly ? readOnlyLabel : editLabel}
-    ,
-    iconDescription: editLabel,
+    size: "sm",
+    label: editLabel,
     onClick: onFocusHandler,
     kind: "ghost",
     tabIndex: 0,
     key: "edit"
-  })), focused && invalid && /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement(Edit, {
+    size: 16
+  })))), focused && invalid && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__warning-text")
   }, invalidLabel));
 });

package/es/components/PageHeader/PageHeader.js

@@ -446,8 +446,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     showAllTagsLabel: showAllTagsLabel,
     tags: tags,
     overflowClassName: "".concat(blockClass, "__navigation-tags-overflow")
-  })) : null) : null), hasCollapseButton ? /*#__PURE__*/React.createElement(Button, {
-    className: cx("".concat(blockClass, "__collapse-expand-toggle"), _defineProperty({}, "".concat(blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed)),
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__collapse-expand-toggle"), _defineProperty({}, "".concat(blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed))
+  }, /*#__PURE__*/React.createElement(Button, {
     hasIconOnly: true,
     iconDescription:
     /* istanbul ignore next */
@@ -463,7 +464,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     type: "button"
-  }) : null));
+  })) : null));
 
   function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
     if (pageActions) {

package/es/components/ProductiveCard/ProductiveCard.js

@@ -75,12 +75,12 @@ ProductiveCard.propTypes = {
   /**
    * Optional header description
    */
-  description: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Optional label for the top of the card
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Provides the callback for a clickable card
@@ -130,7 +130,7 @@ ProductiveCard.propTypes = {
   /**
    * Title that's displayed at the top of the card
    */
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Determines title size

package/es/components/index.js

@@ -37,7 +37,7 @@ export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
 export { EditFullPage } from './EditFullPage';

package/es/global/js/package-settings.js

@@ -79,7 +79,8 @@ var defaults = {
   // feature level flags
   feature: {
     'a-new-feature': false,
-    'default-portal-target-body': true
+    'default-portal-target-body': true,
+    'Datagrid.useInfiniteScroll': false
   }
 };
 
@@ -91,6 +92,10 @@ var warningMessageFeature = function warningMessageFeature(property) {
   return "Carbon for IBM Products (WARNING): Feature \"".concat(property, "\" enabled via feature flags.");
 };
 
+var errorMessageFeature = function errorMessageFeature(property) {
+  return "Carbon for IBM Products (Error): Feature \"".concat(property, "\" not enabled. To enable see the notes on feature flags in the README.");
+};
+
 var warningMessageAllComponents = 'Carbon for IBM Products (WARNING): All components enabled through use of setAllComponents. This includes components that have not yet completed their review process.';
 var warningMessageAllFeatures = 'Carbon for IBM Products (WARNING): All features enabled through use of setAllFeatures'; // Values to represent overrides for component or feature settings.
 // Each value maps the initial value to the value that should be returned.
@@ -111,7 +116,11 @@ var allFeatures = all.INITIAL;
 var silent = false;
 var component = new Proxy(_objectSpread({}, defaults.component), {
   set: function set(target, property, value) {
-    value && !silent && console.warn(warningMessageComponent(property));
+    if (target[property] !== true && !silent && value) {
+      // not already true, not silent, and now true
+      console.warn(warningMessageComponent(property));
+    }
+
     target[property] = value;
     return true; // value set
   },
@@ -123,7 +132,11 @@ var component = new Proxy(_objectSpread({}, defaults.component), {
 });
 var feature = new Proxy(_objectSpread({}, defaults.feature), {
   set: function set(target, property, value) {
-    value && !silent && console.warn(warningMessageFeature(property));
+    if (target[property] !== true && !silent && value) {
+      // not already true, not silent, and now true
+      console.warn(warningMessageFeature(property));
+    }
+
     target[property] = value;
     return true; // value set
   },
@@ -153,6 +166,14 @@ export default {
     var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return byDefault ? defaults.feature[featureName] : feature[featureName];
   },
+  checkReportFeatureEnabled: function checkReportFeatureEnabled(featureName) {
+    if (feature[featureName]) {
+      // NOTE: Warning emitted if feature flag is enabled (see Proxy above)
+      return true;
+    } else {
+      console.error(errorMessageFeature(featureName));
+    }
+  },
   isFeaturePublic: function isFeaturePublic(featureName) {
     var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return Object.prototype.hasOwnProperty.call(byDefault ? defaults.feature : feature, featureName);

package/es/global/js/utils/story-helper.js

@@ -76,4 +76,13 @@ CodesandboxLink.propTypes = {
    * directory withing examples codesandbox will be found
    */
   exampleDirectory: PropTypes.string
+};
+/**
+ * A helper function that finds the designated theme on the Storybook canvas.
+ * @returns "dark" or "light"
+ */
+
+export var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
+  var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
+  return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
 };

package/es/global/js/utils/test-helper.js

@@ -198,6 +198,43 @@ export var expectMultipleWarn = function expectMultipleWarn(messages, test) {
   warn.mockRestore();
   return result;
 };
+
+var checkLogging = function checkLogging(mock, message) {
+  if (message) {
+    var _expect4;
+
+    expect(mock).toBeCalled();
+
+    (_expect4 = expect(mock)).toHaveBeenCalledWith.apply(_expect4, _toConsumableArray(makeMatcherArray(message)));
+  }
+};
+/**
+ * A helper function to enable a test to expect a single call to
+ * console.error, for example when intentionally omitting a required prop
+ * or supplying an invalid prop type or value for the purposes of the test.
+ * @param {errors: {string|regex|function|[]}, warnings: {string|regex|function|[]}} messages the expected parameters for the call to
+ * console.error or console.warn, which must be called exactly once. A single string or regex or an
+ * expect matcher can be used to match a single-argument call to console.error (most common),
+ * while an array of strings and/or regex and/or expect matchers can be used to match a
+ * multiple-argument call. Strings can be full or substring matches to the corresponding
+ * argument.
+ * @param {Function} test the test function to call, during which the call to
+ * console.error will be expected.
+ */
+
+
+export var expectLogging = function expectLogging(_ref2, test) {
+  var errors = _ref2.errors,
+      warnings = _ref2.warnings;
+  var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+  var warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+  var result = test();
+  checkLogging(error, errors);
+  checkLogging(warn, warnings);
+  error.mockRestore();
+  warn.mockRestore();
+  return result;
+};
 /**
  * A helper function to enable a test to expect a single call to
  * console.error, for example when intentionally omitting a required prop
@@ -213,14 +250,9 @@ export var expectMultipleWarn = function expectMultipleWarn(messages, test) {
  */
 
 export var expectError = function expectError(message, test) {
-  var _expect4;
-
   var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
   var result = test();
-  expect(error).toBeCalledTimes(1);
-
-  (_expect4 = expect(error)).toHaveBeenCalledWith.apply(_expect4, _toConsumableArray(makeMatcherArray(message)));
-
+  checkLogging(error, message);
   error.mockRestore();
   return result;
 };

package/lib/components/AddSelect/AddSelectBody.js

@@ -282,6 +282,7 @@ var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var displayColumnView = multi && useNormalizedItems && !searchTerm && !globalFiltersApplied; // main content
 
   var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    id: "add-select",
     className: "".concat(blockClass, "__header")
   }, /*#__PURE__*/_react.default.createElement(_AddSelectFilter.AddSelectFilter, {
     inputLabel: globalSearchLabel,