@carbon/react 1.87.0-rc.0 → 1.87.0

package/lib/components/ComboButton/index.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -28,12 +26,6 @@ var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _ChevronDown;
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
@@ -46,7 +38,7 @@ const defaultTranslations = {
 function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }
-const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function ComboButton({
+const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
   children,
   className,
   disabled,
@@ -98,7 +90,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     middleware: middlewares,
     whileElementsMounted: react.autoUpdate
   });
-  const ref = mergeRefs["default"](forwardRef, containerRef, refs.setReference);
+  const ref = mergeRefs.default(forwardRef, containerRef, refs.setReference);
   const {
     open,
     handleClick: hookOnClick,
@@ -126,24 +118,24 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
       onClick(e);
     }
   }
-  const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
+  const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
-  const menuClasses = cx__default["default"](`${prefix}--combo-button__${menuAlignment}`);
-  const primaryActionClasses = cx__default["default"](`${prefix}--combo-button__primary-action`);
-  const triggerClasses = cx__default["default"](`${prefix}--combo-button__trigger`);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  const menuClasses = cx(`${prefix}--combo-button__${menuAlignment}`);
+  const primaryActionClasses = cx(`${prefix}--combo-button__primary-action`);
+  const triggerClasses = cx(`${prefix}--combo-button__trigger`);
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: containerClasses,
     ref: ref,
     "aria-owns": open ? id : undefined
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: primaryActionClasses
-  }, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+  }, /*#__PURE__*/React.createElement(Button.default, {
     title: label,
     size: size,
     disabled: disabled,
     onClick: handlePrimaryActionClick
-  }, label)), /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, {
+  }, label)), /*#__PURE__*/React.createElement(index$1.IconButton, {
     ref: refs.setReference,
     className: triggerClasses,
     label: t('carbon.combo-button.additional-actions'),
@@ -155,7 +147,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     onClick: handleTriggerClick,
     onMouseDown: handleTriggerMousedown,
     "aria-controls": open ? id : undefined
-  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React.createElement(Menu.Menu, {
     containerRef: containerRef,
     menuAlignment: menuAlignment,
     className: menuClasses,
@@ -171,35 +163,35 @@ ComboButton.propTypes = {
   /**
    * A collection of MenuItems to be rendered as additional actions for this ComboButton.
    */
-  children: PropTypes__default["default"].node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * Additional CSS class names.
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Specify whether the ComboButton should be disabled, or not.
    */
-  disabled: PropTypes__default["default"].bool,
+  disabled: PropTypes.bool,
   /**
    * Provide the label to be rendered on the primary action button.
    */
-  label: PropTypes__default["default"].string.isRequired,
+  label: PropTypes.string.isRequired,
   /**
    * Experimental property. Specify how the menu should align with the button element
    */
-  menuAlignment: PropTypes__default["default"].oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
+  menuAlignment: PropTypes.oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
   /**
    * Provide an optional function to be called when the primary action element is clicked.
    */
-  onClick: PropTypes__default["default"].func,
+  onClick: PropTypes.func,
   /**
    * Specify the size of the buttons and menu.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
+  tooltipAlignment: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead
@@ -225,7 +217,7 @@ ComboButton.propTypes = {
    * Optional method that takes in a message id and returns an
    * internationalized string.
    */
-  translateWithId: PropTypes__default["default"].func
+  translateWithId: PropTypes.func
 };
 
 exports.ComboButton = ComboButton;

package/lib/components/ComposedModal/ComposedModal.js

@@ -32,15 +32,9 @@ var index$3 = require('../Dialog/index.js');
 var warning = require('../../internal/warning.js');
 var index$2 = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
+var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody({
+const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
   className: customClassName,
   children,
   hasForm,
@@ -50,12 +44,12 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
   const prefix = usePrefix.usePrefix();
   const contentRef = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
-  const contentClass = cx__default["default"]({
+  const contentClass = cx({
     [`${prefix}--modal-content`]: true,
     [`${prefix}--modal-content--with-form`]: hasForm,
     [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable
   }, customClassName);
-  useIsomorphicEffect["default"](() => {
+  useIsomorphicEffect.default(() => {
     if (contentRef.current) {
       setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
     }
@@ -75,36 +69,36 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
     tabIndex: 0,
     role: 'region'
   } : {};
-  return /*#__PURE__*/React__default["default"].createElement(index.Layer, _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement(index.Layer, _rollupPluginBabelHelpers.extends({
     className: contentClass
   }, hasScrollingContentProps, rest, {
-    ref: mergeRefs["default"](contentRef, ref)
+    ref: mergeRefs.default(contentRef, ref)
   }), children);
 });
 ModalBody.propTypes = {
   /**
    * Required props for the accessibility label of the header
    */
-  ['aria-label']: requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string),
+  ['aria-label']: requiredIfGivenPropIsTruthy.default('hasScrollingContent', PropTypes.string),
   /**
    * Specify the content to be placed in the ModalBody
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to the Modal Body node
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Provide whether the modal content has a form element.
    * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
    */
-  hasForm: PropTypes__default["default"].bool,
+  hasForm: PropTypes.bool,
   /**
    * Specify whether the modal contains scrolling content
    */
-  hasScrollingContent: PropTypes__default["default"].bool
+  hasScrollingContent: PropTypes.bool
 };
-const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function ComposedModal({
+const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   ['aria-labelledby']: ariaLabelledBy,
   ['aria-label']: ariaLabel,
   children,
@@ -156,10 +150,6 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
 
   function handleKeyDown(event) {
     if (!enableDialogElement) {
-      event.stopPropagation();
-      if (match.match(event, keys.Escape)) {
-        closeModal(event);
-      }
       if (focusTrapWithoutSentinels && open && match.match(event, keys.Tab) && innerModal.current) {
         wrapFocus.wrapFocusWithoutSentinels({
           containerNode: innerModal.current,
@@ -233,30 +223,30 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       setIsOpen(false);
     }
   }
-  const modalClass = cx__default["default"](`${prefix}--modal`, {
+  const modalClass = cx(`${prefix}--modal`, {
     'is-visible': isOpen,
     [`${prefix}--modal--danger`]: danger,
     [`${prefix}--modal--slug`]: slug,
     [`${prefix}--modal--decorator`]: decorator
   }, customClassName);
-  const containerClass = cx__default["default"](`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
+  const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
   // Generate aria-label based on Modal Header label if one is not provided (L253)
   let generatedAriaLabel;
-  const childrenWithProps = React__default["default"].Children.toArray(children).map(child => {
+  const childrenWithProps = React.Children.toArray(children).map(child => {
     switch (true) {
-      case reactIs.isElement(child) && child.type === React__default["default"].createElement(ModalHeader.ModalHeader).type:
+      case reactIs.isElement(child) && child.type === /*#__PURE__*/React.createElement(ModalHeader.ModalHeader).type:
         {
           const el = child;
           generatedAriaLabel = el.props.label;
-          return /*#__PURE__*/React__default["default"].cloneElement(el, {
+          return /*#__PURE__*/React.cloneElement(el, {
             closeModal
           });
         }
-      case reactIs.isElement(child) && child.type === React__default["default"].createElement(ModalFooter.ModalFooter).type:
+      case reactIs.isElement(child) && child.type === /*#__PURE__*/React.createElement(ModalFooter.ModalFooter).type:
         {
           const el = child;
-          return /*#__PURE__*/React__default["default"].cloneElement(el, {
+          return /*#__PURE__*/React.cloneElement(el, {
             closeModal,
             inputref: button,
             danger
@@ -266,6 +256,20 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
         return child;
     }
   });
+  React.useEffect(() => {
+    if (!open) return;
+    const handleEscapeKey = event => {
+      if (match.match(event, keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeModal(event);
+      }
+    };
+    document.addEventListener('keydown', handleEscapeKey, true);
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey, true);
+    };
+  }, [open]);
   React.useEffect(() => {
     if (!enableDialogElement && !open && launcherButtonRef) {
       setTimeout(() => {
@@ -304,39 +308,39 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'sm'
   }) : null;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$3.unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(index$3.unstable__Dialog, {
     open: open,
     focusAfterCloseRef: launcherButtonRef,
     modal: true,
     className: containerClass,
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps)) : /*#__PURE__*/React__default["default"].createElement("div", {
+  }, normalizedDecorator) : '', childrenWithProps)) : /*#__PURE__*/React.createElement("div", {
     className: containerClass,
     role: "dialog",
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
+  }, !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "Focus sentinel"), /*#__PURE__*/React.createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
-  return /*#__PURE__*/React__default["default"].createElement(index.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React.createElement(index.Layer, _rollupPluginBabelHelpers.extends({}, rest, {
     level: 0,
     role: "presentation",
     ref: ref,
@@ -352,72 +356,72 @@ ComposedModal.propTypes = {
   /**
    * Specify the aria-label for cds--modal-container
    */
-  ['aria-label']: PropTypes__default["default"].string,
+  ['aria-label']: PropTypes.string,
   /**
    * Specify the aria-labelledby for cds--modal-container
    */
-  ['aria-labelledby']: PropTypes__default["default"].string,
+  ['aria-labelledby']: PropTypes.string,
   /**
    * Specify the content to be placed in the ComposedModal
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be applied to the modal root node
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Specify an optional className to be applied to the modal node
    */
-  containerClassName: PropTypes__default["default"].string,
+  containerClassName: PropTypes.string,
   /**
    * Specify whether the primary button should be replaced with danger button.
    * Note that this prop is not applied if you render primary/danger button by yourself
    */
-  danger: PropTypes__default["default"].bool,
+  danger: PropTypes.bool,
   /**
    * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
    */
-  decorator: PropTypes__default["default"].node,
+  decorator: PropTypes.node,
   /**
    * Specify whether the Modal content should have any inner padding.
    */
-  isFullWidth: PropTypes__default["default"].bool,
+  isFullWidth: PropTypes.bool,
   /**
    * Provide a ref to return focus to once the modal is closed.
    */
-  launcherButtonRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any
+  launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
   })]),
   /**
    * Specify an optional handler for closing modal.
    * Returning `false` here prevents closing modal.
    */
-  onClose: PropTypes__default["default"].func,
+  onClose: PropTypes.func,
   /**
    * Specify an optional handler for the `onKeyDown` event. Called for all
    * `onKeyDown` events that do not close the modal
    */
-  onKeyDown: PropTypes__default["default"].func,
+  onKeyDown: PropTypes.func,
   /**
    * Specify whether the Modal is currently open
    */
-  open: PropTypes__default["default"].bool,
-  preventCloseOnClickOutside: PropTypes__default["default"].bool,
+  open: PropTypes.bool,
+  preventCloseOnClickOutside: PropTypes.bool,
   /**
    * Specify a CSS selector that matches the DOM element that should be
    * focused when the Modal opens
    */
-  selectorPrimaryFocus: PropTypes__default["default"].string,
+  selectorPrimaryFocus: PropTypes.string,
   /**
    * Specify the CSS selectors that match the floating menus
    */
-  selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string.isRequired),
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
   /**
    * Specify the size variant.
    */
-  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg']),
-  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop for `ComposedModal` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  slug: deprecate.deprecate(PropTypes.node, 'The `slug` prop for `ComposedModal` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 
 exports.ModalBody = ModalBody;
-exports["default"] = ComposedModal;
+exports.default = ComposedModal;

package/lib/components/ComposedModal/ModalFooter.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -20,12 +18,6 @@ var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 var InlineLoading = require('../InlineLoading/InlineLoading.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 function SecondaryButtonSet({
   secondaryButtons,
   secondaryButtonText,
@@ -39,10 +31,10 @@ function SecondaryButtonSet({
     onRequestClose(evt);
   }
   if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, secondaryButtons.map(({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, secondaryButtons.map(({
       buttonText,
       onClick: onButtonClick
-    }, i) => /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    }, i) => /*#__PURE__*/React.createElement(Button.default, {
       key: `${buttonText}-${i}`,
       className: secondaryClassName,
       kind: "secondary",
@@ -50,7 +42,7 @@ function SecondaryButtonSet({
     }, buttonText)));
   }
   if (secondaryButtonText) {
-    return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    return /*#__PURE__*/React.createElement(Button.default, {
       disabled: disabled,
       className: secondaryClassName,
       onClick: handleRequestClose,
@@ -60,28 +52,28 @@ function SecondaryButtonSet({
   return null;
 }
 SecondaryButtonSet.propTypes = {
-  closeModal: PropTypes__default["default"].func,
-  disabled: PropTypes__default["default"].bool,
-  onRequestClose: PropTypes__default["default"].func,
-  secondaryButtonText: PropTypes__default["default"].string,
+  closeModal: PropTypes.func,
+  disabled: PropTypes.bool,
+  onRequestClose: PropTypes.func,
+  secondaryButtonText: PropTypes.string,
   secondaryButtons: (props, propName, componentName) => {
     if (props.secondaryButtons) {
       if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
         return new Error(`${propName} needs to be an array of two button config objects`);
       }
       const shape = {
-        buttonText: PropTypes__default["default"].node,
-        onClick: PropTypes__default["default"].func
+        buttonText: PropTypes.node,
+        onClick: PropTypes.func
       };
       props[propName].forEach(secondaryButton => {
-        PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
+        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
     return null;
   },
-  secondaryClassName: PropTypes__default["default"].string
+  secondaryClassName: PropTypes.string
 };
-const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function ModalFooter({
+const ModalFooter = /*#__PURE__*/React.forwardRef(function ModalFooter({
   children,
   className: customClassName,
   closeModal = noopFn.noopFn,
@@ -102,8 +94,8 @@ const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function M
   ...rest
 }, ref) {
   const prefix = usePrefix.usePrefix();
-  const footerClass = cx__default["default"](`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
-  const primaryButtonClass = cx__default["default"](primaryClassName, loadingStatus !== 'inactive' ? `${prefix}--btn--loading` : null);
+  const footerClass = cx(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
+  const primaryButtonClass = cx(primaryClassName, loadingStatus !== 'inactive' ? `${prefix}--btn--loading` : null);
   const loadingActive = loadingStatus !== 'inactive';
   const secondaryButtonProps = {
     closeModal,
@@ -113,19 +105,19 @@ const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function M
     onRequestClose,
     disabled: loadingActive
   };
-  return /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement(ButtonSet.default, _rollupPluginBabelHelpers.extends({
     className: footerClass
   }, rest, {
     // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
     ref: ref,
     "aria-busy": loadingActive
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+  }), /*#__PURE__*/React.createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React.createElement(Button.default, {
     onClick: onRequestSubmit,
     className: primaryButtonClass,
     disabled: loadingActive || primaryButtonDisabled,
     kind: danger ? 'danger' : 'primary',
     ref: inputref
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default["default"].createElement(InlineLoading["default"], {
+  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React.createElement(InlineLoading.default, {
     status: loadingStatus,
     description: loadingDescription,
     iconDescription: loadingIconDescription,
@@ -137,69 +129,69 @@ ModalFooter.propTypes = {
   /**
    * Pass in content that will be rendered in the Modal Footer
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify a custom className to be applied to the Modal Footer container
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Specify an optional function that is called whenever the modal is closed
    */
-  closeModal: PropTypes__default["default"].func,
+  closeModal: PropTypes.func,
   /**
    * Specify whether the primary button should be replaced with danger button.
    * Note that this prop is not applied if you render primary/danger button by yourself
    */
-  danger: PropTypes__default["default"].bool,
+  danger: PropTypes.bool,
   /**
    * The `ref` callback for the primary button.
    */
-  inputref: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any
+  inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
   })]),
   /**
    * Specify the description for the loading text
    */
-  loadingDescription: PropTypes__default["default"].string,
+  loadingDescription: PropTypes.string,
   /**
    * Specify the description for the loading text
    */
-  loadingIconDescription: PropTypes__default["default"].string,
+  loadingIconDescription: PropTypes.string,
   /**
    * loading status
    */
-  loadingStatus: PropTypes__default["default"].oneOf(['inactive', 'active', 'finished', 'error']),
+  loadingStatus: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
   /**
    * Provide an optional handler to be invoked when loading is
    * successful
    */
-  onLoadingSuccess: PropTypes__default["default"].func,
+  onLoadingSuccess: PropTypes.func,
   /**
    * Specify an optional function for when the modal is requesting to be
    * closed
    */
-  onRequestClose: PropTypes__default["default"].func,
+  onRequestClose: PropTypes.func,
   /**
    * Specify an optional function for when the modal is requesting to be
    * submitted
    */
-  onRequestSubmit: PropTypes__default["default"].func,
+  onRequestSubmit: PropTypes.func,
   /**
    * Specify whether the primary button should be disabled
    */
-  primaryButtonDisabled: PropTypes__default["default"].bool,
+  primaryButtonDisabled: PropTypes.bool,
   /**
    * Specify the text for the primary button
    */
-  primaryButtonText: PropTypes__default["default"].string,
+  primaryButtonText: PropTypes.string,
   /**
    * Specify a custom className to be applied to the primary button
    */
-  primaryClassName: PropTypes__default["default"].string,
+  primaryClassName: PropTypes.string,
   /**
    * Specify the text for the secondary button
    */
-  secondaryButtonText: PropTypes__default["default"].string,
+  secondaryButtonText: PropTypes.string,
   /**
    * Specify an array of config objects for secondary buttons
    * (`Array<{
@@ -213,11 +205,11 @@ ModalFooter.propTypes = {
         return new Error(`${propName} needs to be an array of two button config objects`);
       }
       const shape = {
-        buttonText: PropTypes__default["default"].node,
-        onClick: PropTypes__default["default"].func
+        buttonText: PropTypes.node,
+        onClick: PropTypes.func
       };
       props[propName].forEach(secondaryButton => {
-        PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
+        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
     return null;
@@ -225,7 +217,7 @@ ModalFooter.propTypes = {
   /**
    * Specify a custom className to be applied to the secondary button
    */
-  secondaryClassName: PropTypes__default["default"].string
+  secondaryClassName: PropTypes.string
 };
 
 exports.ModalFooter = ModalFooter;