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

package/src/Modal/{ModalFooter → v1/ModalFooter}/index.tsx

@@ -25,7 +25,7 @@
 import { Component } from 'react'
 
 import { passthroughProps } from '@instructure/ui-react-utils'
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 

package/src/Modal/{ModalHeader → v1/ModalHeader}/index.tsx

@@ -29,10 +29,10 @@ import {
   passthroughProps
 } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
-import { CloseButton } from '@instructure/ui-buttons'
-import type { CloseButtonProps } from '@instructure/ui-buttons'
+import { CloseButton } from '@instructure/ui-buttons/v11_6'
+import type { CloseButtonProps } from '@instructure/ui-buttons/v11_6'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Modal/{index.tsx → v1/index.tsx}

@@ -31,13 +31,13 @@ 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'
+import { Mask } from '@instructure/ui-overlays/v11_6'
 
 import { ModalHeader } from './ModalHeader'
 import { ModalBody } from './ModalBody'
 import { ModalFooter } from './ModalFooter'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Modal/v2/ModalBody/index.tsx

@@ -0,0 +1,164 @@
+/*
+ * 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 { Component } from 'react'
+
+import { View } from '@instructure/ui-view/latest'
+import { omitProps } from '@instructure/ui-react-utils'
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
+
+import { withStyle } from '@instructure/emotion'
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { ModalBodyProps } from './props'
+import { UIElement } from '@instructure/shared-types'
+import ModalContext from '../ModalContext'
+
+/**
+---
+parent: Modal
+id: Modal.Body
+---
+**/
+@withStyle(generateStyle, 'ModalBody')
+class ModalBody extends Component<ModalBodyProps> {
+  static readonly componentId = 'Modal.Body'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    padding: 'medium',
+    as: 'div',
+    variant: 'default'
+  }
+
+  ref: UIElement | null = null
+
+  handleRef = (el: UIElement | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  constructor(props: ModalBodyProps) {
+    super(props)
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+
+    // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
+    const style = this.ref && getCSSStyleDeclaration(this.ref)
+    const isFirefox = !!(
+      style &&
+      Array.prototype.slice
+        .call(style)
+        .join('')
+        .match(/(?:-moz-)/)
+    )
+
+    if (isFirefox) {
+      this.setState({ isFirefox })
+    }
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  getFinalRef(el: UIElement): Element | undefined {
+    if (!el) {
+      return undefined
+    }
+    if (el instanceof Element) {
+      return el
+    }
+    if ((el as unknown as { ref: UIElement }).ref) {
+      return this.getFinalRef((el as unknown as { ref: UIElement }).ref)
+    }
+    return undefined
+  }
+
+  render() {
+    const {
+      as,
+      elementRef,
+      overflow,
+      variant,
+      padding,
+      spacing,
+      children,
+      ...rest
+    } = this.props
+
+    const passthroughProps = View.omitViewProps(
+      omitProps(rest, ModalBody.allowedProps),
+      ModalBody
+    )
+    const isFit = overflow === 'fit'
+    // this recursive function is needed because `ref` can be a React component.
+    // TODO rethink, the 'as' prop, likely its not a good idea to allow React
+    // components. See INSTUI-4674
+    const finalRef = this.getFinalRef(this.ref)
+    const hasScrollbar =
+      finalRef &&
+      Math.abs(
+        (finalRef.scrollHeight ?? 0) -
+          (finalRef.getBoundingClientRect()?.height ?? 0)
+      ) > 1
+    return (
+      <ModalContext.Consumer>
+        {(value) => (
+          <View
+            {...passthroughProps}
+            display="block"
+            data-cid="ModalBody"
+            width={isFit ? '100%' : undefined}
+            height={isFit ? '100%' : undefined}
+            elementRef={this.handleRef}
+            as={as}
+            css={this.props.styles?.modalBody}
+            padding={spacing ? undefined : padding}
+            // check if there is a scrollbar, if so, the element has to be tabbable
+            {...(hasScrollbar
+              ? {
+                  tabIndex: 0,
+                  'aria-label': value.bodyScrollAriaLabel
+                }
+              : {})}
+          >
+            {children}
+          </View>
+        )}
+      </ModalContext.Consumer>
+    )
+  }
+}
+
+export default ModalBody
+export { ModalBody }

package/src/Modal/v2/ModalBody/props.ts

@@ -0,0 +1,72 @@
+/*
+ * 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 type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  AsElementType,
+  ModalBodyTheme,
+  OtherHTMLAttributes,
+  UIElement
+} from '@instructure/shared-types'
+
+type ModalBodyOwnProps = {
+  children?: React.ReactNode
+  padding?: Spacing
+  elementRef?: (element: UIElement | null) => void
+  as?: AsElementType
+  variant?: 'default' | 'inverse'
+  overflow?: 'scroll' | 'fit'
+  spacing?: 'default' | 'compact'
+}
+
+type PropKeys = keyof ModalBodyOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ModalBodyProps = ModalBodyOwnProps &
+  WithStyleProps<ModalBodyTheme, ModalBodyStyle> &
+  OtherHTMLAttributes<ModalBodyOwnProps>
+
+type ModalBodyStyle = ComponentStyle<'modalBody'>
+
+type ModalBodyState = {
+  isFirefox: boolean
+}
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'padding',
+  'elementRef',
+  'as',
+  'variant',
+  'overflow',
+  'spacing'
+]
+
+export type { ModalBodyProps, ModalBodyState, ModalBodyStyle }
+export { allowedProps }

package/src/Modal/v2/ModalBody/styles.ts

@@ -0,0 +1,76 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { ModalBodyProps, ModalBodyStyle } 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['ModalBody'],
+  props: ModalBodyProps
+): ModalBodyStyle => {
+  const { variant, spacing } = props
+
+  const sizeVariants = {
+    default: { padding: componentTheme.padding },
+    compact: { padding: componentTheme.paddingCompact }
+  }
+
+  const backgroundStyle =
+    variant === 'inverse'
+      ? {
+          background: componentTheme.inverseBackgroundColor
+        }
+      : {}
+
+  return {
+    modalBody: {
+      label: 'modalBody',
+      borderRadius: 0,
+      boxSizing: 'border-box',
+      flex: '1 1 auto',
+      '&:focus': {
+        outline: 'none'
+      },
+      // ModalBody is set to scrollable above 20rem height
+      '@media (min-height: 20rem)': {
+        overflowY: 'auto'
+      },
+      ...(spacing ? sizeVariants[spacing] : {}),
+      ...backgroundStyle
+    }
+  }
+}
+
+export default generateStyle

package/src/Modal/v2/ModalContext.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 { createContext } from 'react'
+
+type ModalContextType = {
+  /**
+   * Needed for setting the correct aria-label in the modal body when its scrollable.
+   * This is a value read from the Modal's Header.
+   */
+  bodyScrollAriaLabel?: string
+  setBodyScrollAriaLabel?: (txt: string) => void
+}
+
+/**
+ * React context created by the `Modal` component
+ * @private
+ */
+const ModalContext = createContext<ModalContextType>({
+  bodyScrollAriaLabel: undefined
+})
+
+export default ModalContext
+export { ModalContext }
+export type { ModalContextType }

