@instructure/ui-modal 11.6.0 → 11.6.1-snapshot-129

package/src/Modal/v2/index.tsx

@@ -0,0 +1,326 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, Component, isValidElement } from 'react'
+
+import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
+import { createChainedFunction } from '@instructure/ui-utils'
+
+import { Transition } from '@instructure/ui-motion'
+import { Portal } from '@instructure/ui-portal'
+import type { PortalNode } from '@instructure/ui-portal'
+import { Dialog } from '@instructure/ui-dialog'
+import { Mask } from '@instructure/ui-overlays/latest'
+
+import { ModalHeader } from './ModalHeader'
+import { ModalBody } from './ModalBody'
+import { ModalFooter } from './ModalFooter'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type {
+  ModalProps,
+  ModalState,
+  ModalPropsForPortal,
+  ModalPropsForTransition
+} from './props'
+import ModalContext from './ModalContext'
+
+/**
+---
+category: components
+tags: overlay, portal, dialog
+---
+**/
+@withStyle(generateStyle)
+class Modal extends Component<ModalProps, ModalState> {
+  static readonly componentId = 'Modal'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    open: false,
+    size: 'auto',
+    variant: 'default',
+    transition: 'fade',
+    insertAt: 'bottom',
+    shouldCloseOnDocumentClick: true,
+    shouldReturnFocus: true,
+    constrain: 'window',
+    overflow: 'scroll'
+  }
+
+  static Header = ModalHeader
+  static Body = ModalBody
+  static Footer = ModalFooter
+
+  constructor(props: ModalProps) {
+    super(props)
+
+    this.state = {
+      transitioning: false,
+      open: props.open ?? false,
+      windowHeight: 99999,
+      bodyScrollAriaLabel: undefined
+    }
+  }
+
+  _DOMNode: PortalNode = null
+  _content: Dialog | null = null
+
+  ref?: Element | null = null
+
+  handleRef = (el?: Element | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+    window.addEventListener('resize', this.updateHeight)
+  }
+
+  componentDidUpdate(prevProps: ModalProps) {
+    if (this.props.open !== prevProps.open) {
+      this.setState({ transitioning: true, open: !!this.props.open })
+    }
+    this.props.makeStyles?.()
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateHeight)
+  }
+
+  updateHeight = () => {
+    this.setState({ windowHeight: window.innerHeight })
+  }
+
+  get defaultFocusElement() {
+    return this.props.defaultFocusElement
+  }
+
+  get DOMNode() {
+    return this._DOMNode
+  }
+  set DOMNode(el: PortalNode) {
+    this._DOMNode = el
+  }
+
+  get maskPlacement() {
+    if (this.props.overflow === 'fit') {
+      return 'stretch'
+    } else {
+      return 'center'
+    }
+  }
+
+  handlePortalOpen = (DOMNode: PortalNode) => {
+    this.DOMNode = DOMNode
+  }
+
+  handleTransitionComplete: ModalProps['onEntered' | 'onExited'] = () => {
+    this.setState({
+      transitioning: false
+    })
+  }
+
+  contentRef = (el: Dialog | null) => {
+    this._content = el
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(el)
+    }
+  }
+
+  renderChildren() {
+    const { children, variant, overflow, styles } = this.props
+    const childrenArray = Children.toArray(children)
+
+    const headerAndBody: React.ReactNode[] = []
+    const others: React.ReactNode[] = []
+
+    childrenArray.forEach((child) => {
+      if (isValidElement(child)) {
+        if (child.type === Modal.Header || child.type === Modal.Body) {
+          headerAndBody.push(this.cloneChildWithProps(child, variant, overflow))
+        } else {
+          others.push(this.cloneChildWithProps(child, variant, overflow))
+        }
+      }
+    })
+
+    // Putting ModalHeader and ModalBody into the same container, so they can be styled together;
+    // this is needed to apply a media query breakpoint
+    const wrappedHeaderAndBody =
+      headerAndBody.length > 0 ? (
+        <div key="header-and-body" css={styles?.joinedHeaderAndBody}>
+          {headerAndBody}
+        </div>
+      ) : null
+
+    return [...(wrappedHeaderAndBody ? [wrappedHeaderAndBody] : []), ...others]
+  }
+
+  cloneChildWithProps(
+    child: React.ReactNode,
+    variant: string | undefined,
+    overflow: string | undefined
+  ) {
+    if (isValidElement(child)) {
+      return safeCloneElement(child, {
+        variant: variant,
+        overflow: (child?.props as { overflow: string })?.overflow || overflow
+      })
+    } else {
+      return child
+    }
+  }
+
+  renderDialog(
+    props: Omit<
+      ModalProps,
+      | keyof ModalPropsForPortal
+      | keyof ModalPropsForTransition
+      | 'constrain'
+      | 'overflow'
+    >
+  ) {
+    const {
+      onDismiss,
+      label,
+      shouldCloseOnDocumentClick,
+      shouldReturnFocus,
+      liveRegion,
+      size,
+      constrain,
+      as,
+      styles
+    } = this.props
+
+    const isFullScreen = size === 'fullscreen'
+    const dialog = (
+      <Dialog
+        {...passthroughProps(props)}
+        as={as}
+        open
+        label={label}
+        defaultFocusElement={this.defaultFocusElement}
+        shouldCloseOnDocumentClick={shouldCloseOnDocumentClick}
+        shouldCloseOnEscape
+        shouldContainFocus
+        shouldReturnFocus={shouldReturnFocus}
+        liveRegion={liveRegion}
+        onDismiss={onDismiss}
+        css={styles?.modal}
+        ref={this.contentRef}
+        // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
+      >
+        {this.renderChildren()}
+      </Dialog>
+    )
+
+    return (
+      <Mask
+        placement={this.maskPlacement}
+        fullscreen={constrain === 'window'}
+        themeOverride={
+          isFullScreen ? { borderRadius: '0em', borderWidth: '0em' } : {}
+        }
+      >
+        {dialog}
+      </Mask>
+    )
+  }
+
+  render() {
+    const {
+      open,
+      onOpen,
+      onClose,
+      mountNode,
+      insertAt,
+      transition,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      constrain,
+      overflow, // TODO this is not used currently
+      ...passthroughProps
+    } = this.props
+
+    const portalIsOpen = this.state.open || this.state.transitioning
+
+    return (
+      <Portal
+        mountNode={mountNode}
+        insertAt={insertAt}
+        open={portalIsOpen}
+        onOpen={this.handlePortalOpen}
+        data-cid="Modal"
+      >
+        <Transition
+          in={open}
+          transitionOnMount
+          type={transition}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={createChainedFunction(
+            this.handleTransitionComplete,
+            onEntered,
+            onOpen
+          )}
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={createChainedFunction(
+            this.handleTransitionComplete,
+            onExited,
+            onClose
+          )}
+        >
+          <ModalContext.Provider
+            value={{
+              bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+              setBodyScrollAriaLabel: (txt: string) =>
+                this.setState({ bodyScrollAriaLabel: txt })
+            }}
+          >
+            {constrain === 'parent' ? (
+              <span css={this.props.styles?.constrainContext}>
+                {this.renderDialog(passthroughProps)}
+              </span>
+            ) : (
+              this.renderDialog(passthroughProps)
+            )}
+          </ModalContext.Provider>
+        </Transition>
+      </Portal>
+    )
+  }
+}
+
+export default Modal
+export { Modal, ModalHeader, ModalBody, ModalFooter }

