feat(ui-tray): add optional mask overlay to tray

Closes: INSTUI-3991
instructure · Jul 5, 2024 · 8616638 · 8616638
1 parent 19f27f5
commit 8616638
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui-tray/package.json b/packages/ui-tray/package.json
@@ -36,6 +36,7 @@
     "@instructure/ui-react-utils": "9.1.0",
     "@instructure/ui-testable": "9.1.0",
     "@instructure/ui-utils": "9.1.0",
+    "@instructure/ui-overlays": "9.1.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {

diff --git a/packages/ui-tray/src/Tray/index.tsx b/packages/ui-tray/src/Tray/index.tsx
@@ -40,6 +40,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { propTypes, allowedProps } from './props'
 import type { TrayProps, TrayState } from './props'
+import { Mask } from '@instructure/ui-overlays'
 
 /**
 ---
@@ -68,7 +69,8 @@ class Tray extends Component<TrayProps> {
     transitionEnter: true,
     transitionExit: true,
     shadow: true,
-    border: false
+    border: false,
+    enableMask: false
   }
   ref: Element | null = null
   dialogRef: Dialog | null = null
@@ -174,63 +176,74 @@ class Tray extends Component<TrayProps> {
       border,
       shadow,
       role,
+      enableMask,
       ...props
     } = this.props
 
     const portalIsOpen = this.state.open || this.state.transitioning
 
+    const content = (
+      <Transition
+        in={open}
+        type={this.transition}
+        onTransition={onTransition}
+        onEnter={onEnter}
+        onEntering={onEntering}
+        onEntered={createChainedFunction(
+          this.handleTransitionComplete,
+          onEntered,
+          onOpen
+        )}
+        onExit={onExit}
+        onExiting={onExiting}
+        onExited={createChainedFunction(
+          this.handleTransitionComplete,
+          onExited,
+          onClose
+        )}
+        transitionOnMount={transitionOnMount}
+        transitionEnter={transitionEnter}
+        transitionExit={transitionExit}
+      >
+        <span
+          {...omitProps(props, Tray.allowedProps)}
+          css={this.props.styles?.tray}
+          ref={contentRef}
+        >
+          <Dialog
+            ref={(element) => (this.dialogRef = element)}
+            as="div"
+            label={label}
+            defaultFocusElement={defaultFocusElement}
+            open
+            shouldContainFocus={shouldContainFocus}
+            shouldReturnFocus={shouldReturnFocus}
+            shouldCloseOnDocumentClick={shouldCloseOnDocumentClick}
+            shouldCloseOnEscape
+            liveRegion={liveRegion}
+            onDismiss={onDismiss}
+            role={role}
+          >
+            <div css={this.props.styles?.content}>{children}</div>
+          </Dialog>
+        </span>
+      </Transition>
+    )
+
     return (
       <Portal
         open={portalIsOpen}
         onOpen={this.handlePortalOpen}
         insertAt={insertAt}
         mountNode={mountNode}
       >
-        <Transition
-          in={open}
-          type={this.transition}
-          onTransition={onTransition}
-          onEnter={onEnter}
-          onEntering={onEntering}
-          onEntered={createChainedFunction(
-            this.handleTransitionComplete,
-            onEntered,
-            onOpen
-          )}
-          onExit={onExit}
-          onExiting={onExiting}
-          onExited={createChainedFunction(
-            this.handleTransitionComplete,
-            onExited,
-            onClose
-          )}
-          transitionOnMount={transitionOnMount}
-          transitionEnter={transitionEnter}
-          transitionExit={transitionExit}
-        >
-          <span
-            {...omitProps(props, Tray.allowedProps)}
-            css={this.props.styles?.tray}
-            ref={contentRef}
-          >
-            <Dialog
-              ref={(element) => (this.dialogRef = element)}
-              as="div"
-              label={label}
-              defaultFocusElement={defaultFocusElement}
-              open
-              shouldContainFocus={shouldContainFocus}
-              shouldReturnFocus={shouldReturnFocus}
-              shouldCloseOnDocumentClick={shouldCloseOnDocumentClick}
-              shouldCloseOnEscape
-              liveRegion={liveRegion}
-              onDismiss={onDismiss}
-              role={role}
-            >
-              <div css={this.props.styles?.content}>{children}</div>
-            </Dialog>
-          </span>
-        </Transition>
+        {enableMask ? (
+          <Mask placement={'center'} fullscreen={true}>
+            {content}
+          </Mask>
+        ) : (
+          content
+        )}
       </Portal>
     )
   }

diff --git a/packages/ui-tray/src/Tray/props.ts b/packages/ui-tray/src/Tray/props.ts
@@ -158,6 +158,11 @@ type TrayOwnProps = {
    */
   shadow?: boolean
   children?: React.ReactNode
+
+  /**
+   * Add Mask overlay to the `<Tray />`
+   */
+  enableMask?: boolean
 }
 
 type PropKeys = keyof TrayOwnProps
@@ -203,7 +208,8 @@ const propTypes: PropValidators<PropKeys> = {
   transitionEnter: PropTypes.bool,
   transitionExit: PropTypes.bool,
   border: PropTypes.bool,
-  shadow: PropTypes.bool
+  shadow: PropTypes.bool,
+  enableMask: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -234,7 +240,8 @@ const allowedProps: AllowedPropKeys = [
   'transitionEnter',
   'transitionExit',
   'border',
-  'shadow'
+  'shadow',
+  'enableMask'
 ]
 type TrayState = { transitioning: boolean; open: boolean }
 export type { TrayProps, TrayStyle, TrayState }

diff --git a/packages/ui-tray/tsconfig.build.json b/packages/ui-tray/tsconfig.build.json
@@ -18,6 +18,7 @@
     { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-testable/tsconfig.build.json" },
+    { "path": "../ui-overlays/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-babel-preset/tsconfig.build.json" },
     { "path": "../ui-test-locator/tsconfig.build.json" },