package/src/Modal/v2/ModalFooter/index.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 { Component } from 'react'
+
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { withStyle } from '@instructure/emotion'
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { ModalFooterProps } from './props'
+
+/**
+---
+parent: Modal
+id: Modal.Footer
+---
+**/
+@withStyle(generateStyle, 'ModalFooter')
+class ModalFooter extends Component<ModalFooterProps> {
+  static readonly componentId = 'Modal.Footer'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    variant: 'default'
+  }
+
+  ref: HTMLDivElement | null = null
+
+  handleRef = (el: HTMLDivElement | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const { children, ...rest } = this.props
+
+    return (
+      <div
+        css={this.props.styles?.modalFooter}
+        {...passthroughProps(rest)}
+        ref={this.handleRef}
+        data-cid="ModalFooter"
+      >
+        {children}
+      </div>
+    )
+  }
+}
+
+export default ModalFooter
+export { ModalFooter }

package/src/Modal/v2/ModalFooter/props.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 type {
+  ModalFooterTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+type ModalFooterOwnProps = {
+  children?: React.ReactNode
+  variant?: 'default' | 'inverse'
+  spacing?: 'default' | 'compact'
+}
+
+type PropKeys = keyof ModalFooterOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ModalFooterProps = ModalFooterOwnProps &
+  WithStyleProps<ModalFooterTheme, ModalFooterStyle> &
+  OtherHTMLAttributes<ModalFooterOwnProps>
+
+type ModalFooterStyle = ComponentStyle<'modalFooter'>
+const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']
+
+export type { ModalFooterProps, ModalFooterStyle }
+export { allowedProps }

package/src/Modal/v2/ModalFooter/styles.ts

@@ -0,0 +1,74 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { ModalFooterProps, ModalFooterStyle } 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['ModalFooter'],
+  props: ModalFooterProps
+): ModalFooterStyle => {
+  const { variant, spacing } = props
+
+  const backgroundStyle =
+    variant === 'inverse'
+      ? {
+          background: componentTheme.inverseBackgroundColor,
+          borderTop: `${componentTheme.borderWidth} solid ${componentTheme.inverseBorderColor}`
+        }
+      : {
+          background: componentTheme.backgroundColor,
+          borderTop: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`
+        }
+
+  return {
+    modalFooter: {
+      label: 'modalFooter',
+      flex: '0 0 auto',
+      boxSizing: 'border-box',
+      padding:
+        spacing === 'compact'
+          ? componentTheme.paddingCompact
+          : componentTheme.padding,
+      borderBottomRightRadius: componentTheme.borderRadius,
+      borderBottomLeftRadius: componentTheme.borderRadius,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      ...backgroundStyle
+    }
+  }
+}
+
+export default generateStyle