@carbon/react 1.27.0 → 1.28.0

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

@@ -9,10 +9,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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/lib/components/ComboButton/index.js

@@ -29,11 +29,9 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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'
 };
 
@@ -41,43 +39,38 @@ function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }
 
-var ComboButton = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var id = useId.useId('combobutton');
-  var prefix = usePrefix.usePrefix();
-  var containerRef = React.useRef(null);
-  var menuRef = React.useRef(null);
-  var ref = useMergedRefs.useMergedRefs([forwardRef, containerRef]);
-
-  var _useState = React.useState(0),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      width = _useState2[0],
-      setWidth = _useState2[1];
-
-  var _useAttachedMenu = 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["default"].forwardRef(function ComboButton(_ref, forwardRef) {
+  let {
+    children,
+    className,
+    disabled,
+    label,
+    onClick,
+    size = 'lg',
+    tooltipAlign,
+    translateWithId: t = defaultTranslateWithId,
+    ...rest
+  } = _ref;
+  const id = useId.useId('combobutton');
+  const prefix = usePrefix.usePrefix();
+  const containerRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const ref = useMergedRefs.useMergedRefs([forwardRef, containerRef]);
+  const [width, setWidth] = React.useState(0);
+  const {
+    open,
+    x,
+    y,
+    handleClick: hookOnClick,
+    handleMousedown: handleTriggerMousedown,
+    handleClose
+  } = useAttachedMenu.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();
     }
@@ -90,12 +83,14 @@ var ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function Com
   }
 
   function handleOpen() {
-    menuRef.current.style.width = "".concat(width, "px");
+    menuRef.current.style.width = `${width}px`;
   }
 
-  var containerClasses = cx__default["default"]("".concat(prefix, "--combo-button__container"), "".concat(prefix, "--combo-button__container--").concat(size), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--combo-button__container--open"), open), className);
-  var primaryActionClasses = cx__default["default"]("".concat(prefix, "--combo-button__primary-action"));
-  var triggerClasses = cx__default["default"]("".concat(prefix, "--combo-button__trigger"));
+  const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
+    [`${prefix}--combo-button__container--open`]: open
+  }, className);
+  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, {
     className: containerClasses,
     ref: ref

package/lib/components/ComposedModal/ComposedModal.js

@@ -26,22 +26,22 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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["default"].forwardRef(function ModalBody(_ref, ref) {
-  var _cx;
-
-  var customClassName = _ref.className,
-      children = _ref.children,
-      hasForm = _ref.hasForm,
-      hasScrollingContent = _ref.hasScrollingContent,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var contentClass = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--modal-content"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--modal-content--with-form"), hasForm), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, customClassName), _cx));
-  var hasScrollingContentProps = hasScrollingContent ? {
+const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(_ref, ref) {
+  let {
+    className: customClassName,
+    children,
+    hasForm,
+    hasScrollingContent,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const contentClass = cx__default["default"]({
+    [`${prefix}--modal-content`]: true,
+    [`${prefix}--modal-content--with-form`]: hasForm,
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent,
+    [customClassName]: customClassName
+  });
+  const hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
     role: 'region'
   } : {};
@@ -50,45 +50,61 @@ var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Modal
   }, hasScrollingContentProps, rest, {
     ref: ref
   }), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--modal-content--overflow-indicator")
+    className: `${prefix}--modal-content--overflow-indicator`
   }));
 });
-ModalBody.propTypes = (_ModalBody$propTypes = {}, _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, "hasForm", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _ModalBody$propTypes);
-var ComposedModal = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useState = React.useState(open),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setisOpen = _useState2[1];
-
-  var _useState3 = React.useState(open),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevOpen = _useState4[0],
-      setPrevOpen = _useState4[1];
-
-  var innerModal = React.useRef();
-  var button = React.useRef();
-  var startSentinel = React.useRef();
-  var endSentinel = React.useRef();
+ModalBody.propTypes = {
+  /**
+   * Required props for the accessibility label of the header
+   */
+  ['aria-label']: requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string),
+
+  /**
+   * Specify the content to be placed in the ModalBody
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be added to the Modal Body node
+   */
+  className: PropTypes__default["default"].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__default["default"].bool,
+
+  /**
+   * Specify whether the modal contains scrolling content
+   */
+  hasScrollingContent: PropTypes__default["default"].bool
+};
+const ComposedModal = /*#__PURE__*/React__default["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.usePrefix();
+  const [isOpen, setisOpen] = React.useState(open);
+  const [prevOpen, setPrevOpen] = React.useState(open);
+  const innerModal = React.useRef();
+  const button = React.useRef();
+  const startSentinel = React.useRef();
+  const endSentinel = React.useRef();
 
   if (open !== prevOpen) {
     setisOpen(open);
@@ -115,20 +131,28 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
   }
 
   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["default"]({
-        bodyNode: bodyNode,
-        startSentinelNode: startSentinelNode,
-        endSentinelNode: endSentinelNode,
-        currentActiveNode: currentActiveNode,
-        oldActiveNode: oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus
+        bodyNode,
+        startSentinelNode,
+        endSentinelNode,
+        currentActiveNode,
+        oldActiveNode,
+        selectorsFloatingMenus
       });
     }
   }
