fix(react): type issue in Dialog with OverridableComponent

examples/multi-brand-identity/jest.config.ts

@@ -22,6 +22,7 @@ module.exports = {
   moduleDirectories: ['node_modules', 'test-configs', __dirname],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
   moduleNameMapper: {
+    '@oxygen-ui/react': '<rootDir>/node_modules/@oxygen-ui/react',
     '\\.(css|less|sass|scss)$': '<rootDir>/test-configs/__mocks__/style-mock.ts',
     '^@unit-testing(.*)$': '<rootDir>/test-configs/utils',
   },
@@ -35,6 +36,6 @@ module.exports = {
     '^.+\\.(js|jsx)?$': 'babel-jest',
     '^.+\\.(ts|tsx)?$': 'ts-jest',
   },
-  transformIgnorePatterns: ['/node_modules/?(?!@wso2)'],
+  transformIgnorePatterns: ['/node_modules/?(?!@wso2)', '/node_modules/(?!@oxygen-ui/react/)'],
   verbose: true,
 };

examples/multi-brand-identity/package.json

@@ -32,8 +32,8 @@
   "dependencies": {
     "@fontsource/inter": "^4.5.14",
     "@fontsource/montserrat": "^4.5.13",
-    "@oxygen-ui/primitives": "1.15.0",
-    "@oxygen-ui/react": "1.15.0",
+    "@oxygen-ui/primitives": "workspace:*",
+    "@oxygen-ui/react": "workspace:../../packages/react/dist",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/multi-brand-identity/src/App.tsx

@@ -18,9 +18,12 @@
 
 import {AppBar, ColorModeToggle, Toolbar, ThemeProvider, IconButton, Theme, Tooltip} from '@oxygen-ui/react';
 import {ReactElement, useReducer, useState} from 'react';
-import {BrandingActions, brandingReducer, DefaultTheme} from './branding';
-import {BrandSwitcher, BuildingIcon, OrganizationSelectionDialog} from './components';
-import {LoginPage} from './pages';
+import brandingReducer, {BrandingActions} from './branding/store/branding-reducer';
+import DefaultTheme from './branding/themes/DefaultTheme';
+import BrandSwitcher from './components/BrandSwitcher';
+import BuildingIcon from './components/icons/BuildingIcon';
+import OrganizationSelectionDialog from './components/OrganizationSelectionDialog';
+import LoginPage from './pages/LoginPage';
 
 const App = (): ReactElement => {
   const [theme, dispatch] = useReducer(brandingReducer, DefaultTheme as never);

examples/multi-brand-identity/src/branding/store/branding-reducer.ts

@@ -17,13 +17,16 @@
  */
 
 import {Theme} from '@oxygen-ui/react';
-import {AsgardeoTheme, BallerinaTheme, ChoreoTheme, DefaultTheme} from '../themes';
+import AsgardeoTheme from '../themes/AsgardeoTheme';
+import BallerinaTheme from '../themes/BallerinaTheme';
+import ChoreoTheme from '../themes/ChoreoTheme';
+import DefaultTheme from '../themes/DefaultTheme';
 
 export enum BrandingActions {
   ChangeTheme = 'ChangeTheme',
 }
 
-export const brandingReducer = (theme: Theme, action: any): Theme => {
+const brandingReducer = (theme: Theme, action: any): Theme => {
   switch (action.type) {
     case BrandingActions.ChangeTheme: {
       if (action.brand === 'WSO2') {
@@ -50,3 +53,5 @@ export const brandingReducer = (theme: Theme, action: any): Theme => {
     }
   }
 };
+
+export default brandingReducer;

examples/multi-brand-identity/src/branding/themes/asgardeo.ts → examples/multi-brand-identity/src/branding/themes/AsgardeoTheme.ts

@@ -19,7 +19,7 @@
 import tokens from '@oxygen-ui/primitives/dist/design-tokens/web/asgardeo/es/tokens';
 import {extendTheme, Theme} from '@oxygen-ui/react';
 
-export const AsgardeoTheme: Theme = extendTheme({
+const AsgardeoTheme: Theme = extendTheme({
   colorSchemes: {
     dark: {
       brand: {
@@ -256,3 +256,5 @@ export const AsgardeoTheme: Theme = extendTheme({
     },
   },
 });
+
+export default AsgardeoTheme;

examples/multi-brand-identity/src/branding/themes/ballerina.ts → examples/multi-brand-identity/src/branding/themes/BallerinaTheme.ts

@@ -18,7 +18,7 @@
 
 import {extendTheme, Theme} from '@oxygen-ui/react';
 
-export const BallerinaTheme: Theme = extendTheme({
+const BallerinaTheme: Theme = extendTheme({
   colorSchemes: {
     dark: {
       brand: {
@@ -144,3 +144,5 @@ export const BallerinaTheme: Theme = extendTheme({
     },
   },
 });
+
+export default BallerinaTheme;

examples/multi-brand-identity/src/branding/themes/choreo.ts → examples/multi-brand-identity/src/branding/themes/ChoreoTheme.ts

@@ -20,7 +20,7 @@
 import tokens from '@oxygen-ui/primitives/dist/design-tokens/web/choreo/es/tokens';
 import {extendTheme, Theme} from '@oxygen-ui/react';
 
-export const ChoreoTheme: Theme = extendTheme({
+const ChoreoTheme: Theme = extendTheme({
   components: {
     MuiTooltip: {
       styleOverrides: {
@@ -414,3 +414,5 @@ export const ChoreoTheme: Theme = extendTheme({
     },
   },
 });
+
+export default ChoreoTheme;

examples/multi-brand-identity/src/branding/themes/default.ts → examples/multi-brand-identity/src/branding/themes/DefaultTheme.ts

@@ -20,7 +20,7 @@ import darkTokens from '@oxygen-ui/primitives/dist/design-tokens/web/oxygen/es/d
 import lightTokens from '@oxygen-ui/primitives/dist/design-tokens/web/oxygen/es/tokens';
 import {extendTheme, Theme} from '@oxygen-ui/react';
 
-export const DefaultTheme: Theme = extendTheme({
+const DefaultTheme: Theme = extendTheme({
   colorSchemes: {
     dark: {
       brand: {
@@ -136,3 +136,5 @@ export const DefaultTheme: Theme = extendTheme({
     ].join(','),
   },
 });
+
+export default DefaultTheme;

examples/multi-brand-identity/src/components/brand-switcher.tsx → examples/multi-brand-identity/src/components/BrandSwitcher.tsx

@@ -16,7 +16,9 @@
  * under the License.
  */
 
-import {ToggleButtonGroup, ToggleButton, Paper, Tooltip} from '@oxygen-ui/react';
+import {ToggleButtonGroup, ToggleButton} from '@oxygen-ui/react';
+import Paper from '@oxygen-ui/react/Paper';
+import Tooltip from '@oxygen-ui/react/Tooltip';
 import {useState, MouseEvent, ReactElement} from 'react';
 
 interface Brand {
@@ -62,7 +64,7 @@ export interface BrandSwitcherProps {
   onBrandChange?: (brand: string) => void;
 }
 
-export const BrandSwitcher = (props: BrandSwitcherProps): ReactElement => {
+const BrandSwitcher = (props: BrandSwitcherProps): ReactElement => {
   const {onBrandChange} = props;
 
   const [activeBrand, setActiveBrand] = useState<string>(BRANDS[0].name);
@@ -103,3 +105,5 @@ export const BrandSwitcher = (props: BrandSwitcherProps): ReactElement => {
     </Paper>
   );
 };
+
+export default BrandSwitcher;

examples/multi-brand-identity/src/components/organization-selection-dialog.tsx → examples/multi-brand-identity/src/components/OrganizationSelectionDialog.tsx

@@ -16,28 +16,25 @@
  * under the License.
  */
 
-import {
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-  TextField,
-  extendTheme,
-  Theme,
-  Alert,
-} from '@oxygen-ui/react';
+import {extendTheme, Theme} from '@oxygen-ui/react';
+import Alert from '@oxygen-ui/react/Alert';
+import Button from '@oxygen-ui/react/Button';
+import Dialog from '@oxygen-ui/react/Dialog';
+import DialogActions from '@oxygen-ui/react/DialogActions';
+import DialogContent from '@oxygen-ui/react/DialogContent';
+import DialogContentText from '@oxygen-ui/react/DialogContentText';
+import DialogTitle from '@oxygen-ui/react/DialogTitle';
+import TextField from '@oxygen-ui/react/TextField';
 import {ChangeEvent, FC, ReactElement, useState} from 'react';
-import {BrandingActions} from '../branding';
+import {BrandingActions} from '../branding/store/branding-reducer';
 
-interface OrganizationSelectionDialogProps {
+export interface OrganizationSelectionDialogProps {
   onClose: () => void;
   onOrganizationConnect: (action: {brand: string | undefined; theme: Theme; type: BrandingActions}) => void;
   open: boolean;
 }
 
-export const OrganizationSelectionDialog: FC<OrganizationSelectionDialogProps> = (
+const OrganizationSelectionDialog: FC<OrganizationSelectionDialogProps> = (
   props: OrganizationSelectionDialogProps,
 ): ReactElement => {
   const {open, onClose, onOrganizationConnect} = props;
@@ -167,3 +164,5 @@ export const OrganizationSelectionDialog: FC<OrganizationSelectionDialogProps> =
     </Dialog>
   );
 };
+
+export default OrganizationSelectionDialog;

examples/multi-brand-identity/src/components/icons/building-icon.tsx → examples/multi-brand-identity/src/components/icons/BuildingIcon.tsx

@@ -19,7 +19,7 @@
 import {Theme, useColorScheme} from '@oxygen-ui/react';
 import {ReactElement} from 'react';
 
-export const BuildingIcon = ({theme}: {theme: Theme}): ReactElement => {
+const BuildingIcon = ({theme}: {theme: Theme}): ReactElement => {
   const {mode} = useColorScheme();
 
   return (
@@ -37,3 +37,5 @@ export const BuildingIcon = ({theme}: {theme: Theme}): ReactElement => {
     </svg>
   );
 };
+
+export default BuildingIcon;

examples/multi-brand-identity/src/pages/login-page.tsx → examples/multi-brand-identity/src/pages/LoginPage.tsx

@@ -16,10 +16,12 @@
  * under the License.
  */
 
-import {Grid, SignIn, useTheme, useColorScheme, Theme} from '@oxygen-ui/react';
+import {useTheme, useColorScheme, Theme} from '@oxygen-ui/react';
+import Grid from '@oxygen-ui/react/Grid';
+import SignIn from '@oxygen-ui/react/SignIn';
 import {ReactElement} from 'react';
 
-export const LoginPage = (): ReactElement => {
+const LoginPage = (): ReactElement => {
   const theme: Theme = useTheme();
   const {mode} = useColorScheme();
 
@@ -43,3 +45,5 @@ export const LoginPage = (): ReactElement => {
     </Grid>
   );
 };
+
+export default LoginPage;

packages/react/src/components/Dialog/Dialog.tsx

@@ -18,10 +18,8 @@
 
 import MuiDialog from '@mui/material/Dialog';
 import type {DialogProps as MuiDialogProps} from '@mui/material/Dialog';
-import type {ModalTypeMap} from '@mui/material/Modal';
-import {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef} from 'react';
+import {forwardRef, ForwardRefExoticComponent} from 'react';
 import type {ElementType, ReactElement, Ref} from 'react';
 
 export type DialogProps<C extends ElementType = ElementType> = {
@@ -46,19 +44,19 @@ export type DialogProps<C extends ElementType = ElementType> = {
  *
  * @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 Dialog component.
  * @param ref - The ref to be forwarded to the MuiDialog component.
  * @returns The rendered Dialog component.
  */
-const Dialog: OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], DialogProps>> = forwardRef(
+const Dialog: ForwardRefExoticComponent<DialogProps> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: DialogProps<C>,
     ref: Ref<HTMLDivElement>,
   ): ReactElement => <MuiDialog ref={ref} className={clsx('OxygenDialog-root')} {...rest} />,
-) as OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], DialogProps>>;
+) as ForwardRefExoticComponent<DialogProps>;
 
 export default Dialog;