@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/ComboBox/tools/filter.js

@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var defaultFilterItems = function defaultFilterItems(items, _ref) {
-  var itemToString = _ref.itemToString,
-      inputValue = _ref.inputValue;
-  return items.filter(function (item) {
+const defaultFilterItems = (items, _ref) => {
+  let {
+    itemToString,
+    inputValue
+  } = _ref;
+  return items.filter(item => {
     if (!inputValue) {
       return true;
     }

package/es/components/ComboButton/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -19,11 +19,9 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _ChevronDown;
+const spacing = 4; // top and bottom spacing between the button and the menu. in px
 
-var _excluded = ["children", "className", "disabled", "label", "onClick", "size", "tooltipAlign", "translateWithId"];
-var spacing = 4; // top and bottom spacing between the button and the menu. in px
-
-var defaultTranslations = {
+const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };
 
@@ -31,43 +29,38 @@ function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }
 
-var ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(_ref, forwardRef) {
-  var children = _ref.children,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      label = _ref.label,
-      onClick = _ref.onClick,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'lg' : _ref$size,
-      tooltipAlign = _ref.tooltipAlign,
-      _ref$translateWithId = _ref.translateWithId,
-      t = _ref$translateWithId === void 0 ? defaultTranslateWithId : _ref$translateWithId,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var id = useId('combobutton');
-  var prefix = usePrefix();
-  var containerRef = useRef(null);
-  var menuRef = useRef(null);
-  var ref = useMergedRefs([forwardRef, containerRef]);
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      width = _useState2[0],
-      setWidth = _useState2[1];
-
-  var _useAttachedMenu = useAttachedMenu(containerRef),
-      open = _useAttachedMenu.open,
-      x = _useAttachedMenu.x,
-      y = _useAttachedMenu.y,
-      hookOnClick = _useAttachedMenu.handleClick,
-      handleTriggerMousedown = _useAttachedMenu.handleMousedown,
-      handleClose = _useAttachedMenu.handleClose;
+const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(_ref, forwardRef) {
+  let {
+    children,
+    className,
+    disabled,
+    label,
+    onClick,
+    size = 'lg',
+    tooltipAlign,
+    translateWithId: t = defaultTranslateWithId,
+    ...rest
+  } = _ref;
+  const id = useId('combobutton');
+  const prefix = usePrefix();
+  const containerRef = useRef(null);
+  const menuRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, containerRef]);
+  const [width, setWidth] = useState(0);
+  const {
+    open,
+    x,
+    y,
+    handleClick: hookOnClick,
+    handleMousedown: handleTriggerMousedown,
+    handleClose
+  } = useAttachedMenu(containerRef);
 
   function handleTriggerClick() {
     if (containerRef.current) {
-      var _containerRef$current = containerRef.current.getBoundingClientRect(),
-          w = _containerRef$current.width;
-
+      const {
+        width: w
+      } = containerRef.current.getBoundingClientRect();
       setWidth(w);
       hookOnClick();
     }
@@ -80,12 +73,14 @@ var ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(_r
   }
 
   function handleOpen() {
-    menuRef.current.style.width = "".concat(width, "px");
+    menuRef.current.style.width = `${width}px`;
   }
 
-  var containerClasses = cx("".concat(prefix, "--combo-button__container"), "".concat(prefix, "--combo-button__container--").concat(size), _defineProperty({}, "".concat(prefix, "--combo-button__container--open"), open), className);
-  var primaryActionClasses = cx("".concat(prefix, "--combo-button__primary-action"));
-  var triggerClasses = cx("".concat(prefix, "--combo-button__trigger"));
+  const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
+    [`${prefix}--combo-button__container--open`]: open
+  }, className);
+  const primaryActionClasses = cx(`${prefix}--combo-button__primary-action`);
+  const triggerClasses = cx(`${prefix}--combo-button__trigger`);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: containerClasses,
     ref: ref

package/es/components/ComposedModal/ComposedModal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ModalHeader } from './ModalHeader.js';
@@ -16,22 +16,22 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 import wrapFocus from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _ModalBody$propTypes, _ComposedModal$propTy;
-
-var _excluded = ["className", "children", "hasForm", "hasScrollingContent"],
-    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "isFullWidth", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
-var ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
-  var _cx;
-
-  var customClassName = _ref.className,
-      children = _ref.children,
-      hasForm = _ref.hasForm,
-      hasScrollingContent = _ref.hasScrollingContent,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var contentClass = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--modal-content"), true), _defineProperty(_cx, "".concat(prefix, "--modal-content--with-form"), hasForm), _defineProperty(_cx, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _defineProperty(_cx, customClassName, customClassName), _cx));
-  var hasScrollingContentProps = hasScrollingContent ? {
+const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
+  let {
+    className: customClassName,
+    children,
+    hasForm,
+    hasScrollingContent,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const contentClass = cx({
+    [`${prefix}--modal-content`]: true,
+    [`${prefix}--modal-content--with-form`]: hasForm,
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent,
+    [customClassName]: customClassName
+  });
+  const hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
     role: 'region'
   } : {};
@@ -40,45 +40,61 @@ var ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref,
   }, hasScrollingContentProps, rest, {
     ref: ref
   }), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--modal-content--overflow-indicator")
+    className: `${prefix}--modal-content--overflow-indicator`
   }));
 });
