@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/Modal/Modal.js

@@ -0,0 +1,370 @@
+import React from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import View from "react-native-web/dist/exports/View";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import NativeModal from "react-native-web/dist/exports/Modal";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import IconButton from '../IconButton';
+import dictionary from './dictionary';
+import useScrollBlocking from '../utils/useScrollBlocking';
+import ModalContent from './ModalContent';
+import WebModal from './WebModal';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop,
+    containerPaddingBottom,
+    maxWidth,
+    height
+  } = _ref;
+  return {
+    height,
+    maxWidth,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop,
+    paddingBottom: containerPaddingBottom
+  };
+};
+const selectModalStyles = _ref2 => {
+  let {
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    height,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    shadow
+  } = _ref2;
+  return {
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    height,
+    paddingLeft,
+    paddingRight,
+    paddingTop: Platform.OS !== 'web' ? 16 + paddingTop : paddingTop,
+    // the 16 additions are due to the border that is present in the mobile version
+    paddingBottom,
+    ...applyShadowToken(shadow)
+  };
+};
+const selectBackdropStyles = _ref3 => {
+  let {
+    backdropColor,
+    backdropOpacity
+  } = _ref3;
+  return {
+    backgroundColor: backdropColor,
+    opacity: backdropOpacity
+  };
+};
+const selectCloseButtonContainerStyles = _ref4 => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref4;
+  return {
+    paddingRight,
+    paddingTop: Platform.OS !== 'web' ? 24 + paddingTop : paddingTop // The 24 additions are due to the border that is present in the mobile version for the close button
+  };
+};
+const selectScrollViewStyles = () => ({
+  flex: 1
+});
+
+/**
+ * A modal window is a secondary window that opens on top of the main one.
+ * Users have to interact with it before they can carry out their task and return to the main window.
+ * Use to reveal additional information to a user after they have performed an explicit interaction.
+ * They are a strongly discouraged pattern; it's preferred to have all relevant information within a page,
+ * and irrelevant information either linked externally or omitted.
+ *
+ * - Must only appear after a customer interaction, not on page load or any other circumstance
+ * - Open a modal based on explicit customer action e.g. clicking on a button/link/form field
+ * - Only one modal should be "current" at any time
+ * - Read [WebAIM's documentation](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) to create accessible modals
+ * - Don’t use modals to reinforce or repeat information already available in the parent page or view
+ * - Don’t use modals consecutively
+ */
+const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+    children,
+    isOpen,
+    onClose,
+    maxWidth,
+    tokens,
+    copy,
+    closeButton,
+    onCancel = onClose,
+    onConfirm,
+    heading,
+    headingLevel,
+    subHeading,
+    subHeadingSize,
+    bodyText,
+    variant = {},
+    confirmButtonText,
+    confirmButtonVariant,
+    cancelButtonText,
+    cancelButtonType,
+    ...rest
+  } = _ref5;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Modal', tokens, variant, {
+    viewport,
+    maxWidth
+  });
+  const modalRef = useScrollBlocking(isOpen);
+  const modalBodyRef = React.useRef(ref);
+  const modalContentRef = React.useRef(null);
+  const {
+    closeIcon: CloseIconComponent
+  } = themeTokens;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  const handleClose = () => {
+    if (typeof onClose === 'function') onClose();
+  };
+  const handleKeyUp = event => {
+    if (event.key === 'Escape') onClose();
+  };
+  const manageFocus = React.useCallback(event => {
+    if (event.key === 'Tab') {
+      const focusableElements = Array.from(modalBodyRef?.current?.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `) || []);
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }, [modalBodyRef]);
+
+  // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
+  // Hide the close button if `closeButton` is `null`.
+  const showCloseButton = closeButton !== null;
+
+  // These refs are used to manage focus in the web modal container
+  const focusTrapRef = React.useRef(null);
+  const closeButtonRef = React.useRef(null);
+  React.useEffect(() => {
+    if (Platform.OS === 'web') {
+      // Add an event listener to manage keydown and focus in the web modal container
+      document.addEventListener('keydown', manageFocus);
+
+      // Clean up the event listener
+      return () => document.removeEventListener('keydown', manageFocus);
+    }
+    return undefined;
+  }, [manageFocus]);
+  React.useEffect(() => {
+    if (isOpen) {
+      modalContentRef?.current?.focus();
+    }
+  }, [isOpen, modalContentRef?.current?.focus]);
+  if (!isOpen) {
+    return null;
+  }
+  const content = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: [staticStyles.positioningContainer],
+      ref: modalRef,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
+        pointerEvents: "box-none" // don't capture backdrop press events
+        ,
+        children: /*#__PURE__*/_jsxs(View, {
+          ref: modalBodyRef,
+          style: [staticStyles.modal, selectModalStyles(themeTokens)],
+          onKeyUp: handleKeyUp,
+          children: [showCloseButton && /*#__PURE__*/_jsx(View, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: closeButton || /*#__PURE__*/_jsx(IconButton, {
+              onPress: handleClose,
+              icon: CloseIconComponent,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              ref: closeButtonRef
+            })
+          }), /*#__PURE__*/_jsx(ModalContent, {
+            tokens: tokens,
+            variant: variant,
+            onCancel: onCancel,
+            onConfirm: onConfirm,
+            heading: heading,
+            headingLevel: headingLevel,
+            subHeading: subHeading,
+            subHeadingSize: subHeadingSize,
+            bodyText: bodyText,
+            confirmButtonText: confirmButtonText,
+            confirmButtonVariant: confirmButtonVariant,
+            cancelButtonText: cancelButtonText,
+            cancelButtonType: cancelButtonType,
+            children: Platform !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
+              style: selectScrollViewStyles,
+              children: children
+            }) : {
+              children
+            }
+          })]
+        })
+      }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: handleClose,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
+        })
+      })]
+    })
+  });
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/_jsxs(WebModal, {
+      ...selectProps(rest),
+      ref: modalContentRef,
+      children: [content, /*#__PURE__*/_jsx(View, {
+        accessibilityRole: "button",
+        ref: focusTrapRef
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(NativeModal, {
+    transparent: true,
+    ...selectProps(rest),
+    children: content
+  });
+});
+Modal.displayName = 'Modal';
+Modal.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  /**
+   * To define the locale of the copy
+   */
+  copy: copyPropTypes,
+  /**
+   * Setting this to `true` will open the `Modal`
+   */
+  isOpen: PropTypes.bool,
+  /**
+   * This function is triggered when the `Modal` is closed
+   */
+  onClose: PropTypes.func,
+  /**
+   * `max-width` is applied to the `Modal` container
+   */
+  maxWidth: PropTypes.bool,
+  tokens: getTokensPropType('Modal'),
+  variant: variantProp.propType,
+  /**
+   * Pass a react node to override the default close button or pass `null` to hide the close button.
+   */
+  closeButton: PropTypes.node,
+  /**
+   * Receive a string to set the heading of the modal.
+   */
+  heading: PropTypes.string,
+  /**
+   * Receive h3 or h4 to define the level of the heading.
+   */
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  /**
+   * Receive a string to set the sub heading of the modal.
+   */
+  subHeading: PropTypes.string,
+  /**
+   * Receive small, medium or large to set the size of the sub heading.
+   */
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Receive a string to set the bodyText of the modal.
+   */
+  bodyText: PropTypes.string,
+  /**
+   * Receive a string text for the confirm button.
+   */
+  confirmButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the confirm button.
+   */
+  confirmButtonVariant: PropTypes.object,
+  /**
+   * Receive a function for the onConfirm event in the confirm button.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * Receive a string text for the cancel button.
+   */
+  cancelButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the cancel button.
+   */
+  cancelButtonType: PropTypes.elementType,
+  // TODO: figure out a way of passing an icon to the TextButton
+  /**
+   * Receive a function for the onCancel event in the cancel button.
+   */
+  onCancel: PropTypes.func
+};
+export default Modal;
+const staticStyles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    ...Platform.select({
+      web: {
+        cursor: 'pointer'
+      }
+    })
+  },
+  positioningContainer: {
+    flexBasis: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  sizingContainer: {
+    maxHeight: '100%',
+    // so that the container can expand up to the full viewport height
+    width: '100%' // ensure that the modal actually expands to the set maxWidth
+  },
+  modal: {
+    maxHeight: '100%',
+    // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
+    ...Platform.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  }
+});