package/src/Modal/v2/props.ts

@@ -0,0 +1,235 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { Dialog } from '@instructure/ui-dialog'
+
+import type {
+  AsElementType,
+  ModalTheme,
+  OtherHTMLAttributes,
+  LiveRegion,
+  UIElement
+} from '@instructure/shared-types'
+import type { PositionMountNode } from '@instructure/ui-position'
+import type { TransitionType } from '@instructure/ui-motion'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+type ModalPropsForPortal = {
+  /**
+   * Whether or not the `<Modal />` is open
+   */
+  open?: boolean
+
+  /**
+   * An element or a function returning an element to use as the mount node
+   * for the `<Modal />` (defaults to `document.body`)
+   */
+  mountNode?: PositionMountNode
+
+  /**
+   * Insert the element at the 'top' of the mountNode or at the 'bottom'
+   */
+  insertAt?: 'bottom' | 'top'
+
+  /**
+   * Callback fired when `<Modal />` content has been mounted in the DOM
+   */
+  onOpen?: (type?: TransitionType) => void
+
+  /**
+   * Callback fired when `<Modal />` has been unmounted from the DOM
+   */
+  onClose?: () => void
+}
+
+type ModalPropsForTransition = {
+  transition?: TransitionType
+
+  /**
+   * Callback fired before the <Modal /> transitions in
+   */
+  onEnter?: () => void
+
+  /**
+   * Callback fired as the <Modal /> begins to transition in
+   */
+  onEntering?: () => void
+
+  /**
+   * Callback fired after the <Modal /> finishes transitioning in
+   */
+  onEntered?: (type?: TransitionType) => void
+
+  /**
+   * Callback fired right before the <Modal /> transitions out
+   */
+  onExit?: () => void
+
+  /**
+   * Callback fired as the <Modal /> begins to transition out
+   */
+  onExiting?: () => void
+
+  /**
+   * Callback fired after the <Modal /> finishes transitioning out
+   */
+  onExited?: (type?: TransitionType) => void
+}
+
+type ModalPropsForDialog = {
+  /**
+   * An accessible label for the `<Modal />` content
+   */
+  label: string
+
+  /**
+   * The element to render the dialog as, `span` by default
+   */
+  as?: AsElementType
+
+  /**
+   * Whether focus should be returned to the trigger when the `<Modal/>` is closed
+   */
+  shouldReturnFocus?: boolean
+
+  /**
+   * Whether the `<Modal/>` should request close when the document is clicked
+   */
+  shouldCloseOnDocumentClick?: boolean
+
+  /**
+   * Callback fired when the `<Modal />` is requesting to be closed
+   */
+  onDismiss?: (
+    event: React.UIEvent | React.FocusEvent,
+    documentClick?: boolean
+  ) => void
+
+  /**
+   * An element, function returning an element, or array of elements that will not be hidden from
+   * the screen reader when the `<Modal />` is open
+   */
+  liveRegion?: LiveRegion
+
+  /**
+   * An element or a function returning an element to focus by default
+   */
+  defaultFocusElement?: UIElement
+}
+
+type ModalOwnProps = {
+  /**
+   * Recommended children types are: `Modal.Header`, `Modal.Body`, `Modal.Footer`. Custom children can be used as well. `Variant` and `overflow` properties are always passed down to children.
+   */
+  children: React.ReactNode
+
+  /**
+   * The size of the `<Modal />` content
+   */
+  size?: 'auto' | 'small' | 'medium' | 'large' | 'fullscreen'
+
+  /**
+   * Designates the background style of the `<Modal />`
+   */
+  variant?: 'default' | 'inverse'
+
+  /**
+   *
+   * A function that returns a reference to the content element
+   */
+  contentRef?: (dialog: Dialog | null) => void
+
+  /**
+   * Constrain the Modal to the document window or its closest positioned parent
+   */
+  constrain?: 'window' | 'parent'
+
+  /**
+   * Should ModalBody handle overflow with scrollbars, or fit its
+   * content within its own height?
+   */
+  overflow?: 'scroll' | 'fit'
+} & ModalPropsForPortal &
+  ModalPropsForTransition &
+  ModalPropsForDialog
+
+type PropKeys = keyof ModalOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ModalProps = ModalOwnProps &
+  WithStyleProps<ModalTheme, ModalStyle> &
+  OtherHTMLAttributes<ModalOwnProps>
+
+type ModalStyle = ComponentStyle<
+  'modal' | 'constrainContext' | 'joinedHeaderAndBody'
+>
+
+type ModalState = {
+  transitioning: boolean
+  open: boolean
+  windowHeight: number
+  /**
+   * The `aria-label` on the Modal's body if it's scrollable.
+   */
+  bodyScrollAriaLabel?: string
+}
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'children',
+  'as',
+  'size',
+  'variant',
+  'open',
+  'defaultFocusElement',
+  'shouldReturnFocus',
+  'shouldCloseOnDocumentClick',
+  'onOpen',
+  'onClose',
+  'onDismiss',
+  'contentRef',
+  'mountNode',
+  'insertAt',
+  'liveRegion',
+  'transition',
+  'onEnter',
+  'onEntering',
+  'onEntered',
+  'onExit',
+  'onExiting',
+  'onExited',
+  'constrain',
+  'overflow'
+]
+
+export type {
+  ModalProps,
+  ModalStyle,
+  ModalState,
+  ModalPropsForPortal,
+  ModalPropsForTransition,
+  ModalPropsForDialog
+}
+export { allowedProps }