-ModalBody.propTypes = (_ModalBody$propTypes = {}, _defineProperty(_ModalBody$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_ModalBody$propTypes, "children", PropTypes.node), _defineProperty(_ModalBody$propTypes, "className", PropTypes.string), _defineProperty(_ModalBody$propTypes, "hasForm", PropTypes.bool), _defineProperty(_ModalBody$propTypes, "hasScrollingContent", PropTypes.bool), _ModalBody$propTypes);
-var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModal(_ref2, ref) {
-  var _cx2, _cx3;
-
-  var ariaLabelledBy = _ref2['aria-labelledby'],
-      ariaLabel = _ref2['aria-label'],
-      children = _ref2.children,
-      customClassName = _ref2.className,
-      containerClassName = _ref2.containerClassName,
-      danger = _ref2.danger,
-      isFullWidth = _ref2.isFullWidth,
-      onClose = _ref2.onClose,
-      onKeyDown = _ref2.onKeyDown,
-      open = _ref2.open,
-      preventCloseOnClickOutside = _ref2.preventCloseOnClickOutside,
-      selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
-      selectorsFloatingMenus = _ref2.selectorsFloatingMenus,
-      size = _ref2.size,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix();
-
-  var _useState = useState(open),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setisOpen = _useState2[1];
-
-  var _useState3 = useState(open),
-      _useState4 = _slicedToArray(_useState3, 2),
-      prevOpen = _useState4[0],
-      setPrevOpen = _useState4[1];
-
-  var innerModal = useRef();
-  var button = useRef();
-  var startSentinel = useRef();
-  var endSentinel = useRef();
+ModalBody.propTypes = {
+  /**
+   * Required props for the accessibility label of the header
+   */
+  ['aria-label']: requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
+
+  /**
+   * Specify the content to be placed in the ModalBody
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be added to the Modal Body node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide whether the modal content has a form element.
+   * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+   */
+  hasForm: PropTypes.bool,
+
+  /**
+   * Specify whether the modal contains scrolling content
+   */
+  hasScrollingContent: PropTypes.bool
+};
+const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModal(_ref2, ref) {
+  let {
+    ['aria-labelledby']: ariaLabelledBy,
+    ['aria-label']: ariaLabel,
+    children,
+    className: customClassName,
+    containerClassName,
+    danger,
+    isFullWidth,
+    onClose,
+    onKeyDown,
+    open,
+    preventCloseOnClickOutside,
+    selectorPrimaryFocus,
+    selectorsFloatingMenus,
+    size,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix();
+  const [isOpen, setisOpen] = useState(open);
+  const [prevOpen, setPrevOpen] = useState(open);
+  const innerModal = useRef();
+  const button = useRef();
+  const startSentinel = useRef();
+  const endSentinel = useRef();
 
   if (open !== prevOpen) {
     setisOpen(open);
@@ -105,20 +121,28 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
   }
 
   function handleBlur(_ref3) {
-    var oldActiveNode = _ref3.target,
-        currentActiveNode = _ref3.relatedTarget;
+    let {
+      target: oldActiveNode,
+      relatedTarget: currentActiveNode
+    } = _ref3;
 
     if (open && currentActiveNode && oldActiveNode) {
-      var bodyNode = innerModal.current;
-      var startSentinelNode = startSentinel.current;
-      var endSentinelNode = endSentinel.current;
+      const {
+        current: bodyNode
+      } = innerModal;
+      const {
+        current: startSentinelNode
+      } = startSentinel;
+      const {
+        current: endSentinelNode
+      } = endSentinel;
       wrapFocus({
-        bodyNode: bodyNode,
-        startSentinelNode: startSentinelNode,
-        endSentinelNode: endSentinelNode,
-        currentActiveNode: currentActiveNode,
-        oldActiveNode: oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus
+        bodyNode,
+        startSentinelNode,
+        endSentinelNode,
+        currentActiveNode,
+        oldActiveNode,
+        selectorsFloatingMenus
       });
     }
   }
@@ -129,11 +153,21 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
     }
   }
 
-  var modalClass = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--modal"), true), _defineProperty(_cx2, 'is-visible', isOpen), _defineProperty(_cx2, customClassName, customClassName), _defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
-  var containerClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_cx3, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
+  const modalClass = cx({
+    [`${prefix}--modal`]: true,
+    'is-visible': isOpen,
+    [customClassName]: customClassName,
+    [`${prefix}--modal--danger`]: danger
+  });
+  const containerClass = cx({
+    [`${prefix}--modal-container`]: true,
+    [`${prefix}--modal-container--${size}`]: size,
+    [`${prefix}--modal-container--full-width`]: isFullWidth,
+    [containerClassName]: containerClassName
+  }); // Generate aria-label based on Modal Header label if one is not provided (L253)
 
-  var generatedAriaLabel;
-  var childrenWithProps = React__default.Children.toArray(children).map(function (child) {
+  let generatedAriaLabel;
+  const childrenWithProps = React__default.Children.toArray(children).map(child => {
     switch (child.type) {
       case React__default.createElement(ModalHeader).type:
         generatedAriaLabel = child.props.label;
@@ -151,24 +185,22 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
         return child;
     }
   });
-  useEffect(function () {
+  useEffect(() => {
     if (prevOpen !== isOpen) {
-      toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), isOpen);
+      toggleClass(document.body, `${prefix}--body--with-modal-open`, isOpen);
     }
   });
-  useEffect(function () {
-    return function () {
-      return toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), false);
-    };
+  useEffect(() => {
+    return () => toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(function () {
-    toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), open);
+  useEffect(() => {
+    toggleClass(document.body, `${prefix}--body--with-modal-open`, open);
   }, [open, prefix]);
-  useEffect(function () {
-    var focusButton = function focusButton(focusContainerElement) {
+  useEffect(() => {
+    const focusButton = focusContainerElement => {
       if (focusContainerElement) {
-        var primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
+        const primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
 
         if (primaryFocusElement) {
           primaryFocusElement.focus();
@@ -206,19 +238,89 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
   }, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: startSentinel,
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
     ref: innerModal,
-    className: "".concat(prefix, "--modal-container-body")
+    className: `${prefix}--modal-container-body`
   }, childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, "Focus sentinel")));
 });
-ComposedModal.propTypes = (_ComposedModal$propTy = {}, _defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes.string), _defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes.string), _defineProperty(_ComposedModal$propTy, "children", PropTypes.node), _defineProperty(_ComposedModal$propTy, "className", PropTypes.string), _defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes.string), _defineProperty(_ComposedModal$propTy, "danger", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "isFullWidth", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "onClose", PropTypes.func), _defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes.func), _defineProperty(_ComposedModal$propTy, "open", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_ComposedModal$propTy, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.propTypes = {
+  /**
+   * Specify the aria-label for bx--modal-container
+   */
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Specify the aria-labelledby for bx--modal-container
+   */
+  ['aria-labelledby']: PropTypes.string,
+
+  /**
+   * Specify the content to be placed in the ComposedModal
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the modal root node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify an optional className to be applied to the modal node
+   */
+  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.bool,
+
+  /**
+   * Specify whether or not the Modal content should have any inner padding.
+   */
+  isFullWidth: PropTypes.bool,
+
+  /**
+   * Specify an optional handler for closing modal.
+   * Returning `false` here prevents closing modal.
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * Specify an optional handler for the `onKeyDown` event. Called for all
+   * `onKeyDown` events that do not close the modal
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Specify whether the Modal is currently open
+   */
+  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.string,
+
+  /**
+   * Specify the CSS selectors that match the floating menus
+   */
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * Specify the size variant.
+   */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
+};
 ComposedModal.defaultProps = {
-  onKeyDown: function onKeyDown() {},
+  onKeyDown: () => {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'
 };
 var ComposedModal$1 = ComposedModal;

package/es/components/ComposedModal/ModalFooter.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button/Button.js';
@@ -13,14 +13,14 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "className", "closeModal", "danger", "inputref", "onRequestClose", "onRequestSubmit", "primaryButtonDisabled", "primaryButtonText", "primaryClassName", "secondaryButtonText", "secondaryButtons", "secondaryClassName"];
-
 function SecondaryButtonSet(_ref) {
-  var secondaryButtons = _ref.secondaryButtons,
-      secondaryButtonText = _ref.secondaryButtonText,
-      secondaryClassName = _ref.secondaryClassName,
-      closeModal = _ref.closeModal,
-      onRequestClose = _ref.onRequestClose;
+  let {
+    secondaryButtons,
+    secondaryButtonText,
+    secondaryClassName,
+    closeModal,
+    onRequestClose
+  } = _ref;
 
   function handleRequestClose(evt) {
     closeModal(evt);
@@ -28,11 +28,13 @@ function SecondaryButtonSet(_ref) {
   }
 
   if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
-    return secondaryButtons.map(function (_ref2, i) {
-      var buttonText = _ref2.buttonText,
-          onButtonClick = _ref2.onClick;
+    return secondaryButtons.map((_ref2, i) => {
+      let {
+        buttonText,
+        onClick: onButtonClick
+      } = _ref2;
       return /*#__PURE__*/React__default.createElement(Button, {
-        key: "".concat(buttonText, "-").concat(i),
+        key: `${buttonText}-${i}`,
         className: secondaryClassName,
         kind: "secondary",
         onClick: onButtonClick || handleRequestClose
@@ -55,17 +57,17 @@ SecondaryButtonSet.propTypes = {
   closeModal: PropTypes.func,
   onRequestClose: PropTypes.func,
   secondaryButtonText: PropTypes.string,
-  secondaryButtons: function secondaryButtons(props, propName, componentName) {
+  secondaryButtons: (props, propName, componentName) => {
     if (props.secondaryButtons) {
       if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
-        return new Error("".concat(propName, " needs to be an array of two button config objects"));
+        return new Error(`${propName} needs to be an array of two button config objects`);
       }
 
-      var shape = {
+      const shape = {
         buttonText: PropTypes.node,
         onClick: PropTypes.func
       };
-      props[propName].forEach(function (secondaryButton) {
+      props[propName].forEach(secondaryButton => {
         PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
@@ -74,32 +76,35 @@ SecondaryButtonSet.propTypes = {
   },
   secondaryClassName: PropTypes.string
 };
-var ModalFooter = /*#__PURE__*/React__default.forwardRef(function ModalFooter(_ref3, ref) {
-  var _cx;
-
-  var children = _ref3.children,
-      customClassName = _ref3.className,
-      closeModal = _ref3.closeModal,
-      danger = _ref3.danger,
-      inputref = _ref3.inputref,
-      onRequestClose = _ref3.onRequestClose,
-      onRequestSubmit = _ref3.onRequestSubmit,
-      primaryButtonDisabled = _ref3.primaryButtonDisabled,
-      primaryButtonText = _ref3.primaryButtonText,
-      primaryClassName = _ref3.primaryClassName,
-      secondaryButtonText = _ref3.secondaryButtonText,
-      secondaryButtons = _ref3.secondaryButtons,
-      secondaryClassName = _ref3.secondaryClassName,
-      rest = _objectWithoutProperties(_ref3, _excluded);
-
-  var prefix = usePrefix();
-  var footerClass = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--modal-footer"), true), _defineProperty(_cx, customClassName, customClassName), _defineProperty(_cx, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2), _cx));
-  var secondaryButtonProps = {
-    closeModal: closeModal,
-    secondaryButtons: secondaryButtons,
-    secondaryButtonText: secondaryButtonText,
-    secondaryClassName: secondaryClassName,
-    onRequestClose: onRequestClose
+const ModalFooter = /*#__PURE__*/React__default.forwardRef(function ModalFooter(_ref3, ref) {
+  let {
+    children,
+    className: customClassName,
+    closeModal,
+    danger,
+    inputref,
+    onRequestClose,
+    onRequestSubmit,
+    primaryButtonDisabled,
+    primaryButtonText,
+    primaryClassName,
+    secondaryButtonText,
+    secondaryButtons,
+    secondaryClassName,
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix();
+  const footerClass = cx({
+    [`${prefix}--modal-footer`]: true,
+    [customClassName]: customClassName,
+    [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
+  });
+  const secondaryButtonProps = {
+    closeModal,
+    secondaryButtons,
+    secondaryButtonText,
+    secondaryClassName,
+    onRequestClose
   };
   return /*#__PURE__*/React__default.createElement(ButtonSet, _extends({
     className: footerClass
@@ -181,17 +186,17 @@ ModalFooter.propTypes = {
    *   onClick: function,
    * }>`).
    */
-  secondaryButtons: function secondaryButtons(props, propName, componentName) {
+  secondaryButtons: (props, propName, componentName) => {
     if (props.secondaryButtons) {
       if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
-        return new Error("".concat(propName, " needs to be an array of two button config objects"));
+        return new Error(`${propName} needs to be an array of two button config objects`);
       }
 
-      var shape = {
+      const shape = {
         buttonText: PropTypes.node,
         onClick: PropTypes.func
       };
-      props[propName].forEach(function (secondaryButton) {
+      props[propName].forEach(secondaryButton => {
         PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
@@ -205,9 +210,9 @@ ModalFooter.propTypes = {
   secondaryClassName: PropTypes.string
 };
 ModalFooter.defaultProps = {
-  onRequestClose: function onRequestClose() {},
-  onRequestSubmit: function onRequestSubmit() {},
-  closeModal: function closeModal() {}
+  onRequestClose: () => {},
+  onRequestSubmit: () => {},
+  closeModal: () => {}
 };
 
 export { ModalFooter };