Modal component

components/higher-order/with-focus-contain/index.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { Component, createRef } from '@wordpress/element';
+import { focus } from '@wordpress/utils';
+
+const withFocusContain = ( WrappedComponent ) => {
+	return class extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.focusContainRef = createRef();
+			this.handleTabBehaviour = this.handleTabBehaviour.bind( this );
+		}
+
+		handleTabBehaviour( event ) {
+			if ( event.keyCode === 9 ) {
+				const tabbables = focus.tabbable.find( this.focusContainRef.current );
+				if ( ! tabbables.length ) {
+					return;
+				}
+				const firstTabbable = tabbables[ 0 ];
+				const lastTabbable = tabbables[ tabbables.length - 1 ];
+
+				if ( event.shiftKey && event.target === firstTabbable ) {
+					event.preventDefault();
+					return lastTabbable.focus();
+				} else if ( ! event.shiftKey && event.target === lastTabbable ) {
+					event.preventDefault();
+					return firstTabbable.focus();
+				}
+			}
+		}
+
+		componentDidMount() {
+			this.focusContainRef.current.addEventListener( 'keydown', this.handleTabBehaviour );
+		}
+
+		componentWillUnmount() {
+			this.focusContainRef.current.addEventListener( 'keydown', this.handleTabBehaviour );
+		}
+
+		render() {
+			return (
+				<div ref={ this.focusContainRef }>
+					<WrappedComponent { ...this.props } />
+				</div>
+			);
+		}
+	};
+};
+
+export default withFocusContain;

components/index.js

@@ -25,6 +25,7 @@ export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';
 export { default as MenuItemsChoice } from './menu-items-choice';
+export { default as Modal } from './modal';
 export { default as ScrollLock } from './scroll-lock';
 export { NavigableMenu, TabbableContainer } from './navigable-container';
 export { default as Notice } from './notice';

components/modal/README.md

@@ -0,0 +1,117 @@
+RangeControl
+=======
+
+The modal is used to create an accessible modal over an application.
+
+**Note:** The API for this modal has been mimicked to resemble `react-modal`.
+
+## Usage
+
+Render a screen overlay with a modal on top.
+```js
+// When the app element is set it puts an aria-hidden="true" to the provided node.
+Modal.setAppElement( document.getElementById( 'wpwrap' ).parentNode )
+```
+```jsx
+    <Modal
+        aria={ {
+            labelledby: 'modal-title',
+            describedby: 'modal-description',
+        } }
+        parentSelector={ () => {
+            return document.getElementById( 'wpwrap' );
+        } )
+        >
+        <ModalContent>
+            <h2 id="modal-title">My awesome modal!</h2>
+            <p id="modal-description">This modal is meant to be awesome!</p>
+        </ModalConent>
+    </Modal>
+```
+
+## Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the input elements.
+
+### onRequestClose
+
+This function is called to indicate that the modal should be closed.
+
+- Type: `function`
+- Required: Yes
+
+### contentLabel
+
+If this property is added, it will be added to the modal content `div` as `aria-label`.
+You are encouraged to use this if `aria.labelledby` is not provided.
+
+- Type: `String`
+- Required: No
+
+### aria.labelledby
+
+If this property is added, it will be added to the modal content `div` as `aria-labelledby`.
+You are encouraged to use this when the modal is visually labelled.
+
+- Type: `String`
+- Required: No
+
+### aria.describedby
+
+If this property is added, it will be added to the modal content `div` as `aria-describedby`.
+
+- Type: `String`
+- Required: No
+
+### focusOnMount
+
+If this property is true, it will focus the first tabbable element rendered in the modal.
+
+- Type: `bool`
+- Required: No
+- Default: true
+
+### shouldCloseOnEsc
+
+If this property is added, it will determine whether the modal requests to close when the escape key is pressed. 
+
+- Type: `bool`
+- Required: No
+- Default: true
+
+### shouldCloseOnClickOutside
+
+If this property is added, it will determine whether the modal requests to close when a mouse click occurs outside of the modal content.
+
+- Type: `bool`
+- Required: No
+- Default: true
+
+### style.content
+
+If this property is added, it will add inline styles to the modal content `div`.
+
+- Type: `Object`
+- Required: No
+
+### style.overlay
+
+If this property is added, it will add inline styles to the modal overlay `div`.
+
+- Type: `Object`
+- Required: No
+
+### className
+
+If this property is added, it will an additional class name to the modal content `div`.
+
+- Type: `String`
+- Required: No
+
+### overlayClassName
+
+If this property is added, it will an additional class name to the modal overlay `div`.
+
+- Type: `String`
+- Required: No

components/modal/aria-helper.js

@@ -0,0 +1,19 @@
+let appElement = null;
+
+export function setAppElement( node ) {
+	if ( ! appElement ) {
+		appElement = node;
+	}
+}
+
+export function hideApp() {
+	if ( appElement ) {
+		appElement.setAttribute( 'aria-hidden', 'true' );
+	}
+}
+
+export function showApp() {
+	if ( appElement ) {
+		appElement.removeAttribute( 'aria-hidden' );
+	}
+}

components/modal/index.js

@@ -0,0 +1,121 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component, createPortal } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ModalContent from './modal-content';
+import * as ariaHelper from './aria-helper';
+import './style.scss';
+
+// Used to count the number of open modals.
+let modalCount = 0;
+
+let parentElement;
+
+class Modal extends Component {
+	static setAppElement( node ) {
+		ariaHelper.setAppElement( node );
+	}
+
+	static setParentElement( node ) {
+		if ( ! parentElement ) {
+			parentElement = node;
+		}
+	}
+
+	componentDidMount() {
+		modalCount++;
+
+		if ( ! this.parentElement ) {
+			setElements();
+		}
+
+		ariaHelper.hideApp();
+		parentElement.appendChild( this.node );
+	}
+
+	componentWillUnmount() {
+		modalCount--;
+
+		if ( modalCount === 0 ) {
+			ariaHelper.showApp();
+		}
+		parentElement.removeChild( this.node );
+	}
+
+	render() {
+		const {
+			overlayClassName,
+			className,
+			style: {
+				content,
+				overlay,
+			},
+			children,
+			...otherProps
+		} = this.props;
+
+		if ( ! this.node ) {
+			this.node = document.createElement( 'div' );
+		}
+
+		return createPortal(
+			<div
+				className={ classnames(
+					'components-modal__screen-overlay',
+					overlayClassName
+				) }
+				style={ overlay }>
+				<ModalContent
+					style={ content }
+					className={ classnames(
+						'components-modal__content',
+						className
+					) }
+					{ ...otherProps } >
+					{ children }
+				</ModalContent>
+			</div>,
+			this.node
+		);
+	}
+}
+
+Modal.defaultProps = {
+	className: null,
+	overlayClassName: null,
+	onRequestClose: noop,
+	focusOnMount: true,
+	shouldCloseOnEsc: true,
+	shouldCloseOnClickOutside: true,
+	style: {
+		content: null,
+		overlay: null,
+	},
+	/* accessibility */
+	contentLabel: null,
+	aria: {
+		labelledby: null,
+		describedby: null,
+	},
+};
+
+function setElements() {
+	const wpwrapEl = document.getElementById( 'wpwrap' );
+
+	if ( wpwrapEl ) {
+		Modal.setAppElement( wpwrapEl );
+		Modal.setParentElement( wpwrapEl.parentNode );
+	}
+}
+
+export default Modal;