package/src/Modal/v2/styles.ts

@@ -0,0 +1,130 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { ModalProps, ModalStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['Modal'],
+  props: ModalProps
+): ModalStyle => {
+  const { size, variant, overflow } = props
+
+  const commonSizeStyleExceptForFullscreen = {
+    maxWidth: '95%',
+    maxHeight: '95%',
+    ...(overflow === 'fit' && {
+      transform: 'translateY(2.5%)'
+    })
+  }
+
+  const sizeStyles = {
+    auto: {
+      flex: '0 1 auto',
+      minWidth: componentTheme.autoMinWidth,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    small: {
+      flex: `0 1 ${componentTheme.smallMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    medium: {
+      flex: `0 1 ${componentTheme.mediumMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    large: {
+      flex: `0 1 ${componentTheme.largeMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    fullscreen: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+      boxShadow: 'none',
+      border: 'none',
+      borderRadius: 0
+    }
+  }
+  const backgroundStyles =
+    variant === 'inverse'
+      ? {
+          background: componentTheme.inverseBackgroundColor,
+          border: `${componentTheme.borderWidth} solid ${componentTheme.inverseBorderColor}`,
+          color: componentTheme.inverseTextColor
+        }
+      : {
+          background: componentTheme.backgroundColor,
+          border: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`,
+          color: componentTheme.textColor
+        }
+
+  return {
+    modal: {
+      label: 'modal',
+      fontFamily: componentTheme.fontFamily,
+      display: 'flex',
+      minWidth: '1px',
+      flexDirection: 'column',
+      position: 'relative',
+      boxSizing: 'border-box',
+      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
+      borderRadius: componentTheme.borderRadius,
+      overflow: 'hidden',
+      ...sizeStyles[size!],
+      ...backgroundStyles
+    },
+    constrainContext: {
+      label: 'modal__constrainContext',
+      display: 'block',
+      position: 'relative',
+      width: '100%',
+      height: '100%'
+    },
+    joinedHeaderAndBody: {
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flex: '1 1 auto',
+      // ModalHeader and ModalBody is set to scrollable above 20rem height instead of just the ModalBody
+      '@media (max-height: 20rem)': {
+        overflowY: 'auto',
+        maxHeight: '20rem'
+      }
+    }
+  }
+}
+
+export default generateStyle

package/src/{index.ts → exports/a.ts}

@@ -21,9 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Modal, ModalBody, ModalFooter, ModalHeader } from './Modal'
+export { Modal, ModalBody, ModalFooter, ModalHeader } from '../Modal/v1'
 
-export type { ModalProps } from './Modal/props'
-export type { ModalBodyProps } from './Modal/ModalBody/props'
-export type { ModalFooterProps } from './Modal/ModalFooter/props'
-export type { ModalHeaderProps } from './Modal/ModalHeader/props'
+export type { ModalProps } from '../Modal/v1/props'
+export type { ModalBodyProps } from '../Modal/v1/ModalBody/props'
+export type { ModalFooterProps } from '../Modal/v1/ModalFooter/props'
+export type { ModalHeaderProps } from '../Modal/v1/ModalHeader/props'