Typescript support for scrim

libraries/core-react/src/Scrim/Scrim.test.jsx → libraries/core-react/src/Scrim/Scrim.test.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import React, { useState } from 'react'
+import React, { KeyboardEvent, useState } from 'react'
 import { render, cleanup, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
@@ -27,8 +27,8 @@ const DismissableScrim = () => {
   }
 
   return visibleScrim ? (
-    <Scrim onKeyDown={handleClose}>
-      <button type="button" onClick={() => setVisibleScrim()}>
+    <Scrim onClose={handleClose} isDismissable>
+      <button type="button" onClick={() => setVisibleScrim(false)}>
         OK
       </button>
     </Scrim>

libraries/core-react/src/Scrim/Scrim.tokens.js → libraries/core-react/src/Scrim/Scrim.tokens.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

libraries/core-react/src/Scrim/Scrim.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef, useEffect, MouseEvent } from 'react'
+import styled from 'styled-components'
+import { scrim as tokens } from './Scrim.tokens'
+
+const { height, width, background } = tokens
+
+type Props = {
+  /** Whether scrim can be dismissed with esc key */
+  isDismissable?: boolean
+  /** function to handle closing scrim */
+  onClose?: (event: MouseEvent | KeyboardEvent, open: boolean) => void
+} & React.HTMLAttributes<HTMLElement>
+
+const StyledScrim = styled.div<Props>`
+  width: ${width};
+  height: ${height};
+  background: ${background};
+  position: fixed;
+  z-index: 11;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+`
+
+const ScrimContent = styled.div`
+  width: auto;
+  height: auto;
+`
+
+export const Scrim = forwardRef<HTMLDivElement, Props>(function EdsScrim(
+  { children, onClose, isDismissable = false, ...rest },
+  ref,
+) {
+  const handleKeyboardClose = (event: KeyboardEvent) => {
+    if (event) {
+      if (event.key === 'Escape' && isDismissable) {
+        onClose && onClose(event, false)
+      }
+    }
+  }
+
+  const handleMouseClose = (event: MouseEvent) => {
+    if (event) {
+      if (event.type === 'click' && isDismissable) {
+        onClose && onClose(event, false)
+      }
+    }
+  }
+
+  const handleContentClick = (event: MouseEvent) => {
+    // Avoid event bubbling inside dialog/content inside scrim
+    event.stopPropagation()
+  }
+
+  useEffect(() => {
+    if (isDismissable) {
+      document.addEventListener('keydown', handleKeyboardClose, false)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyboardClose, false)
+    }
+  }, [])
+
+  return (
+    <StyledScrim
+      onClick={handleMouseClose}
+      isDismissable={isDismissable}
+      {...rest}
+      ref={ref}
+    >
+      <ScrimContent onClick={handleContentClick}>{children}</ScrimContent>
+    </StyledScrim>
+  )
+})
+
+Scrim.displayName = 'Scrim'

libraries/core-react/src/Scrim/index.jsx → libraries/core-react/src/Scrim/index.ts

@@ -1,2 +1 @@
-// @ts-nocheck
 export { Scrim } from './Scrim'