@equinor/eds-core-react/dist/esm/components/Scrim/Scrim.js

The React implementation of the Equinor Design System

import { forwardRef, useRef, useMemo } from 'react';
import styled from 'styled-components';
import { scrim } from './Scrim.tokens.js';
import { useHideBodyScroll, mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
import { FloatingOverlay } from '@floating-ui/react';
import { jsx } from 'react/jsx-runtime';

const {
  background
} = scrim;
const StyledScrim = styled(FloatingOverlay).withConfig({
  displayName: "Scrim__StyledScrim",
  componentId: "sc-1fr7uvy-0"
})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background);
const ScrimContent = styled.div.withConfig({
  displayName: "Scrim__ScrimContent",
  componentId: "sc-1fr7uvy-1"
})(["width:auto;height:auto;"]);
const Scrim = /*#__PURE__*/forwardRef(function Scrim({
  children,
  onClose,
  open,
  isDismissable = false,
  ...rest
}, ref) {
  const scrimRef = useRef(null);
  useHideBodyScroll(open);
  const combinedScrimRef = useMemo(() => mergeRefs(scrimRef, ref), [scrimRef, ref]);
  useGlobalKeyPress('Escape', () => {
    if (isDismissable && onClose && open) {
      onClose();
    }
  });
  const handleMouseClose = event => {
    if (event && event.target === scrimRef.current) {
      if (event.type === 'mousedown' && isDismissable && open) {
        onClose && onClose();
      }
    }
  };
  if (!open) {
    return null;
  }
  return /*#__PURE__*/jsx(StyledScrim, {
    onMouseDown: handleMouseClose,
    ref: combinedScrimRef,
    ...rest,
    children: /*#__PURE__*/jsx(ScrimContent, {
      children: children
    })
  });
});

export { Scrim };