@wix/design-system
Version:
@wix/design-system
65 lines • 3.53 kB
TypeScript
import { MouseEvent, KeyboardEvent, ReactNode } from 'react';
export interface ModalProps {
/** Renders modal content */
children?: ReactNode;
/** Applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook?: string;
/** Controls if modal is open or closed */
isOpen: boolean;
/** Border radius of modal */
borderRadius?: number;
/** a11y: The value of contentLabel is set as an aria-label on the modal element. This helps assistive technology, like screen readers, to add a label to an element that would otherwise be anonymous */
contentLabel?: string;
/** Controls z-index of the modal overlay */
zIndex?: number;
/** Enables to close modal when mouse clicked on overlay area */
shouldCloseOnOverlayClick?: boolean;
/** Displays a close button on the top right corner of the overlay */
shouldDisplayCloseButton?: boolean;
/** Callback that will be executed when the modal is requested to be closed, prior to actually closing */
onRequestClose?: (event?: MouseEvent | KeyboardEvent) => void;
/** Callback that will be executed after the modal has been opened */
onAfterOpen?: () => void;
/** Callback that will be executed after the modal has been closed */
onAfterClose?: () => void;
/** Horizontal position of the modal */
horizontalPosition?: ModalHorizontalPosition;
/** Vertical position of the modal */
verticalPosition?: ModalVerticalPosition;
/** Number indicating the milliseconds to wait before closing the modal */
closeTimeoutMS?: number;
/** Specifies if modal portal supports scroll */
scrollable?: boolean;
/** Specifies if modal content should become scrollable when modal size will fit the window */
scrollableContent?: boolean;
/** Sets the maximum height for a scrollable content */
maxHeight?: string;
/** Sets the height for modal's content container */
height?: string;
/** css position of the modal overlay */
overlayPosition?: ModalOverlayPosition;
/** A function that returns a DOM element on which the modal should be appended to */
parentSelector?: () => HTMLElement;
/** Selector specifying where to apply the aria-hidden attribute */
appElement?: string;
onOk?: () => void;
/** Specifies minimum spacing between full viewport and modal content */
screen?: ModalScreen;
/** Enable navigation previous buttons to the side of the content and listen on clicks by using onNavigationClickPrevious */
showNavigationPreviousButton?: boolean;
/** Enable navigation next button to the side of the content and listen on clicks by using onNavigationClickNext */
showNavigationNextButton?: boolean;
/** Callback that will be executed when the navigation control previous is clicked */
onNavigationClickPrevious?: () => void;
/** Callback that will be executed when the navigation control next is clicked */
onNavigationClickNext?: () => void;
/** Label used for navigation control previous button tooltip */
navigationPreviousLabel?: string;
/** Label used for navigation control next button tooltip */
navigationNextLabel?: string;
}
export type ModalHorizontalPosition = 'start' | 'center' | 'end';
export type ModalVerticalPosition = 'start' | 'center' | 'end';
export type ModalOverlayPosition = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
export type ModalScreen = 'full' | 'desktop' | 'mobile';
//# sourceMappingURL=Modal.types.d.ts.map