@carbon/ibm-products 2.63.0 → 2.64.0

package/es/components/APIKeyModal/APIKeyModal.js

@@ -17,7 +17,7 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
-import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
+import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
 var _ErrorFilled, _InformationFilled;
@@ -126,7 +126,8 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var modalRef = ref || localRef;
   var _useFocus = useFocus(modalRef),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
+    keyDownListener = _useFocus.keyDownListener,
+    claimFocus = _useFocus.claimFocus;
   var prevOpen = usePreviousValue(open);
   useEffect(function () {
     if (copyRef.current && open && apiKeyLoaded) {
@@ -139,9 +140,10 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      claimFocus(firstElement, modalRef, "#".concat(CSS.escape(apiKeyInputId === null || apiKeyInputId === void 0 ? void 0 : apiKeyInputId.current)));
+      claimFocus();
     }
-  }, [firstElement, modalRef, open]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modalRef, open, firstElement]);
   useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -593,11 +595,6 @@ APIKeyModal.propTypes = _objectSpread2({
    * text that displays in the secondary button when using custom steps to indicate to the user that there is a previous step
    */
   previousStepButtonText: customStepsRequiredProps(PropTypes.string),
-  /**
-   * Specify a CSS selector that matches the DOM element that should be
-   * focused when the Modal opens.
-   */
-  selectorPrimaryFocus: PropTypes.string,
   /**
    * label text that's displayed when hovering over visibility toggler to show key
    */

package/es/components/AboutModal/AboutModal.js

@@ -11,7 +11,7 @@ import React__default, { useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
+import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
@@ -52,7 +52,7 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var contentId = uuidv4();
   var renderPortalUse = usePortalTarget(portalTargetIn);
   var _useFocus = useFocus(modalRef),
-    firstElement = _useFocus.firstElement;
+    claimFocus = _useFocus.claimFocus;
 
   // We can't add a ref directly to the ModalBody, so track it in a ref
   // as the parent of the current bodyRef element
@@ -62,9 +62,10 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [bodyRef]);
   useEffect(function () {
     if (open) {
-      claimFocus(firstElement, modalRef);
+      claimFocus();
     }
-  }, [firstElement, modalRef, open]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modalRef, open]);
   return renderPortalUse(/*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
     enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {

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

@@ -144,10 +144,8 @@ var ConditionBlock = function ConditionBlock(props) {
     return isLastCondition(conditionIndex, conditions);
   };
   var getOperators = function getOperators() {
-    // @ts-ignore
     if (config !== null && config !== void 0 && config.operators) {
-      // @ts-ignore
-      return config.operators;
+      return config === null || config === void 0 ? void 0 : config.operators;
     }
     return operatorConfig.filter(function (operator) {
       return operator.type.indexOf(type) != -1 || operator.type == 'all';

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

@@ -4,7 +4,7 @@
  * 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 { TextAreaProps, TextInputProps } from '@carbon/react';
+import { TextAreaProps, TextInputProps, type DatePickerProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 import { Dispatch, ForwardedRef, PropsWithChildren, ReactNode, SetStateAction } from 'react';
@@ -46,13 +46,15 @@ export type PropertyConfigOption = {
 };
 export interface PropertyConfigText {
     type: 'text';
-    config: TextInputProps;
-    operators?: Item[];
+    config: TextInputProps & {
+        operators?: Item[];
+    };
 }
 export interface PropertyConfigTextArea {
     type: 'textarea';
-    config: TextAreaProps;
-    operators?: Item[];
+    config: TextAreaProps & {
+        operators?: Item[];
+    };
 }
 export interface PropertyConfigNumber {
     type: 'number';
@@ -66,8 +68,7 @@ export interface PropertyConfigNumber {
 }
 export type PropertyConfigDate = {
     type: 'date';
-    config: {
-        valueFormatter?: (value: string) => string;
+    config: DatePickerProps & {
         operators?: Item[];
     };
 };

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

@@ -144,13 +144,11 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   };
   var getCustomOperatorLabel = function getCustomOperatorLabel(propertyLabel) {
     var _config$operators;
-    return propertyLabel && (// @ts-ignore
-    config === null || config === void 0 || (_config$operators = config.operators) === null || _config$operators === void 0 ? void 0 : _config$operators.find(function (operator) {
+    return propertyLabel && (config === null || config === void 0 || (_config$operators = config.operators) === null || _config$operators === void 0 ? void 0 : _config$operators.find(function (operator) {
       return operator.id === propertyLabel;
     }));
   };
   var getLabel = function getLabel() {
-    // @ts-ignore
     if (config !== null && config !== void 0 && config.operators && rest['data-name'] === 'operatorField') {
       var _getCustomOperatorLab, _getCustomOperatorLab2;
       return (_getCustomOperatorLab = (_getCustomOperatorLab2 = getCustomOperatorLabel(propertyLabel)) === null || _getCustomOperatorLab2 === void 0 ? void 0 : _getCustomOperatorLab2.label) !== null && _getCustomOperatorLab !== void 0 ? _getCustomOperatorLab : addOperatorText;

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.d.ts

@@ -6,16 +6,18 @@
  */
 import React from 'react';
 export declare const ConditionBuilderItemDate: {
-    ({ conditionState, onChange, parentRef, }: {
+    ({ conditionState, onChange, parentRef, config, }: {
         conditionState: any;
         onChange: any;
         parentRef: any;
+        config: any;
     }): React.JSX.Element;
     propTypes: {
         /**
          * current condition object
          */
         conditionState: any;
+        config: any;
         /**
          * callback to update state oin date change
          */

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

@@ -5,50 +5,104 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useContext } from 'react';
+import { slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useContext, useEffect } from 'react';
 import { DatePicker, DatePickerInput } from '@carbon/react';
 import PropTypes from '../../../../_virtual/index.js';
 import { useTranslations } from '../../utils/useTranslations.js';
-import { blockClass } from '../../utils/util.js';
+import { checkForMultiSelectOperator, blockClass, focusThisField } from '../../utils/util.js';
 import { ConditionBuilderContext } from '../../ConditionBuilderContext/ConditionBuilderProvider.js';
 
 var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
   var conditionState = _ref.conditionState,
     onChange = _ref.onChange,
-    parentRef = _ref.parentRef;
+    parentRef = _ref.parentRef,
+    config = _ref.config;
   var DatePickerInputRef = useRef(null);
   var _useTranslations = useTranslations(['startText', 'endText']),
     _useTranslations2 = _slicedToArray(_useTranslations, 2),
     startText = _useTranslations2[0],
     endText = _useTranslations2[1];
-  var _useContext = useContext(ConditionBuilderContext);
-    _useContext.conditionBuilderRef;
-  var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
-  var onCloseHandler = function onCloseHandler(selectedDate) {
-    onChange(selectedDate && selectedDate.length > 0 ? selectedDate : 'INVALID');
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    dateFromState = _useState2[0],
+    setDateFromState = _useState2[1];
+  var dateFormat = config.dateFormat || 'm/d/Y';
+  var _useContext = useContext(ConditionBuilderContext),
+    conditionBuilderRef = _useContext.conditionBuilderRef;
+  var datePickerType = conditionState.operator == 'between' || checkForMultiSelectOperator(conditionState, config) ? 'range' : 'single';
+  useEffect(function () {
+    if (datePickerType === 'range') {
+      var _getParsedDate;
+      setDateFromState((_getParsedDate = getParsedDate(conditionState.value)) !== null && _getParsedDate !== void 0 ? _getParsedDate : undefined);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  //This method will convert the date string from the condition state to date object based on the dateFormat
+  var getParsedDate = function getParsedDate(dateToParse) {
+    var _DatePickerInputRef$c;
+    // @ts-ignore
+    var calendarInstance = DatePickerInputRef === null || DatePickerInputRef === void 0 || (_DatePickerInputRef$c = DatePickerInputRef.current) === null || _DatePickerInputRef$c === void 0 ? void 0 : _DatePickerInputRef$c.calendar;
+    if (!calendarInstance || !dateToParse) {
+      return null;
+    }
+    var _dateToParse$split = dateToParse.split(' - '),
+      _dateToParse$split2 = _slicedToArray(_dateToParse$split, 2),
+      startDate = _dateToParse$split2[0],
+      endDate = _dateToParse$split2[1];
+    var parsedDates = [];
+    if (startDate && startDate !== 'INVALID') {
+      parsedDates.push(calendarInstance.parseDate(startDate, dateFormat));
+    }
+    if (endDate && endDate !== 'INVALID') {
+      parsedDates.push(calendarInstance.parseDate(endDate, dateFormat));
+    }
+    return parsedDates.length ? parsedDates : null;
+  };
+  var onCloseHandler = function onCloseHandler(selectedDate, selectedDateStr, instance) {
+    var formattedDate = selectedDateStr;
+    if (datePickerType === 'range' && selectedDate.length === 2) {
+      formattedDate = "".concat(instance.formatDate(selectedDate[0], dateFormat), " - ").concat(instance.formatDate(selectedDate[1], dateFormat));
+    }
+    onChange(formattedDate || 'INVALID');
+  };
+
+  // this will close the popover on enter key press
+  //Note: has to use onKeyPress instead of onKeyDown, since core is stop propagating for onKeydown(fixEventsPlugin.js)
+  var onKeyPressHandler = function onKeyPressHandler(evt) {
+    if (evt.key === 'Enter') {
+      var _DatePickerInputRef$c2;
+      // @ts-ignore
+      var calendarInstance = DatePickerInputRef === null || DatePickerInputRef === void 0 || (_DatePickerInputRef$c2 = DatePickerInputRef.current) === null || _DatePickerInputRef$c2 === void 0 ? void 0 : _DatePickerInputRef$c2.calendar;
+      if (calendarInstance) {
+        onCloseHandler(calendarInstance.selectedDates, evt.target.value, calendarInstance);
+      }
+      focusThisField(evt, conditionBuilderRef);
+    }
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__item-date ")
-  }, datePickerType == 'single' && /*#__PURE__*/React__default.createElement(DatePicker, {
+  }, datePickerType == 'single' && /*#__PURE__*/React__default.createElement(DatePicker, _extends({}, config, {
     ref: DatePickerInputRef,
-    dateFormat: "d/m/Y",
     datePickerType: "single",
     value: conditionState.value,
     onClose: onCloseHandler,
+    onKeyPress: onKeyPressHandler,
     appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
-  }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
+  }), /*#__PURE__*/React__default.createElement(DatePickerInput, {
     id: "datePicker",
     placeholder: "dd/mm/yyyy",
     labelText: conditionState.property
-  })), datePickerType == 'range' && /*#__PURE__*/React__default.createElement(DatePicker, {
+  })), datePickerType == 'range' && /*#__PURE__*/React__default.createElement(DatePicker, _extends({}, config, {
     ref: DatePickerInputRef,
-    dateFormat: "d/m/Y",
     datePickerType: datePickerType,
     onClose: onCloseHandler,
-    value: conditionState.value,
+    onKeyPress: onKeyPressHandler,
+    value: dateFromState,
     appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
-  }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
+  }), /*#__PURE__*/React__default.createElement(DatePickerInput, {
     id: "datePickerStart",
     placeholder: "dd/mm/yyyy",
     labelText: startText
@@ -63,6 +117,7 @@ ConditionBuilderItemDate.propTypes = {
    * current condition object
    */
   conditionState: PropTypes.object,
+  config: PropTypes.object,
   /**
    * callback to update state oin date change
    */

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -37,6 +37,7 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
     //focus the corresponding field in which the popover is triggered from
     focusThisField(evt, conditionBuilderRef);
     evt.preventDefault();
+    evt.stopPropagation();
   }
   if (isOptionInput) {
     switch (key) {

package/es/components/ConditionBuilder/utils/util.js

@@ -63,54 +63,19 @@ var manageTabIndexAndFocus = function manageTabIndexAndFocus(currentElement, con
   (_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === void 0 || _conditionBuilderRef$.setAttribute('tabindex', '1');
   currentElement === null || currentElement === void 0 || currentElement.focus();
 };
-var formatDate = function formatDate(date) {
-  var day = String(date.getDate()).padStart(2, '0');
-  var month = String(date.getMonth() + 1).padStart(2, '0');
-  var year = date.getFullYear();
-  return "".concat(day, "/").concat(month, "/").concat(year);
-};
 var getValue = function getValue(type, value, config) {
-  if (config !== null && config !== void 0 && config.valueFormatter && ['date', 'custom'].includes(type)) {
+  if (config !== null && config !== void 0 && config.valueFormatter && ['custom'].includes(type)) {
     return config.valueFormatter(value);
+  } else if (type === 'option') {
+    if (value && typeof value !== 'string') {
+      var selectedValues = Array.isArray(value) ? value : [value];
+      return selectedValues.map(function (option) {
+        return option.label;
+      }).join(', ');
+    }
+    return value;
   } else {
-    var formatters = {
-      text: function text(value) {
-        return value;
-      },
-      textarea: function textarea(value) {
-        return value;
-      },
-      time: function time(value) {
-        return value;
-      },
-      number: function number(value) {
-        return value;
-      },
-      option: function option(value) {
-        if (value && typeof value !== 'string') {
-          var selectedValues = Array.isArray(value) ? value : [value];
-          return selectedValues.map(function (option) {
-            return option.label;
-          }).join(', ');
-        }
-        return value;
-      },
-      date: function date(value) {
-        if (Array.isArray(value) && value.length > 1) {
-          var start = value !== null && value !== void 0 && value[0] && !isNaN(new Date(value[0])) ? formatDate(new Date(value[0])) : '';
-          var end = value !== null && value !== void 0 && value[1] && !isNaN(new Date(value[1])) ? formatDate(new Date(value[1])) : '';
-          return "".concat(start, " To ").concat(end);
-        } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
-          return formatDate(new Date(value[0]));
-        } else {
-          return value;
-        }
-      },
-      custom: function custom(value) {
-        return value;
-      }
-    };
-    return formatters[type](value, config);
+    return value;
   }
 };
 

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -10,7 +10,7 @@ import React__default, { forwardRef, useContext, useState, useEffect, isValidEle
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
-import { Grid, Column, FormGroup } from '@carbon/react';
+import { Section, Grid, Column, Heading, FormGroup } from '@carbon/react';
 import { StepsContext, StepNumberContext } from './CreateFullPage.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
@@ -108,15 +108,15 @@ var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
     return null;
   };
-  return stepsContext ? /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
+  return stepsContext ? /*#__PURE__*/React__default.createElement(Section, _extends({}, rest, {
     className: cx(blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
     ref: ref
   }), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, span, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, _extends({
     className: "".concat(blockClass, "-title"),
-    as: "h5"
+    as: Heading
   }, span), title), subtitle && /*#__PURE__*/React__default.createElement(Column, _extends({
     className: "".concat(blockClass, "-subtitle"),
-    as: "h6"
+    as: "p"
   }, span), subtitle), renderDescription()))), hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "-fieldset")

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -8,7 +8,7 @@
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { ProgressIndicator, ProgressStep } from '@carbon/react';
+import { Section, Heading, ProgressIndicator, ProgressStep } from '@carbon/react';
 import '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
 
@@ -48,9 +48,9 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
     // we need to subtract the number of !shouldIncludeStep/s before the current step
     // which we get from `getNumberOfDynamicStepsBeforeCurrentStep()`
     var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(Section, {
       className: "".concat(blockClass, "__left-nav")
-    }, title && /*#__PURE__*/React__default.createElement("h3", {
+    }, title && /*#__PURE__*/React__default.createElement(Heading, {
       className: "".concat(blockClass, "__title")
     }, title), currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/React__default.createElement(ProgressIndicator, {
       currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -116,9 +116,6 @@ var FilterPanel = function FilterPanel(_ref) {
     _useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
     shouldDisableButtons = _useShouldDisableButt2[0],
     setShouldDisableButtons = _useShouldDisableButt2[1];
-
-  // NOTE: In the future when we get rid of framer-motion we can use our own usePrefersReducedMotion hook
-  // using our own was causing an error
   var shouldReduceMotion = usePrefersReducedMotion();
   var exitAnimationName = shouldReduceMotion ? 'filter-panel-exit-reduced' : 'filter-panel-exit-left';
   var _usePresence = usePresence(panelOpen, filterPanelRef, exitAnimationName),

package/es/components/Datagrid/useSortableColumns.js

@@ -150,7 +150,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       return _objectSpread2(_objectSpread2({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy ? 0 : (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : column.isAction ? 50 : 90
+        minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : column.disableSortBy ? 50 : column.isAction ? 50 : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);

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

@@ -7,7 +7,6 @@
 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';
 declare enum sizes {
     lg = "lg",
     sm = "sm"
@@ -17,16 +16,15 @@ export declare const defaults: {
     size: sizes;
     headingAs: string;
 };
+interface EmptyStateAction extends ButtonProps<React.ElementType> {
+    kind?: 'primary' | 'secondary' | 'tertiary';
+    text?: string;
+}
 export interface EmptyStateProps {
     /**
      * Empty state action button
      */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
+    action?: EmptyStateAction;
     /**
      * Provide an optional class to be applied to the containing node.
      */
@@ -73,6 +71,7 @@ export interface EmptyStateProps {
      */
     v2?: boolean;
 }
+export type EmptyStatePresetProps = Omit<EmptyStateProps, 'illustration'>;
 /**
  * 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.
  */

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

@@ -4,31 +4,9 @@
  * 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 React, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface ErrorEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface ErrorEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface ErrorEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle?: string | ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | ReactNode;
 }
 /**
  * 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.

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -17,6 +17,7 @@ import { ErrorIllustration } from '../assets/ErrorIllustration.js';
 import { defaults } from '../EmptyState.js';
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationDescription", "illustrationTheme", "link", "size", "headingAs", "subtitle", "title"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'ErrorEmptyState';

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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 React, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface NoDataEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided, title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface NoDataEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface NoDataEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle?: string | React.ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | React.ReactNode;
 }
 /**
  * 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.