@@ -139,11 +163,21 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     }
   }
 
-  var modalClass = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--modal"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, 'is-visible', isOpen), _rollupPluginBabelHelpers.defineProperty(_cx2, customClassName, customClassName), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
-  var containerClass = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _rollupPluginBabelHelpers.defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
-
-  var generatedAriaLabel;
-  var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child) {
+  const modalClass = cx__default["default"]({
+    [`${prefix}--modal`]: true,
+    'is-visible': isOpen,
+    [customClassName]: customClassName,
+    [`${prefix}--modal--danger`]: danger
+  });
+  const containerClass = cx__default["default"]({
+    [`${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)
+
+  let generatedAriaLabel;
+  const childrenWithProps = React__default["default"].Children.toArray(children).map(child => {
     switch (child.type) {
       case React__default["default"].createElement(ModalHeader.ModalHeader).type:
         generatedAriaLabel = child.props.label;
@@ -161,24 +195,22 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
         return child;
     }
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (prevOpen !== isOpen) {
-      toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), isOpen);
+      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, isOpen);
     }
   });
-  React.useEffect(function () {
-    return function () {
-      return toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), false);
-    };
+  React.useEffect(() => {
+    return () => toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  React.useEffect(function () {
-    toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), open);
+  React.useEffect(() => {
+    toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open);
   }, [open, prefix]);
-  React.useEffect(function () {
-    var focusButton = function focusButton(focusContainerElement) {
+  React.useEffect(() => {
+    const focusButton = focusContainerElement => {
       if (focusContainerElement) {
-        var primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
+        const primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
 
         if (primaryFocusElement) {
           primaryFocusElement.focus();
@@ -216,19 +248,89 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: startSentinel,
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: innerModal,
-    className: "".concat(prefix, "--modal-container-body")
+    className: `${prefix}--modal-container-body`
   }, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, "Focus sentinel")));
 });
-ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "isFullWidth", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.propTypes = {
+  /**
+   * Specify the aria-label for bx--modal-container
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * Specify the aria-labelledby for bx--modal-container
+   */
+  ['aria-labelledby']: PropTypes__default["default"].string,
+
+  /**
+   * Specify the content to be placed in the ComposedModal
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the modal root node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional className to be applied to the modal node
+   */
+  containerClassName: PropTypes__default["default"].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,
+
+  /**
+   * Specify whether or not the Modal content should have any inner padding.
+   */
+  isFullWidth: PropTypes__default["default"].bool,
+
+  /**
+   * Specify an optional handler for closing modal.
+   * Returning `false` here prevents closing modal.
+   */
+  onClose: PropTypes__default["default"].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,
+
+  /**
+   * Specify whether the Modal is currently open
+   */
+  open: PropTypes__default["default"].bool,
+  preventCloseOnClickOutside: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens
+   */
+  selectorPrimaryFocus: PropTypes__default["default"].string,
+
+  /**
+   * Specify the CSS selectors that match the floating menus
+   */
+  selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+
+  /**
+   * Specify the size variant.
+   */
+  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])
+};
 ComposedModal.defaultProps = {
-  onKeyDown: function onKeyDown() {},
+  onKeyDown: () => {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'
 };
 var ComposedModal$1 = ComposedModal;

package/lib/components/ComposedModal/ModalFooter.js

@@ -23,14 +23,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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);
@@ -38,11 +38,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["default"].createElement(Button["default"], {
-        key: "".concat(buttonText, "-").concat(i),
+        key: `${buttonText}-${i}`,
         className: secondaryClassName,
         kind: "secondary",
         onClick: onButtonClick || handleRequestClose
@@ -65,17 +67,17 @@ SecondaryButtonSet.propTypes = {
   closeModal: PropTypes__default["default"].func,
   onRequestClose: PropTypes__default["default"].func,
   secondaryButtonText: PropTypes__default["default"].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__default["default"].node,
         onClick: PropTypes__default["default"].func
       };
-      props[propName].forEach(function (secondaryButton) {
+      props[propName].forEach(secondaryButton => {
         PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
@@ -84,32 +86,35 @@ SecondaryButtonSet.propTypes = {
   },
   secondaryClassName: PropTypes__default["default"].string
 };
-var ModalFooter = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var footerClass = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--modal-footer"), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, customClassName), _rollupPluginBabelHelpers.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["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.usePrefix();
+  const footerClass = cx__default["default"]({
+    [`${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["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
     className: footerClass
@@ -191,17 +196,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__default["default"].node,
         onClick: PropTypes__default["default"].func
       };
-      props[propName].forEach(function (secondaryButton) {
+      props[propName].forEach(secondaryButton => {
         PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
@@ -215,9 +220,9 @@ ModalFooter.propTypes = {
   secondaryClassName: PropTypes__default["default"].string
 };
 ModalFooter.defaultProps = {
-  onRequestClose: function onRequestClose() {},
-  onRequestSubmit: function onRequestSubmit() {},
-  closeModal: function closeModal() {}
+  onRequestClose: () => {},
+  onRequestSubmit: () => {},
+  closeModal: () => {}
 };
 
 exports.ModalFooter = ModalFooter;