@carbon/react 1.31.2 → 1.32.0-rc.0

package/lib/components/Button/Button.Skeleton.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'react';
+import { ButtonSize } from './Button';
+export interface ButtonSkeletonProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Optionally specify an href for your Button to become an `<a>` element
+     */
+    href?: string;
+    /**
+     * Specify the size of the button, from a list of available sizes.
+     */
+    size?: ButtonSize;
+    /**
+     * @deprecated This property will be removed in the next major Carbon version,
+     * use size={sm} instead.
+     *
+     * Specify whether the Button should be a small variant
+     */
+    small?: boolean;
+}
+declare const ButtonSkeleton: React.FC<ButtonSkeletonProps>;
+export default ButtonSkeleton;
+export { ButtonSkeleton };

package/lib/components/Button/Button.Skeleton.js

@@ -34,7 +34,7 @@ const ButtonSkeleton = _ref => {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--sm`]: small || size === 'sm',
-    [`${prefix}--btn--md`]: size === 'field' || size === 'md',
+    [`${prefix}--btn--md`]: size === 'md',
     [`${prefix}--btn--lg`]: size === 'lg',
     [`${prefix}--btn--xl`]: size === 'xl',
     [`${prefix}--btn--2xl`]: size === '2xl'
@@ -67,11 +67,13 @@ ButtonSkeleton.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
   /**
+   * @deprecated This property will be removed in the next major Carbon version,
+   * use size={sm} instead.
+   *
    * Specify whether the Button should be a small variant
    */
   small: PropTypes__default["default"].bool
 };
-var ButtonSkeleton$1 = ButtonSkeleton;
 
 exports.ButtonSkeleton = ButtonSkeleton;
-exports["default"] = ButtonSkeleton$1;
+exports["default"] = ButtonSkeleton;

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'react';
+import { PolymorphicProps } from '../../types/common';
+export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
+export type ButtonKind = (typeof ButtonKinds)[number];
+export declare const ButtonSizes: readonly ["sm", "md", "lg", "xl", "2xl"];
+export type ButtonSize = (typeof ButtonSizes)[number];
+export declare const ButtonTooltipAlignments: readonly ["start", "center", "end"];
+export type ButtonTooltipAlignment = (typeof ButtonTooltipAlignments)[number];
+export declare const ButtonTooltipPositions: string[];
+export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
+interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify the message read by screen readers for the danger button variant
+     */
+    dangerDescription?: string;
+    /**
+     * Specify if the button is an icon-only button
+     */
+    hasIconOnly?: boolean;
+    /**
+     * Optionally specify an href for your Button to become an `<a>` element
+     */
+    href?: string;
+    /**
+     * If specifying the `renderIcon` prop, provide a description for that icon that can
+     * be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify whether the Button is expressive, or not
+     */
+    isExpressive?: boolean;
+    /**
+     * Specify whether the Button is currently selected. Only applies to the Ghost variant.
+     */
+    isSelected?: boolean;
+    /**
+     * Specify the kind of Button you want to create
+     */
+    kind?: ButtonKind;
+    /**
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify the size of the button, from the following list of sizes:
+     */
+    size?: ButtonSize;
+    /**
+     * Specify the alignment of the tooltip to the icon-only button.
+     * Can be one of: start, center, or end.
+     */
+    tooltipAlignment?: ButtonTooltipAlignment;
+    /**
+     * Specify the direction of the tooltip for icon-only buttons.
+     * Can be either top, right, bottom, or left.
+     */
+    tooltipPosition?: ButtonTooltipPosition;
+}
+export type ButtonProps<T extends React.ElementType> = PolymorphicProps<T, ButtonBaseProps>;
+export interface ButtonComponent {
+    <T extends React.ElementType>(props: ButtonProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const _default: ButtonComponent;
+export default _default;

package/lib/components/Button/Button.js

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var types = require('../../prop-types/types.js');
 var index = require('../IconButton/index.js');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -25,6 +24,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
+const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
+const ButtonTooltipAlignments = ['start', 'center', 'end'];
+const ButtonTooltipPositions = ['top', 'right', 'bottom', 'left'];
 const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_ref, ref) {
   let {
     as,
@@ -91,23 +94,24 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
   const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
   let component = 'button';
   const assistiveId = useId.useId('danger-description');
+  const {
+    'aria-pressed': ariaPressed
+  } = rest;
   let otherProps = {
     disabled,
     type,
-    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : null,
-    'aria-pressed': rest['aria-pressed'] ?? (hasIconOnly && kind === 'ghost' ? isSelected : null)
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : undefined,
+    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
   };
   const anchorProps = {
     href
   };
-  let assistiveText;
+  let assistiveText = null;
   if (dangerButtonVariants.includes(kind)) {
     assistiveText = /*#__PURE__*/React__default["default"].createElement("span", {
       id: assistiveId,
       className: `${prefix}--visually-hidden`
     }, dangerDescription);
-  } else {
-    assistiveText = null;
   }
   if (as) {
     component = as;
@@ -130,7 +134,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     ...otherProps
   }, assistiveText, children, buttonImage);
   if (hasIconOnly) {
-    let align;
+    let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
       if (tooltipAlignment === 'center') {
         align = tooltipPosition;
@@ -199,7 +203,7 @@ Button.propTypes = {
     if (props.renderIcon && !props.children && !props.iconDescription) {
       return new Error('renderIcon property specified without also providing an iconDescription property.');
     }
-    return undefined;
+    return null;
   },
   /**
    * Specify whether the Button is expressive, or not
@@ -212,7 +216,7 @@ Button.propTypes = {
   /**
    * Specify the kind of Button you want to create
    */
-  kind: PropTypes__default["default"].oneOf(types.ButtonKinds),
+  kind: PropTypes__default["default"].oneOf(ButtonKinds),
   /**
    * Provide an optional function to be called when the button element
    * loses focus
@@ -270,6 +274,9 @@ Button.propTypes = {
    */
   type: PropTypes__default["default"].oneOf(['button', 'reset', 'submit'])
 };
-var Button$1 = Button;
 
-exports["default"] = Button$1;
+exports.ButtonKinds = ButtonKinds;
+exports.ButtonSizes = ButtonSizes;
+exports.ButtonTooltipAlignments = ButtonTooltipAlignments;
+exports.ButtonTooltipPositions = ButtonTooltipPositions;
+exports["default"] = Button;

package/lib/components/Button/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 Button from './Button';
+export default Button;
+export { Button };
+export * from './Button';
+export { default as ButtonSkeleton } from './Button.Skeleton';

package/lib/components/Button/index.js

@@ -10,8 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Button = require('./Button.js');
+var Button_Skeleton = require('./Button.Skeleton.js');
 
 
 
 exports.Button = Button["default"];
+exports.ButtonKinds = Button.ButtonKinds;
+exports.ButtonSizes = Button.ButtonSizes;
+exports.ButtonTooltipAlignments = Button.ButtonTooltipAlignments;
+exports.ButtonTooltipPositions = Button.ButtonTooltipPositions;
 exports["default"] = Button["default"];
+exports.ButtonSkeleton = Button_Skeleton["default"];

package/lib/components/ButtonSet/ButtonSet.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'react';
+import { ForwardRefReturn } from '../../types/common';
+export interface ButtonSetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the button arrangement of the set (vertically stacked or
+     * horizontal)
+     */
+    stacked?: boolean;
+}
+declare const ButtonSet: ForwardRefReturn<HTMLDivElement, ButtonSetProps>;
+export default ButtonSet;

package/lib/components/ButtonSet/ButtonSet.js

@@ -53,6 +53,5 @@ ButtonSet.propTypes = {
    */
   stacked: PropTypes__default["default"].bool
 };
-var ButtonSet$1 = ButtonSet;
 
-exports["default"] = ButtonSet$1;
+exports["default"] = ButtonSet;

package/lib/components/ButtonSet/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 ButtonSet from './ButtonSet';
+export { ButtonSet };
+export default ButtonSet;

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -17,6 +17,7 @@ var useResizeObserver = require('use-resize-observer/polyfilled');
 var iconsReact = require('@carbon/icons-react');
 var Copy = require('../Copy/Copy.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var CopyButton = require('../CopyButton/CopyButton.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var copy = require('copy-to-clipboard');

package/lib/components/ComboButton/index.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var index = require('../IconButton/index.js');
 var Menu = require('../Menu/Menu.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -0,0 +1,70 @@
+import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode } from 'react';
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Specify the content to be placed in the ModalBody. */
+    children?: ReactNode;
+    /**
+     * 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?: boolean;
+    /**
+     * Specify whether the modal contains scrolling content
+     */
+    hasScrollingContent?: boolean;
+}
+export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the aria-label for bx--modal-container
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the aria-labelledby for bx--modal-container
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Specify the content to be placed in the ComposedModal
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specify an optional className to be applied to the modal node
+     */
+    containerClassName?: 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?: boolean;
+    /**
+     * Specify whether the Modal content should have any inner padding.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Specify an optional handler for closing modal.
+     * Returning `false` here prevents closing modal.
+     */
+    onClose?(event: MouseEvent): void | boolean;
+    /**
+     * Called for all `onKeyDown` events that do not close the modal
+     */
+    onKeyDown?(evt: KeyboardEvent): void;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /** Specify the CSS selectors that match the floating menus. */
+    selectorsFloatingMenus?: Array<string | null | undefined>;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+declare const ComposedModal: React.ForwardRefExoticComponent<ComposedModalProps & React.RefAttributes<HTMLDivElement>>;
+export default ComposedModal;

package/lib/components/ComposedModal/ComposedModal.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var reactIs = require('react-is');
 var PropTypes = require('prop-types');
 var ModalHeader = require('./ModalHeader.js');
 var ModalFooter = require('./ModalFooter.js');
@@ -19,6 +20,8 @@ var toggleClass = require('../../tools/toggleClass.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,12 +38,7 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
     ...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 contentClass = cx__default["default"](`${prefix}--modal-content`, hasForm && `${prefix}--modal-content--with-form`, hasScrollingContent && `${prefix}--modal-scroll-content`, customClassName);
   const hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
     role: 'region'
@@ -57,6 +55,7 @@ ModalBody.propTypes = {
   /**
    * Required props for the accessibility label of the header
    */
+  // @ts-expect-error: Built-in prop-types > TS logic doesn't jive well with custom validators
   ['aria-label']: requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string),
   /**
    * Specify the content to be placed in the ModalBody
@@ -95,28 +94,38 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     ...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);
-    setPrevOpen(open);
-  }
+  const [isOpen, setIsOpen] = React.useState(!!open);
+  const [wasOpen, setWasOpen] = React.useState(!!open);
+  const innerModal = React.useRef(null);
+  const button = React.useRef(null);
+  const startSentinel = React.useRef(null);
+  const endSentinel = React.useRef(null);
+
+  // Kepp track of modal open/close state
+  // and propagate it to the document.body
+  React.useEffect(() => {
+    if (open !== wasOpen) {
+      setIsOpen(!!open);
+      setWasOpen(!!open);
+      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, !!open);
+    }
+  }, [open, wasOpen, prefix]);
+  // Remove the document.body className on unmount
+  React.useEffect(() => {
+    return () => {
+      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   function handleKeyDown(evt) {
-    // Esc key
-    if (evt.which === 27) {
+    if (match.match(evt, keys.Escape)) {
       closeModal(evt);
     }
-    onKeyDown(evt);
+    onKeyDown?.(evt);
   }
   function handleMousedown(evt) {
-    if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
-      return;
-    }
-    if (innerModal.current && !innerModal.current.contains(evt.target)) {
+    const isInside = innerModal.current?.contains(evt.target);
+    if (!isInside && !preventCloseOnClickOutside) {
       closeModal(evt);
     }
   }
@@ -125,7 +134,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref3;
-    if (open && currentActiveNode && oldActiveNode) {
+    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -137,62 +146,46 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       } = endSentinel;
       wrapFocus["default"]({
         bodyNode,
-        startSentinelNode,
-        endSentinelNode,
+        startTrapNode: startSentinelNode,
+        endTrapNode: endSentinelNode,
         currentActiveNode,
         oldActiveNode,
-        selectorsFloatingMenus
+        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
       });
     }
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
-      setisOpen(false);
+      setIsOpen(false);
     }
   }
-  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
-  });
+  const modalClass = cx__default["default"](`${prefix}--modal`, isOpen && 'is-visible', danger && `${prefix}--modal--danger`, customClassName);
+  const containerClass = cx__default["default"](`${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 => {
-    switch (child.type) {
-      case React__default["default"].createElement(ModalHeader.ModalHeader).type:
-        generatedAriaLabel = child.props.label;
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          closeModal: closeModal
-        });
-      case React__default["default"].createElement(ModalFooter.ModalFooter).type:
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          closeModal: closeModal,
-          inputref: button
-        });
+    switch (true) {
+      case reactIs.isElement(child) && child.type === React__default["default"].createElement(ModalHeader.ModalHeader).type:
+        {
+          const el = child;
+          generatedAriaLabel = el.props.label;
+          return /*#__PURE__*/React__default["default"].cloneElement(el, {
+            closeModal
+          });
+        }
+      case reactIs.isElement(child) && child.type === React__default["default"].createElement(ModalFooter.ModalFooter).type:
+        {
+          const el = child;
+          return /*#__PURE__*/React__default["default"].cloneElement(el, {
+            closeModal,
+            inputref: button
+          });
+        }
       default:
         return child;
     }
   });
-  React.useEffect(() => {
-    if (prevOpen !== isOpen) {
-      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, isOpen);
-    }
-  });
-  React.useEffect(() => {
-    return () => toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  React.useEffect(() => {
-    toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open);
-  }, [open, prefix]);
   React.useEffect(() => {
     const focusButton = focusContainerElement => {
       if (focusContainerElement) {
@@ -267,7 +260,7 @@ ComposedModal.propTypes = {
    */
   danger: PropTypes__default["default"].bool,
   /**
-   * Specify whether or not the Modal content should have any inner padding.
+   * Specify whether the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes__default["default"].bool,
   /**
@@ -300,10 +293,8 @@ ComposedModal.propTypes = {
   size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])
 };
 ComposedModal.defaultProps = {
-  onKeyDown: () => {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'
 };
-var ComposedModal$1 = ComposedModal;
 
 exports.ModalBody = ModalBody;
-exports["default"] = ComposedModal$1;
+exports["default"] = ComposedModal;

package/lib/components/ComposedModal/ModalFooter.d.ts

@@ -0,0 +1,71 @@
+import React, { type ReactNode, type MouseEvent, type Ref } from 'react';
+interface SecondaryButtonProps {
+    buttonText: ReactNode;
+    onClick(evt: MouseEvent): void;
+}
+export interface SecondaryButtonSetProps {
+    closeModal(evt: MouseEvent): void;
+    onRequestClose(evt: MouseEvent): void;
+    secondaryButtonText?: string;
+    secondaryButtons?: [SecondaryButtonProps, SecondaryButtonProps];
+    secondaryClassName?: string;
+}
+export interface ModalFooterProps {
+    /**
+     * Pass in content that will be rendered in the Modal Footer
+     */
+    children: ReactNode;
+    /**
+     * Specify a custom className to be applied to the Modal Footer container
+     */
+    className?: string;
+    /**
+     * Specify an optional function that is called whenever the modal is closed
+     */
+    closeModal?(evt: MouseEvent): void;
+    /**
+     * 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?: boolean;
+    /**
+     * The `ref` callback for the primary button.
+     */
+    inputref?: Ref<HTMLButtonElement>;
+    /**
+     * Specify an optional function for when the modal is requesting to be
+     * closed
+     */
+    onRequestClose?(): void;
+    /**
+     * Specify an optional function for when the modal is requesting to be
+     * submitted
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specify whether the primary button should be disabled
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: string;
+    /**
+     * Specify a custom className to be applied to the primary button
+     */
+    primaryClassName?: string;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: string;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: [SecondaryButtonProps, SecondaryButtonProps];
+    /**
+     * Specify a custom className to be applied to the secondary button
+     */
+    secondaryClassName?: string;
+}
+export declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLElement>>;
+export {};