Update ModalOverlay to use TS Box version (#20203)

* Update ModalOverlay to use TS Box version

* fix jest error

* lint error fix

* Fix lint errors and improve ModalOverlay's TypeScript typings

* Some small updates to story and docs

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/component-library/modal-overlay/README.mdx

@@ -12,7 +12,7 @@ import { ModalOverlay } from './modal-overlay';
 
 ## Props
 
-The `ModalOverlay` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `ModalOverlay` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
 
 <ArgsTable of={ModalOverlay} />
 

ui/components/component-library/modal-overlay/__snapshots__/modal-overlay.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`ModalOverlay should match snapshot 1`] = `
 <div>
   <div
     aria-hidden="true"
-    class="box mm-modal-overlay box--flex-direction-row box--width-full box--height-full box--background-color-overlay-default"
+    class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
   />
 </div>
 `;

ui/components/component-library/modal-overlay/index.ts

@@ -1,2 +1,6 @@
 export { ModalOverlay } from './modal-overlay';
-export type { ModalOverlayProps } from './modal-overlay.types';
+export type {
+  ModalOverlayProps,
+  ModalOverlayComponent,
+  ModalOverlayStyleUtilityProps,
+} from './modal-overlay.types';

ui/components/component-library/modal-overlay/modal-overlay.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import { ModalOverlay } from './modal-overlay';
 
@@ -21,16 +21,16 @@ export default {
       action: 'onClick',
     },
   },
-} as ComponentMeta<typeof ModalOverlay>;
+} as Meta<typeof ModalOverlay>;
 
-const Template: ComponentStory<typeof ModalOverlay> = (args) => (
+const Template: StoryFn<typeof ModalOverlay> = (args) => (
   <ModalOverlay {...args} />
 );
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const OnClick: ComponentStory<typeof ModalOverlay> = (args) => {
+export const OnClick: StoryFn<typeof ModalOverlay> = (args) => {
   const [open, setOpen] = useState(false);
   const handleOnClick = () => {
     setOpen(!open);

ui/components/component-library/modal-overlay/modal-overlay.tsx

@@ -3,27 +3,33 @@ import classnames from 'classnames';
 
 import {
   BackgroundColor,
-  BLOCK_SIZES,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box/box';
+import { Box, BoxProps } from '../box';
+import type { PolymorphicRef } from '../box';
 
-import { ModalOverlayProps } from './modal-overlay.types';
+import {
+  ModalOverlayProps,
+  ModalOverlayComponent,
+} from './modal-overlay.types';
 
-export const ModalOverlay: React.FC<ModalOverlayProps> = ({
-  onClick,
-  className = '',
-  ...props
-}) => (
-  <Box
-    className={classnames('mm-modal-overlay', className)}
-    backgroundColor={BackgroundColor.overlayDefault}
-    width={BLOCK_SIZES.FULL}
-    height={BLOCK_SIZES.FULL}
-    onClick={onClick}
-    aria-hidden="true"
-    {...props}
-  />
+export const ModalOverlay: ModalOverlayComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    { onClick, className = '', ...props }: ModalOverlayProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => (
+    <Box
+      className={classnames('mm-modal-overlay', className)}
+      ref={ref}
+      backgroundColor={BackgroundColor.overlayDefault}
+      width={BlockSize.Full}
+      height={BlockSize.Full}
+      onClick={onClick}
+      aria-hidden="true"
+      {...(props as BoxProps<C>)}
+    />
+  ),
 );
 
 export default ModalOverlay;

ui/components/component-library/modal-overlay/modal-overlay.types.ts

@@ -1,6 +1,10 @@
-import { BoxProps } from '../../ui/box/box.d';
+import React from 'react';
+import type {
+  StyleUtilityProps,
+  PolymorphicComponentPropWithRef,
+} from '../box';
 
-export interface ModalOverlayProps extends BoxProps {
+export interface ModalOverlayStyleUtilityProps extends StyleUtilityProps {
   /**
    * onClick handler for the overlay
    * Not necessary when used with Modal and closeOnClickOutside is true
@@ -11,3 +15,10 @@ export interface ModalOverlayProps extends BoxProps {
    */
   className?: string;
 }
+
+export type ModalOverlayProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, ModalOverlayStyleUtilityProps>;
+
+export type ModalOverlayComponent = <C extends React.ElementType = 'div'>(
+  props: ModalOverlayProps<C>,
+) => React.ReactElement | null;