feat(ui-overlays) rework Mask

packages/ui-overlays/package.json

@@ -80,11 +80,11 @@
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     },
     "./latest": {
       "src": "./src/exports/a.ts",

packages/ui-overlays/src/Mask/v2/MaskCounter.ts

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+const MaskCounter = (() => {
+  let counter = 0
+  const getCounter = () => counter
+  const setCounter = (value: number) => {
+    counter = value
+  }
+  const incrementCounter = () => {
+    setCounter(getCounter() + 1)
+  }
+
+  const decrementCounter = () => {
+    setCounter(getCounter() - 1)
+  }
+
+  return {
+    getCounter,
+    setCounter,
+    incrementCounter,
+    decrementCounter
+  }
+})()
+
+export default MaskCounter

packages/ui-overlays/src/Mask/v2/README.md

@@ -0,0 +1,56 @@
+---
+describes: Mask
+---
+
+A Mask component covers its closest positioned parent (either absolute or relative).
+
+```js
+---
+type: example
+---
+<View
+  padding="large"
+  margin="medium"
+  textAlign="center"
+  as="div"
+  style={{ position: 'relative' }}
+>
+  <Heading>Some content that is masked</Heading>
+  <Mask />
+</View>
+```
+
+The Mask component can be configured to cover the full screen if it is rendered inside a [Portal](Portal).
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [open, setOpen] = useState(false)
+
+  const handleButtonClick = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <div>
+      <Button onClick={handleButtonClick}>
+        {open ? 'Close' : 'Open'} the Mask
+      </Button>
+      <Portal open={open}>
+        <Mask
+          fullscreen
+          onClick={() => {
+            setOpen(false)
+          }}
+        >
+          <Heading>Click anywhere around this text to close the Mask</Heading>
+        </Mask>
+      </Portal>
+    </div>
+  )
+}
+
+render(<Example />)
+```

packages/ui-overlays/src/Mask/v2/index.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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 noScroll from 'no-scroll'
+
+import { withStyle } from '@instructure/emotion'
+import type { ComponentStyle } from '@instructure/emotion'
+import { ensureSingleChild, omitProps } from '@instructure/ui-react-utils'
+
+import generateStyle from './styles'
+
+import type { MaskProps } from './props'
+import { allowedProps } from './props'
+import MaskCounter from './MaskCounter'
+
+/**
+---
+category: components/utilities
+---
+**/
+@withStyle(generateStyle)
+class Mask extends Component<MaskProps> {
+  static readonly componentId = 'Mask'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    placement: 'center',
+    fullscreen: false
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+
+    if (this.props.fullscreen) {
+      noScroll.on()
+      MaskCounter.incrementCounter()
+    }
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  componentWillUnmount() {
+    if (this.props.fullscreen) {
+      MaskCounter.decrementCounter()
+      if (MaskCounter.getCounter() <= 0) {
+        noScroll.off()
+      }
+    }
+  }
+
+  ref: Element | null = null
+
+  handleElementRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  // It can be a ref for any type of child
+  _content: any
+
+  contentRef: React.LegacyRef<any> = (el) => {
+    this._content = el
+  }
+
+  render() {
+    const content = ensureSingleChild(this.props.children, {
+      ref: this.contentRef
+    })
+
+    const props: React.ClassAttributes<HTMLSpanElement> &
+      React.HTMLAttributes<HTMLSpanElement> & {
+        css?: ComponentStyle<'mask'>['mask']
+      } = {
+      ...omitProps(this.props, Mask.allowedProps),
+      css: this.props.styles?.mask,
+      ref: this.handleElementRef
+    }
+
+    if (typeof this.props.onClick === 'function') {
+      props.onClick = this.props.onClick
+      props.tabIndex = -1
+    }
+
+    return <span {...props}>{content}</span>
+  }
+}
+
+export default Mask
+export { Mask }

packages/ui-overlays/src/Mask/v2/props.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 { MaskTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+type MaskOwnProps = {
+  children?: React.ReactNode
+  placement?: 'top' | 'center' | 'bottom' | 'stretch'
+  fullscreen?: boolean
+  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+}
+
+type PropKeys = keyof MaskOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type MaskProps = MaskOwnProps &
+  WithStyleProps<MaskTheme, MaskStyle> &
+  OtherHTMLAttributes<MaskOwnProps>
+
+type MaskStyle = ComponentStyle<'mask'>
+const allowedProps: AllowedPropKeys = [
+  'placement',
+  'fullscreen',
+  'children',
+  'onClick',
+  'elementRef'
+]
+
+export type { MaskProps, MaskStyle }
+export { allowedProps }

packages/ui-overlays/src/Mask/v2/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 { MaskProps, MaskStyle } 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 token object that stores common values for the theme.
+ * @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['Mask'],
+  props: MaskProps
+): MaskStyle => {
+  const { placement, fullscreen } = props
+
+  const positionStyles = fullscreen
+    ? { position: 'fixed' }
+    : { position: 'absolute' }
+
+  const placementStyles = {
+    top: { alignItems: 'flex-start' },
+    center: { alignItems: 'center' },
+    bottom: { alignItems: 'flex-end' },
+    stretch: { alignItems: 'stretch' }
+  }
+
+  return {
+    mask: {
+      label: 'mask',
+      boxSizing: 'border-box',
+      background: componentTheme.backgroundColor,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      overflow: 'auto',
+      display: 'flex',
+      justifyContent: 'center',
+      outline: 'none',
+      zIndex: 9999,
+      ...positionStyles,
+      ...placementStyles[placement!]
+    }
+  }
+}
+
+export default generateStyle