| 1 | /**
|
| 2 | * Copyright IBM Corp. 2016, 2023
|
| 3 | *
|
| 4 | * This source code is licensed under the Apache-2.0 license found in the
|
| 5 | * LICENSE file in the root directory of this source tree.
|
| 6 | */
|
| 7 | import { ReactNodeLike } from 'prop-types';
|
| 8 | import React from 'react';
|
| 9 | import { ReactAttr } from '../../types/common';
|
| 10 | import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
|
| 11 | export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
|
| 12 | export type ModalSize = (typeof ModalSizes)[number];
|
| 13 | export interface ModalSecondaryButton {
|
| 14 | buttonText?: string | React.ReactNode;
|
| 15 | onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
| 16 | }
|
| 17 | export interface ModalProps extends ReactAttr<HTMLDivElement> {
|
| 18 | /**
|
| 19 | * Specify whether the Modal is displaying an alert, error or warning
|
| 20 | * Should go hand in hand with the danger prop.
|
| 21 | */
|
| 22 | alert?: boolean;
|
| 23 | /**
|
| 24 | * Required props for the accessibility label of the header
|
| 25 | */
|
| 26 | 'aria-label'?: string;
|
| 27 | /**
|
| 28 | * Provide the contents of your Modal
|
| 29 | */
|
| 30 | children?: React.ReactNode;
|
| 31 | /**
|
| 32 | * Specify an optional className to be applied to the modal root node
|
| 33 | */
|
| 34 | className?: string;
|
| 35 | /**
|
| 36 | * Specify an label for the close button of the modal; defaults to close
|
| 37 | */
|
| 38 | closeButtonLabel?: string;
|
| 39 | /**
|
| 40 | * Specify whether the Modal is for dangerous actions
|
| 41 | */
|
| 42 | danger?: boolean;
|
| 43 | /**
|
| 44 | * Specify whether the modal contains scrolling content
|
| 45 | */
|
| 46 | hasScrollingContent?: boolean;
|
| 47 | /**
|
| 48 | * Specify the DOM element ID of the top-level node.
|
| 49 | */
|
| 50 | id?: string;
|
| 51 | /**
|
| 52 | * Specify whether or not the Modal content should have any inner padding.
|
| 53 | */
|
| 54 | isFullWidth?: boolean;
|
| 55 | /**
|
| 56 | * Provide a ref to return focus to once the modal is closed.
|
| 57 | */
|
| 58 | launcherButtonRef?: any;
|
| 59 | /**
|
| 60 | * Specify the description for the loading text
|
| 61 | */
|
| 62 | loadingDescription?: string;
|
| 63 | /**
|
| 64 | * Specify the description for the loading text
|
| 65 | */
|
| 66 | loadingIconDescription?: string;
|
| 67 | /**
|
| 68 | * Specify loading status
|
| 69 | */
|
| 70 | loadingStatus?: InlineLoadingStatus;
|
| 71 | /**
|
| 72 | * Specify a label to be read by screen readers on the modal root node
|
| 73 | */
|
| 74 | modalAriaLabel?: string;
|
| 75 | /**
|
| 76 | * Specify the content of the modal header title.
|
| 77 | */
|
| 78 | modalHeading?: React.ReactNode;
|
| 79 | /**
|
| 80 | * Specify the content of the modal header label.
|
| 81 | */
|
| 82 | modalLabel?: React.ReactNode;
|
| 83 | /**
|
| 84 | * Specify a handler for keypresses.
|
| 85 | * @deprecated this property is unused
|
| 86 | */
|
| 87 | onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
|
| 88 | /**
|
| 89 | * Specify an optional handler to be invoked when loading is
|
| 90 | * successful
|
| 91 | */
|
| 92 | onLoadingSuccess?: () => void;
|
| 93 | /**
|
| 94 | * Specify a handler for closing modal.
|
| 95 | * The handler should care of closing modal, e.g. changing `open` prop.
|
| 96 | */
|
| 97 | onRequestClose?: React.ReactEventHandler<HTMLElement>;
|
| 98 | /**
|
| 99 | * Specify a handler for "submitting" modal.
|
| 100 | * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
|
| 101 | */
|
| 102 | onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
|
| 103 | /**
|
| 104 | * Specify a handler for the secondary button.
|
| 105 | * Useful if separate handler from `onRequestClose` is desirable
|
| 106 | */
|
| 107 | onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
|
| 108 | /**
|
| 109 | * Specify whether the Modal is currently open
|
| 110 | */
|
| 111 | open?: boolean;
|
| 112 | /**
|
| 113 | * Specify whether the modal should be button-less
|
| 114 | */
|
| 115 | passiveModal?: boolean;
|
| 116 | /**
|
| 117 | * Prevent closing on click outside of modal
|
| 118 | */
|
| 119 | preventCloseOnClickOutside?: boolean;
|
| 120 | /**
|
| 121 | * Specify whether the Button should be disabled, or not
|
| 122 | */
|
| 123 | primaryButtonDisabled?: boolean;
|
| 124 | /**
|
| 125 | * Specify the text for the primary button
|
| 126 | */
|
| 127 | primaryButtonText?: React.ReactNode;
|
| 128 | /**
|
| 129 | * Specify the text for the secondary button
|
| 130 | */
|
| 131 | secondaryButtonText?: React.ReactNode;
|
| 132 | /**
|
| 133 | * Specify an array of config objects for secondary buttons
|
| 134 | */
|
| 135 | secondaryButtons?: ModalSecondaryButton[];
|
| 136 | /**
|
| 137 | * Specify a CSS selector that matches the DOM element that should
|
| 138 | * be focused when the Modal opens
|
| 139 | */
|
| 140 | selectorPrimaryFocus?: string;
|
| 141 | /**
|
| 142 | * Specify CSS selectors that match DOM elements working as floating menus.
|
| 143 | * Focusing on those elements won't trigger "focus-wrap" behavior
|
| 144 | */
|
| 145 | selectorsFloatingMenus?: string[];
|
| 146 | /**
|
| 147 | * Specify if Enter key should be used as "submit" action
|
| 148 | */
|
| 149 | shouldSubmitOnEnter?: boolean;
|
| 150 | /**
|
| 151 | * Specify the size variant.
|
| 152 | */
|
| 153 | size?: ModalSize;
|
| 154 | /**
|
| 155 | * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
|
| 156 | */
|
| 157 | slug?: ReactNodeLike;
|
| 158 | }
|
| 159 | declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
|
| 160 | export default Modal;
|