chore(react): add temp workaround for wso2#283

brionmario · Oct 10, 2024 · c180abf · c180abf
1 parent 0c177cb
commit c180abf
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 49 deletions.
diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx
@@ -18,12 +18,9 @@
 
 import MuiDrawer from '@mui/material/Drawer';
 import type {DrawerProps as MuiDrawerProps} from '@mui/material/Drawer';
-// TODO: Wrap the `Modal` component. Tracker: https://github.com/wso2/oxygen-ui/issues/2
-import type {ModalTypeMap} from '@mui/material/Modal';
-import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
-import type {ElementType, Ref, ReactElement} from 'react';
+import type {ElementType, Ref, ReactElement, ForwardRefExoticComponent} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './drawer.scss';
@@ -52,25 +49,24 @@ const COMPONENT_NAME: string = 'Drawer';
  *
  * @remarks
  * - ✔️ Props of the native component are also available.
- * - ✅ `component` prop is supported.
+ * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
  * - ✅ The `ref` is forwarded to the root element.
  *
  * @template C - The type of the component.
  * @param props - The props for the Drawer component.
  * @param ref - The ref to be forwarded to the MuiDrawer component.
  * @returns The rendered Drawer component.
  */
-const Drawer: OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], DrawerProps>> & WithWrapperProps =
-  forwardRef(
-    <C extends ElementType = ElementType>(
-      {className, ...rest}: DrawerProps<C>,
-      ref: Ref<HTMLDivElement>,
-    ): ReactElement => {
-      const classes: string = clsx('oxygen-drawer', className);
+const Drawer: ForwardRefExoticComponent<DrawerProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: DrawerProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-drawer', className);
 
-      return <MuiDrawer ref={ref} className={classes} {...rest} />;
-    },
-  ) as OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], DrawerProps>> & WithWrapperProps;
+    return <MuiDrawer ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<DrawerProps> & WithWrapperProps;
 
 Drawer.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Drawer.muiName = COMPONENT_NAME;

diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx
@@ -18,12 +18,9 @@
 
 import MuiMenu from '@mui/material/Menu';
 import type {MenuProps as MuiMenuProps} from '@mui/material/Menu';
-// TODO: Wrap the `Modal` component. Tracker: https://github.com/wso2/oxygen-ui/issues/2
-import type {ModalTypeMap} from '@mui/material/Modal';
-import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
-import type {ElementType, Ref, ReactElement} from 'react';
+import type {ElementType, Ref, ReactElement, ForwardRefExoticComponent} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './menu.scss';
@@ -54,25 +51,21 @@ const COMPONENT_NAME: string = 'Menu';
  *
  * @remarks
  * - ✔️ Props of the native component are also available.
- * - ✅ `component` prop is supported.
+ * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
  * - ✅ The `ref` is forwarded to the root element.
  *
  * @template C - The type of the component.
  * @param props - The props for the List component.
  * @param ref - The ref to be forwarded to the MuiList component.
  * @returns The rendered List component.
  */
-const Menu: OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], MenuProps>> & WithWrapperProps =
-  forwardRef(
-    <C extends ElementType = ElementType>(
-      {className, ...rest}: MenuProps<C>,
-      ref: Ref<HTMLDivElement>,
-    ): ReactElement => {
-      const classes: string = clsx('oxygen-menu', className);
+const Menu: ForwardRefExoticComponent<MenuProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>({className, ...rest}: MenuProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-menu', className);
 
-      return <MuiMenu ref={ref} className={classes} {...rest} />;
-    },
-  ) as OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], MenuProps>> & WithWrapperProps;
+    return <MuiMenu ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<MenuProps> & WithWrapperProps;
 
 Menu.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Menu.muiName = COMPONENT_NAME;

diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
@@ -16,13 +16,11 @@
  * under the License.
  */
 
-import {ModalTypeMap} from '@mui/material/Modal';
-import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import MuiPopover from '@mui/material/Popover';
 import type {PopoverProps as MuiPopoverProps} from '@mui/material/Popover';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
-import type {ReactElement, Ref, ElementType} from 'react';
+import type {ReactElement, Ref, ElementType, ForwardRefExoticComponent} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
@@ -52,25 +50,24 @@ const COMPONENT_NAME: string = 'Popover';
  *
  * @remarks
  * - ✔️ Props of the [Modal](https://mui.com/material-ui/api/modal/) component are also available.
- * - ✅ `component` prop is supported.
+ * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
  * - ✅ The `ref` is forwarded to the root element.
  *
  * @template C - The type of the component.
  * @param props - The props for the Popover component.
  * @param ref - The ref to be forwarded to the MuiPopover component.
  * @returns The rendered Popover component.
  */
-const Popover: OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], PopoverProps>> & WithWrapperProps =
-  forwardRef(
-    <C extends ElementType = ElementType>(
-      {className, ...rest}: PopoverProps<C>,
-      ref: Ref<HTMLDivElement>,
-    ): ReactElement => {
-      const classes: string = clsx('oxygen-popover', className);
+const Popover: ForwardRefExoticComponent<PopoverProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: PopoverProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-popover', className);
 
-      return <MuiPopover className={classes} {...rest} ref={ref} />;
-    },
-  ) as OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], PopoverProps>> & WithWrapperProps;
+    return <MuiPopover className={classes} {...rest} ref={ref} />;
+  },
+) as ForwardRefExoticComponent<PopoverProps> & WithWrapperProps;
 
 Popover.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Popover.muiName = COMPONENT_NAME;

diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx
@@ -18,7 +18,6 @@
 
 // TODO: Wrap this component.
 import ListSubheader from '@mui/material/ListSubheader';
-import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import {capitalize} from '@mui/material/utils';
 import clsx from 'clsx';
 import {forwardRef, useState} from 'react';
@@ -44,7 +43,6 @@ import type {MenuProps} from '../Menu';
 import MenuItem from '../MenuItem';
 import Radio from '../Radio';
 import './user-dropdown-menu.scss';
-import { ModalTypeMap } from '@mui/material/Modal';
 
 export type UserDropdownMenuProps<C extends ElementType = ElementType> = Omit<MenuProps<C>, 'open' | 'anchorEl'> & {
   /**
@@ -139,14 +137,14 @@ const COMPONENT_NAME: string = 'UserDropdownMenu';
  * @remarks
  * - ✨ This is a custom component that is not available in the Material-UI library.
  * - ✔️ Props of the native component are also available.
- * - ✅ `component` prop is supported.
+ * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
  * - ✅ The `ref` is forwarded to the root element.
  *
  * @param props - The props for the UserDropdownMenu component.
  * @param ref - The ref to be forwarded to the Menu component.
  * @returns The rendered UserDropdownMenu component.
  */
-const UserDropdownMenu: OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], UserDropdownMenuProps>> & WithWrapperProps = forwardRef(
+const UserDropdownMenu: ForwardRefExoticComponent<UserDropdownMenuProps> & WithWrapperProps = forwardRef(
   <C extends ElementType = ElementType>(
     {
       className,
@@ -281,7 +279,7 @@ const UserDropdownMenu: OverridableComponent<ModalTypeMap<ModalTypeMap['defaultC
       </>
     );
   },
-) as OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], UserDropdownMenuProps>> & WithWrapperProps;
+) as ForwardRefExoticComponent<UserDropdownMenuProps> & WithWrapperProps;
 
 UserDropdownMenu.displayName = composeComponentDisplayName(COMPONENT_NAME);
 UserDropdownMenu.muiName = COMPONENT_NAME;