@carbon/ibm-products 2.57.0 → 2.57.1-rc.0

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -23,7 +23,7 @@ var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
 var _ErrorFilled, _InformationFilled;
-var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editSuccessMessage", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateSuccessMessage", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "launcherButtonRef", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel", "helperText"];
+var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editSuccessMessage", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateSuccessMessage", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "launcherButtonRef", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "showAPIKeyLabel", "helperText"];
 var componentName = 'APIKeyModal';
 
 // Default values for props
@@ -82,7 +82,6 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     previousStepButtonText = _ref.previousStepButtonText,
-    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     helperText = _ref.helperText,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -127,7 +126,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var localRef = React.useRef(undefined);
   var PasswordInputRef = React.useRef(null);
   var modalRef = ref || localRef;
-  var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
+  var _useFocus = useFocus.useFocus(modalRef),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
   var prevOpen = usePreviousValue.usePreviousValue(open);
@@ -142,9 +141,9 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+      useFocus.claimFocus(firstElement, modalRef, "#".concat(CSS.escape(apiKeyInputId === null || apiKeyInputId === void 0 ? void 0 : apiKeyInputId.current)));
     }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  }, [firstElement, modalRef, open]);
   React.useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {

package/lib/components/APIKeyModal/APIKeyModal.types.d.ts

@@ -154,11 +154,6 @@ interface APIKeyModalCommonProps {
      * The DOM node the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
-    /**
-     * Specify a CSS selector that matches the DOM element that should be
-     * focused when the Modal opens.
-     */
-    selectorPrimaryFocus?: string;
     /**
      * label text that's displayed when hovering over visibility toggler to show key
      */

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -19,7 +19,7 @@ var settings = require('../../settings.js');
 var handleKeyboardEvents = require('./utils/handleKeyboardEvents.js');
 var util = require('./utils/util.js');
 
-var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold", "getOptions", "initialState", "getConditionState", "getActionsState", "variant", "actions", "translateWithId"];
+var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold", "getOptions", "initialState", "getConditionState", "getActionsState", "variant", "actions", "translateWithId", "statementConfigCustom"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -60,6 +60,7 @@ exports.ConditionBuilder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant = _ref$variant === void 0 ? util.NON_HIERARCHICAL_VARIANT : _ref$variant,
     actions = _ref.actions,
     translateWithId = _ref.translateWithId,
+    statementConfigCustom = _ref.statementConfigCustom,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var localRef = React.useRef(null);
   var conditionBuilderRef = ref || localRef;
@@ -72,7 +73,8 @@ exports.ConditionBuilder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     getOptions: getOptions,
     variant: variant,
     translateWithId: translateWithId,
-    conditionBuilderRef: conditionBuilderRef
+    conditionBuilderRef: conditionBuilderRef,
+    statementConfigCustom: statementConfigCustom
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(util.blockClass,
     // Apply the block class to the main HTML element
@@ -208,6 +210,16 @@ exports.ConditionBuilder.propTypes = {
    * Provide a label to the button that starts condition builder
    */
   startConditionLabel: index.default.string,
+  /**
+   * Optional prop for passing custom configuration for statement option from default op
+   */
+  /**@ts-ignore */
+  statementConfigCustom: index.default.arrayOf(index.default.shape({
+    id: index.default.string.isRequired,
+    connector: index.default.oneOf(['and', 'or']).isRequired,
+    label: index.default.string.isRequired,
+    secondaryLabel: index.default.string
+  })),
   /**
    * Optional prop, if you need to pass translations to the texts on the component instead of the defined defaults.
    * This callback function will receive the message id and you need to return the corresponding text for that id.

package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts

@@ -29,14 +29,15 @@ export type Operators = {
     option: OptionOperator;
     date: DateOperator;
 };
+export type option = {
+    id: string;
+    label: string;
+    icon?: CarbonIconType;
+};
 export type PropertyConfigOption = {
     type: 'option';
     config?: {
-        options?: {
-            id: string;
-            label: string;
-            icon?: CarbonIconType;
-        }[];
+        options?: option[];
     };
 };
 export interface PropertyConfigText {
@@ -120,6 +121,12 @@ export type Action = {
     label?: string;
 };
 export type variantsType = 'Non-Hierarchical' | 'Hierarchical';
+export type statementConfig = {
+    id: string;
+    connector: 'and' | 'or';
+    label: string;
+    secondaryLabel?: string;
+};
 export type ConditionBuilderProps = {
     inputConfig: inputConfig;
     initialState?: InitialState;
@@ -132,6 +139,7 @@ export type ConditionBuilderProps = {
     startConditionLabel?: string;
     variant?: 'Non-Hierarchical' | 'Hierarchical';
     translateWithId: (id: string) => string;
+    statementConfigCustom: statementConfig[];
 };
 export type InitialState = {
     state: ConditionBuilderState;
@@ -144,6 +152,7 @@ export interface ConditionBuilderContextInputProps extends PropsWithChildren {
     getOptions?: (state: ConditionBuilderState, condition: Condition) => Promise<Option[]>;
     variant?: string;
     translateWithId?: (id: string) => string;
+    statementConfigCustom?: statementConfig[];
     conditionBuilderRef?: ForwardedRef<HTMLDivElement>;
 }
 export type ConditionBuilderContextProps = {

package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js

@@ -53,7 +53,8 @@ var ConditionBuilderProvider = function ConditionBuilderProvider(props) {
     getOptions: props.getOptions,
     variant: props.variant,
     translateWithId: props.translateWithId,
-    conditionBuilderRef: props.conditionBuilderRef
+    conditionBuilderRef: props.conditionBuilderRef,
+    statementConfigCustom: props.statementConfigCustom
   };
   return /*#__PURE__*/React.createElement(ConditionBuilderContext.Provider, {
     value: contextValue

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

@@ -17,6 +17,7 @@ var useTranslations = require('../utils/useTranslations.js');
 var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 var handleKeyboardEvents = require('../utils/handleKeyboardEvents.js');
 var util = require('../utils/util.js');
+var translationObject = require('../ConditionBuilderContext/translationObject.js');
 
 var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config", "renderChildren", "onChange"];
 var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
@@ -38,12 +39,19 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    conditionBuilderRef = _useContext.conditionBuilderRef,
+    statementConfigCustom = _useContext.statementConfigCustom;
   var statementIdMap = {
-    ifAll: 'if',
-    ifAny: 'if',
-    unlessAll: 'unless',
-    unlessAny: 'unless'
+    ifAll: translationObject.translationsObject.ifText,
+    ifAny: translationObject.translationsObject.ifText,
+    unlessAll: translationObject.translationsObject.unlessText,
+    unlessAny: translationObject.translationsObject.unlessText
   };
+  //Appending statements from custom statement configuration if present
+  statementConfigCustom === null || statementConfigCustom === void 0 || statementConfigCustom.forEach(function (statement) {
+    statementIdMap[statement.id] = statement.label;
+  });
   var _useTranslations = useTranslations.useTranslations(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label], statementIdMap),
     _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 6),
     invalidText = _useTranslations2[0],
@@ -52,8 +60,6 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     addOperatorText = _useTranslations2[3],
     addValueText = _useTranslations2[4],
     labelText = _useTranslations2[5];
-  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    conditionBuilderRef = _useContext.conditionBuilderRef;
   var getPropertyDetails = function getPropertyDetails() {
     var _ref2 = condition || {},
       property = _ref2.property,

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts

@@ -6,13 +6,15 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PropertyConfigOption } from '../../ConditionBuilder.types';
+import { option, statementConfig } from '../../ConditionBuilder.types';
 interface ItemOptionProps {
     conditionState: {
         label?: string;
         value?: string;
     };
-    config: PropertyConfigOption['config'] & {
+    config: {
+        options?: option[] | statementConfig[];
+    } & {
         isStatement?: boolean;
     };
     onChange: (value: string, e: Event) => void;

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

@@ -63,7 +63,7 @@ var ItemOption = function ItemOption(_ref) {
   var getStatementContent = function getStatementContent(option) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(util.blockClass, "__statement_wrapper")
-    }, /*#__PURE__*/React.createElement("div", null, option.text1, " (", option.connector, ")"), /*#__PURE__*/React.createElement("div", null, option.text2));
+    }, /*#__PURE__*/React.createElement("div", null, option.label, " (", option.connector, ")"), /*#__PURE__*/React.createElement("div", null, option.secondaryLabel));
   };
   if (!allOptions) {
     return;

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

@@ -1,10 +1,9 @@
 export function useDataConfigs(): {
-    statementConfig: {
-        label: string;
+    statementConfig: import("../ConditionBuilder.types").statementConfig[] | {
         id: string;
         connector: string;
-        text1: any;
-        text2: string;
+        label: any;
+        secondaryLabel: string;
     }[];
     connectorConfig: {
         label: any;

package/lib/components/ConditionBuilder/utils/useDataConfigs.js

@@ -8,7 +8,9 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
 var useTranslations = require('./useTranslations.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 
 var useDataConfigs = function useDataConfigs() {
   var _useTranslations = useTranslations.useTranslations(['ifAll', 'ifAny', 'unlessAll', 'unlessAny', 'and', 'or', 'is', 'greater', 'greaterEqual', 'lower', 'lowerEqual', 'startsWith', 'endsWith', 'contains', 'oneOf', 'before', 'after', 'between']),
@@ -31,30 +33,28 @@ var useDataConfigs = function useDataConfigs() {
     before = _useTranslations2[15],
     after = _useTranslations2[16],
     between = _useTranslations2[17];
-  var statementConfig = [{
-    label: 'ifText',
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    statementConfigCustom = _useContext.statementConfigCustom;
+  var statementConfigDefault = [{
     id: 'ifAll',
     connector: 'and',
-    text1: ifAll,
-    text2: '(a && b)'
+    label: ifAll,
+    secondaryLabel: '(a && b)'
   }, {
-    label: 'ifText',
     id: 'ifAny',
     connector: 'or',
-    text1: ifAny,
-    text2: '(a || b)'
+    label: ifAny,
+    secondaryLabel: '(a || b)'
   }, {
-    label: 'unlessText',
     id: 'unlessAll',
     connector: 'and',
-    text1: unlessAll,
-    text2: '! (a && b)'
+    label: unlessAll,
+    secondaryLabel: '! (a && b)'
   }, {
-    label: 'unlessText',
     id: 'unlessAny',
     connector: 'or',
-    text1: unlessAny,
-    text2: '! (a || b)'
+    label: unlessAny,
+    secondaryLabel: '! (a || b)'
   }];
   var connectorConfig = [{
     label: and,
@@ -113,7 +113,7 @@ var useDataConfigs = function useDataConfigs() {
     type: 'date'
   }];
   return {
-    statementConfig: statementConfig,
+    statementConfig: statementConfigCustom !== null && statementConfigCustom !== void 0 ? statementConfigCustom : statementConfigDefault,
     connectorConfig: connectorConfig,
     operatorConfig: operatorConfig
   };

package/lib/components/CreateTearsheet/CreateTearsheet.d.ts

@@ -39,13 +39,27 @@ export interface CreateTearsheetProps extends PropsWithChildren {
      */
     experimentalSecondarySubmitText?: string;
     /**
-     * A description of the flow, displayed in the header area of the tearsheet.
+     * Optional prop that allows you to pass any component.
      */
-    description?: ReactNode;
+    decorator?: ReactNode;
     /**
      * Specifies elements to focus on first on render.
      */
     firstFocusElement?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * To indicate an error occurred in the Tearsheet step
+     * Used to pass this value to TearsheetShell
+     */
+    hasError?: boolean;
     /**
      * Used to set the size of the influencer
      */
@@ -81,10 +95,6 @@ export interface CreateTearsheetProps extends PropsWithChildren {
      * Specifies whether the tearsheet is currently open.
      */
     open?: boolean;
-    /**
-     *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-     */
-    slug?: ReactNode;
     /**
      * The submit button text
      */
@@ -101,6 +111,10 @@ export interface CreateTearsheetProps extends PropsWithChildren {
      * to allow an action bar navigation or breadcrumbs to also show through.
      */
     verticalPosition?: 'normal' | 'lower';
+    /**
+     * @deprecated Property replaced by `decorator`
+     */
+    slug?: ReactNode;
 }
 interface Step {
     introStep?: boolean;

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -9,6 +9,7 @@
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var react = require('@carbon/react');
 var index = require('../../_virtual/index.js');
 var TearsheetShell = require('../Tearsheet/TearsheetShell.js');
@@ -24,7 +25,7 @@ var useResetCreateComponent = require('../../global/js/hooks/useResetCreateCompo
 var useCreateComponentStepChange = require('../../global/js/hooks/useCreateComponentStepChange.js');
 var CreateInfluencer = require('../CreateInfluencer/CreateInfluencer.js');
 
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "experimentalSecondarySubmitText", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "slug", "submitButtonText", "title", "verticalPosition"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "experimentalSecondarySubmitText", "firstFocusElement", "description", "hasError", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "selectorPrimaryFocus", "slug", "decorator", "submitButtonText", "title", "verticalPosition"];
 var componentName = 'CreateTearsheet';
 var blockClass = "".concat(settings.pkg.prefix, "--tearsheet-create");
 
@@ -43,7 +44,9 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     className = _ref.className,
     experimentalSecondarySubmitText = _ref.experimentalSecondarySubmitText,
+    firstFocusElement = _ref.firstFocusElement,
     description = _ref.description,
+    hasError = _ref.hasError,
     _ref$influencerWidth = _ref.influencerWidth,
     influencerWidth = _ref$influencerWidth === void 0 ? 'narrow' : _ref$influencerWidth,
     initialStep = _ref.initialStep,
@@ -52,8 +55,9 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
-    firstFocusElement = _ref.firstFocusElement,
-    slug = _ref.slug,
+    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    deprecated_slug = _ref.slug,
+    decorator = _ref.decorator,
     submitButtonText = _ref.submitButtonText,
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
@@ -195,11 +199,13 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose: onClose,
     open: open,
     size: 'wide',
-    slug: slug,
+    decorator: decorator || deprecated_slug,
     title: title,
     verticalPosition: verticalPosition,
     closeIconDescription: '',
-    currentStep: currentStep
+    currentStep: currentStep,
+    hasError: hasError,
+    selectorPrimaryFocus: selectorPrimaryFocus
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
@@ -241,10 +247,15 @@ exports.CreateTearsheet = settings.pkg.checkComponentEnabled(exports.CreateTears
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 exports.CreateTearsheet.displayName = componentName;
-
+var deprecatedProps = {
+  /**
+   *  @deprecated Property replaced by `decorator`
+   */
+  slug: propsHelper.deprecateProp(index.default.node, 'Property replaced by `decorator`')
+};
 // Note that the descriptions here should be kept in sync with those for the
 // corresponding props for TearsheetNarrow and TearsheetShell components.
-exports.CreateTearsheet.propTypes = {
+exports.CreateTearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * The back button text
    */
@@ -261,6 +272,10 @@ exports.CreateTearsheet.propTypes = {
    * An optional class or classes to be added to the outermost element.
    */
   className: index.default.string,
+  /**
+   *  Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.node,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -273,6 +288,11 @@ exports.CreateTearsheet.propTypes = {
    * Specifies elements to focus on first on render.
    */
   firstFocusElement: index.default.string,
+  /**
+   * To indicate an error occurred in the Tearsheet step
+   * Used to pass this value to TearsheetShell
+   */
+  hasError: index.default.bool,
   /**
    * Used to set the size of the influencer
    */
@@ -309,9 +329,10 @@ exports.CreateTearsheet.propTypes = {
    */
   open: index.default.bool,
   /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
    */
-  slug: index.default.node,
+  selectorPrimaryFocus: index.default.string,
   /**
    * The submit button text
    */
@@ -328,7 +349,7 @@ exports.CreateTearsheet.propTypes = {
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
   verticalPosition: index.default.oneOf(['normal', 'lower'])
-};
+}, deprecatedProps);
 
 exports.StepNumberContext = StepNumberContext;
 exports.StepsContext = StepsContext;

package/lib/components/EmptyStates/EmptyState.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import '../../global/js/utils/props-helper';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
@@ -16,6 +16,7 @@ declare enum sizes {
 export declare const defaults: {
     position: string;
     size: sizes;
+    headingAs: string;
 };
 export interface EmptyStateProps {
     /**
@@ -51,6 +52,10 @@ export interface EmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

package/lib/components/EmptyStates/EmptyState.js

@@ -25,7 +25,7 @@ var settings = require('../../settings.js');
 var EmptyStateContent = require('./EmptyStateContent.js');
 
 var _excluded = ["v2"],
-  _excluded2 = ["action", "className", "illustration", "illustrationDescription", "illustrationPosition", "link", "size", "subtitle", "title"];
+  _excluded2 = ["action", "className", "illustration", "illustrationDescription", "illustrationPosition", "link", "size", "headingAs", "subtitle", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
@@ -37,7 +37,8 @@ var sizes = /*#__PURE__*/function (sizes) {
 }(sizes || {}); // Default values for props
 var defaults = {
   position: 'top',
-  size: sizes.lg
+  size: sizes.lg,
+  headingAs: 'h3'
 };
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
@@ -59,6 +60,8 @@ exports.EmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     link = props.link,
     _props$size = props.size,
     size = _props$size === void 0 ? defaults.size : _props$size,
+    _props$headingAs = props.headingAs,
+    headingAs = _props$headingAs === void 0 ? defaults.headingAs : _props$headingAs,
     subtitle = props.subtitle,
     title = props.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded2);
@@ -68,11 +71,13 @@ exports.EmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, devtools.getDevtoolsProps(componentName)), illustration && /*#__PURE__*/React.createElement("img", {
     src: illustration,
     alt: illustrationDescription,
-    className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
+    className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)]),
+    "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement(EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title !== null && title !== void 0 ? title : ''
   }));
@@ -95,6 +100,10 @@ exports.EmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: index.default.elementType,
   /**
    * Empty state illustration, specify the `src` for a provided illustration to be displayed. In the case of requiring a light and dark illustration of your own, simply pass the corresponding illustration based on the current theme of your application.
    * For example: `illustration={appTheme === 'dark' ? darkIllustration : lightIllustration}`

package/lib/components/EmptyStates/EmptyStateContent.d.ts

@@ -1,6 +1,7 @@
-export function EmptyStateContent({ action, link, size, subtitle, title }: {
+export function EmptyStateContent({ action, link, headingAs, size, subtitle, title, }: {
     action: any;
     link: any;
+    headingAs: any;
     size: any;
     subtitle: any;
     title: any;
@@ -9,6 +10,7 @@ export namespace EmptyStateContent {
     export { componentName as displayName };
     export namespace propTypes {
         let action: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        let headingAs: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         let link: PropTypes.Requireable<PropTypes.InferProps<any>>;
         let size: PropTypes.Requireable<string>;
         let subtitle: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

package/lib/components/EmptyStates/EmptyStateContent.js

@@ -20,12 +20,14 @@ var componentName = 'EmptyStateContent';
 var EmptyStateContent = function EmptyStateContent(_ref) {
   var action = _ref.action,
     link = _ref.link,
+    headingAs = _ref.headingAs,
     size = _ref.size,
     subtitle = _ref.subtitle,
     title = _ref.title;
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content")
-  }, /*#__PURE__*/React.createElement("h3", {
+  }, /*#__PURE__*/React.createElement(react.Section, {
+    as: headingAs,
     className: cx("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--small"), size === 'sm'))
   }, title), subtitle && /*#__PURE__*/React.createElement("p", {
     className: cx("".concat(blockClass, "__subtitle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__subtitle--small"), size === 'sm'))
@@ -59,6 +61,10 @@ EmptyStateContent.propTypes = {
     onClick: react.Button.propTypes.onClick,
     text: index.default.string
   })),
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: index.default.elementType,
   /**
    * Empty state link object
    */

package/lib/components/EmptyStates/EmptyStateIllustration.js

@@ -56,7 +56,9 @@ var EmptyStateIllustration = function EmptyStateIllustration(_ref) {
   var kind = _ref.kind,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Illustration = getIllustration(kind);
-  return /*#__PURE__*/React.createElement(React.Suspense, null, /*#__PURE__*/React.createElement(Illustration, rest));
+  return /*#__PURE__*/React.createElement(React.Suspense, null, /*#__PURE__*/React.createElement(Illustration, _rollupPluginBabelHelpers.extends({
+    "aria-hidden": "true"
+  }, rest)));
 };
 EmptyStateIllustration.propTypes = {
   kind: index.default.string

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface ErrorEmptyStateProps {
@@ -44,6 +44,10 @@ export interface ErrorEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */