@carbon/react 1.41.0-rc.0 → 1.41.0

package/es/components/ComposedModal/ComposedModal.js

@@ -45,7 +45,6 @@ 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('hasScrollingContent', PropTypes.string),
   /**
    * Specify the content to be placed in the ModalBody

package/es/components/DataTable/Table.js

@@ -6,13 +6,14 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useRef, useCallback, useLayoutEffect } from 'react';
+import React__default, { useContext, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { TableContext } from './TableContext.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 const isElementWrappingContent = (element, context) => {
   if (element.children.length > 0) {
@@ -111,7 +112,7 @@ const Table = _ref => {
   }, []);
   const debouncedSetTabIndex = debounce(setTabIndex, 100);
   useWindowEvent('resize', debouncedSetTabIndex);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     setTabIndex();
   }, [setTabIndex]);
 
@@ -121,7 +122,7 @@ const Table = _ref => {
       setTableAlignment();
     });
   }
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     setTableAlignment();
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React__default.createElement("div", {

package/es/components/DataTable/TableExpandHeader.d.ts

@@ -98,7 +98,7 @@ declare const TableExpandHeader: {
          * Specify whether this row is expanded or not. This helps coordinate data
          * attributes so that `TableExpandRow` and `TableExpandedRow` work together
          */
-        isExpanded: Function;
+        isExpanded: any;
         /**
          * Hook for when a listener initiates a request to expand the given row
          */

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -10,7 +10,7 @@ import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
 export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
 export type func = (...args: any[]) => any;
-interface DatePickerInputProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
     /**
      * The type of the date picker:
      *

package/es/components/Modal/Modal.d.ts

@@ -0,0 +1,137 @@
+/**
+ * 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 { ReactAttr } from '../../types/common';
+export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
+export type ModalSize = (typeof ModalSizes)[number];
+export interface ModalSecondaryButton {
+    buttonText?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface ModalProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning
+     * Should go hand in hand with the danger prop.
+     */
+    alert?: boolean;
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-label'?: string;
+    /**
+     * Provide the contents of your Modal
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specify an label for the close button of the modal; defaults to close
+     */
+    closeButtonLabel?: string;
+    /**
+     * Specify whether the Modal is for dangerous actions
+     */
+    danger?: boolean;
+    /**
+     * Specify whether the modal contains scrolling content
+     */
+    hasScrollingContent?: boolean;
+    /**
+     * Specify the DOM element ID of the top-level node.
+     */
+    id?: string;
+    /**
+     * Specify whether or not the Modal content should have any inner padding.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Provide a ref to return focus to once the modal is closed.
+     */
+    launcherButtonRef?: any;
+    /**
+     * Specify a label to be read by screen readers on the modal root node
+     */
+    modalAriaLabel?: string;
+    /**
+     * Specify the content of the modal header title.
+     */
+    modalHeading?: React.ReactNode;
+    /**
+     * Specify the content of the modal header label.
+     */
+    modalLabel?: React.ReactNode;
+    /**
+     * Specify a handler for keypresses.
+     * @deprecated this property is unused
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for closing modal.
+     * The handler should care of closing modal, e.g. changing `open` prop.
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for "submitting" modal.
+     * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
+     */
+    onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for the secondary button.
+     * Useful if separate handler from `onRequestClose` is desirable
+     */
+    onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    /**
+     * Specify whether the modal should be button-less
+     */
+    passiveModal?: boolean;
+    /**
+     * Prevent closing on click outside of modal
+     */
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: React.ReactNode;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: React.ReactNode;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: ModalSecondaryButton[];
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify CSS selectors that match DOM elements working as floating menus.
+     * Focusing on those elements won't trigger "focus-wrap" behavior
+     */
+    selectorsFloatingMenus?: string[];
+    /**
+     * Specify if Enter key should be used as "submit" action
+     */
+    shouldSubmitOnEnter?: boolean;
+    /**
+     * Specify the size variant.
+     */
+    size?: ModalSize;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/es/components/Modal/Modal.js

@@ -25,6 +25,7 @@ import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter } from '../../internal/keyboard/keys.js';
 
 const getInstanceId = setupGetInstanceId();
+const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   let {
     'aria-label': ariaLabelProp,
@@ -56,11 +57,11 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const button = useRef();
+  const button = useRef(null);
   const secondaryButton = useRef();
-  const innerModal = useRef();
-  const startTrap = useRef();
-  const endTrap = useRef();
+  const innerModal = useRef(null);
+  const startTrap = useRef(null);
+  const endTrap = useRef(null);
   const modalInstanceId = `modal-${getInstanceId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -80,7 +81,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     }
   }
   function handleMousedown(evt) {
-    if (innerModal.current && !innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
+    const target = evt.target;
+    if (innerModal.current && !innerModal.current.contains(target) && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
       onRequestClose(evt);
     }
   }
@@ -113,9 +115,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
-    [`${prefix}--modal--danger`]: danger,
-    [className]: className
-  });
+    [`${prefix}--modal--danger`]: danger
+  }, className);
   const containerClasses = cx(`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
     [`${prefix}--modal-container--full-width`]: isFullWidth
@@ -126,7 +127,12 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const footerClasses = cx(`${prefix}--modal-footer`, {
     [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
   });
-  const ariaLabel = modalLabel || ariaLabelProp || modalAriaLabel || modalHeading;
+  const asStringOrUndefined = node => {
+    return typeof node === 'string' ? node : undefined;
+  };
+  const modalLabelStr = asStringOrUndefined(modalLabel);
+  const modalHeadingStr = asStringOrUndefined(modalHeading);
+  const ariaLabel = modalLabelStr || ariaLabelProp || modalAriaLabel || modalHeadingStr;
   const getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
   const hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
@@ -148,7 +154,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     };
   }, [prefix]);
   useEffect(() => {
-    toggleClass(document.body, `${prefix}--body--with-modal-open`, open);
+    toggleClass(document.body, `${prefix}--body--with-modal-open`, open ?? false);
   }, [open, prefix]);
   useEffect(() => {
     if (!open && launcherButtonRef) {
@@ -168,7 +174,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     };
     const focusButton = focusContainerElement => {
       const target = initialFocus(focusContainerElement);
-      if (target) {
+      if (target !== null) {
         target.focus();
       }
     };
@@ -196,7 +202,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     className: containerClasses,
     "aria-label": ariaLabel,
     "aria-modal": "true",
-    tabIndex: "-1"
+    tabIndex: -1
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--modal-header`
   }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement(Text, {
@@ -243,12 +249,12 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("span", {
     ref: startTrap,
-    tabIndex: "0",
+    tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
     ref: endTrap,
-    tabIndex: "0",
+    tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
@@ -383,7 +389,7 @@ Modal.propTypes = {
    * Specify CSS selectors that match DOM elements working as floating menus.
    * Focusing on those elements won't trigger "focus-wrap" behavior
    */
-  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
   /**
    * Specify if Enter key should be used as "submit" action
    */
@@ -391,8 +397,7 @@ Modal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
+  size: PropTypes.oneOf(ModalSizes)
 };
-var Modal$1 = Modal;
 
-export { Modal$1 as default };
+export { ModalSizes, Modal as default };

package/es/components/Modal/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 Modal from './Modal';
+export default Modal;
+export { Modal };

package/es/components/Tile/Tile.js

@@ -82,7 +82,6 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
       setIsSelected(!isSelected);
-      onKeyDown(evt);
     }
     onKeyDown(evt);
   }
@@ -102,6 +101,7 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
   return /*#__PURE__*/React__default.createElement(Link, _extends({
     className: classes,
     href: href,
+    tabIndex: !href && !disabled ? 0 : undefined,
     onClick: !disabled ? handleOnClick : undefined,
     onKeyDown: handleOnKeyDown,
     ref: ref,

package/es/components/Toggletip/index.d.ts

@@ -37,6 +37,7 @@ export declare namespace ToggletipLabel {
 interface ToggletipProps<E extends ElementType> {
     align?: PopoverAlignment | undefined;
     as?: E | undefined;
+    autoAlign?: boolean | undefined;
     className?: string | undefined;
     children?: ReactNode;
     defaultOpen?: boolean | undefined;
@@ -46,7 +47,7 @@ interface ToggletipProps<E extends ElementType> {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-export declare function Toggletip<E extends ElementType = 'span'>({ align, as, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): JSX.Element;
+export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): JSX.Element;
 export declare namespace Toggletip {
     var propTypes: {
         /**
@@ -58,6 +59,10 @@ export declare namespace Toggletip {
          * component.
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Custom children to be rendered as the content of the label
          */

package/es/components/Toggletip/index.js

@@ -63,6 +63,7 @@ function Toggletip(_ref2) {
   let {
     align,
     as,
+    autoAlign,
     className: customClassName,
     children,
     defaultOpen = false
@@ -137,7 +138,8 @@ function Toggletip(_ref2) {
     open: open,
     onKeyDown: onKeyDown,
     onBlur: handleBlur,
-    ref: ref
+    ref: ref,
+    autoAlign: autoAlign
   }, children));
 }
 Toggletip.propTypes = {
@@ -150,6 +152,10 @@ Toggletip.propTypes = {
    * component.
    */
   as: PropTypes.elementType,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Custom children to be rendered as the content of the label
    */

package/es/index.js

@@ -58,6 +58,7 @@ export { default as Link } from './components/Link/Link.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
 export { default as Loading } from './components/Loading/Loading.js';
 export { MenuButton } from './components/MenuButton/index.js';
+export { default as Modal } from './components/Modal/Modal.js';
 export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification } from './components/Notification/Notification.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { NumberInput } from './components/NumberInput/NumberInput.js';
@@ -205,7 +206,6 @@ export { ErrorBoundaryContext } from './components/ErrorBoundary/ErrorBoundaryCo
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { Menu } from './components/Menu/Menu.js';
 export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './components/Menu/MenuItem.js';
-export { default as Modal } from './components/Modal/Modal.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';

package/es/internal/wrapFocus.js

@@ -24,11 +24,11 @@ function elementOrParentIsFloatingMenu(node) {
 /**
  * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
  * @param {object} options The options.
- * @param {HTMLElement|null} options.bodyNode
- * @param {HTMLElement|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
- * @param {HTMLElement|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
- * @param {HTMLElement} options.currentActiveNode The DOM node that has focus.
- * @param {HTMLElement} options.oldActiveNode The DOM node that previously had focus.
+ * @param {Node|null} options.bodyNode
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
  * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
  */
 function wrapFocus(_ref) {

package/es/prop-types/requiredIfGivenPropIsTruthy.js

@@ -8,8 +8,8 @@
 /**
  * @param {string} name The name of the prop that must exist to validate
  * the current prop.
- * @param {Function} propType The original prop type checker.
- * @returns {Function} The new prop type checker for the current prop that
+ * @param {React.Validator} propType The original prop type checker.
+ * @returns {React.Validator} The new prop type checker for the current prop that
  * becomes required if the prop corresponding to the provided prop name exists.
  */
 function requiredIfGivenPropIsTruthy(name, propType) {

package/lib/components/ComposedModal/ComposedModal.js

@@ -55,7 +55,6 @@ 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

package/lib/components/DataTable/Table.js

@@ -17,6 +17,7 @@ var debounce = require('lodash.debounce');
 var usePrefix = require('../../internal/usePrefix.js');
 var TableContext = require('./TableContext.js');
 var useEvent = require('../../internal/useEvent.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -122,7 +123,7 @@ const Table = _ref => {
   }, []);
   const debouncedSetTabIndex = debounce__default["default"](setTabIndex, 100);
   useEvent.useWindowEvent('resize', debouncedSetTabIndex);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect["default"](() => {
     setTabIndex();
   }, [setTabIndex]);
 
@@ -132,7 +133,7 @@ const Table = _ref => {
       setTableAlignment();
     });
   }
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect["default"](() => {
     setTableAlignment();
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/DataTable/TableExpandHeader.d.ts

@@ -98,7 +98,7 @@ declare const TableExpandHeader: {
          * Specify whether this row is expanded or not. This helps coordinate data
          * attributes so that `TableExpandRow` and `TableExpandedRow` work together
          */
-        isExpanded: Function;
+        isExpanded: any;
         /**
          * Hook for when a listener initiates a request to expand the given row
          */

package/lib/components/DatePickerInput/DatePickerInput.d.ts

@@ -10,7 +10,7 @@ import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
 export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
 export type func = (...args: any[]) => any;
-interface DatePickerInputProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
     /**
      * The type of the date picker:
      *

package/lib/components/Modal/Modal.d.ts

@@ -0,0 +1,137 @@
+/**
+ * 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 { ReactAttr } from '../../types/common';
+export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
+export type ModalSize = (typeof ModalSizes)[number];
+export interface ModalSecondaryButton {
+    buttonText?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface ModalProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning
+     * Should go hand in hand with the danger prop.
+     */
+    alert?: boolean;
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-label'?: string;
+    /**
+     * Provide the contents of your Modal
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specify an label for the close button of the modal; defaults to close
+     */
+    closeButtonLabel?: string;
+    /**
+     * Specify whether the Modal is for dangerous actions
+     */
+    danger?: boolean;
+    /**
+     * Specify whether the modal contains scrolling content
+     */
+    hasScrollingContent?: boolean;
+    /**
+     * Specify the DOM element ID of the top-level node.
+     */
+    id?: string;
+    /**
+     * Specify whether or not the Modal content should have any inner padding.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Provide a ref to return focus to once the modal is closed.
+     */
+    launcherButtonRef?: any;
+    /**
+     * Specify a label to be read by screen readers on the modal root node
+     */
+    modalAriaLabel?: string;
+    /**
+     * Specify the content of the modal header title.
+     */
+    modalHeading?: React.ReactNode;
+    /**
+     * Specify the content of the modal header label.
+     */
+    modalLabel?: React.ReactNode;
+    /**
+     * Specify a handler for keypresses.
+     * @deprecated this property is unused
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for closing modal.
+     * The handler should care of closing modal, e.g. changing `open` prop.
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for "submitting" modal.
+     * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
+     */
+    onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for the secondary button.
+     * Useful if separate handler from `onRequestClose` is desirable
+     */
+    onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    /**
+     * Specify whether the modal should be button-less
+     */
+    passiveModal?: boolean;
+    /**
+     * Prevent closing on click outside of modal
+     */
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: React.ReactNode;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: React.ReactNode;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: ModalSecondaryButton[];
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify CSS selectors that match DOM elements working as floating menus.
+     * Focusing on those elements won't trigger "focus-wrap" behavior
+     */
+    selectorsFloatingMenus?: string[];
+    /**
+     * Specify if Enter key should be used as "submit" action
+     */
+    shouldSubmitOnEnter?: boolean;
+    /**
+     * Specify the size variant.
+     */
+    size?: ModalSize;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;