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

package/es/components/APIKeyModal/APIKeyModal.js

@@ -21,7 +21,7 @@ import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../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
@@ -80,7 +80,6 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     previousStepButtonText = _ref.previousStepButtonText,
-    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     helperText = _ref.helperText,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -125,7 +124,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var localRef = useRef(undefined);
   var PasswordInputRef = useRef(null);
   var modalRef = ref || localRef;
-  var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
+  var _useFocus = useFocus(modalRef),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
   var prevOpen = usePreviousValue(open);
@@ -140,9 +139,9 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+      claimFocus(firstElement, modalRef, "#".concat(CSS.escape(apiKeyInputId === null || apiKeyInputId === void 0 ? void 0 : apiKeyInputId.current)));
     }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  }, [firstElement, modalRef, open]);
   useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {

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

@@ -17,7 +17,7 @@ import { pkg } from '../../settings.js';
 import { handleKeyDown } from './utils/handleKeyboardEvents.js';
 import { blockClass, NON_HIERARCHICAL_VARIANT } from './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. */
@@ -58,6 +58,7 @@ var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     variant = _ref$variant === void 0 ? NON_HIERARCHICAL_VARIANT : _ref$variant,
     actions = _ref.actions,
     translateWithId = _ref.translateWithId,
+    statementConfigCustom = _ref.statementConfigCustom,
     rest = _objectWithoutProperties(_ref, _excluded);
   var localRef = useRef(null);
   var conditionBuilderRef = ref || localRef;
@@ -70,7 +71,8 @@ var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     getOptions: getOptions,
     variant: variant,
     translateWithId: translateWithId,
-    conditionBuilderRef: conditionBuilderRef
+    conditionBuilderRef: conditionBuilderRef,
+    statementConfigCustom: statementConfigCustom
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -206,6 +208,16 @@ ConditionBuilder.propTypes = {
    * Provide a label to the button that starts condition builder
    */
   startConditionLabel: PropTypes.string,
+  /**
+   * Optional prop for passing custom configuration for statement option from default op
+   */
+  /**@ts-ignore */
+  statementConfigCustom: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    connector: PropTypes.oneOf(['and', 'or']).isRequired,
+    label: PropTypes.string.isRequired,
+    secondaryLabel: PropTypes.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/es/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/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js

@@ -51,7 +51,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__default.createElement(ConditionBuilderContext.Provider, {
     value: contextValue

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

@@ -15,6 +15,7 @@ import { useTranslations } from '../utils/useTranslations.js';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 import { handleKeyDownForPopover } from '../utils/handleKeyboardEvents.js';
 import { blockClass, getValue } from '../utils/util.js';
+import { translationsObject } from '../ConditionBuilderContext/translationObject.js';
 
 var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config", "renderChildren", "onChange"];
 var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
@@ -36,12 +37,19 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useContext = useContext(ConditionBuilderContext),
+    conditionBuilderRef = _useContext.conditionBuilderRef,
+    statementConfigCustom = _useContext.statementConfigCustom;
   var statementIdMap = {
-    ifAll: 'if',
-    ifAny: 'if',
-    unlessAll: 'unless',
-    unlessAny: 'unless'
+    ifAll: translationsObject.ifText,
+    ifAny: translationsObject.ifText,
+    unlessAll: translationsObject.unlessText,
+    unlessAny: 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(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label], statementIdMap),
     _useTranslations2 = _slicedToArray(_useTranslations, 6),
     invalidText = _useTranslations2[0],
@@ -50,8 +58,6 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     addOperatorText = _useTranslations2[3],
     addValueText = _useTranslations2[4],
     labelText = _useTranslations2[5];
-  var _useContext = useContext(ConditionBuilderContext),
-    conditionBuilderRef = _useContext.conditionBuilderRef;
   var getPropertyDetails = function getPropertyDetails() {
     var _ref2 = condition || {},
       property = _ref2.property,

package/es/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/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

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

package/es/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/es/components/ConditionBuilder/utils/useDataConfigs.js

@@ -6,7 +6,9 @@
  */
 
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useContext } from 'react';
 import { useTranslations } from './useTranslations.js';
+import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 
 var useDataConfigs = function useDataConfigs() {
   var _useTranslations = useTranslations(['ifAll', 'ifAny', 'unlessAll', 'unlessAny', 'and', 'or', 'is', 'greater', 'greaterEqual', 'lower', 'lowerEqual', 'startsWith', 'endsWith', 'contains', 'oneOf', 'before', 'after', 'between']),
@@ -29,30 +31,28 @@ var useDataConfigs = function useDataConfigs() {
     before = _useTranslations2[15],
     after = _useTranslations2[16],
     between = _useTranslations2[17];
-  var statementConfig = [{
-    label: 'ifText',
+  var _useContext = useContext(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,
@@ -111,7 +111,7 @@ var useDataConfigs = function useDataConfigs() {
     type: 'date'
   }];
   return {
-    statementConfig: statementConfig,
+    statementConfig: statementConfigCustom !== null && statementConfigCustom !== void 0 ? statementConfigCustom : statementConfigDefault,
     connectorConfig: connectorConfig,
     operatorConfig: operatorConfig
   };

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

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useEffect, createContext } from 'react';
+import { deprecateProp } from '../../global/js/utils/props-helper.js';
 import { Form } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
@@ -22,7 +23,7 @@ import { useResetCreateComponent } from '../../global/js/hooks/useResetCreateCom
 import { useCreateComponentStepChange } from '../../global/js/hooks/useCreateComponentStepChange.js';
 import { CreateInfluencer } from '../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(pkg.prefix, "--tearsheet-create");
 
@@ -41,7 +42,9 @@ var CreateTearsheet = /*#__PURE__*/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,
@@ -50,8 +53,9 @@ var CreateTearsheet = /*#__PURE__*/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,
@@ -193,11 +197,13 @@ var CreateTearsheet = /*#__PURE__*/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__default.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
@@ -239,10 +245,15 @@ CreateTearsheet = pkg.checkComponentEnabled(CreateTearsheet, componentName);
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 CreateTearsheet.displayName = componentName;
-
+var deprecatedProps = {
+  /**
+   *  @deprecated Property replaced by `decorator`
+   */
+  slug: deprecateProp(PropTypes.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.
-CreateTearsheet.propTypes = {
+CreateTearsheet.propTypes = _objectSpread2({
   /**
    * The back button text
    */
@@ -259,6 +270,10 @@ CreateTearsheet.propTypes = {
    * An optional class or classes to be added to the outermost element.
    */
   className: PropTypes.string,
+  /**
+   *  Optional prop that allows you to pass any component.
+   */
+  decorator: PropTypes.node,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -271,6 +286,11 @@ CreateTearsheet.propTypes = {
    * Specifies elements to focus on first on render.
    */
   firstFocusElement: PropTypes.string,
+  /**
+   * To indicate an error occurred in the Tearsheet step
+   * Used to pass this value to TearsheetShell
+   */
+  hasError: PropTypes.bool,
   /**
    * Used to set the size of the influencer
    */
@@ -307,9 +327,10 @@ CreateTearsheet.propTypes = {
    */
   open: PropTypes.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: PropTypes.node,
+  selectorPrimaryFocus: PropTypes.string,
   /**
    * The submit button text
    */
@@ -326,6 +347,6 @@ CreateTearsheet.propTypes = {
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
   verticalPosition: PropTypes.oneOf(['normal', 'lower'])
-};
+}, deprecatedProps);
 
 export { CreateTearsheet, StepNumberContext, StepsContext };

package/es/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/es/components/EmptyStates/EmptyState.js

@@ -23,7 +23,7 @@ import { pkg } from '../../settings.js';
 import { EmptyStateContent } from './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(pkg.prefix, "--empty-state");
@@ -35,7 +35,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.
@@ -57,6 +58,8 @@ var EmptyState = /*#__PURE__*/React__default.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 = _objectWithoutProperties(props, _excluded2);
@@ -66,11 +69,13 @@ var EmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, getDevtoolsProps(componentName)), illustration && /*#__PURE__*/React__default.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__default.createElement(EmptyStateContent, {
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title !== null && title !== void 0 ? title : ''
   }));
@@ -93,6 +98,10 @@ EmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.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/es/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/es/components/EmptyStates/EmptyStateContent.js

@@ -10,7 +10,7 @@ import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { pkg } from '../../settings.js';
 import cx from 'classnames';
-import { Button, Link } from '@carbon/react';
+import { Section, Button, Link } from '@carbon/react';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
@@ -18,12 +18,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__default.createElement("div", {
     className: "".concat(blockClass, "__content")
-  }, /*#__PURE__*/React__default.createElement("h3", {
+  }, /*#__PURE__*/React__default.createElement(Section, {
+    as: headingAs,
     className: cx("".concat(blockClass, "__header"), _defineProperty({}, "".concat(blockClass, "__header--small"), size === 'sm'))
   }, title), subtitle && /*#__PURE__*/React__default.createElement("p", {
     className: cx("".concat(blockClass, "__subtitle"), _defineProperty({}, "".concat(blockClass, "__subtitle--small"), size === 'sm'))
@@ -57,6 +59,10 @@ EmptyStateContent.propTypes = {
     onClick: Button.propTypes.onClick,
     text: PropTypes.string
   })),
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
   /**
    * Empty state link object
    */

package/es/components/EmptyStates/EmptyStateIllustration.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { Suspense, lazy } from 'react';
 import PropTypes from '../../_virtual/index.js';
 
@@ -52,7 +52,9 @@ var EmptyStateIllustration = function EmptyStateIllustration(_ref) {
   var kind = _ref.kind,
     rest = _objectWithoutProperties(_ref, _excluded);
   var Illustration = getIllustration(kind);
-  return /*#__PURE__*/React__default.createElement(Suspense, null, /*#__PURE__*/React__default.createElement(Illustration, rest));
+  return /*#__PURE__*/React__default.createElement(Suspense, null, /*#__PURE__*/React__default.createElement(Illustration, _extends({
+    "aria-hidden": "true"
+  }, rest)));
 };
 EmptyStateIllustration.propTypes = {
   kind: PropTypes.string

package/es/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
      */