From 54f776bfd587d0b2791a4a618fbf73d05c80154e Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 9 Oct 2024 09:45:10 +0530 Subject: [PATCH 01/10] fix(react): remove `defaultProps` & moved prop destructuring inline --- .../src/components/Accordion/Accordion.tsx | 4 +- .../AccordionDetails/AccordionDetails.tsx | 5 +-- .../AccordionSummary/AccordionSummary.tsx | 5 +-- .../AccountOverview/AccountOverview.tsx | 24 +++++----- .../src/components/ActionCard/ActionCard.tsx | 13 ++++-- packages/react/src/components/Alert/Alert.tsx | 5 +-- .../src/components/AlertTitle/AlertTitle.tsx | 5 +-- .../react/src/components/AppBar/AppBar.tsx | 5 +-- .../src/components/AppShell/AppShell.tsx | 14 +++--- .../components/Autocomplete/Autocomplete.tsx | 5 +-- .../react/src/components/Avatar/Avatar.tsx | 14 +++--- .../src/components/Backdrop/Backdrop.tsx | 5 +-- packages/react/src/components/Badge/Badge.tsx | 4 +- packages/react/src/components/Box/Box.tsx | 7 +-- .../components/Breadcrumbs/Breadcrumbs.tsx | 9 ++-- .../react/src/components/Button/Button.tsx | 4 +- packages/react/src/components/Card/Card.tsx | 17 ++++--- .../components/CardActions/CardActions.tsx | 4 +- .../components/CardContent/CardContent.tsx | 4 +- .../src/components/CardHeader/CardHeader.tsx | 4 +- .../src/components/Carousel/Carousel.tsx | 18 ++++---- .../src/components/Checkbox/Checkbox.tsx | 5 +-- packages/react/src/components/Chip/Chip.tsx | 10 ++--- .../CircularProgress/CircularProgress.tsx | 8 ++-- .../CircularProgressAvatar.tsx | 13 +++--- packages/react/src/components/Code/Code.tsx | 16 +++---- .../CollapsibleNavbarItem.tsx | 25 ++++++++--- .../ColorModeToggle/ColorModeToggle.tsx | 8 ++-- .../src/components/Container/Container.tsx | 12 +++-- .../components/CountryFlag/CountryFlag.tsx | 15 +++---- .../src/components/DataGrid/DataGrid.tsx | 5 +-- .../react/src/components/Divider/Divider.tsx | 5 +-- .../react/src/components/Drawer/Drawer.tsx | 5 +-- packages/react/src/components/Fab/Fab.tsx | 10 ++--- .../react/src/components/Footer/Footer.tsx | 11 +++-- .../components/FormControl/FormControl.tsx | 12 +++-- .../FormControlLabel/FormControlLabel.tsx | 5 +-- .../src/components/FormGroup/FormGroup.tsx | 5 +-- .../FormHelperText/FormHelperText.tsx | 12 +++-- .../src/components/FormLabel/FormLabel.tsx | 10 ++--- packages/react/src/components/Grid/Grid.tsx | 5 +-- .../react/src/components/Header/Header.tsx | 32 ++++++-------- .../src/components/IconButton/IconButton.tsx | 11 +++-- packages/react/src/components/Image/Image.tsx | 4 +- packages/react/src/components/Input/Input.tsx | 5 +-- .../InputAdornment/InputAdornment.tsx | 13 +++--- .../src/components/InputLabel/InputLabel.tsx | 5 +-- .../LinearProgress/LinearProgress.tsx | 8 ++-- packages/react/src/components/Link/Link.tsx | 5 +-- packages/react/src/components/List/List.tsx | 5 +-- .../src/components/ListItem/ListItem.tsx | 10 ++--- .../ListItemAvatar/ListItemAvatar.tsx | 8 ++-- .../ListItemButton/ListItemButton.tsx | 7 +-- .../components/ListItemIcon/ListItemIcon.tsx | 8 ++-- .../components/ListItemText/ListItemText.tsx | 8 ++-- packages/react/src/components/Menu/Menu.tsx | 4 +- .../src/components/MenuItem/MenuItem.tsx | 4 +- .../react/src/components/Navbar/Navbar.tsx | 19 ++++---- .../src/components/NavbarItem/NavbarItem.tsx | 34 ++++++++++---- .../OutlinedInput/OutlinedInput.tsx | 8 ++-- packages/react/src/components/Paper/Paper.tsx | 7 +-- .../PhoneNumberInput/PhoneNumberInput.tsx | 10 ++--- .../react/src/components/Popover/Popover.tsx | 5 +-- packages/react/src/components/Radio/Radio.tsx | 5 +-- .../src/components/RadioGroup/RadioGroup.tsx | 5 +-- .../react/src/components/Select/Select.tsx | 25 ++++++----- .../react/src/components/SignIn/SignIn.tsx | 11 +++-- .../src/components/Skeleton/Skeleton.tsx | 12 +++-- .../src/components/Snackbar/Snackbar.tsx | 5 +-- .../react/src/components/Stepper/Stepper.tsx | 12 ++--- .../react/src/components/Switch/Switch.tsx | 5 +-- packages/react/src/components/Tab/Tab.tsx | 4 +- .../src/components/TabPanel/TabPanel.tsx | 7 +-- packages/react/src/components/Tabs/Tabs.tsx | 9 ++-- .../src/components/TextField/TextField.tsx | 16 +++---- .../react/src/components/Toolbar/Toolbar.tsx | 5 +-- .../react/src/components/Tooltip/Tooltip.tsx | 5 +-- .../src/components/Typography/Typography.tsx | 12 +++-- .../UserDropdownMenu/UserDropdownMenu.tsx | 38 +++++++--------- .../react/src/components/Wizard/Wizard.tsx | 44 +++++++------------ packages/react/src/theme/ThemeProvider.tsx | 29 ++++++------ 81 files changed, 377 insertions(+), 464 deletions(-) diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx index a39a470f..39022d3e 100644 --- a/packages/react/src/components/Accordion/Accordion.tsx +++ b/packages/react/src/components/Accordion/Accordion.tsx @@ -27,9 +27,7 @@ export type AccordionProps = MuiAccordionProps; const COMPONENT_NAME: string = 'Accordion'; -const Accordion: FC & WithWrapperProps = (props: AccordionProps): ReactElement => { - const {className, ...rest} = props; - +const Accordion: FC & WithWrapperProps = ({className, ...rest}: AccordionProps): ReactElement => { const classes: string = clsx('oxygen-accordion', className); return ; diff --git a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx index 1774181d..92389c8d 100644 --- a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx +++ b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx @@ -27,9 +27,7 @@ export type AccordionDetailsProps = MuiAccordionDetailsProps; const COMPONENT_NAME: string = 'AccordionDetails'; const AccordionDetails: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: AccordionDetailsProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: AccordionDetailsProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-accordion-details', className); return ; @@ -38,6 +36,5 @@ const AccordionDetails: ForwardRefExoticComponent & WithW AccordionDetails.displayName = composeComponentDisplayName(COMPONENT_NAME); AccordionDetails.muiName = COMPONENT_NAME; -AccordionDetails.defaultProps = {}; export default AccordionDetails; diff --git a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx index 37cc13b0..a735730d 100644 --- a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx +++ b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx @@ -27,9 +27,7 @@ export type AccordionSummaryProps = MuiAccordionSummaryProps; const COMPONENT_NAME: string = 'AccordionSummary'; const AccordionSummary: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: AccordionSummaryProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: AccordionSummaryProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-accordion-summary', className); return ; @@ -38,6 +36,5 @@ const AccordionSummary: ForwardRefExoticComponent & WithW AccordionSummary.displayName = composeComponentDisplayName(COMPONENT_NAME); AccordionSummary.muiName = COMPONENT_NAME; -AccordionSummary.defaultProps = {}; export default AccordionSummary; diff --git a/packages/react/src/components/AccountOverview/AccountOverview.tsx b/packages/react/src/components/AccountOverview/AccountOverview.tsx index f4645b91..d3e1ab15 100644 --- a/packages/react/src/components/AccountOverview/AccountOverview.tsx +++ b/packages/react/src/components/AccountOverview/AccountOverview.tsx @@ -66,19 +66,17 @@ export type AccountCompletionSteps = CarouselStep; const COMPONENT_NAME: string = 'AccountOverview'; -const AccountOverview: FC & WithWrapperProps = (props: AccountOverviewProps): ReactElement => { - const { - className, - title, - subheader, - accountCompletionStepsTitle, - accountCompletionSteps, - accountProgress, - user, - cardHeaderProps, - ...rest - } = props; - +const AccountOverview: FC & WithWrapperProps = ({ + className, + title, + subheader, + accountCompletionStepsTitle, + accountCompletionSteps, + accountProgress, + user, + cardHeaderProps, + ...rest +}: AccountOverviewProps): ReactElement => { const classes: string = clsx('oxygen-account-overview', className); return ( diff --git a/packages/react/src/components/ActionCard/ActionCard.tsx b/packages/react/src/components/ActionCard/ActionCard.tsx index 515ef90c..cdb2626f 100644 --- a/packages/react/src/components/ActionCard/ActionCard.tsx +++ b/packages/react/src/components/ActionCard/ActionCard.tsx @@ -52,9 +52,15 @@ export interface ActionCardProps extends CardProps { const COMPONENT_NAME: string = 'ActionCard'; -const ActionCard: FC & WithWrapperProps = (props: ActionCardProps): ReactElement => { - const {className, image, title, description, actionText, onActionClick, ...rest} = props; - +const ActionCard: FC & WithWrapperProps = ({ + className, + image, + title, + description, + actionText, + onActionClick, + ...rest +}: ActionCardProps): ReactElement => { const classes: string = clsx('oxygen-action-card', className); return ( @@ -75,6 +81,5 @@ const ActionCard: FC & WithWrapperProps = (props: ActionCardPro ActionCard.displayName = composeComponentDisplayName(COMPONENT_NAME); ActionCard.muiName = COMPONENT_NAME; -ActionCard.defaultProps = {}; export default ActionCard; diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx index 43becf4e..4b50fffe 100644 --- a/packages/react/src/components/Alert/Alert.tsx +++ b/packages/react/src/components/Alert/Alert.tsx @@ -28,9 +28,7 @@ export type AlertProps = MuiAlertProps; const COMPONENT_NAME: string = 'Alert'; const Alert: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: AlertProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: AlertProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-alert', className); return ; @@ -39,6 +37,5 @@ const Alert: ForwardRefExoticComponent & WithWrapperProps = forwardR Alert.displayName = composeComponentDisplayName(COMPONENT_NAME); Alert.muiName = COMPONENT_NAME; -Alert.defaultProps = {}; export default Alert; diff --git a/packages/react/src/components/AlertTitle/AlertTitle.tsx b/packages/react/src/components/AlertTitle/AlertTitle.tsx index 2d5ed0fd..c3104370 100644 --- a/packages/react/src/components/AlertTitle/AlertTitle.tsx +++ b/packages/react/src/components/AlertTitle/AlertTitle.tsx @@ -28,9 +28,7 @@ export type AlertProps = MuiAlertProps; const COMPONENT_NAME: string = 'AlertTitle'; const AlertTitle: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: AlertProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: AlertProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-alert-title', className); return ; @@ -39,6 +37,5 @@ const AlertTitle: ForwardRefExoticComponent & WithWrapperProps = for AlertTitle.displayName = composeComponentDisplayName(COMPONENT_NAME); AlertTitle.muiName = COMPONENT_NAME; -AlertTitle.defaultProps = {}; export default AlertTitle; diff --git a/packages/react/src/components/AppBar/AppBar.tsx b/packages/react/src/components/AppBar/AppBar.tsx index f7be5ce1..4dbf9d6f 100644 --- a/packages/react/src/components/AppBar/AppBar.tsx +++ b/packages/react/src/components/AppBar/AppBar.tsx @@ -27,9 +27,7 @@ export type AppBarProps = MuiAppBarProps; const COMPONENT_NAME: string = 'AppBar'; -const AppBar: FC & WithWrapperProps = (props: AppBarProps): ReactElement => { - const {className, ...rest} = props; - +const AppBar: FC & WithWrapperProps = ({className, ...rest}: AppBarProps): ReactElement => { const classes: string = clsx('oxygen-app-bar', className); return ; @@ -37,6 +35,5 @@ const AppBar: FC & WithWrapperProps = (props: AppBarProps): ReactEl AppBar.displayName = composeComponentDisplayName(COMPONENT_NAME); AppBar.muiName = COMPONENT_NAME; -AppBar.defaultProps = {}; export default AppBar; diff --git a/packages/react/src/components/AppShell/AppShell.tsx b/packages/react/src/components/AppShell/AppShell.tsx index 1e7fc595..327c153f 100644 --- a/packages/react/src/components/AppShell/AppShell.tsx +++ b/packages/react/src/components/AppShell/AppShell.tsx @@ -40,11 +40,14 @@ export interface AppShellProps extends BoxProps { const COMPONENT_NAME: string = 'AppShell'; -const AppShell: FC> & WithWrapperProps = ( - props: PropsWithChildren, -): ReactElement => { - const {className, children, footer, header, navigation, ...rest} = props; - +const AppShell: FC> & WithWrapperProps = ({ + className, + children, + footer, + header, + navigation, + ...rest +}: PropsWithChildren): ReactElement => { const classes: string = clsx('oxygen-app-shell', className); return ( @@ -65,6 +68,5 @@ const AppShell: FC> & WithWrapperProps = ( AppShell.displayName = composeComponentDisplayName(COMPONENT_NAME); AppShell.muiName = COMPONENT_NAME; -AppShell.defaultProps = {}; export default AppShell; diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx index 684104e2..c64440dc 100644 --- a/packages/react/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx @@ -31,9 +31,7 @@ const COMPONENT_NAME: string = 'Autocomplete'; * @remarks `any` is used as the generic type for the props because the generic type is not used in the component. */ const Autocomplete: ForwardRefExoticComponent> & WithWrapperProps = forwardRef( - (props: AutocompleteProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: AutocompleteProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-autocomplete', className); return ; @@ -42,6 +40,5 @@ const Autocomplete: ForwardRefExoticComponent> & WithWrap Autocomplete.displayName = composeComponentDisplayName(COMPONENT_NAME); Autocomplete.muiName = COMPONENT_NAME; -Autocomplete.defaultProps = {}; export default Autocomplete; diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx index f1ad7f8a..6fafaf31 100644 --- a/packages/react/src/components/Avatar/Avatar.tsx +++ b/packages/react/src/components/Avatar/Avatar.tsx @@ -37,13 +37,18 @@ export type AvatarProps = { * If `true`, the background color will be randomly generated. */ randomBackgroundColor?: boolean; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Avatar'; -const Avatar: FC & WithWrapperProps = (props: AvatarProps): ReactElement => { - const {className, children, component, randomBackgroundColor, backgroundColorRandomizer, ...rest} = props; - +const Avatar: FC & WithWrapperProps = ({ + className, + children, + component, + randomBackgroundColor, + backgroundColorRandomizer, + ...rest +}: AvatarProps): ReactElement => { const colorRandomizer: string = useMemo(() => { if (backgroundColorRandomizer) { return backgroundColorRandomizer; @@ -74,6 +79,5 @@ const Avatar: FC & WithWrapperProps = (props Avatar.displayName = composeComponentDisplayName(COMPONENT_NAME); Avatar.muiName = COMPONENT_NAME; -Avatar.defaultProps = {}; export default Avatar; diff --git a/packages/react/src/components/Backdrop/Backdrop.tsx b/packages/react/src/components/Backdrop/Backdrop.tsx index 10078c07..74f90a53 100644 --- a/packages/react/src/components/Backdrop/Backdrop.tsx +++ b/packages/react/src/components/Backdrop/Backdrop.tsx @@ -27,9 +27,7 @@ export type BackdropProps = MuiBackdropProps; const COMPONENT_NAME: string = 'Backdrop'; -const Backdrop: FC & WithWrapperProps = (props: BackdropProps): ReactElement => { - const {className, ...rest} = props; - +const Backdrop: FC & WithWrapperProps = ({className, ...rest}: BackdropProps): ReactElement => { const classes: string = clsx('oxygen-backdrop', className); return ; @@ -37,6 +35,5 @@ const Backdrop: FC & WithWrapperProps = (props: BackdropProps): R Backdrop.displayName = composeComponentDisplayName(COMPONENT_NAME); Backdrop.muiName = COMPONENT_NAME; -Backdrop.defaultProps = {}; export default Backdrop; diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx index b0c1264d..8d45dd24 100644 --- a/packages/react/src/components/Badge/Badge.tsx +++ b/packages/react/src/components/Badge/Badge.tsx @@ -27,9 +27,7 @@ export type BadgeProps = MuiBadgeProps; const COMPONENT_NAME: string = 'Badge'; -const Badge: FC & WithWrapperProps = (props: BadgeProps): ReactElement => { - const {className, ...rest} = props; - +const Badge: FC & WithWrapperProps = ({className, ...rest}: BadgeProps): ReactElement => { const classes: string = clsx('oxygen-badge', className); return ; diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index 021f86eb..4e75f991 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -24,14 +24,12 @@ import composeComponentDisplayName from '../../utils/compose-component-display-n export type BoxProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Box'; const Box: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: BoxProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: BoxProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-box', className); return ; @@ -40,6 +38,5 @@ const Box: ForwardRefExoticComponent & WithWrapperProps = forwardRef( Box.displayName = composeComponentDisplayName(COMPONENT_NAME); Box.muiName = COMPONENT_NAME; -Box.defaultProps = {}; export default Box; diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx index e318f29f..9e43ea0d 100644 --- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -27,9 +27,11 @@ export type BreadcrumbsProps = MuiBreadcrumbsProps; const COMPONENT_NAME: string = 'Breadcrumbs'; -const Breadcrumbs: FC & WithWrapperProps = (props: BreadcrumbsProps): ReactElement => { - const {className, children, ...rest} = props; - +const Breadcrumbs: FC & WithWrapperProps = ({ + className, + children, + ...rest +}: BreadcrumbsProps): ReactElement => { const classes: string = clsx('oxygen-breadcrumbs', className); return ( @@ -41,6 +43,5 @@ const Breadcrumbs: FC & WithWrapperProps = (props: Breadcrumbs Breadcrumbs.displayName = composeComponentDisplayName(COMPONENT_NAME); Breadcrumbs.muiName = 'Breadcrumbs'; -Breadcrumbs.defaultProps = {}; export default Breadcrumbs; diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index 2151e7ea..133f3b48 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -27,9 +27,7 @@ export type ButtonProps = MuiButtonProps; const COMPONENT_NAME: string = 'Button'; -const Button: FC & WithWrapperProps = (props: ButtonProps): ReactElement => { - const {className, ...rest} = props; - +const Button: FC & WithWrapperProps = ({className, ...rest}: ButtonProps): ReactElement => { const classes: string = clsx('oxygen-button', className); return ; diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx index 2d9fe935..53a39df1 100644 --- a/packages/react/src/components/Card/Card.tsx +++ b/packages/react/src/components/Card/Card.tsx @@ -25,25 +25,24 @@ import './card.scss'; export type CardProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Card'; const Card: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: CardProps, ref: MutableRefObject): ReactElement => { - const {className, component, onClick, ...rest} = props; - + ( + {className, component, onClick, elevation = 0, variant = 'outlined', ...rest}: CardProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-card', {'with-hover': onClick}, className); - return ; + return ( + + ); }, ) as ForwardRefExoticComponent & WithWrapperProps; Card.displayName = composeComponentDisplayName(COMPONENT_NAME); Card.muiName = COMPONENT_NAME; -Card.defaultProps = { - elevation: 0, - variant: 'outlined', -}; export default Card; diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx index d7277e60..f48f2271 100644 --- a/packages/react/src/components/CardActions/CardActions.tsx +++ b/packages/react/src/components/CardActions/CardActions.tsx @@ -27,9 +27,7 @@ export type CardActionsProps = MuiCardActionsProps; const COMPONENT_NAME: string = 'CardActions'; -const CardActions: FC & WithWrapperProps = (props: CardActionsProps): ReactElement => { - const {className, ...rest} = props; - +const CardActions: FC & WithWrapperProps = ({className, ...rest}: CardActionsProps): ReactElement => { const classes: string = clsx('oxygen-card-actions', className); return ; diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx index 8c986059..6ac42d40 100644 --- a/packages/react/src/components/CardContent/CardContent.tsx +++ b/packages/react/src/components/CardContent/CardContent.tsx @@ -28,9 +28,7 @@ export type CardContentProps = MuiCardContentProps; const COMPONENT_NAME: string = 'CardContent'; const CardContent: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: CardContentProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: CardContentProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-card-content', className); return ; diff --git a/packages/react/src/components/CardHeader/CardHeader.tsx b/packages/react/src/components/CardHeader/CardHeader.tsx index 0fb6cab6..c71804db 100644 --- a/packages/react/src/components/CardHeader/CardHeader.tsx +++ b/packages/react/src/components/CardHeader/CardHeader.tsx @@ -27,9 +27,7 @@ export type CardHeaderProps = MuiCardHeaderProps; const COMPONENT_NAME: string = 'CardHeader'; -const CardHeader: FC & WithWrapperProps = (props: CardHeaderProps): ReactElement => { - const {className, ...rest} = props; - +const CardHeader: FC & WithWrapperProps = ({className, ...rest}: CardHeaderProps): ReactElement => { const classes: string = clsx('oxygen-card-header', className); return ; diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index 2daa9d08..0935792a 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -87,8 +87,16 @@ export interface CarouselProps extends Omit, 'tit const COMPONENT_NAME: string = 'Carousel'; -const Carousel: FC & WithWrapperProps = (props: CarouselProps): ReactElement => { - const {autoPlay, autoPlayInterval, className, nextButtonText, previousButtonText, steps, title, ...rest} = props; +const Carousel: FC & WithWrapperProps = ({ + autoPlay = false, + autoPlayInterval = 5000, + className, + nextButtonText = 'Next', + previousButtonText = 'Previous', + steps, + title, + ...rest +}: CarouselProps): ReactElement => { const [currentStep, setCurrentStep] = useState(0); const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]); @@ -195,11 +203,5 @@ const Carousel: FC & WithWrapperProps = (props: CarouselProps): R Carousel.displayName = composeComponentDisplayName(COMPONENT_NAME); Carousel.muiName = COMPONENT_NAME; -Carousel.defaultProps = { - autoPlay: false, - autoPlayInterval: 5000, - nextButtonText: 'Next', - previousButtonText: 'Previous', -}; export default Carousel; diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx index e5802409..dad65555 100644 --- a/packages/react/src/components/Checkbox/Checkbox.tsx +++ b/packages/react/src/components/Checkbox/Checkbox.tsx @@ -27,9 +27,7 @@ export type CheckboxProps = MuiCheckboxProps; const COMPONENT_NAME: string = 'Checkbox'; const Checkbox: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: CheckboxProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: CheckboxProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-checkbox', className); return ; @@ -38,6 +36,5 @@ const Checkbox: ForwardRefExoticComponent & WithWrapperProps = fo Checkbox.displayName = composeComponentDisplayName(COMPONENT_NAME); Checkbox.muiName = COMPONENT_NAME; -Checkbox.defaultProps = {}; export default Checkbox; diff --git a/packages/react/src/components/Chip/Chip.tsx b/packages/react/src/components/Chip/Chip.tsx index 358005b6..8dbbdd38 100644 --- a/packages/react/src/components/Chip/Chip.tsx +++ b/packages/react/src/components/Chip/Chip.tsx @@ -25,13 +25,14 @@ import './chip.scss'; export type ChipProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Chip'; -const Chip: FC & WithWrapperProps = (props: ChipProps): ReactElement => { - const {className, ...rest} = props; - +const Chip: FC & WithWrapperProps = ({ + className, + ...rest +}: ChipProps): ReactElement => { const classes: string = clsx('oxygen-chip', className); return ; @@ -39,6 +40,5 @@ const Chip: FC & WithWrapperProps = (props: Ch Chip.displayName = composeComponentDisplayName(COMPONENT_NAME); Chip.muiName = COMPONENT_NAME; -Chip.defaultProps = {}; export default Chip; diff --git a/packages/react/src/components/CircularProgress/CircularProgress.tsx b/packages/react/src/components/CircularProgress/CircularProgress.tsx index b139da8b..4d28a481 100644 --- a/packages/react/src/components/CircularProgress/CircularProgress.tsx +++ b/packages/react/src/components/CircularProgress/CircularProgress.tsx @@ -27,9 +27,10 @@ export type CircularProgressProps = MuiCircularProgressProps; const COMPONENT_NAME: string = 'CircularProgress'; -const CircularProgress: FC & WithWrapperProps = (props: CircularProgressProps): ReactElement => { - const {className, ...rest} = props; - +const CircularProgress: FC & WithWrapperProps = ({ + className, + ...rest +}: CircularProgressProps): ReactElement => { const classes: string = clsx('oxygen-circular-progress', className); return ; @@ -37,6 +38,5 @@ const CircularProgress: FC & WithWrapperProps = (props: C CircularProgress.displayName = composeComponentDisplayName(COMPONENT_NAME); CircularProgress.muiName = COMPONENT_NAME; -CircularProgress.defaultProps = {}; export default CircularProgress; diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx index e570ce4c..1b1cb6f4 100644 --- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx +++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx @@ -42,11 +42,13 @@ export interface CircularProgressAvatarProps extends Omit & WithWrapperProps = ( - props: CircularProgressAvatarProps, -): ReactElement => { - const {className, progress, badgeOptions, avatarOptions, ...rest} = props; - +const CircularProgressAvatar: FC & WithWrapperProps = ({ + className, + progress, + badgeOptions, + avatarOptions, + ...rest +}: CircularProgressAvatarProps): ReactElement => { const classes: string = clsx('oxygen-circular-progress-avatar', className); return ( @@ -84,6 +86,5 @@ const CircularProgressAvatar: FC & WithWrapperProps CircularProgressAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME); CircularProgressAvatar.muiName = COMPONENT_NAME; -CircularProgressAvatar.defaultProps = {}; export default CircularProgressAvatar; diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx index f181b398..611f65a0 100644 --- a/packages/react/src/components/Code/Code.tsx +++ b/packages/react/src/components/Code/Code.tsx @@ -38,13 +38,17 @@ export type CodeProps = { * @default false */ outlined?: boolean; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Code'; -const Code: FC & WithWrapperProps = (props: CodeProps): ReactElement => { - const {className, children, filled, outlined, ...rest} = props; - +const Code: FC & WithWrapperProps = ({ + className, + children, + filled = true, + outlined = false, + ...rest +}: CodeProps): ReactElement => { const classes: string = clsx('oxygen-code', {filled, outlined}, className); return ( @@ -56,9 +60,5 @@ const Code: FC & WithWrapperProps = (props: Co Code.displayName = composeComponentDisplayName(COMPONENT_NAME); Code.muiName = COMPONENT_NAME; -Code.defaultProps = { - filled: true, - outlined: false, -}; export default Code; diff --git a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx index 370af69d..389a9807 100644 --- a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx +++ b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx @@ -47,10 +47,24 @@ export interface CollapsibleNavbarItemProps extends NavbarItemProps, Pick & WithWrapperProps = forwardRef( - (props: CollapsibleNavbarItemProps, ref: MutableRefObject): ReactElement => { - const {className, component, expanded, fill, icon, id, open, label, onClick, items, tag, tagClassName, ...rest} = - props; - + ( + { + className, + component, + expanded, + fill, + icon, + id, + open = true, + label, + onClick, + items, + tag, + tagClassName, + ...rest + }: CollapsibleNavbarItemProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx( 'oxygen-collapsible-navbar-item', { @@ -130,8 +144,5 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent>): ReactE ); -const ColorModeToggle: FC & WithWrapperProps = (props: ColorModeToggleProps): ReactElement => { - const {className, ...rest} = props; - +const ColorModeToggle: FC & WithWrapperProps = ({ + className, + ...rest +}: ColorModeToggleProps): ReactElement => { const {mode, setMode} = useColorScheme(); const classes: string = clsx('oxygen-color-mode-toggle', className); @@ -90,6 +91,5 @@ const ColorModeToggle: FC & WithWrapperProps = (props: Col ColorModeToggle.displayName = composeComponentDisplayName(COMPONENT_NAME); ColorModeToggle.muiName = COMPONENT_NAME; -ColorModeToggle.defaultProps = {}; export default ColorModeToggle; diff --git a/packages/react/src/components/Container/Container.tsx b/packages/react/src/components/Container/Container.tsx index f42544a7..a668ce21 100644 --- a/packages/react/src/components/Container/Container.tsx +++ b/packages/react/src/components/Container/Container.tsx @@ -25,15 +25,14 @@ import './container.scss'; export type ContainerProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Container'; -const Container: FC & WithWrapperProps = ( - props: ContainerProps, -): ReactElement => { - const {className, ...rest} = props; - +const Container: FC & WithWrapperProps = ({ + className, + ...rest +}: ContainerProps): ReactElement => { const classes: string = clsx('oxygen-container', className); return ; @@ -41,6 +40,5 @@ const Container: FC & WithWrapperProps = Container.displayName = composeComponentDisplayName(COMPONENT_NAME); Container.muiName = COMPONENT_NAME; -Container.defaultProps = {}; export default Container; diff --git a/packages/react/src/components/CountryFlag/CountryFlag.tsx b/packages/react/src/components/CountryFlag/CountryFlag.tsx index 91e4e356..f7489431 100644 --- a/packages/react/src/components/CountryFlag/CountryFlag.tsx +++ b/packages/react/src/components/CountryFlag/CountryFlag.tsx @@ -35,16 +35,15 @@ export interface CountryFlagsProps extends React.HTMLAttributes & WithWrapperProps = (props: CountryFlagsProps): ReactElement => { - const {countryCode, height, ...rest} = props; - - return {countryCode}} {...rest} />; -}; +const CountryFlag: FC & WithWrapperProps = ({ + countryCode, + height = '16', + ...rest +}: CountryFlagsProps): ReactElement => ( + {countryCode}} {...rest} /> +); CountryFlag.displayName = composeComponentDisplayName(COMPONENT_NAME); CountryFlag.muiName = COMPONENT_NAME; -CountryFlag.defaultProps = { - height: '16', -}; export default CountryFlag; diff --git a/packages/react/src/components/DataGrid/DataGrid.tsx b/packages/react/src/components/DataGrid/DataGrid.tsx index b4b59b1c..81245176 100644 --- a/packages/react/src/components/DataGrid/DataGrid.tsx +++ b/packages/react/src/components/DataGrid/DataGrid.tsx @@ -27,9 +27,7 @@ export type DataGridProps = MuiDataGridProps; const COMPONENT_NAME: string = 'DataGrid'; -const DataGrid: FC & WithWrapperProps = (props: DataGridProps): ReactElement => { - const {className, ...rest} = props; - +const DataGrid: FC & WithWrapperProps = ({className, ...rest}: DataGridProps): ReactElement => { const classes: string = clsx('oxygen-data-grid', className); return ; @@ -37,6 +35,5 @@ const DataGrid: FC & WithWrapperProps = (props: DataGridProps): R DataGrid.displayName = composeComponentDisplayName(COMPONENT_NAME); DataGrid.muiName = COMPONENT_NAME; -DataGrid.defaultProps = {}; export default DataGrid; diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx index 54019e4e..831a6bf6 100644 --- a/packages/react/src/components/Divider/Divider.tsx +++ b/packages/react/src/components/Divider/Divider.tsx @@ -27,9 +27,7 @@ export type DividerProps = MuiDividerProps; const COMPONENT_NAME: string = 'Divider'; -const Divider: FC & WithWrapperProps = (props: DividerProps): ReactElement => { - const {className, ...rest} = props; - +const Divider: FC & WithWrapperProps = ({className, ...rest}: DividerProps): ReactElement => { const classes: string = clsx('oxygen-divider', className); return ; @@ -37,6 +35,5 @@ const Divider: FC & WithWrapperProps = (props: DividerProps): Reac Divider.displayName = composeComponentDisplayName(COMPONENT_NAME); Divider.muiName = COMPONENT_NAME; -Divider.defaultProps = {}; export default Divider; diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx index d31c5c86..1bc11823 100644 --- a/packages/react/src/components/Drawer/Drawer.tsx +++ b/packages/react/src/components/Drawer/Drawer.tsx @@ -27,9 +27,7 @@ export type DrawerProps = MuiDrawerProps; const COMPONENT_NAME: string = 'Drawer'; -const Drawer: FC & WithWrapperProps = (props: DrawerProps): ReactElement => { - const {className, ...rest} = props; - +const Drawer: FC & WithWrapperProps = ({className, ...rest}: DrawerProps): ReactElement => { const classes: string = clsx('oxygen-drawer', className); return ; @@ -37,6 +35,5 @@ const Drawer: FC & WithWrapperProps = (props: DrawerProps): ReactEl Drawer.displayName = composeComponentDisplayName(COMPONENT_NAME); Drawer.muiName = COMPONENT_NAME; -Drawer.defaultProps = {}; export default Drawer; diff --git a/packages/react/src/components/Fab/Fab.tsx b/packages/react/src/components/Fab/Fab.tsx index 3c1d7780..19feb9bf 100644 --- a/packages/react/src/components/Fab/Fab.tsx +++ b/packages/react/src/components/Fab/Fab.tsx @@ -24,14 +24,15 @@ import composeComponentDisplayName from '../../utils/compose-component-display-n export type FabProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Fab'; const Fab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: FabProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ( + {className, ...rest}: FabProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-fab', className); return ; @@ -40,6 +41,5 @@ const Fab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( Fab.displayName = composeComponentDisplayName(COMPONENT_NAME); Fab.muiName = COMPONENT_NAME; -Fab.defaultProps = {}; export default Fab; diff --git a/packages/react/src/components/Footer/Footer.tsx b/packages/react/src/components/Footer/Footer.tsx index a5b7f0cb..d90c760f 100644 --- a/packages/react/src/components/Footer/Footer.tsx +++ b/packages/react/src/components/Footer/Footer.tsx @@ -44,9 +44,13 @@ export interface FooterProps extends BoxProps { const COMPONENT_NAME: string = 'Footer'; -const Footer: FC & WithWrapperProps = (props: FooterProps): ReactElement => { - const {className, copyright, links, maxWidth, ...rest} = props; - +const Footer: FC & WithWrapperProps = ({ + className, + copyright, + links, + maxWidth, + ...rest +}: FooterProps): ReactElement => { const isMobile: boolean = useIsMobile(); const classes: string = clsx('oxygen-footer', {mobile: isMobile}, className); @@ -85,6 +89,5 @@ const Footer: FC & WithWrapperProps = (props: FooterProps): ReactEl Footer.displayName = composeComponentDisplayName(COMPONENT_NAME); Footer.muiName = COMPONENT_NAME; -Footer.defaultProps = {}; export default Footer; diff --git a/packages/react/src/components/FormControl/FormControl.tsx b/packages/react/src/components/FormControl/FormControl.tsx index 9011cd17..b8e60c52 100644 --- a/packages/react/src/components/FormControl/FormControl.tsx +++ b/packages/react/src/components/FormControl/FormControl.tsx @@ -25,15 +25,14 @@ import './form-control.scss'; export type FormControlProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'FormControl'; -const FormControl: FC & WithWrapperProps = ( - props: FormControlProps, -): ReactElement => { - const {className, ...rest} = props; - +const FormControl: FC & WithWrapperProps = ({ + className, + ...rest +}: FormControlProps): ReactElement => { const classes: string = clsx('oxygen-form-control', className); return ; @@ -41,6 +40,5 @@ const FormControl: FC & WithWrapperProps = & WithWrapperProps = forwardRef( - (props: FormControlLabelProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: FormControlLabelProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-form-control-label', className); return ; @@ -38,6 +36,5 @@ const FormControlLabel: ForwardRefExoticComponent & WithW FormControlLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); FormControlLabel.muiName = COMPONENT_NAME; -FormControlLabel.defaultProps = {}; export default FormControlLabel; diff --git a/packages/react/src/components/FormGroup/FormGroup.tsx b/packages/react/src/components/FormGroup/FormGroup.tsx index ce4c5550..ec7bac63 100644 --- a/packages/react/src/components/FormGroup/FormGroup.tsx +++ b/packages/react/src/components/FormGroup/FormGroup.tsx @@ -27,9 +27,7 @@ export type FormGroupProps = MuiFormGroupProps; const COMPONENT_NAME: string = 'FormGroup'; const FormGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: FormGroupProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: FormGroupProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-form-group', className); return ; @@ -38,6 +36,5 @@ const FormGroup: ForwardRefExoticComponent & WithWrapperProps = FormGroup.displayName = composeComponentDisplayName(COMPONENT_NAME); FormGroup.muiName = COMPONENT_NAME; -FormGroup.defaultProps = {}; export default FormGroup; diff --git a/packages/react/src/components/FormHelperText/FormHelperText.tsx b/packages/react/src/components/FormHelperText/FormHelperText.tsx index 483a16da..180b4af1 100644 --- a/packages/react/src/components/FormHelperText/FormHelperText.tsx +++ b/packages/react/src/components/FormHelperText/FormHelperText.tsx @@ -25,15 +25,14 @@ import './form-helper-text.scss'; export type FormHelperTextProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'FormHelperText'; -const FormHelperText: FC & WithWrapperProps = ( - props: FormHelperTextProps, -): ReactElement => { - const {className, ...rest} = props; - +const FormHelperText: FC & WithWrapperProps = ({ + className, + ...rest +}: FormHelperTextProps): ReactElement => { const classes: string = clsx('oxygen-form-helper-text', className); return ; @@ -41,6 +40,5 @@ const FormHelperText: FC & WithWrapperProps = = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'FormLabel'; const FormLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: FormLabelProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ( + {className, ...rest}: FormLabelProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-form-label', className); return ; @@ -40,6 +41,5 @@ const FormLabel: ForwardRefExoticComponent & WithWrapperProps = FormLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); FormLabel.muiName = COMPONENT_NAME; -FormLabel.defaultProps = {}; export default FormLabel; diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx index c81906cb..91a8b932 100644 --- a/packages/react/src/components/Grid/Grid.tsx +++ b/packages/react/src/components/Grid/Grid.tsx @@ -27,9 +27,7 @@ export type GridProps = MuiGridProps; const COMPONENT_NAME: string = 'Grid'; -const Grid: FC & WithWrapperProps = (props: GridProps): ReactElement => { - const {className, ...rest} = props; - +const Grid: FC & WithWrapperProps = ({className, ...rest}: GridProps): ReactElement => { const classes: string = clsx('oxygen-grid', className); return ; @@ -37,6 +35,5 @@ const Grid: FC & WithWrapperProps = (props: GridProps): ReactElement Grid.displayName = composeComponentDisplayName(COMPONENT_NAME); Grid.muiName = COMPONENT_NAME; -Grid.defaultProps = {}; export default Grid; diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx index da844e09..07a4bf52 100644 --- a/packages/react/src/components/Header/Header.tsx +++ b/packages/react/src/components/Header/Header.tsx @@ -132,21 +132,19 @@ const userDropdownMenuDefaultProps: UserDropdownMenuHeaderProps = { const COMPONENT_NAME: string = 'Header'; -const Header: FC & WithWrapperProps = (props: HeaderProps): ReactElement => { - const { - brand, - className, - modes, - showCollapsibleHamburger, - leftAlignedElements, - navbarToggleIcon, - onCollapsibleHamburgerClick, - rightAlignedElements, - user, - userDropdownMenu, - ...rest - } = props; - +const Header: FC & WithWrapperProps = ({ + brand, + className, + modes, + showCollapsibleHamburger, + leftAlignedElements, + navbarToggleIcon = , + onCollapsibleHamburgerClick, + rightAlignedElements, + user, + userDropdownMenu = userDropdownMenuDefaultProps, + ...rest +}: HeaderProps): ReactElement => { const userDropdownMenuProps: UserDropdownMenuHeaderProps = {...userDropdownMenuDefaultProps, ...userDropdownMenu}; const {mode, setMode} = useColorScheme(); @@ -250,9 +248,5 @@ const Header: FC & WithWrapperProps = (props: HeaderProps): ReactEl Header.displayName = composeComponentDisplayName(COMPONENT_NAME); Header.muiName = COMPONENT_NAME; -Header.defaultProps = { - navbarToggleIcon: , - userDropdownMenu: userDropdownMenuDefaultProps, -}; export default Header; diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx index 0cb1ce79..b8170737 100644 --- a/packages/react/src/components/IconButton/IconButton.tsx +++ b/packages/react/src/components/IconButton/IconButton.tsx @@ -34,9 +34,11 @@ export interface IconButtonProps extends MuiIconButtonProps { const COMPONENT_NAME: string = 'IconButton'; -const IconButton: FC & WithWrapperProps = (props: IconButtonProps): ReactElement => { - const {className, variant, ...rest} = props; - +const IconButton: FC & WithWrapperProps = ({ + className, + variant = IconButtonVariants.TEXT, + ...rest +}: IconButtonProps): ReactElement => { const classes: string = clsx('oxygen-icon-button', className, { 'oxygen-icon-button-contained': variant === IconButtonVariants.CONTAINED, }); @@ -46,8 +48,5 @@ const IconButton: FC & WithWrapperProps = (props: IconButtonPro IconButton.displayName = composeComponentDisplayName(COMPONENT_NAME); IconButton.muiName = COMPONENT_NAME; -IconButton.defaultProps = { - variant: IconButtonVariants.TEXT, -}; export default IconButton; diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx index b5d59f52..e51781e2 100644 --- a/packages/react/src/components/Image/Image.tsx +++ b/packages/react/src/components/Image/Image.tsx @@ -29,9 +29,7 @@ const COMPONENT_NAME: string = 'Image'; * TODO: Refer improvement issue if this Image component is required. * @see {@link https://github.com/wso2/oxygen-ui/issues/65} */ -const Image: FC & WithWrapperProps = (props: ImageProps): ReactElement => { - const {className, alt, ...rest} = props; - +const Image: FC & WithWrapperProps = ({className, alt, ...rest}: ImageProps): ReactElement => { const classes: string = clsx('oxygen-image', className); return {alt}; diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx index f56e359e..1370e33d 100644 --- a/packages/react/src/components/Input/Input.tsx +++ b/packages/react/src/components/Input/Input.tsx @@ -27,9 +27,7 @@ export type InputProps = MuiInputProps; const COMPONENT_NAME: string = 'Input'; -const Input: FC & WithWrapperProps = (props: InputProps): ReactElement => { - const {className, ...rest} = props; - +const Input: FC & WithWrapperProps = ({className, ...rest}: InputProps): ReactElement => { const classes: string = clsx('oxygen-input', className); return ; @@ -37,6 +35,5 @@ const Input: FC & WithWrapperProps = (props: InputProps): ReactEleme Input.displayName = composeComponentDisplayName(COMPONENT_NAME); Input.muiName = COMPONENT_NAME; -Input.defaultProps = {}; export default Input; diff --git a/packages/react/src/components/InputAdornment/InputAdornment.tsx b/packages/react/src/components/InputAdornment/InputAdornment.tsx index 65850052..e542577d 100644 --- a/packages/react/src/components/InputAdornment/InputAdornment.tsx +++ b/packages/react/src/components/InputAdornment/InputAdornment.tsx @@ -24,15 +24,15 @@ import composeComponentDisplayName from '../../utils/compose-component-display-n export type InputAdornmentProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'InputAdornment'; -const InputAdornment: FC & WithWrapperProps = ( - props: InputAdornmentProps, -): ReactElement => { - const {className, position, ...rest} = props; - +const InputAdornment: FC & WithWrapperProps = ({ + className, + position, + ...rest +}: InputAdornmentProps): ReactElement => { const classes: string = clsx('oxygen-input-adornment', className); return ; @@ -40,6 +40,5 @@ const InputAdornment: FC & WithWrapperProps = & WithWrapperProps = (props: InputLabelProps): ReactElement => { - const {className, ...rest} = props; - +const InputLabel: FC & WithWrapperProps = ({className, ...rest}: InputLabelProps): ReactElement => { const classes: string = clsx('oxygen-input-label', className); return ; @@ -37,6 +35,5 @@ const InputLabel: FC & WithWrapperProps = (props: InputLabelPro InputLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); InputLabel.muiName = COMPONENT_NAME; -InputLabel.defaultProps = {}; export default InputLabel; diff --git a/packages/react/src/components/LinearProgress/LinearProgress.tsx b/packages/react/src/components/LinearProgress/LinearProgress.tsx index ac90ab8d..34a09a24 100644 --- a/packages/react/src/components/LinearProgress/LinearProgress.tsx +++ b/packages/react/src/components/LinearProgress/LinearProgress.tsx @@ -26,9 +26,10 @@ export type LinearProgressProps = MuiLinearProgressProps; const COMPONENT_NAME: string = 'LinearProgress'; -const LinearProgress: FC & WithWrapperProps = (props: LinearProgressProps): ReactElement => { - const {className, ...rest} = props; - +const LinearProgress: FC & WithWrapperProps = ({ + className, + ...rest +}: LinearProgressProps): ReactElement => { const classes: string = clsx('oxygen-linear-progress', className); return ; @@ -36,6 +37,5 @@ const LinearProgress: FC & WithWrapperProps = (props: Linea LinearProgress.displayName = composeComponentDisplayName(COMPONENT_NAME); LinearProgress.muiName = COMPONENT_NAME; -LinearProgress.defaultProps = {}; export default LinearProgress; diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx index 6b7e8a5b..8e0da0c4 100644 --- a/packages/react/src/components/Link/Link.tsx +++ b/packages/react/src/components/Link/Link.tsx @@ -27,9 +27,7 @@ export type LinkProps = MuiLinkProps; const COMPONENT_NAME: string = 'Link'; -const Link: FC & WithWrapperProps = (props: LinkProps): ReactElement => { - const {className, ...rest} = props; - +const Link: FC & WithWrapperProps = ({className, ...rest}: LinkProps): ReactElement => { const classes: string = clsx('oxygen-link', className); return ; @@ -37,6 +35,5 @@ const Link: FC & WithWrapperProps = (props: LinkProps): ReactElement Link.displayName = composeComponentDisplayName(COMPONENT_NAME); Link.muiName = COMPONENT_NAME; -Link.defaultProps = {}; export default Link; diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx index fb7a57e7..b0084d21 100644 --- a/packages/react/src/components/List/List.tsx +++ b/packages/react/src/components/List/List.tsx @@ -27,9 +27,7 @@ export type ListProps = MuiListProps; const COMPONENT_NAME: string = 'List'; -const List: FC & WithWrapperProps = (props: ListProps): ReactElement => { - const {className, ...rest} = props; - +const List: FC & WithWrapperProps = ({className, ...rest}: ListProps): ReactElement => { const classes: string = clsx('oxygen-list', className); return ; @@ -37,6 +35,5 @@ const List: FC & WithWrapperProps = (props: ListProps): ReactElement List.displayName = composeComponentDisplayName(COMPONENT_NAME); List.muiName = COMPONENT_NAME; -List.defaultProps = {}; export default List; diff --git a/packages/react/src/components/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx index 05a6df70..f942c978 100644 --- a/packages/react/src/components/ListItem/ListItem.tsx +++ b/packages/react/src/components/ListItem/ListItem.tsx @@ -25,14 +25,15 @@ import './list-item.scss'; export type ListItemProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'ListItem'; const ListItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: ListItemProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ( + {className, ...rest}: ListItemProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-list-item', className); return ; @@ -41,6 +42,5 @@ const ListItem: ForwardRefExoticComponent & WithWrapperProps = fo ListItem.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItem.muiName = COMPONENT_NAME; -ListItem.defaultProps = {}; export default ListItem; diff --git a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx index 0796d450..6a81378e 100644 --- a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx +++ b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx @@ -27,9 +27,10 @@ export type ListItemAvatarProps = MuiListItemAvatarProps; const COMPONENT_NAME: string = 'ListItemAvatar'; -const ListItemAvatar: FC & WithWrapperProps = (props: ListItemAvatarProps): ReactElement => { - const {className, ...rest} = props; - +const ListItemAvatar: FC & WithWrapperProps = ({ + className, + ...rest +}: ListItemAvatarProps): ReactElement => { const classes: string = clsx('oxygen-list-item-avatar', className); return ; @@ -37,6 +38,5 @@ const ListItemAvatar: FC & WithWrapperProps = (props: ListI ListItemAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItemAvatar.muiName = COMPONENT_NAME; -ListItemAvatar.defaultProps = {}; export default ListItemAvatar; diff --git a/packages/react/src/components/ListItemButton/ListItemButton.tsx b/packages/react/src/components/ListItemButton/ListItemButton.tsx index b33f2dbc..55726bd6 100644 --- a/packages/react/src/components/ListItemButton/ListItemButton.tsx +++ b/packages/react/src/components/ListItemButton/ListItemButton.tsx @@ -25,14 +25,12 @@ import './list-item-button.scss'; export type ListItemButtonProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'ListItemButton'; const ListItemButton: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: ListItemButtonProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: ListItemButtonProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-list-item-button', className); return ; @@ -41,6 +39,5 @@ const ListItemButton: ForwardRefExoticComponent & WithWrapp ListItemButton.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItemButton.muiName = COMPONENT_NAME; -ListItemButton.defaultProps = {}; export default ListItemButton; diff --git a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx index 3a95f9ee..2dab02ca 100644 --- a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx +++ b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx @@ -27,9 +27,10 @@ export type ListItemIconProps = MuiListItemIconProps; const COMPONENT_NAME: string = 'ListItemIcon'; -const ListItemIcon: FC & WithWrapperProps = (props: ListItemIconProps): ReactElement => { - const {className, ...rest} = props; - +const ListItemIcon: FC & WithWrapperProps = ({ + className, + ...rest +}: ListItemIconProps): ReactElement => { const classes: string = clsx('oxygen-list-item-icon', className); return ; @@ -37,6 +38,5 @@ const ListItemIcon: FC & WithWrapperProps = (props: ListItemI ListItemIcon.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItemIcon.muiName = COMPONENT_NAME; -ListItemIcon.defaultProps = {}; export default ListItemIcon; diff --git a/packages/react/src/components/ListItemText/ListItemText.tsx b/packages/react/src/components/ListItemText/ListItemText.tsx index ffc88023..f4e3b928 100644 --- a/packages/react/src/components/ListItemText/ListItemText.tsx +++ b/packages/react/src/components/ListItemText/ListItemText.tsx @@ -27,9 +27,10 @@ export type ListItemTextProps = MuiListItemTextProps; const COMPONENT_NAME: string = 'ListItemText'; -const ListItemText: FC & WithWrapperProps = (props: ListItemTextProps): ReactElement => { - const {className, ...rest} = props; - +const ListItemText: FC & WithWrapperProps = ({ + className, + ...rest +}: ListItemTextProps): ReactElement => { const classes: string = clsx('oxygen-list-item-text', className); return ; @@ -37,6 +38,5 @@ const ListItemText: FC & WithWrapperProps = (props: ListItemT ListItemText.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItemText.muiName = COMPONENT_NAME; -ListItemText.defaultProps = {}; export default ListItemText; diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index aea59089..e05acdc5 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -27,9 +27,7 @@ export type MenuProps = MuiMenuProps; const COMPONENT_NAME: string = 'Menu'; -const Menu: FC & WithWrapperProps = (props: MenuProps): ReactElement => { - const {className, ...rest} = props; - +const Menu: FC & WithWrapperProps = ({className, ...rest}: MenuProps): ReactElement => { const classes: string = clsx('oxygen-menu', className); return ; diff --git a/packages/react/src/components/MenuItem/MenuItem.tsx b/packages/react/src/components/MenuItem/MenuItem.tsx index c3d0d7bd..32cd214d 100644 --- a/packages/react/src/components/MenuItem/MenuItem.tsx +++ b/packages/react/src/components/MenuItem/MenuItem.tsx @@ -27,9 +27,7 @@ export type MenuItemProps = MuiMenuItemProps; const COMPONENT_NAME: string = 'MenuItem'; -const MenuItem: FC & WithWrapperProps = (props: MenuItemProps): ReactElement => { - const {className, ...rest} = props; - +const MenuItem: FC & WithWrapperProps = ({className, ...rest}: MenuItemProps): ReactElement => { const classes: string = clsx('oxygen-menu-item', className); return ; diff --git a/packages/react/src/components/Navbar/Navbar.tsx b/packages/react/src/components/Navbar/Navbar.tsx index 62eddc22..6da5023a 100644 --- a/packages/react/src/components/Navbar/Navbar.tsx +++ b/packages/react/src/components/Navbar/Navbar.tsx @@ -73,9 +73,17 @@ export type NavbarItems = { const COMPONENT_NAME: string = 'Navbar'; -const Navbar: FC & WithWrapperProps = (props: NavbarProps): ReactElement => { - const {className, fill, onClose, items, collapsible, open, onOpen, toggleIcon, ...rest} = props; - +const Navbar: FC & WithWrapperProps = ({ + className, + fill, + onClose, + items, + collapsible = true, + open = true, + onOpen, + toggleIcon = , + ...rest +}: NavbarProps): ReactElement => { const classes: string = clsx( 'oxygen-navbar', { @@ -192,10 +200,5 @@ const Navbar: FC & WithWrapperProps = (props: NavbarProps): ReactEl Navbar.displayName = composeComponentDisplayName(COMPONENT_NAME); Navbar.muiName = COMPONENT_NAME; -Navbar.defaultProps = { - collapsible: true, - open: true, - toggleIcon: , -}; export default Navbar; diff --git a/packages/react/src/components/NavbarItem/NavbarItem.tsx b/packages/react/src/components/NavbarItem/NavbarItem.tsx index 0a0ae311..fa847cba 100644 --- a/packages/react/src/components/NavbarItem/NavbarItem.tsx +++ b/packages/react/src/components/NavbarItem/NavbarItem.tsx @@ -59,9 +59,25 @@ export interface NavbarItemProps extends ListItemProps, Pick & WithWrapperProps = forwardRef( - (props: NavbarItemProps, ref: MutableRefObject): ReactElement => { - const {className, component, fill, icon, id, label, onClick, href, selected, tag, tagClassName, open, ...rest} = - props; + ( + { + className, + collapsible = true, + component, + fill, + icon, + id, + label, + onClick, + href, + selected, + tag, + tagClassName, + open = true, + ...rest + }: NavbarItemProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx( 'oxygen-navbar-item', { @@ -75,7 +91,13 @@ const NavbarItem: ForwardRefExoticComponent & WithWrapperProps return ( - + {icon} {open && tag ? ( @@ -94,9 +116,5 @@ const NavbarItem: ForwardRefExoticComponent & WithWrapperProps NavbarItem.displayName = composeComponentDisplayName(COMPONENT_NAME); NavbarItem.muiName = COMPONENT_NAME; -NavbarItem.defaultProps = { - collapsible: true, - open: true, -}; export default NavbarItem; diff --git a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx index 18d30705..918a6549 100644 --- a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx +++ b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx @@ -27,9 +27,10 @@ export type OutlinedInputProps = MuiOutlinedInputProps; const COMPONENT_NAME: string = 'OutlinedInput'; -const OutlinedInput: FC & WithWrapperProps = (props: OutlinedInputProps): ReactElement => { - const {className, ...rest} = props; - +const OutlinedInput: FC & WithWrapperProps = ({ + className, + ...rest +}: OutlinedInputProps): ReactElement => { const classes: string = clsx('oxygen-outlined-input', className); return ; @@ -37,6 +38,5 @@ const OutlinedInput: FC & WithWrapperProps = (props: Outline OutlinedInput.displayName = composeComponentDisplayName(COMPONENT_NAME); OutlinedInput.muiName = COMPONENT_NAME; -OutlinedInput.defaultProps = {}; export default OutlinedInput; diff --git a/packages/react/src/components/Paper/Paper.tsx b/packages/react/src/components/Paper/Paper.tsx index 7bdc6d91..533c60a1 100644 --- a/packages/react/src/components/Paper/Paper.tsx +++ b/packages/react/src/components/Paper/Paper.tsx @@ -24,14 +24,12 @@ import composeComponentDisplayName from '../../utils/compose-component-display-n export type PaperProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Paper'; const Paper: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: PaperProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: PaperProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-paper', className); return ; @@ -40,6 +38,5 @@ const Paper: ForwardRefExoticComponent & WithWrapperProps = forwardR Paper.displayName = composeComponentDisplayName(COMPONENT_NAME); Paper.muiName = COMPONENT_NAME; -Paper.defaultProps = {}; export default Paper; diff --git a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx index 54b7c8c9..91f071f2 100644 --- a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx +++ b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx @@ -70,8 +70,8 @@ export interface PhoneNumberInputProps extends BoxProps { const COMPONENT_NAME: string = 'PhoneNumberInput'; const PhoneNumberInput: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: PhoneNumberInputProps, ref: MutableRefObject): ReactElement => { - const { + ( + { className, dialCodeValue, label, @@ -82,8 +82,9 @@ const PhoneNumberInput: ForwardRefExoticComponent & WithW placeholder, SelectProps, ...rest - } = props; - + }: PhoneNumberInputProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-phone-number-input', className); const [dialCode, setDialCode] = useState(dialCodeValue ?? countries[0].dialCode); @@ -165,6 +166,5 @@ const PhoneNumberInput: ForwardRefExoticComponent & WithW PhoneNumberInput.displayName = composeComponentDisplayName(COMPONENT_NAME); PhoneNumberInput.muiName = COMPONENT_NAME; -PhoneNumberInput.defaultProps = {}; export default PhoneNumberInput; diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx index 9331a27f..533008ee 100644 --- a/packages/react/src/components/Popover/Popover.tsx +++ b/packages/react/src/components/Popover/Popover.tsx @@ -27,9 +27,7 @@ export type PopoverProps = MuiPopoverProps; const COMPONENT_NAME: string = 'Popover'; const Popover: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: PopoverProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: PopoverProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-popover', className); return ; @@ -38,6 +36,5 @@ const Popover: ForwardRefExoticComponent & WithWrapperProps = forw Popover.displayName = composeComponentDisplayName(COMPONENT_NAME); Popover.muiName = COMPONENT_NAME; -Popover.defaultProps = {}; export default Popover; diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx index c2bba7e6..32fb979e 100644 --- a/packages/react/src/components/Radio/Radio.tsx +++ b/packages/react/src/components/Radio/Radio.tsx @@ -27,9 +27,7 @@ export type RadioProps = MuiRadioProps; const COMPONENT_NAME: string = 'Radio'; const Radio: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: RadioProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: RadioProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-radio', className); return ; @@ -38,6 +36,5 @@ const Radio: ForwardRefExoticComponent & WithWrapperProps = forwardR Radio.displayName = composeComponentDisplayName(COMPONENT_NAME); Radio.muiName = COMPONENT_NAME; -Radio.defaultProps = {}; export default Radio; diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx index bb82ba6d..8c928589 100644 --- a/packages/react/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx @@ -27,9 +27,7 @@ export type RadioGroupProps = MuiRadioGroupProps; const COMPONENT_NAME: string = 'RadioGroup'; const RadioGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: RadioGroupProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: RadioGroupProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-radio-group', className); return ; @@ -38,6 +36,5 @@ const RadioGroup: ForwardRefExoticComponent & WithWrapperProps RadioGroup.displayName = composeComponentDisplayName(COMPONENT_NAME); RadioGroup.muiName = COMPONENT_NAME; -RadioGroup.defaultProps = {}; export default RadioGroup; diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx index f43d47a0..2f4489ba 100644 --- a/packages/react/src/components/Select/Select.tsx +++ b/packages/react/src/components/Select/Select.tsx @@ -34,9 +34,21 @@ export interface SelectProps extends MuiSelectProps { const COMPONENT_NAME: string = 'Select'; const Select: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: SelectProps, ref: MutableRefObject): ReactElement => { - const {className, InputLabelProps, label, name, required, ...rest} = props; - + ( + { + className, + InputLabelProps = { + disableAnimation: true, + focused: false, + shrink: false, + }, + label, + name, + required, + ...rest + }: SelectProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-select', className); const labelProps: MuiInputLabelProps = { @@ -69,12 +81,5 @@ const Select: ForwardRefExoticComponent & WithWrapperProps = forwar Select.displayName = composeComponentDisplayName(COMPONENT_NAME); Select.muiName = COMPONENT_NAME; -Select.defaultProps = { - InputLabelProps: { - disableAnimation: true, - focused: false, - shrink: false, - }, -}; export default Select; diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx index 7777cb98..933d71af 100644 --- a/packages/react/src/components/SignIn/SignIn.tsx +++ b/packages/react/src/components/SignIn/SignIn.tsx @@ -44,9 +44,13 @@ export interface SignInProps extends BoxProps { const COMPONENT_NAME: string = 'SignIn'; -const SignIn: FC & MuiWrapperProps = (props: SignInProps): ReactElement => { - const {className, signUpUrl, logoUrl, signInOptions, ...rest} = props; - +const SignIn: FC & MuiWrapperProps = ({ + className, + signUpUrl, + logoUrl, + signInOptions, + ...rest +}: SignInProps): ReactElement => { const classes: string = clsx('oxygen-sign-in', className); return ( @@ -106,6 +110,5 @@ const SignIn: FC & MuiWrapperProps = (props: SignInProps): ReactEle SignIn.displayName = composeComponentDisplayName(COMPONENT_NAME); SignIn.muiName = 'SignIn'; -SignIn.defaultProps = {}; export default SignIn; diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/Skeleton/Skeleton.tsx index 86875539..258b8958 100644 --- a/packages/react/src/components/Skeleton/Skeleton.tsx +++ b/packages/react/src/components/Skeleton/Skeleton.tsx @@ -24,15 +24,14 @@ import composeComponentDisplayName from '../../utils/compose-component-display-n export type SkeletonProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Skeleton'; -const Skeleton: FC & WithWrapperProps = ( - props: SkeletonProps, -): ReactElement => { - const {className, ...rest} = props; - +const Skeleton: FC & WithWrapperProps = ({ + className, + ...rest +}: SkeletonProps): ReactElement => { const classes: string = clsx('oxygen-skeleton', className); return ; @@ -40,6 +39,5 @@ const Skeleton: FC & WithWrapperProps = ( Skeleton.displayName = composeComponentDisplayName(COMPONENT_NAME); Skeleton.muiName = COMPONENT_NAME; -Skeleton.defaultProps = {}; export default Skeleton; diff --git a/packages/react/src/components/Snackbar/Snackbar.tsx b/packages/react/src/components/Snackbar/Snackbar.tsx index 7bed5d9e..df895ed4 100644 --- a/packages/react/src/components/Snackbar/Snackbar.tsx +++ b/packages/react/src/components/Snackbar/Snackbar.tsx @@ -28,9 +28,7 @@ export type SnackbarProps = MuiSnackbarProps; const COMPONENT_NAME: string = 'Snackbar'; const Snackbar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: SnackbarProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: SnackbarProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-snackbar', className); return ; @@ -39,6 +37,5 @@ const Snackbar: ForwardRefExoticComponent & WithWrapperProps = fo Snackbar.displayName = composeComponentDisplayName(COMPONENT_NAME); Snackbar.muiName = COMPONENT_NAME; -Snackbar.defaultProps = {}; export default Snackbar; diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index ebe0d7ad..fc3ced33 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -40,9 +40,12 @@ export interface StepperProps extends HTMLAttributes { const COMPONENT_NAME: string = 'Stepper'; -const Stepper: FC & WithWrapperProps = (props: StepperProps): ReactElement => { - const {animateOnSlide, className, currentStep, steps} = props; - +const Stepper: FC & WithWrapperProps = ({ + animateOnSlide, + className, + currentStep = 0, + steps, +}: StepperProps): ReactElement => { const [slideLeftPosition, setSlideLeftPosition] = useState(0); const [slideContainerWidth, setSlideContainerWidth] = useState(0); @@ -105,8 +108,5 @@ const Stepper: FC & WithWrapperProps = (props: StepperProps): Reac Stepper.displayName = composeComponentDisplayName(COMPONENT_NAME); Stepper.muiName = COMPONENT_NAME; -Stepper.defaultProps = { - currentStep: 0, -}; export default Stepper; diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx index 6650c34d..d0ca1ec6 100644 --- a/packages/react/src/components/Switch/Switch.tsx +++ b/packages/react/src/components/Switch/Switch.tsx @@ -31,9 +31,7 @@ const COMPONENT_NAME: string = 'Switch'; * @remarks `any` is used as the generic type for the props because the generic type is not used in the component. */ const Switch: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: SwitchProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: SwitchProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-switch', className); return ; @@ -42,6 +40,5 @@ const Switch: ForwardRefExoticComponent & WithWrapperProps = forwar Switch.displayName = composeComponentDisplayName(COMPONENT_NAME); Switch.muiName = COMPONENT_NAME; -Switch.defaultProps = {}; export default Switch; diff --git a/packages/react/src/components/Tab/Tab.tsx b/packages/react/src/components/Tab/Tab.tsx index 3797dc12..a63d439f 100644 --- a/packages/react/src/components/Tab/Tab.tsx +++ b/packages/react/src/components/Tab/Tab.tsx @@ -28,9 +28,7 @@ export type TabProps = MuiTabProps; const COMPONENT_NAME: string = 'Tab'; const Tab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: TabProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: TabProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-tab', className); return ; diff --git a/packages/react/src/components/TabPanel/TabPanel.tsx b/packages/react/src/components/TabPanel/TabPanel.tsx index 9c95b14b..ab168917 100644 --- a/packages/react/src/components/TabPanel/TabPanel.tsx +++ b/packages/react/src/components/TabPanel/TabPanel.tsx @@ -38,9 +38,10 @@ export interface TabPanelProps extends MuiBoxProps { const COMPONENT_NAME: string = 'TabPanel'; const TabPanel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: TabPanelProps, ref: MutableRefObject): ReactElement => { - const {className, children, value, index, ...rest} = props; - + ( + {className, children, value, index, ...rest}: TabPanelProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-tab-panel', className); return ( diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 804c4b2b..0a1df941 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -27,14 +27,15 @@ import './tabs.scss'; export type TabsProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Tabs'; const Tabs: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: TabsProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ( + {className, ...rest}: TabsProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-tabs', className); return ( diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx index 9690eb91..3841ebea 100644 --- a/packages/react/src/components/TextField/TextField.tsx +++ b/packages/react/src/components/TextField/TextField.tsx @@ -51,9 +51,7 @@ export type TextFieldProps = { const COMPONENT_NAME: string = 'TextField'; const PasswordField: ForwardRefExoticComponent = forwardRef( - (props: TextFieldProps, ref: MutableRefObject): ReactElement => { - const {type, ...rest} = props; - + ({type, ...rest}: TextFieldProps, ref: MutableRefObject): ReactElement => { const [showPassword, setShowPassword] = useState(false); const handleClickShowPassword = (): void => setShowPassword((show: boolean) => !show); @@ -87,9 +85,7 @@ const PasswordField: ForwardRefExoticComponent = forwardRef( ) as ForwardRefExoticComponent; const PasswordFieldWithCriteria: ForwardRefExoticComponent = forwardRef( - (props: TextFieldProps, ref: MutableRefObject): ReactElement => { - const {criteria, id, type, ...rest} = props; - + ({criteria, id, type, ...rest}: TextFieldProps, ref: MutableRefObject): ReactElement => { const [openPasswordCriteriaTooltip, setOpenPasswordCriteriaTooltip] = useState(false); const handleClick = (): void => { @@ -144,9 +140,10 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent = for ) as ForwardRefExoticComponent; const TextField: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: TextFieldProps, ref: MutableRefObject): ReactElement => { - const {className, id, label, type, InputLabelProps, ...rest} = props; - + ( + {className, id, label, type, InputLabelProps, ...rest}: TextFieldProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-text-field', className); return ( @@ -166,6 +163,5 @@ const TextField: ForwardRefExoticComponent & WithWrapperProps = TextField.displayName = composeComponentDisplayName(COMPONENT_NAME); TextField.muiName = COMPONENT_NAME; -TextField.defaultProps = {}; export default TextField; diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx index 01363e35..0b242e34 100644 --- a/packages/react/src/components/Toolbar/Toolbar.tsx +++ b/packages/react/src/components/Toolbar/Toolbar.tsx @@ -27,9 +27,7 @@ export type ToolbarProps = MuiToolbarProps; const COMPONENT_NAME: string = 'Toolbar'; -const Toolbar: FC & WithWrapperProps = (props: ToolbarProps): ReactElement => { - const {className, ...rest} = props; - +const Toolbar: FC & WithWrapperProps = ({className, ...rest}: ToolbarProps): ReactElement => { const classes: string = clsx('oxygen-toolbar', className); return ; @@ -37,6 +35,5 @@ const Toolbar: FC & WithWrapperProps = (props: ToolbarProps): Reac Toolbar.displayName = composeComponentDisplayName(COMPONENT_NAME); Toolbar.muiName = COMPONENT_NAME; -Toolbar.defaultProps = {}; export default Toolbar; diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx index aba20b19..ba007dd6 100644 --- a/packages/react/src/components/Tooltip/Tooltip.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.tsx @@ -28,9 +28,7 @@ export type TooltipProps = MuiTooltipProps; const COMPONENT_NAME: string = 'Tooltip'; const Tooltip: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - (props: TooltipProps, ref: MutableRefObject): ReactElement => { - const {className, ...rest} = props; - + ({className, ...rest}: TooltipProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-tooltip', className); return ; @@ -39,6 +37,5 @@ const Tooltip: ForwardRefExoticComponent & WithWrapperProps = forw Tooltip.displayName = composeComponentDisplayName(COMPONENT_NAME); Tooltip.muiName = COMPONENT_NAME; -Tooltip.defaultProps = {}; export default Tooltip; diff --git a/packages/react/src/components/Typography/Typography.tsx b/packages/react/src/components/Typography/Typography.tsx index b7d39124..349a7017 100644 --- a/packages/react/src/components/Typography/Typography.tsx +++ b/packages/react/src/components/Typography/Typography.tsx @@ -25,15 +25,14 @@ import './typography.scss'; export type TypographyProps = { component?: C; -} & Omit, 'component'>; +} & Omit; const COMPONENT_NAME: string = 'Typography'; -const Typography: FC & WithWrapperProps = ( - props: TypographyProps, -): ReactElement => { - const {className, ...rest} = props; - +const Typography: FC & WithWrapperProps = ({ + className, + ...rest +}: TypographyProps): ReactElement => { const classes: string = clsx('oxygen-typography', className); return ; @@ -41,6 +40,5 @@ const Typography: FC & WithWrapperProps = & WithWrapperProps = ( - props: UserDropdownMenuProps & WithWrapperProps, -) => { - const { - className, - children, - footerContent, - triggerOptions, - user, - modes, - mode, - onUserProfileNavigation, - modesHeading, - actionText, - actionIcon, - onModeChange, - onActionTrigger, - menuItems, - ...rest - } = props; - +const UserDropdownMenu: FC & WithWrapperProps = ({ + className, + children, + footerContent, + triggerOptions, + user, + modes, + mode, + onUserProfileNavigation, + modesHeading, + actionText, + actionIcon, + onModeChange, + onActionTrigger, + menuItems, + ...rest +}: UserDropdownMenuProps & WithWrapperProps) => { const classes: string = clsx('oxygen-user-dropdown-menu', className); const [anchorEl, setAnchorEl] = useState(null); diff --git a/packages/react/src/components/Wizard/Wizard.tsx b/packages/react/src/components/Wizard/Wizard.tsx index 33991d7b..2ed3f707 100644 --- a/packages/react/src/components/Wizard/Wizard.tsx +++ b/packages/react/src/components/Wizard/Wizard.tsx @@ -92,25 +92,23 @@ export interface WizardProps extends HTMLAttributes { const COMPONENT_NAME: string = 'Wizard'; -const Wizard: FC & WithWrapperProps = (props: WizardProps): ReactElement => { - const { - allowBackwardNavigation, - allowCancel, - animateOnSlide, - className, - title, - subtitle, - nextButtonText, - previousButtonText, - cancelButtonText, - onCancelButtonClick, - onNextButtonClick, - onPreviousButtonClick, - onFinishButtonClick, - finishButtonText, - steps, - } = props; - +const Wizard: FC & WithWrapperProps = ({ + allowBackwardNavigation = true, + allowCancel = false, + animateOnSlide, + className, + title, + subtitle, + nextButtonText = 'Next', + previousButtonText = 'Previous', + cancelButtonText = 'Cancel', + onCancelButtonClick, + onNextButtonClick, + onPreviousButtonClick, + onFinishButtonClick, + finishButtonText = 'Finish', + steps, +}: WizardProps): ReactElement => { const [currentStep, setCurrentStep] = useState(0); const classes: string = clsx('oxygen-wizard', className); @@ -190,13 +188,5 @@ const Wizard: FC & WithWrapperProps = (props: WizardProps): ReactEl Wizard.displayName = composeComponentDisplayName(COMPONENT_NAME); Wizard.muiName = COMPONENT_NAME; -Wizard.defaultProps = { - allowBackwardNavigation: true, - allowCancel: false, - cancelButtonText: 'Cancel', - finishButtonText: 'Finish', - nextButtonText: 'Next', - previousButtonText: 'Previous', -}; export default Wizard; diff --git a/packages/react/src/theme/ThemeProvider.tsx b/packages/react/src/theme/ThemeProvider.tsx index 87f234ab..4d1e40ae 100644 --- a/packages/react/src/theme/ThemeProvider.tsx +++ b/packages/react/src/theme/ThemeProvider.tsx @@ -51,21 +51,18 @@ export type ThemeProviderProps = Partial): ReactElement => { - const {children, theme, ...rest} = props; - return ( - - - - {children} - - - ); -}; +const ThemeProvider = ({children, theme, ...rest}: PropsWithChildren): ReactElement => ( + + + + {children} + + +); export default ThemeProvider; From e432d254f6b3fb24b62222e9a0f37f519a57c9cb Mon Sep 17 00:00:00 2001 From: Brion Date: Thu, 10 Oct 2024 14:44:05 +0530 Subject: [PATCH 02/10] fix(react): update composition pattern --- .../src/components/Accordion/Accordion.tsx | 48 ++- .../react/src/components/Accordion/index.ts | 2 +- .../AccordionDetails/AccordionDetails.tsx | 29 +- .../src/components/AccordionDetails/index.ts | 2 +- .../AccordionSummary/AccordionSummary.tsx | 50 ++- .../src/components/AccordionSummary/index.ts | 4 +- .../AccountOverview/AccountOverview.tsx | 122 ++++--- .../src/components/AccountOverview/index.ts | 2 +- .../src/components/ActionCard/ActionCard.tsx | 79 +++-- .../react/src/components/ActionCard/index.ts | 2 +- packages/react/src/components/Alert/Alert.tsx | 43 ++- packages/react/src/components/Alert/index.ts | 4 +- .../src/components/AlertTitle/AlertTitle.tsx | 43 ++- .../react/src/components/AlertTitle/index.ts | 2 +- .../react/src/components/AppBar/AppBar.tsx | 53 ++- packages/react/src/components/AppBar/index.ts | 2 + .../src/components/AppShell/AppShell.tsx | 72 ++-- .../components/Autocomplete/Autocomplete.tsx | 36 +- .../src/components/Autocomplete/index.ts | 17 +- .../react/src/components/Avatar/Avatar.tsx | 89 +++-- packages/react/src/components/Avatar/index.ts | 4 +- .../src/components/Backdrop/Backdrop.tsx | 53 ++- .../react/src/components/Backdrop/index.ts | 5 +- packages/react/src/components/Badge/Badge.tsx | 54 ++- packages/react/src/components/Badge/index.ts | 5 +- packages/react/src/components/Box/Box.tsx | 47 ++- packages/react/src/components/Box/index.ts | 4 +- .../components/Breadcrumbs/Breadcrumbs.tsx | 65 +++- .../react/src/components/Breadcrumbs/index.ts | 4 +- .../react/src/components/Button/Button.tsx | 53 ++- packages/react/src/components/Button/index.ts | 4 +- packages/react/src/components/Card/Card.tsx | 40 ++- packages/react/src/components/Card/index.ts | 4 +- .../components/CardActions/CardActions.tsx | 38 ++- .../react/src/components/CardActions/index.ts | 2 +- .../components/CardContent/CardContent.tsx | 39 ++- .../react/src/components/CardContent/index.ts | 4 +- .../src/components/CardHeader/CardHeader.tsx | 54 ++- .../react/src/components/CardHeader/index.ts | 4 +- .../src/components/Carousel/Carousel.tsx | 264 ++++++++------- .../react/src/components/Carousel/index.ts | 3 +- .../src/components/Checkbox/Checkbox.tsx | 45 ++- .../react/src/components/Checkbox/index.ts | 4 +- packages/react/src/components/Chip/Chip.tsx | 52 ++- packages/react/src/components/Chip/index.ts | 9 +- .../CircularProgress/CircularProgress.tsx | 53 ++- .../src/components/CircularProgress/index.ts | 4 +- .../CircularProgressAvatar.tsx | 120 ++++--- .../CircularProgressAvatar/index.ts | 2 +- packages/react/src/components/Code/Code.tsx | 62 ++-- packages/react/src/components/Code/index.ts | 2 +- .../CollapsibleNavbarItem.tsx | 60 +++- .../CollapsibleNavbarItem/index.tsx | 2 +- .../ColorModeToggle/ColorModeToggle.tsx | 89 +++-- .../src/components/ColorModeToggle/index.ts | 2 +- .../src/components/Container/Container.tsx | 55 ++- .../react/src/components/Container/index.ts | 4 +- .../components/CountryFlag/CountryFlag.tsx | 46 ++- .../react/src/components/CountryFlag/index.ts | 2 +- .../src/components/DataGrid/DataGrid.tsx | 41 ++- .../react/src/components/DataGrid/index.ts | 29 +- .../react/src/components/Divider/Divider.tsx | 54 ++- .../react/src/components/Divider/index.ts | 4 +- .../react/src/components/Drawer/Drawer.tsx | 49 ++- packages/react/src/components/Drawer/index.ts | 2 +- packages/react/src/components/Fab/Fab.tsx | 42 ++- packages/react/src/components/Fab/index.ts | 9 +- .../react/src/components/Footer/Footer.tsx | 113 ++++--- packages/react/src/components/Footer/index.ts | 2 +- .../components/FormControl/FormControl.tsx | 61 +++- .../react/src/components/FormControl/index.ts | 9 +- .../FormControlLabel/FormControlLabel.tsx | 31 +- .../src/components/FormControlLabel/index.ts | 2 +- .../src/components/FormGroup/FormGroup.tsx | 30 +- .../react/src/components/FormGroup/index.ts | 2 +- .../FormHelperText/FormHelperText.tsx | 55 ++- .../src/components/FormHelperText/index.ts | 4 +- .../src/components/FormLabel/FormLabel.tsx | 45 ++- .../react/src/components/FormLabel/index.ts | 10 +- packages/react/src/components/Grid/Grid.tsx | 51 ++- packages/react/src/components/Grid/index.ts | 4 +- .../react/src/components/Header/Header.tsx | 267 ++++++++------- packages/react/src/components/Header/index.ts | 3 +- .../src/components/IconButton/IconButton.tsx | 67 +++- .../react/src/components/IconButton/index.ts | 8 +- packages/react/src/components/Image/Image.tsx | 29 +- packages/react/src/components/Image/index.ts | 2 +- packages/react/src/components/Input/Input.tsx | 38 ++- packages/react/src/components/Input/index.ts | 2 +- .../InputAdornment/InputAdornment.tsx | 57 +++- .../src/components/InputAdornment/index.ts | 4 +- .../src/components/InputLabel/InputLabel.tsx | 53 ++- .../react/src/components/InputLabel/index.ts | 4 +- .../LinearProgress/LinearProgress.tsx | 41 ++- .../src/components/LinearProgress/index.ts | 4 +- packages/react/src/components/Link/Link.tsx | 55 ++- packages/react/src/components/Link/index.ts | 2 + packages/react/src/components/List/List.tsx | 54 ++- packages/react/src/components/List/index.ts | 4 +- .../src/components/ListItem/ListItem.tsx | 41 ++- .../react/src/components/ListItem/index.ts | 4 +- .../ListItemAvatar/ListItemAvatar.tsx | 40 ++- .../src/components/ListItemAvatar/index.ts | 2 +- .../ListItemButton/ListItemButton.tsx | 47 ++- .../components/ListItemIcon/ListItemIcon.tsx | 40 ++- .../src/components/ListItemIcon/index.ts | 2 +- .../components/ListItemText/ListItemText.tsx | 40 ++- .../src/components/ListItemText/index.ts | 2 +- packages/react/src/components/Menu/Menu.tsx | 48 ++- packages/react/src/components/Menu/index.ts | 2 +- .../src/components/MenuItem/MenuItem.tsx | 53 ++- .../react/src/components/MenuItem/index.tsx | 4 +- .../react/src/components/Navbar/Navbar.tsx | 276 ++++++++------- packages/react/src/components/Navbar/index.ts | 2 +- .../src/components/NavbarItem/NavbarItem.tsx | 87 +++-- .../react/src/components/NavbarItem/index.tsx | 2 +- .../OutlinedInput/OutlinedInput.tsx | 41 ++- .../src/components/OutlinedInput/index.ts | 2 +- packages/react/src/components/Paper/Paper.tsx | 46 ++- packages/react/src/components/Paper/index.ts | 4 +- .../PhoneNumberInput/PhoneNumberInput.tsx | 57 +++- .../src/components/PhoneNumberInput/index.ts | 2 +- .../react/src/components/Popover/Popover.tsx | 43 ++- .../react/src/components/Popover/index.ts | 5 +- packages/react/src/components/Radio/Radio.tsx | 41 ++- packages/react/src/components/Radio/index.ts | 4 +- .../src/components/RadioGroup/RadioGroup.tsx | 30 +- .../react/src/components/RadioGroup/index.ts | 4 +- .../react/src/components/Select/Select.tsx | 35 +- packages/react/src/components/Select/index.ts | 4 +- .../react/src/components/SignIn/SignIn.tsx | 161 +++++---- packages/react/src/components/SignIn/index.ts | 2 +- .../src/components/Skeleton/Skeleton.tsx | 55 ++- .../react/src/components/Skeleton/index.ts | 4 +- .../src/components/Snackbar/Snackbar.tsx | 27 +- .../react/src/components/Snackbar/index.ts | 4 +- .../react/src/components/Stepper/Stepper.tsx | 150 +++++---- .../react/src/components/Stepper/index.ts | 2 +- .../react/src/components/Switch/Switch.tsx | 44 ++- packages/react/src/components/Switch/index.ts | 4 +- packages/react/src/components/Tab/Tab.tsx | 45 ++- packages/react/src/components/Tab/index.ts | 4 +- .../src/components/TabPanel/TabPanel.tsx | 37 +- .../react/src/components/TabPanel/index.ts | 2 +- packages/react/src/components/Tabs/Tabs.tsx | 43 ++- packages/react/src/components/Tabs/index.ts | 4 +- .../src/components/TextField/TextField.tsx | 78 +++-- .../components/TextField/constants/index.ts | 19 -- .../components/TextField/constants/types.ts | 22 -- .../react/src/components/TextField/index.ts | 12 +- .../react/src/components/Toolbar/Toolbar.tsx | 52 ++- .../react/src/components/Toolbar/index.ts | 4 +- .../react/src/components/Tooltip/Tooltip.tsx | 29 +- .../src/components/Typography/Typography.tsx | 57 +++- .../react/src/components/Typography/index.ts | 4 +- .../UserDropdownMenu/UserDropdownMenu.tsx | 318 ++++++++++-------- .../src/components/UserDropdownMenu/index.ts | 4 +- .../react/src/components/Wizard/Wizard.tsx | 195 ++++++----- packages/react/src/components/Wizard/index.ts | 2 +- 159 files changed, 4207 insertions(+), 1594 deletions(-) delete mode 100644 packages/react/src/components/TextField/constants/index.ts delete mode 100644 packages/react/src/components/TextField/constants/types.ts diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx index 39022d3e..df3c6be0 100644 --- a/packages/react/src/components/Accordion/Accordion.tsx +++ b/packages/react/src/components/Accordion/Accordion.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. * * WSO2 LLC. licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file except @@ -18,20 +18,54 @@ import MuiAccordion, {AccordionProps as MuiAccordionProps} from '@mui/material/Accordion'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './accordion.scss'; -export type AccordionProps = MuiAccordionProps; +export type AccordionProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'Accordion'; -const Accordion: FC & WithWrapperProps = ({className, ...rest}: AccordionProps): ReactElement => { - const classes: string = clsx('oxygen-accordion', className); +/** + * The Accordion component lets users show and hide sections of related content on a page. + * + * Demos: + * + * - [Accordion (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-accordion) + * - [Accordion (MUI)](https://mui.com/material-ui/react-accordion/) + * + * API: + * + * - [Accordion API](https://mui.com/material-ui/api/accordion/) + * - inherits [Paper API](https://mui.com/material-ui/api/paper/) + * + * @remarks + * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/paper/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Accordion component. + * @param ref - The ref to be forwarded to the MuiAccordion component. + * @returns The rendered Accordion component. + */ +const Accordion: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: AccordionProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-accordion', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Accordion.displayName = composeComponentDisplayName(COMPONENT_NAME); Accordion.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Accordion/index.ts b/packages/react/src/components/Accordion/index.ts index 1896ff61..29a1c979 100644 --- a/packages/react/src/components/Accordion/index.ts +++ b/packages/react/src/components/Accordion/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Accordion'; -export type {AccordionProps} from './Accordion'; +export * from './Accordion'; diff --git a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx index 92389c8d..1e26b7b5 100644 --- a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx +++ b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiAccordionDetails, {AccordionDetailsProps as MuiAccordionDetailsProps} from '@mui/material/AccordionDetails'; +import MuiAccordionDetails from '@mui/material/AccordionDetails'; +import type {AccordionDetailsProps as MuiAccordionDetailsProps} from '@mui/material/AccordionDetails'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -26,11 +28,32 @@ export type AccordionDetailsProps = MuiAccordionDetailsProps; const COMPONENT_NAME: string = 'AccordionDetails'; +/** + * The Accordion Details component is the wrapper for the Accordion content. + * + * Demos: + * + * - [Accordion (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-accordion) + * - [Accordion (MUI)](https://mui.com/material-ui/react-accordion/) + * + * API: + * + * - [AccordionDetails API](https://mui.com/material-ui/api/accordion-details/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the AccordionDetails component. + * @param ref - The ref to be forwarded to the MuiAccordionDetails component. + * @returns The rendered AccordionDetails component. + */ const AccordionDetails: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ({className, ...rest}: AccordionDetailsProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-accordion-details', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/AccordionDetails/index.ts b/packages/react/src/components/AccordionDetails/index.ts index f51b979f..c815ca9e 100644 --- a/packages/react/src/components/AccordionDetails/index.ts +++ b/packages/react/src/components/AccordionDetails/index.ts @@ -17,4 +17,4 @@ */ export {default} from './AccordionDetails'; -export type {AccordionDetailsProps} from './AccordionDetails'; +export * from './AccordionDetails'; diff --git a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx index a735730d..46a5decd 100644 --- a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx +++ b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx @@ -16,21 +16,61 @@ * under the License. */ -import MuiAccordionSummary, {AccordionSummaryProps as MuiAccordionSummaryProps} from '@mui/material/AccordionSummary'; +import MuiAccordionSummary from '@mui/material/AccordionSummary'; +import type { + AccordionSummaryProps as MuiAccordionSummaryProps, + AccordionSummaryTypeMap, +} from '@mui/material/AccordionSummary'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type AccordionSummaryProps = MuiAccordionSummaryProps; +export type AccordionSummaryProps< + C extends ElementType = ElementType, + D extends ElementType = AccordionSummaryTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'AccordionSummary'; +/** + * The Accordion Summary component is the wrapper for the Accordion header, which expands or collapses the content when clicked. + * + * Demos: + * + * - [Accordion (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-accordion) + * - [Accordion (MUI)](https://mui.com/material-ui/react-accordion/) + * + * API: + * + * - [AccordionSummary API](https://mui.com/material-ui/api/accordion-summary/) + * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) + * + * @remarks + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the AccordionSummary component. + * @param ref - The ref to be forwarded to the MuiAccordionSummary component. + * @returns The rendered AccordionSummary component. + */ const AccordionSummary: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: AccordionSummaryProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: AccordionSummaryProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-accordion-summary', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/AccordionSummary/index.ts b/packages/react/src/components/AccordionSummary/index.ts index 7edb0e1f..a5e4bade 100644 --- a/packages/react/src/components/AccordionSummary/index.ts +++ b/packages/react/src/components/AccordionSummary/index.ts @@ -17,4 +17,6 @@ */ export {default} from './AccordionSummary'; -export type {AccordionSummaryProps} from './AccordionSummary'; +export * from './AccordionSummary'; + +export type {AccordionSummaryTypeMap} from '@mui/material/AccordionSummary'; diff --git a/packages/react/src/components/AccountOverview/AccountOverview.tsx b/packages/react/src/components/AccountOverview/AccountOverview.tsx index d3e1ab15..1bd95b5c 100644 --- a/packages/react/src/components/AccountOverview/AccountOverview.tsx +++ b/packages/react/src/components/AccountOverview/AccountOverview.tsx @@ -17,19 +17,27 @@ */ import clsx from 'clsx'; -import {FC, ReactElement, ReactNode} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; -import Card, {CardProps} from '../Card'; -import CardHeader, {CardHeaderProps} from '../CardHeader'; -import Carousel, {CarouselStep} from '../Carousel'; +import Card from '../Card'; +import type {CardProps, CardTypeMap} from '../Card'; +import CardHeader from '../CardHeader'; +import type {CardHeaderProps} from '../CardHeader'; +import Carousel from '../Carousel'; +import type {CarouselStep} from '../Carousel'; import CircularProgressAvatar from '../CircularProgressAvatar'; import Divider from '../Divider'; -import {UserTemplate} from '../UserDropdownMenu'; +import type {UserTemplate} from '../UserDropdownMenu'; import './account-overview.scss'; -export interface AccountOverviewProps extends Omit { +export type AccountOverviewProps< + C extends ElementType = ElementType, + D extends ElementType = CardTypeMap['defaultComponent'], + P = {}, +> = Omit, 'title'> & { /** * Account completion steps. */ @@ -60,49 +68,77 @@ export interface AccountOverviewProps extends Omit { * Logged user information. */ user: UserTemplate; -} +}; export type AccountCompletionSteps = CarouselStep; const COMPONENT_NAME: string = 'AccountOverview'; -const AccountOverview: FC & WithWrapperProps = ({ - className, - title, - subheader, - accountCompletionStepsTitle, - accountCompletionSteps, - accountProgress, - user, - cardHeaderProps, - ...rest -}: AccountOverviewProps): ReactElement => { - const classes: string = clsx('oxygen-account-overview', className); +/** + * The Account Overview component lets you display the progress of the user's account. + * It includes the user's profile picture, name, email, account progress and account completion steps. + * + * Demos: + * + * - [Account Overview (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-account-overview) + * + * API: + * + * - inherits [Card API](https://mui.com/material-ui/api/card/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/card/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the AccountOverview component. + * @param ref - The ref to be forwarded to the Card component. + * @returns The rendered AccountOverview component. + */ +const AccountOverview: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + { + className, + title, + subheader, + accountCompletionStepsTitle, + accountCompletionSteps, + accountProgress, + user, + cardHeaderProps, + ...rest + }: AccountOverviewProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-account-overview', className); - return ( - - - } - title={title} - subheader={subheader} - {...cardHeaderProps} - /> - {accountCompletionSteps && ( - - - - - )} - - ); -}; + return ( + + + } + title={title} + subheader={subheader} + {...cardHeaderProps} + /> + {accountCompletionSteps && ( + + + + + )} + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; AccountOverview.displayName = composeComponentDisplayName(COMPONENT_NAME); AccountOverview.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/AccountOverview/index.ts b/packages/react/src/components/AccountOverview/index.ts index 2edf6a08..b469556e 100644 --- a/packages/react/src/components/AccountOverview/index.ts +++ b/packages/react/src/components/AccountOverview/index.ts @@ -17,4 +17,4 @@ */ export {default} from './AccountOverview'; -export type {AccountOverviewProps} from './AccountOverview'; +export * from './AccountOverview'; diff --git a/packages/react/src/components/ActionCard/ActionCard.tsx b/packages/react/src/components/ActionCard/ActionCard.tsx index cdb2626f..671dfcc2 100644 --- a/packages/react/src/components/ActionCard/ActionCard.tsx +++ b/packages/react/src/components/ActionCard/ActionCard.tsx @@ -17,17 +17,19 @@ */ import clsx from 'clsx'; -import {FC, ReactElement, ReactNode} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Button from '../Button'; -import Card, {CardProps} from '../Card'; +import Card from '../Card'; +import type {CardProps} from '../Card'; import CardActions from '../CardActions'; import CardContent from '../CardContent'; import Typography from '../Typography'; import './action-card.scss'; -export interface ActionCardProps extends CardProps { +export type ActionCardProps = CardProps & { /** * The text to be displayed in the action button. */ @@ -48,36 +50,55 @@ export interface ActionCardProps extends CardProps { * The title of the card. */ title: string; -} +}; const COMPONENT_NAME: string = 'ActionCard'; -const ActionCard: FC & WithWrapperProps = ({ - className, - image, - title, - description, - actionText, - onActionClick, - ...rest -}: ActionCardProps): ReactElement => { - const classes: string = clsx('oxygen-action-card', className); +/** + * The Action Card component is an extended version of the` Card` component with an action button. + * + * Demos: + * + * - [Action Card (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-action-card) + * + * API: + * + * - inherits [Card API](https://mui.com/material-ui/api/card/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/card/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the ActionCard component. + * @param ref - The ref to be forwarded to the Card component. + * @returns The rendered ActionCard component. + */ +const ActionCard: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, image, title, description, actionText, onActionClick, ...rest}: ActionCardProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-action-card', className); - return ( - - - {image} - {title} - {description} - - - - - - ); -}; + return ( + + + {image} + {title} + {description} + + + + + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; ActionCard.displayName = composeComponentDisplayName(COMPONENT_NAME); ActionCard.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ActionCard/index.ts b/packages/react/src/components/ActionCard/index.ts index 6cf2bb06..bf033e71 100644 --- a/packages/react/src/components/ActionCard/index.ts +++ b/packages/react/src/components/ActionCard/index.ts @@ -17,4 +17,4 @@ */ export {default} from './ActionCard'; -export type {ActionCardProps} from './ActionCard'; +export * from './ActionCard'; diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx index 4b50fffe..1a472b69 100644 --- a/packages/react/src/components/Alert/Alert.tsx +++ b/packages/react/src/components/Alert/Alert.tsx @@ -16,22 +16,55 @@ * under the License. */ -import MuiAlert, {AlertProps as MuiAlertProps} from '@mui/material/Alert'; +import MuiAlert from '@mui/material/Alert'; +import type {AlertProps as MuiAlertProps} from '@mui/material/Alert'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './alert.scss'; -export type AlertProps = MuiAlertProps; +export type AlertProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'Alert'; +/** + * The Alert component display brief messages for the user without interrupting their use of the app. + * + * Demos: + * + * - [Alert (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-alert) + * - [Alert (MUI)](https://mui.com/material-ui/react-alert/) + * + * API: + * + * - [Alert API](https://mui.com/material-ui/api/alert/) + * - inherits [Paper API](https://mui.com/material-ui/api/paper/) + * + * @remarks + * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/paper/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Alert component. + * @param ref - The ref to be forwarded to the MuiAlert component. + * @returns The rendered Alert component. + */ const Alert: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: AlertProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: AlertProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-alert', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/Alert/index.ts b/packages/react/src/components/Alert/index.ts index dfca86d5..ee6a4340 100644 --- a/packages/react/src/components/Alert/index.ts +++ b/packages/react/src/components/Alert/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Alert'; -export type {AlertProps} from './Alert'; +export * from './Alert'; + +export type {AlertColor, AlertPropsVariantOverrides, AlertPropsColorOverrides} from '@mui/material/Alert'; diff --git a/packages/react/src/components/AlertTitle/AlertTitle.tsx b/packages/react/src/components/AlertTitle/AlertTitle.tsx index c3104370..8e1f0f2f 100644 --- a/packages/react/src/components/AlertTitle/AlertTitle.tsx +++ b/packages/react/src/components/AlertTitle/AlertTitle.tsx @@ -16,22 +16,55 @@ * under the License. */ -import MuiAlertTitle, {AlertTitleProps as MuiAlertProps} from '@mui/material/AlertTitle'; +import MuiAlertTitle from '@mui/material/AlertTitle'; +import type {AlertTitleProps as MuiAlertTitleProps} from '@mui/material/AlertTitle'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './alert-title.scss'; -export type AlertProps = MuiAlertProps; +export type AlertProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'AlertTitle'; +/** + * The Alert Title component can be used to display a title for the Alert component. + * + * Demos: + * + * - [Alert (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-alert) + * - [Alert (MUI)](https://mui.com/material-ui/react-alert/) + * + * API: + * + * - [AlertTitle API](https://mui.com/material-ui/api/alert-title/) + * - inherits [Typography API](https://mui.com/material-ui/api/typography/) + * + * @remarks + * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the AlertTitle component. + * @param ref - The ref to be forwarded to the MuiAlertTitle component. + * @returns The rendered AlertTitle component. + */ const AlertTitle: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: AlertProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: AlertProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-alert-title', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/AlertTitle/index.ts b/packages/react/src/components/AlertTitle/index.ts index c71b698f..b3381e1d 100644 --- a/packages/react/src/components/AlertTitle/index.ts +++ b/packages/react/src/components/AlertTitle/index.ts @@ -17,4 +17,4 @@ */ export {default} from './AlertTitle'; -export type {AlertProps} from './AlertTitle'; +export * from './AlertTitle'; diff --git a/packages/react/src/components/AppBar/AppBar.tsx b/packages/react/src/components/AppBar/AppBar.tsx index 4dbf9d6f..ae3ff877 100644 --- a/packages/react/src/components/AppBar/AppBar.tsx +++ b/packages/react/src/components/AppBar/AppBar.tsx @@ -16,22 +16,61 @@ * under the License. */ -import MuiAppBar, {AppBarProps as MuiAppBarProps} from '@mui/material/AppBar'; +import MuiAppBar from '@mui/material/AppBar'; +import type {AppBarTypeMap, AppBarProps as MuiAppBarProps} from '@mui/material/AppBar'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './app-bar.scss'; -export type AppBarProps = MuiAppBarProps; +export type AppBarProps< + C extends ElementType = ElementType, + D extends ElementType = AppBarTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'AppBar'; -const AppBar: FC & WithWrapperProps = ({className, ...rest}: AppBarProps): ReactElement => { - const classes: string = clsx('oxygen-app-bar', className); +/** + * The App Bar component displays information and actions relating to the current screen. + * + * Demos: + * + * - [App Bar (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-app-bar) + * - [App Bar (MUI)](https://mui.com/material-ui/react-app-bar/) + * + * API: + * + * - [AppBar API](https://mui.com/material-ui/api/app-bar/) + * - inherits [Paper API](https://mui.com/material-ui/api/paper/) + * + * @remarks + * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/paper/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the AppBar component. + * @param ref - The ref to be forwarded to the MuiAppBar component. + * @returns The rendered AppBar component. + */ +const AppBar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: AppBarProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-app-bar', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; AppBar.displayName = composeComponentDisplayName(COMPONENT_NAME); AppBar.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/AppBar/index.ts b/packages/react/src/components/AppBar/index.ts index c64c13e2..90e28d63 100644 --- a/packages/react/src/components/AppBar/index.ts +++ b/packages/react/src/components/AppBar/index.ts @@ -18,3 +18,5 @@ export {default} from './AppBar'; export type {AppBarProps} from './AppBar'; + +export type {AppBarPropsColorOverrides, AppBarTypeMap} from '@mui/material/AppBar'; diff --git a/packages/react/src/components/AppShell/AppShell.tsx b/packages/react/src/components/AppShell/AppShell.tsx index 327c153f..f6387362 100644 --- a/packages/react/src/components/AppShell/AppShell.tsx +++ b/packages/react/src/components/AppShell/AppShell.tsx @@ -17,13 +17,15 @@ */ import clsx from 'clsx'; -import {FC, PropsWithChildren, ReactElement, ReactNode} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import Box, {BoxProps} from '../Box'; +import Box from '../Box'; +import type {BoxProps} from '../Box'; import './app-shell.scss'; -export interface AppShellProps extends BoxProps { +export type AppShellProps = BoxProps & { /** * Footer component. */ @@ -36,35 +38,55 @@ export interface AppShellProps extends BoxProps { * Navigation component. */ navigation?: ReactNode; -} +}; const COMPONENT_NAME: string = 'AppShell'; -const AppShell: FC> & WithWrapperProps = ({ - className, - children, - footer, - header, - navigation, - ...rest -}: PropsWithChildren): ReactElement => { - const classes: string = clsx('oxygen-app-shell', className); +/** + * The App Shell component is a layout component that can be used to create a common Header - Navbar - Footer - Aside - Content layout pattern. + * + * Demos: + * + * - [App Shell (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-app-shell) + * + * API: + * + * - inherits [Box API](https://mui.com/material-ui/api/box/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the AppShell component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered AppShell component. + */ +const AppShell: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, children, footer, header, navigation, ...rest}: AppShellProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-app-shell', className); - return ( - - {header} - - {navigation} - - - {children} + return ( + + {header} + + {navigation} + + + {children} + + {footer} - {footer} - - ); -}; + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; AppShell.displayName = composeComponentDisplayName(COMPONENT_NAME); AppShell.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx index c64440dc..e6fd4bd4 100644 --- a/packages/react/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx @@ -16,19 +16,47 @@ * under the License. */ -import MuiAutocomplete, {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Autocomplete'; +import MuiAutocomplete from '@mui/material/Autocomplete'; +import type {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Autocomplete'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; +import type {ChipTypeMap} from '../Chip'; import './autocomplete.scss'; -export type AutocompleteProps = MuiAutocompleteProps; +export type AutocompleteProps< + T, + Multiple extends boolean | undefined = boolean | undefined, + DisableClearable extends boolean | undefined = boolean | undefined, + FreeSolo extends boolean | undefined = boolean | undefined, + ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'], +> = MuiAutocompleteProps; const COMPONENT_NAME: string = 'Autocomplete'; /** - * @remarks `any` is used as the generic type for the props because the generic type is not used in the component. + * The Autocomplete is a normal text input enhanced by a panel of suggested options. + * + * Demos: + * + * - [Autocomplete (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-autocomplete) + * - [Autocomplete (MUI)](https://mui.com/material-ui/react-autocomplete/) + * + * API: + * + * - [Autocomplete API](https://mui.com/material-ui/api/autocomplete/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ❌ The component cannot hold a `ref`. + * + * @template C - The type of the component. + * @param props - The props for the Accordion component. + * @param ref - The ref to be forwarded to the MuiAccordion component. + * @returns The rendered Accordion component. */ const Autocomplete: ForwardRefExoticComponent> & WithWrapperProps = forwardRef( ({className, ...rest}: AutocompleteProps, ref: MutableRefObject): ReactElement => { diff --git a/packages/react/src/components/Autocomplete/index.ts b/packages/react/src/components/Autocomplete/index.ts index b9d71d10..095d58ce 100644 --- a/packages/react/src/components/Autocomplete/index.ts +++ b/packages/react/src/components/Autocomplete/index.ts @@ -17,5 +17,18 @@ */ export {default} from './Autocomplete'; -export type {AutocompleteProps} from './Autocomplete'; -export type {AutocompleteRenderGetTagProps, AutocompleteRenderInputParams} from '@mui/material/Autocomplete'; +export * from './Autocomplete'; + +export {createFilterOptions} from '@mui/material/Autocomplete'; +export type { + AutocompleteChangeDetails, + AutocompleteChangeReason, + AutocompleteCloseReason, + AutocompleteInputChangeReason, + AutocompleteOwnerState, + AutocompleteRenderGetTagProps, + AutocompleteRenderOptionState, + AutocompleteRenderGroupParams, + AutocompleteRenderInputParams, + AutocompletePropsSizeOverrides, +} from '@mui/material/Autocomplete'; diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx index 6fafaf31..389f35e9 100644 --- a/packages/react/src/components/Avatar/Avatar.tsx +++ b/packages/react/src/components/Avatar/Avatar.tsx @@ -16,15 +16,21 @@ * under the License. */ -import MuiAvatar, {AvatarProps as MuiAvatarProps} from '@mui/material/Avatar'; +import MuiAvatar from '@mui/material/Avatar'; +import type {AvatarProps as MuiAvatarProps, AvatarTypeMap} from '@mui/material/Avatar'; import clsx from 'clsx'; -import {ElementType, FC, ReactElement, useMemo} from 'react'; +import {forwardRef, useMemo} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import usePastelColorGenerator from '../../hooks/use-pastel-color-generator'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './avatar.scss'; -export type AvatarProps = { +export type AvatarProps< + C extends ElementType = ElementType, + D extends ElementType = AvatarTypeMap['defaultComponent'], + P = {}, +> = { /** * Text for the random background color generator. */ @@ -37,45 +43,60 @@ export type AvatarProps = { * If `true`, the background color will be randomly generated. */ randomBackgroundColor?: boolean; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Avatar'; -const Avatar: FC & WithWrapperProps = ({ - className, - children, - component, - randomBackgroundColor, - backgroundColorRandomizer, - ...rest -}: AvatarProps): ReactElement => { - const colorRandomizer: string = useMemo(() => { - if (backgroundColorRandomizer) { - return backgroundColorRandomizer; - } +/** + * The Alert component display brief messages for the user without interrupting their use of the app. + * + * Demos: + * + * - [Avatar (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-avatar) + * - [Avatar (MUI)](https://mui.com/material-ui/react-avatar/) + * + * API: + * + * - [Avatar API](https://mui.com/material-ui/api/avatar/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Avatar component. + * @param ref - The ref to be forwarded to the MuiAvatar component. + * @returns The rendered Avatar component. + */ +const Avatar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, children, randomBackgroundColor, backgroundColorRandomizer, ...rest}: AvatarProps, + ref: MutableRefObject, + ): ReactElement => { + const colorRandomizer: string = useMemo(() => { + if (backgroundColorRandomizer) { + return backgroundColorRandomizer; + } - if (typeof children === 'string') { - return children; - } + if (typeof children === 'string') { + return children; + } - return ''; - }, [children, backgroundColorRandomizer]); + return ''; + }, [children, backgroundColorRandomizer]); - const {color} = usePastelColorGenerator(colorRandomizer); + const {color} = usePastelColorGenerator(colorRandomizer); - const classes: string = clsx('oxygen-avatar', className); + const classes: string = clsx('oxygen-avatar', className); - return ( - - {children} - - ); -}; + return ( + + {children} + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; Avatar.displayName = composeComponentDisplayName(COMPONENT_NAME); Avatar.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Avatar/index.ts b/packages/react/src/components/Avatar/index.ts index ed378b1d..26c4986b 100644 --- a/packages/react/src/components/Avatar/index.ts +++ b/packages/react/src/components/Avatar/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Avatar'; -export type {AvatarProps} from './Avatar'; +export * from './Avatar'; + +export type {AvatarPropsVariantOverrides, AvatarTypeMap} from '@mui/material/Avatar'; diff --git a/packages/react/src/components/Backdrop/Backdrop.tsx b/packages/react/src/components/Backdrop/Backdrop.tsx index 74f90a53..bcedc736 100644 --- a/packages/react/src/components/Backdrop/Backdrop.tsx +++ b/packages/react/src/components/Backdrop/Backdrop.tsx @@ -16,22 +16,61 @@ * under the License. */ -import MuiBackdrop, {BackdropProps as MuiBackdropProps} from '@mui/material/Backdrop'; +import MuiBackdrop from '@mui/material/Backdrop'; +import type {BackdropProps as MuiBackdropProps, BackdropTypeMap} from '@mui/material/Backdrop'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './backdrop.scss'; -export type BackdropProps = MuiBackdropProps; +export type BackdropProps< + C extends ElementType = ElementType, + D extends ElementType = BackdropTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Backdrop'; -const Backdrop: FC & WithWrapperProps = ({className, ...rest}: BackdropProps): ReactElement => { - const classes: string = clsx('oxygen-backdrop', className); +/** + * The Backdrop component narrows the user's focus to a particular element on the screen. + * + * Demos: + * + * - [Backdrop (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-backdrop) + * - [Backdrop (MUI)](https://mui.com/material-ui/react-backdrop/) + * + * API: + * + * - [Backdrop API](https://mui.com/material-ui/api/backdrop/) + * - inherits [Fade API](https://mui.com/material-ui/api/fade/) + * + * @remarks + * - ✔️ Props of the [Fade](https://mui.com/material-ui/api/fade/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Backdrop component. + * @param ref - The ref to be forwarded to the MuiBackdrop component. + * @returns The rendered Backdrop component. + */ +const Backdrop: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: BackdropProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-backdrop', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Backdrop.displayName = composeComponentDisplayName(COMPONENT_NAME); Backdrop.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Backdrop/index.ts b/packages/react/src/components/Backdrop/index.ts index ca508f8e..c992ac72 100644 --- a/packages/react/src/components/Backdrop/index.ts +++ b/packages/react/src/components/Backdrop/index.ts @@ -17,4 +17,7 @@ */ export {default} from './Backdrop'; -export type {BackdropProps} from './Backdrop'; +export * from './Backdrop'; + +export {BackdropRoot} from '@mui/material/Backdrop'; +export type {BackdropComponentsPropsOverrides, BackdropTypeMap} from '@mui/material/Backdrop'; diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx index 8d45dd24..8a976ed4 100644 --- a/packages/react/src/components/Badge/Badge.tsx +++ b/packages/react/src/components/Badge/Badge.tsx @@ -16,22 +16,62 @@ * under the License. */ -import MuiBadge, {BadgeProps as MuiBadgeProps} from '@mui/material/Badge'; +import MuiBadge from '@mui/material/Badge'; +import type {BadgeProps as MuiBadgeProps, BadgeTypeMap} from '@mui/material/Badge'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './badge.scss'; -export type BadgeProps = MuiBadgeProps; +export type BadgeProps< + C extends ElementType = ElementType, + D extends ElementType = BadgeTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Badge'; -const Badge: FC & WithWrapperProps = ({className, ...rest}: BadgeProps): ReactElement => { - const classes: string = clsx('oxygen-badge', className); +/** + * The Badge component generates a small badge to the top-right of its child(ren). + * + * Demos: + * + * - [Avatar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-avatar) + * - [Badge (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-badge/) + * - [Avatar (MUI)](https://mui.com/material-ui/react-avatar/) + * - [Badge (MUI)](https://mui.com/material-ui/react-badge/) + * + * API: + * + * - [Badge API](https://mui.com/material-ui/api/badge/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Badge component. + * @param ref - The ref to be forwarded to the MuiBadge component. + * @returns The rendered Badge component. + */ +const Badge: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: BadgeProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-badge', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Badge.displayName = composeComponentDisplayName(COMPONENT_NAME); Badge.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Badge/index.ts b/packages/react/src/components/Badge/index.ts index d01c35d7..f0f7774d 100644 --- a/packages/react/src/components/Badge/index.ts +++ b/packages/react/src/components/Badge/index.ts @@ -17,4 +17,7 @@ */ export {default} from './Badge'; -export type {BadgeProps} from './Badge'; +export * from './Badge'; + +export {BadgeRoot, BadgeMark} from '@mui/material/Badge'; +export type {BadgePropsVariantOverrides, BadgePropsColorOverrides, BadgeOrigin} from '@mui/material/Badge'; diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index 4e75f991..159bbec2 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -16,23 +16,58 @@ * under the License. */ -import MuiBox, {BoxProps as MuiBoxProps} from '@mui/material/Box'; +import MuiBox from '@mui/material/Box'; +import type {BoxProps as MuiBoxProps} from '@mui/material/Box'; +import {BoxTypeMap} from '@mui/system'; import clsx from 'clsx'; -import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type BoxProps = { +export type BoxProps< + C extends ElementType = ElementType, + D extends ElementType = BoxTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Box'; +/** + * The Box component is a generic, theme-aware container with access to CSS utilities from MUI System. + * + * Demos: + * + * - [Box (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-box) + * - [Box (MUI)](https://mui.com/material-ui/react-box/) + * + * API: + * + * - [Box API](https://mui.com/material-ui/api/box/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Badge component. + * @param ref - The ref to be forwarded to the MuiBadge component. + * @returns The rendered Badge component. + */ const Box: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: BoxProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: BoxProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-box', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/Box/index.ts b/packages/react/src/components/Box/index.ts index cd76e3f7..d3e04e14 100644 --- a/packages/react/src/components/Box/index.ts +++ b/packages/react/src/components/Box/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Box'; -export type {BoxProps} from './Box'; +export * from './Box'; + +export {BoxTypeMap} from '@mui/system/Box'; diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx index 9e43ea0d..dd93a278 100644 --- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -16,30 +16,65 @@ * under the License. */ -import MuiBreadcrumbs, {BreadcrumbsProps as MuiBreadcrumbsProps} from '@mui/material/Breadcrumbs'; +import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; +import type {BreadcrumbsProps as MuiBreadcrumbsProps, BreadcrumbsTypeMap} from '@mui/material/Breadcrumbs'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './breadcrumbs.scss'; -export type BreadcrumbsProps = MuiBreadcrumbsProps; +export type BreadcrumbsProps< + C extends ElementType = ElementType, + D extends ElementType = BreadcrumbsTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Breadcrumbs'; -const Breadcrumbs: FC & WithWrapperProps = ({ - className, - children, - ...rest -}: BreadcrumbsProps): ReactElement => { - const classes: string = clsx('oxygen-breadcrumbs', className); +/** + * The Breadcrumbs component is a list of links that help visualize a page's location within + * a site's hierarchical structure, it allows navigation up to any of the ancestors. + * + * Demos: + * + * - [Breadcrumbs (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-breadcrumbs) + * - [Breadcrumbs (MUI)](https://mui.com/material-ui/react-breadcrumbs/) + * + * API: + * + * - [Breadcrumbs API](https://mui.com/material-ui/api/breadcrumbs/) + * + * @remarks + * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Breadcrumbs component. + * @param ref - The ref to be forwarded to the MuiBreadcrumbs component. + * @returns The rendered Breadcrumbs component. + */ +const Breadcrumbs: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, children, ...rest}: BreadcrumbsProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-breadcrumbs', className); - return ( - - {children} - - ); -}; + return ( + + {children} + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; Breadcrumbs.displayName = composeComponentDisplayName(COMPONENT_NAME); Breadcrumbs.muiName = 'Breadcrumbs'; diff --git a/packages/react/src/components/Breadcrumbs/index.ts b/packages/react/src/components/Breadcrumbs/index.ts index b2114fc0..cd144ade 100644 --- a/packages/react/src/components/Breadcrumbs/index.ts +++ b/packages/react/src/components/Breadcrumbs/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Breadcrumbs'; -export type {BreadcrumbsProps} from './Breadcrumbs'; +export * from './Breadcrumbs'; + +export {BreadcrumbsTypeMap} from '@mui/material/Breadcrumbs'; diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index 133f3b48..9fb06d76 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -16,22 +16,61 @@ * under the License. */ -import MuiButton, {LoadingButtonProps as MuiButtonProps} from '@mui/lab/LoadingButton'; +import MuiButton from '@mui/lab/LoadingButton'; +import type {LoadingButtonTypeMap, LoadingButtonProps as MuiButtonProps} from '@mui/lab/LoadingButton'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './button.scss'; -export type ButtonProps = MuiButtonProps; +export type ButtonProps< + C extends ElementType = ElementType, + D extends ElementType = LoadingButtonTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Button'; -const Button: FC & WithWrapperProps = ({className, ...rest}: ButtonProps): ReactElement => { - const classes: string = clsx('oxygen-button', className); +/** + * The Button component allow users to take actions, and make choices, with a single tap. + * + * Demos: + * + * - [Button (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-button) + * - [Button (MUI)](https://mui.com/material-ui/react-button/) + * + * API: + * + * - [LoadingButton API](https://mui.com/material-ui/api/loading-button/) + * - inherits [Button API](https://mui.com/material-ui/api/button/) + * + * @remarks + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Button component. + * @param ref - The ref to be forwarded to the MuiButton component. + * @returns The rendered Button component. + */ +const Button: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, children, ...rest}: ButtonProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-button', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Button.displayName = composeComponentDisplayName(COMPONENT_NAME); Button.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Button/index.ts b/packages/react/src/components/Button/index.ts index 3fef8878..9e0afec9 100644 --- a/packages/react/src/components/Button/index.ts +++ b/packages/react/src/components/Button/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Button'; -export type {ButtonProps} from './Button'; +export * from './Button'; + +export type {LoadingButtonTypeMap} from '@mui/lab/LoadingButton'; diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx index 53a39df1..bcf4bbb4 100644 --- a/packages/react/src/components/Card/Card.tsx +++ b/packages/react/src/components/Card/Card.tsx @@ -16,19 +16,51 @@ * under the License. */ -import MuiCard, {CardProps as MuiCardProps} from '@mui/material/Card'; +import MuiCard from '@mui/material/Card'; +import type {CardProps as MuiCardProps, CardTypeMap} from '@mui/material/Card'; import clsx from 'clsx'; -import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './card.scss'; -export type CardProps = { +export type CardProps< + C extends ElementType = ElementType, + D extends ElementType = CardTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Card'; +/** + * The Card component contain content and actions about a single subject. + * + * Demos: + * + * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card) + * - [Card (MUI)](https://mui.com/material-ui/react-card/) + * + * API: + * + * - [Card API](https://mui.com/material-ui/api/card/) + * - inherits [Paper API](https://mui.com/material-ui/api/paper/) + * + * @remarks + * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/paper/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Card component. + * @param ref - The ref to be forwarded to the MuiCard component. + * @returns The rendered Card component. + */ const Card: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ( {className, component, onClick, elevation = 0, variant = 'outlined', ...rest}: CardProps, diff --git a/packages/react/src/components/Card/index.ts b/packages/react/src/components/Card/index.ts index ac35e13e..061442ef 100644 --- a/packages/react/src/components/Card/index.ts +++ b/packages/react/src/components/Card/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Card'; -export type {CardProps} from './Card'; +export * from './Card'; + +export type {CardPropsColorOverrides, CardTypeMap} from '@mui/material/Card'; diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx index f48f2271..96f255f8 100644 --- a/packages/react/src/components/CardActions/CardActions.tsx +++ b/packages/react/src/components/CardActions/CardActions.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiCardActions, {CardActionsProps as MuiCardActionsProps} from '@mui/material/CardActions'; +import MuiCardActions from '@mui/material/CardActions'; +import type {CardActionsProps as MuiCardActionsProps} from '@mui/material/CardActions'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './card-actions.scss'; @@ -27,11 +29,35 @@ export type CardActionsProps = MuiCardActionsProps; const COMPONENT_NAME: string = 'CardActions'; -const CardActions: FC & WithWrapperProps = ({className, ...rest}: CardActionsProps): ReactElement => { - const classes: string = clsx('oxygen-card-actions', className); +/** + * The Card Actions component is an optional wrapper that groups a set of buttons. + * + * Demos: + * + * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card) + * - [Card (MUI)](https://mui.com/material-ui/react-card/) + * + * API: + * + * - [CardActions API](https://mui.com/material-ui/api/card-actions/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the CardActions component. + * @param ref - The ref to be forwarded to the MuiCardActions component. + * @returns The rendered CardActions component. + */ +const CardActions: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: CardActionsProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-card-actions', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; CardActions.displayName = composeComponentDisplayName(COMPONENT_NAME); CardActions.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CardActions/index.ts b/packages/react/src/components/CardActions/index.ts index 4f48e301..54117332 100644 --- a/packages/react/src/components/CardActions/index.ts +++ b/packages/react/src/components/CardActions/index.ts @@ -17,4 +17,4 @@ */ export {default} from './CardActions'; -export type {CardActionsProps} from './CardActions'; +export * from './CardActions'; diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx index 6ac42d40..cffbffda 100644 --- a/packages/react/src/components/CardContent/CardContent.tsx +++ b/packages/react/src/components/CardContent/CardContent.tsx @@ -16,17 +16,50 @@ * under the License. */ -import MuiCardContent, {CardContentProps as MuiCardContentProps} from '@mui/material/CardContent'; +import MuiCardContent from '@mui/material/CardContent'; +import type {CardContentProps as MuiCardContentProps, CardContentTypeMap} from '@mui/material/CardContent'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './card-content.scss'; -export type CardContentProps = MuiCardContentProps; +export type CardContentProps< + C extends ElementType = ElementType, + D extends React.ElementType = CardContentTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'CardContent'; +/** + * The Card Content component is the wrapper for the Card content. + * + * Demos: + * + * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card) + * - [Card (MUI)](https://mui.com/material-ui/react-card/) + * + * API: + * + * - [CardContent API](https://mui.com/material-ui/api/card-content/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the CardContent component. + * @param ref - The ref to be forwarded to the MuiCardContent component. + * @returns The rendered CardContent component. + */ const CardContent: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ({className, ...rest}: CardContentProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-card-content', className); diff --git a/packages/react/src/components/CardContent/index.ts b/packages/react/src/components/CardContent/index.ts index e4e0bc88..21baaaa5 100644 --- a/packages/react/src/components/CardContent/index.ts +++ b/packages/react/src/components/CardContent/index.ts @@ -17,4 +17,6 @@ */ export {default} from './CardContent'; -export type {CardContentProps} from './CardContent'; +export * from './CardContent'; + +export type {CardContentTypeMap} from '@mui/material/CardContent'; diff --git a/packages/react/src/components/CardHeader/CardHeader.tsx b/packages/react/src/components/CardHeader/CardHeader.tsx index c71804db..8d03d830 100644 --- a/packages/react/src/components/CardHeader/CardHeader.tsx +++ b/packages/react/src/components/CardHeader/CardHeader.tsx @@ -16,22 +16,62 @@ * under the License. */ -import MuiCardHeader, {CardHeaderProps as MuiCardHeaderProps} from '@mui/material/CardHeader'; +import MuiCardHeader from '@mui/material/CardHeader'; +import type {CardHeaderProps as MuiCardHeaderProps, CardHeaderTypeMap} from '@mui/material/CardHeader'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './card-header.scss'; -export type CardHeaderProps = MuiCardHeaderProps; +export type CardHeaderProps< + C extends ElementType = ElementType, + D extends ElementType = CardHeaderTypeMap['defaultComponent'], + P = {}, + T extends ElementType = 'span', + S extends ElementType = 'span', +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'CardHeader'; -const CardHeader: FC & WithWrapperProps = ({className, ...rest}: CardHeaderProps): ReactElement => { - const classes: string = clsx('oxygen-card-header', className); +/** + * The Card Header component is an optional wrapper for the Card header. + * + * Demos: + * + * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card) + * - [Card (MUI)](https://mui.com/material-ui/react-card/) + * + * API: + * + * - [CardHeader API](https://mui.com/material-ui/api/card-header/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the CardHeader component. + * @param ref - The ref to be forwarded to the MuiCardHeader component. + * @returns The rendered CardHeader component. + */ +const CardHeader: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: CardHeaderProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-card-header', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; CardHeader.displayName = composeComponentDisplayName(COMPONENT_NAME); CardHeader.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CardHeader/index.ts b/packages/react/src/components/CardHeader/index.ts index f32ca5ce..20566f34 100644 --- a/packages/react/src/components/CardHeader/index.ts +++ b/packages/react/src/components/CardHeader/index.ts @@ -17,4 +17,6 @@ */ export {default} from './CardHeader'; -export type {CardHeaderProps} from './CardHeader'; +export * from './CardHeader'; + +export type {CardHeaderTypeMap, OverridableCardHeader, CardHeaderPropsWithComponent} from '@mui/material/CardHeader'; diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index 0935792a..b9e6bae6 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -18,23 +18,24 @@ import {ChevronLeftIcon, ChevronRightIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; -import {FC, HTMLAttributes, ReactElement, ReactNode, useEffect, useMemo, useState} from 'react'; -import {useIsMobile} from '../../hooks'; +import {forwardRef, useEffect, useMemo, useState} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; +import {useIsMobile} from '../../hooks/use-is-mobile'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; +import type {BoxProps, BoxTypeMap} from '../Box'; import Button from '../Button'; import Card from '../Card'; import CardContent from '../CardContent'; -import IconButton from '../IconButton'; -import {IconButtonVariants} from '../IconButton/IconButton'; +import IconButton, {IconButtonVariants} from '../IconButton'; import ListItem from '../ListItem'; import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; import Stepper from '../Stepper'; import './carousel.scss'; -export interface CarouselStep { +export type CarouselStep = { /** * Action to be performed on the step. * @example @@ -55,9 +56,13 @@ export interface CarouselStep { * @example title */ title: ReactNode; -} +}; -export interface CarouselProps extends Omit, 'title'> { +export type CarouselProps< + C extends ElementType = ElementType, + D extends ElementType = BoxTypeMap['defaultComponent'], + P = {}, +> = Omit, 'title'> & { /** * Specifies whether to auto play the carousel. */ @@ -83,123 +88,150 @@ export interface CarouselProps extends Omit, 'tit * @example title */ title?: ReactNode; -} +}; const COMPONENT_NAME: string = 'Carousel'; -const Carousel: FC & WithWrapperProps = ({ - autoPlay = false, - autoPlayInterval = 5000, - className, - nextButtonText = 'Next', - previousButtonText = 'Previous', - steps, - title, - ...rest -}: CarouselProps): ReactElement => { - const [currentStep, setCurrentStep] = useState(0); - - const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]); - const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]); - const isMobile: boolean = useIsMobile(); - - const classes: string = clsx('oxygen-carousel', {mobile: isMobile}, className); - - useEffect(() => { - if (!autoPlay) { - return () => {}; - } - - const interval: NodeJS.Timer = setInterval(() => { +/** + * The Carousel component can be used to slide through content. + * + * Demos: + * + * - [Carousel(Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-carousel) + * + * API: + * + * - inherits [Box API](https://mui.com/material-ui/api/box/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Carousel component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered Carousel component. + */ +const Carousel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + { + autoPlay = false, + autoPlayInterval = 5000, + className, + nextButtonText = 'Next', + previousButtonText = 'Previous', + steps, + title, + ...rest + }: CarouselProps, + ref: MutableRefObject, + ): ReactElement => { + const [currentStep, setCurrentStep] = useState(0); + + const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]); + const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]); + const isMobile: boolean = useIsMobile(); + + const classes: string = clsx('oxygen-carousel', {mobile: isMobile}, className); + + useEffect(() => { + if (!autoPlay) { + return () => {}; + } + + const interval: NodeJS.Timer = setInterval(() => { + if (isLastStep) { + setCurrentStep(0); + } else { + setCurrentStep(currentStep + 1); + } + }, autoPlayInterval); + + return () => clearInterval(interval); + }, [autoPlay, autoPlayInterval, currentStep, isLastStep]); + + const handleNextButtonClick = (): void => { if (isLastStep) { - setCurrentStep(0); - } else { - setCurrentStep(currentStep + 1); + return; } - }, autoPlayInterval); - - return () => clearInterval(interval); - }, [autoPlay, autoPlayInterval, currentStep, isLastStep]); - - const handleNextButtonClick = (): void => { - if (isLastStep) { - return; - } - setCurrentStep(currentStep + 1); - }; - - const handlePreviousButtonClick = (): void => { - if (isFirstStep) { - return; - } - setCurrentStep(currentStep - 1); - }; - - const generateCarouselSteps = (): ReactElement[] => - steps?.map((step: CarouselStep) => { - const {title: stepTitle, description, illustration, action} = step; - return ( - - - - {illustration && {illustration}} - - - - {action && {action}} - - ); - }); - - return ( - - - {title} - - - - - - - + setCurrentStep(currentStep + 1); + }; + + const handlePreviousButtonClick = (): void => { + if (isFirstStep) { + return; + } + setCurrentStep(currentStep - 1); + }; + + const generateCarouselSteps = (): ReactElement[] => + steps?.map((step: CarouselStep) => { + const {title: stepTitle, description, illustration, action} = step; + return ( + + + + {illustration && {illustration}} + + + + {action && {action}} + + ); + }); + + return ( + + + {title} + + + + + + + + + + + + - - - + + - - - - - ); -}; + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; Carousel.displayName = composeComponentDisplayName(COMPONENT_NAME); Carousel.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Carousel/index.ts b/packages/react/src/components/Carousel/index.ts index a91d7b31..a9261f98 100644 --- a/packages/react/src/components/Carousel/index.ts +++ b/packages/react/src/components/Carousel/index.ts @@ -17,5 +17,4 @@ */ export {default} from './Carousel'; -export type {CarouselProps} from './Carousel'; -export type {CarouselStep} from './Carousel'; +export * from './Carousel'; diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx index dad65555..688c4eff 100644 --- a/packages/react/src/components/Checkbox/Checkbox.tsx +++ b/packages/react/src/components/Checkbox/Checkbox.tsx @@ -16,21 +16,56 @@ * under the License. */ -import MuiCheckbox, {CheckboxProps as MuiCheckboxProps} from '@mui/material/Checkbox'; +import MuiCheckbox from '@mui/material/Checkbox'; +import type {CheckboxProps as MuiCheckboxProps} from '@mui/material/Checkbox'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type CheckboxProps = MuiCheckboxProps; +export type CheckboxProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'Checkbox'; +/** + * The Checkboxes allow the user to select one or more items from a set. + * + * Demos: + * + * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox) + * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/) + * - [Transfer List (Oxygen UI)](TODO: Add a link after implementing: Tracker: https://github.com/wso2/oxygen-ui/issues/2) + * - [Transfer List (MUI)](https://mui.com/material-ui/react-transfer-list/) + * + * API: + * + * - [Checkbox API](https://mui.com/material-ui/api/checkbox/) + * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) + * + * @remarks + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Checkbox component. + * @param ref - The ref to be forwarded to the MuiCheckbox component. + * @returns The rendered Checkbox component. + */ const Checkbox: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: CheckboxProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: CheckboxProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-checkbox', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/Checkbox/index.ts b/packages/react/src/components/Checkbox/index.ts index 005edc36..db23cb91 100644 --- a/packages/react/src/components/Checkbox/index.ts +++ b/packages/react/src/components/Checkbox/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Checkbox'; -export type {CheckboxProps} from './Checkbox'; +export * from './Checkbox'; + +export {CheckboxPropsSizeOverrides, CheckboxPropsColorOverrides} from '@mui/material/Checkbox'; diff --git a/packages/react/src/components/Chip/Chip.tsx b/packages/react/src/components/Chip/Chip.tsx index 8dbbdd38..289bbd23 100644 --- a/packages/react/src/components/Chip/Chip.tsx +++ b/packages/react/src/components/Chip/Chip.tsx @@ -16,27 +16,57 @@ * under the License. */ -import MuiChip, {ChipProps as MuiChipProps} from '@mui/material/Chip'; +import MuiChip from '@mui/material/Chip'; +import type {ChipProps as MuiChipProps, ChipTypeMap} from '@mui/material/Chip'; import clsx from 'clsx'; -import {ElementType, FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './chip.scss'; -export type ChipProps = { +export type ChipProps< + C extends ElementType = ElementType, + D extends ElementType = ChipTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Chip'; -const Chip: FC & WithWrapperProps = ({ - className, - ...rest -}: ChipProps): ReactElement => { - const classes: string = clsx('oxygen-chip', className); +/** + * The Chips are compact elements that represent an input, attribute, or action. + * + * Demos: + * + * - [Chip (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-chip) + * - [Chip (MUI)](https://mui.com/material-ui/react-chip/) + * + * API: + * + * - [Chip API](https://mui.com/material-ui/api/chip/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Chip component. + * @param ref - The ref to be forwarded to the MuiChip component. + * @returns The rendered Chip component. + */ +const Chip: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: ChipProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-chip', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Chip.displayName = composeComponentDisplayName(COMPONENT_NAME); Chip.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Chip/index.ts b/packages/react/src/components/Chip/index.ts index f799b576..ad4f8257 100644 --- a/packages/react/src/components/Chip/index.ts +++ b/packages/react/src/components/Chip/index.ts @@ -17,4 +17,11 @@ */ export {default} from './Chip'; -export type {ChipProps} from './Chip'; +export * from './Chip'; + +export type { + ChipPropsVariantOverrides, + ChipPropsSizeOverrides, + ChipPropsColorOverrides, + ChipTypeMap, +} from '@mui/material/Chip'; diff --git a/packages/react/src/components/CircularProgress/CircularProgress.tsx b/packages/react/src/components/CircularProgress/CircularProgress.tsx index 4d28a481..64f822dc 100644 --- a/packages/react/src/components/CircularProgress/CircularProgress.tsx +++ b/packages/react/src/components/CircularProgress/CircularProgress.tsx @@ -16,25 +16,58 @@ * under the License. */ -import MuiCircularProgress, {CircularProgressProps as MuiCircularProgressProps} from '@mui/material/CircularProgress'; +import MuiCircularProgress from '@mui/material/CircularProgress'; +import type {CircularProgressProps as MuiCircularProgressProps} from '@mui/material/CircularProgress'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './circular-progress.scss'; -export type CircularProgressProps = MuiCircularProgressProps; +export type CircularProgressProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'CircularProgress'; -const CircularProgress: FC & WithWrapperProps = ({ - className, - ...rest -}: CircularProgressProps): ReactElement => { - const classes: string = clsx('oxygen-circular-progress', className); +/** + * The Circular Progress indicators commonly known as spinners, express an unspecified wait + * time or display the length of a process. + * + * Demos: + * + * TODO: Merge two progress components into one. + * - [Progress (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-circular-progress) + * - [Progress (MUI)](https://mui.com/material-ui/react-progress/) + * + * API: + * + * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the CircularProgress component. + * @param ref - The ref to be forwarded to the MuiCircularProgress component. + * @returns The rendered CircularProgress component. + */ +const CircularProgress: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: CircularProgressProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-circular-progress', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; CircularProgress.displayName = composeComponentDisplayName(COMPONENT_NAME); CircularProgress.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CircularProgress/index.ts b/packages/react/src/components/CircularProgress/index.ts index addbec06..bb9b77b2 100644 --- a/packages/react/src/components/CircularProgress/index.ts +++ b/packages/react/src/components/CircularProgress/index.ts @@ -17,4 +17,6 @@ */ export {default} from './CircularProgress'; -export type {CircularProgressProps} from './CircularProgress'; +export * from './CircularProgress'; + +export {CircularProgressPropsColorOverrides} from '@mui/material/CircularProgress'; diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx index 1b1cb6f4..15262258 100644 --- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx +++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx @@ -16,16 +16,24 @@ * under the License. */ -import {Badge, BadgeProps, CircularProgress, CircularProgressProps} from '@mui/material'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import Avatar, {AvatarProps} from '../Avatar'; +import Avatar from '../Avatar'; +import type {AvatarProps} from '../Avatar'; +import type {BadgeProps} from '../Badge'; +import Badge from '../Badge'; import Box from '../Box'; +import type {CircularProgressProps} from '../CircularProgress'; +import CircularProgress from '../CircularProgress'; import './circular-progress-avatar.scss'; -export interface CircularProgressAvatarProps extends Omit { +export type CircularProgressAvatarProps = Omit< + CircularProgressProps, + 'value' +> & { /** * Props sent to the Avatar component. */ @@ -38,51 +46,73 @@ export interface CircularProgressAvatarProps extends Omit & WithWrapperProps = ({ - className, - progress, - badgeOptions, - avatarOptions, - ...rest -}: CircularProgressAvatarProps): ReactElement => { - const classes: string = clsx('oxygen-circular-progress-avatar', className); +/** + * The Circular Progress Avatar is a Avatar variant with a circular progress and a badge. + * + * Demos: + * + * // TODO: Move this demo to the Progress demo. + * - [Circular Progress Avatar (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-circular-progress-avatar) + * + * API: + * + * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/) + * + * @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. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the CircularProgressAvatar component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered CircularProgressAvatar component. + */ +const CircularProgressAvatar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, progress, badgeOptions, avatarOptions, ...rest}: CircularProgressAvatarProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-circular-progress-avatar', className); - return ( - - - - - - - - ); -}; + return ( + + + + + + + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; CircularProgressAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME); CircularProgressAvatar.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CircularProgressAvatar/index.ts b/packages/react/src/components/CircularProgressAvatar/index.ts index 1be26dc8..8662fab9 100644 --- a/packages/react/src/components/CircularProgressAvatar/index.ts +++ b/packages/react/src/components/CircularProgressAvatar/index.ts @@ -17,4 +17,4 @@ */ export {default} from './CircularProgressAvatar'; -export type {CircularProgressAvatarProps} from './CircularProgressAvatar'; +export * from './CircularProgressAvatar'; diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx index 611f65a0..b81600b9 100644 --- a/packages/react/src/components/Code/Code.tsx +++ b/packages/react/src/components/Code/Code.tsx @@ -16,18 +16,15 @@ * under the License. */ -import MuiTypography, {TypographyProps as MuiTypographyProps} from '@mui/material/Typography'; import clsx from 'clsx'; -import {ElementType, FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; +import Typography, {TypographyProps} from '../Typography/Typography'; import './code.scss'; -export type CodeProps = { - /** - * The component used for the root node. Either a string to use a HTML element or a component. - */ - component?: C; +export type CodeProps = TypographyProps & { /** * Shows the code block with a filled background. * @default true @@ -38,25 +35,46 @@ export type CodeProps = { * @default false */ outlined?: boolean; -} & Omit; +}; const COMPONENT_NAME: string = 'Code'; -const Code: FC & WithWrapperProps = ({ - className, - children, - filled = true, - outlined = false, - ...rest -}: CodeProps): ReactElement => { - const classes: string = clsx('oxygen-code', {filled, outlined}, className); +/** + * The Code can represent an inline or block code without syntax highlight. + * + * Demos: + * + * - [Code (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-code) + * + * API: + * + * - inherits [Typography API](https://mui.com/material-ui/api/typography/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Code component. + * @param ref - The ref to be forwarded to the Typography component. + * @returns The rendered Code component. + */ +const Code: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, children, filled = true, outlined = false, ...rest}: CodeProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-code', {filled, outlined}, className); - return ( - - {children} - - ); -}; + return ( + + {children} + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; Code.displayName = composeComponentDisplayName(COMPONENT_NAME); Code.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Code/index.ts b/packages/react/src/components/Code/index.ts index 477314ff..dbeac608 100644 --- a/packages/react/src/components/Code/index.ts +++ b/packages/react/src/components/Code/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Code'; -export type {CodeProps} from './Code'; +export * from './Code'; diff --git a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx index 389a9807..5ccdfe29 100644 --- a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx +++ b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx @@ -19,7 +19,8 @@ import MuiCollapse from '@mui/material/Collapse'; import {ChevronDownIcon, ChevronUpIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement, useState} from 'react'; +import {forwardRef, useState} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MouseEvent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; @@ -28,29 +29,51 @@ import List from '../List'; import ListItemButton from '../ListItemButton'; import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; -import type {NavbarProps} from '../Navbar/Navbar'; +import type {NavbarProps} from '../Navbar'; import type {NavbarItemProps} from '../NavbarItem'; import Tooltip from '../Tooltip'; import './collapsible-navbar-item.scss'; -export interface CollapsibleNavbarItemProps extends NavbarItemProps, Pick { - /** - * Is the item expanded. - */ - expanded?: boolean; - /** - * Set of sub items. - */ - items: NavbarItemProps[]; -} +export type CollapsibleNavbarItemProps = NavbarItemProps & + Pick & { + /** + * Is the item expanded. + */ + expanded?: boolean; + /** + * Set of sub items. + */ + items: NavbarItemProps[]; + }; const COMPONENT_NAME: string = 'CollapsibleNavbarItem'; +/** + * The Collapsible Navbar Item is a custom component that is used to render a collapsible item in the Navbar. + * + * Demos: + * + * - [Collapsible Navbar Item (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-collapsible-navbar-item) + * + * API: + * + * - inherits [ListItemButton API](https://mui.com/material-ui/api/list-item-button/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the CollapsibleNavbarItem component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered CollapsibleNavbarItem component. + */ const CollapsibleNavbarItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( + ( { className, - component, expanded, fill, icon, @@ -62,7 +85,7 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent, ref: MutableRefObject, ): ReactElement => { const classes: string = clsx( @@ -77,10 +100,11 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent(expanded || false); - const handleItemClick = (): void => { + const handleItemClick = (e: MouseEvent): void => { if (onClick) { - onClick(); + onClick(e); } + setItemExpanded((prevState: boolean) => !prevState); }; @@ -89,7 +113,7 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent (itemExpanded ? : ); return ( - + = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'ColorModeToggle'; @@ -66,28 +84,53 @@ const CrescentIcon = (props: PropsWithChildren>): ReactE ); -const ColorModeToggle: FC & WithWrapperProps = ({ - className, - ...rest -}: ColorModeToggleProps): ReactElement => { - const {mode, setMode} = useColorScheme(); +/** + * The Toggle to switch between the two palette modes: light (the default) and dark. + * + * Demos: + * + * - [Color Mode Toggle (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/theme-color-mode-toggle--overview) + * + * API: + * + * - [IconButton API](https://mui.com/material-ui/api/icon-button/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the ColorModeToggle component. + * @param ref - The ref to be forwarded to the IconButton component. + * @returns The rendered ColorModeToggle component. + */ +const ColorModeToggle: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: ColorModeToggleProps, + ref: MutableRefObject, + ): ReactElement => { + const {mode, setMode} = useColorScheme(); - const classes: string = clsx('oxygen-color-mode-toggle', className); + const classes: string = clsx('oxygen-color-mode-toggle', className); - return ( - { - setMode(mode === 'light' ? 'dark' : 'light'); - }} - color="inherit" - className={classes} - {...rest} - > - {mode === 'light' ? : } - - ); -}; + return ( + { + setMode(mode === 'light' ? 'dark' : 'light'); + }} + color="inherit" + className={classes} + {...rest} + > + {mode === 'light' ? : } + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; ColorModeToggle.displayName = composeComponentDisplayName(COMPONENT_NAME); ColorModeToggle.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ColorModeToggle/index.ts b/packages/react/src/components/ColorModeToggle/index.ts index a048e05b..5ff1db43 100644 --- a/packages/react/src/components/ColorModeToggle/index.ts +++ b/packages/react/src/components/ColorModeToggle/index.ts @@ -17,4 +17,4 @@ */ export {default} from './ColorModeToggle'; -export type {ColorModeToggleProps} from './ColorModeToggle'; +export * from './ColorModeToggle'; diff --git a/packages/react/src/components/Container/Container.tsx b/packages/react/src/components/Container/Container.tsx index a668ce21..4654efb6 100644 --- a/packages/react/src/components/Container/Container.tsx +++ b/packages/react/src/components/Container/Container.tsx @@ -16,27 +16,60 @@ * under the License. */ -import MuiContainer, {ContainerProps as MuiContainerProps} from '@mui/material/Container'; +import MuiContainer from '@mui/material/Container'; +import type {ContainerProps as MuiContainerProps, ContainerTypeMap} from '@mui/material/Container'; import clsx from 'clsx'; -import {ElementType, FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './container.scss'; -export type ContainerProps = { +export type ContainerProps< + C extends ElementType = ElementType, + D extends ElementType = ContainerTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Container'; -const Container: FC & WithWrapperProps = ({ - className, - ...rest -}: ContainerProps): ReactElement => { - const classes: string = clsx('oxygen-container', className); +/** + * The container centers your content horizontally. It's the most basic layout element. + * + * Demos: + * + * - [Container (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-container) + * - [Container (MUI)](https://mui.com/material-ui/react-container/) + * + * API: + * + * - [Container API](https://mui.com/material-ui/api/container/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Container component. + * @param ref - The ref to be forwarded to the MuiContainer component. + * @returns The rendered Container component. + */ +const Container: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: ContainerProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-container', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Container.displayName = composeComponentDisplayName(COMPONENT_NAME); Container.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Container/index.ts b/packages/react/src/components/Container/index.ts index e65a0906..6016c087 100644 --- a/packages/react/src/components/Container/index.ts +++ b/packages/react/src/components/Container/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Container'; -export type {ContainerProps} from './Container'; +export * from './Container'; + +export {ContainerTypeMap} from '@mui/material/Container'; diff --git a/packages/react/src/components/CountryFlag/CountryFlag.tsx b/packages/react/src/components/CountryFlag/CountryFlag.tsx index f7489431..fcd56a5d 100644 --- a/packages/react/src/components/CountryFlag/CountryFlag.tsx +++ b/packages/react/src/components/CountryFlag/CountryFlag.tsx @@ -16,13 +16,14 @@ * under the License. */ -import {Typography} from '@mui/material'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, HTMLAttributes, MutableRefObject, ReactElement} from 'react'; import WorldFlag from 'react-world-flags'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; +import Typography from '../Typography'; -export interface CountryFlagsProps extends React.HTMLAttributes { +export type CountryFlagProps = { /** * The two-letter/three-letter/three-digit country code of the flag. */ @@ -31,17 +32,38 @@ export interface CountryFlagsProps extends React.HTMLAttributes; -const COMPONENT_NAME: string = 'Flag'; +const COMPONENT_NAME: string = 'CountryFlag'; -const CountryFlag: FC & WithWrapperProps = ({ - countryCode, - height = '16', - ...rest -}: CountryFlagsProps): ReactElement => ( - {countryCode}} {...rest} /> -); +/** + * The Toggle to switch between the two palette modes: light (the default) and dark. + * + * Demos: + * + * - [Country Flag (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/icons-country-flags) + * + * @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 not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the CountryFlag component. + * @param ref - The ref to be forwarded to the WorldFlag component. + * @returns The rendered CountryFlag component. + */ +const CountryFlag: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({countryCode, height = '16', ...rest}: CountryFlagProps, ref: MutableRefObject): ReactElement => ( + {countryCode}} + {...rest} + /> + ), +) as ForwardRefExoticComponent & WithWrapperProps; CountryFlag.displayName = composeComponentDisplayName(COMPONENT_NAME); CountryFlag.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CountryFlag/index.ts b/packages/react/src/components/CountryFlag/index.ts index f9f59eba..1362398e 100644 --- a/packages/react/src/components/CountryFlag/index.ts +++ b/packages/react/src/components/CountryFlag/index.ts @@ -17,4 +17,4 @@ */ export {default} from './CountryFlag'; -export type {CountryFlagsProps} from './CountryFlag'; +export * from './CountryFlag'; diff --git a/packages/react/src/components/DataGrid/DataGrid.tsx b/packages/react/src/components/DataGrid/DataGrid.tsx index 81245176..d1be7689 100644 --- a/packages/react/src/components/DataGrid/DataGrid.tsx +++ b/packages/react/src/components/DataGrid/DataGrid.tsx @@ -16,22 +16,49 @@ * under the License. */ -import {DataGrid as MuiDataGrid, DataGridProps as MuiDataGridProps} from '@mui/x-data-grid'; +import {DataGrid as MuiXDataGrid} from '@mui/x-data-grid'; +import type {GridValidRowModel as MuiXGridValidRowModel, DataGridProps as MuiXDataGridProps} from '@mui/x-data-grid'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './data-grid.scss'; -export type DataGridProps = MuiDataGridProps; +export type DataGridProps = MuiXDataGridProps; const COMPONENT_NAME: string = 'DataGrid'; -const DataGrid: FC & WithWrapperProps = ({className, ...rest}: DataGridProps): ReactElement => { - const classes: string = clsx('oxygen-data-grid', className); +/** + * The Data Grid component is built with React and TypeScript to provide a smooth UX for manipulating + * an unlimited set of data. It features an intuitive API for real-time updates as well as theming + * and custom templates—all with blazing-fast performance. + * + * Demos: + * + * - [Data Grid (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-datagrid) + * - [Data Grid (MUI X)](https://mui.com/x/react-data-grid/) + * + * API: + * + * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the DataGrid component. + * @param ref - The ref to be forwarded to the MuiDataGrid component. + * @returns The rendered DataGrid component. + */ +const DataGrid: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: DataGridProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-data-grid', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; DataGrid.displayName = composeComponentDisplayName(COMPONENT_NAME); DataGrid.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/DataGrid/index.ts b/packages/react/src/components/DataGrid/index.ts index 0580fc48..6af665e3 100644 --- a/packages/react/src/components/DataGrid/index.ts +++ b/packages/react/src/components/DataGrid/index.ts @@ -17,4 +17,31 @@ */ export {default} from './DataGrid'; -export type {DataGridProps} from './DataGrid'; +export * from './DataGrid'; + +export * from '@mui/x-data-grid/components'; +export * from '@mui/x-data-grid/constants'; +export * from '@mui/x-data-grid/hooks'; +export * from '@mui/x-data-grid/locales'; +export * from '@mui/x-data-grid/models'; +export * from '@mui/x-data-grid/context'; +export * from '@mui/x-data-grid/colDef'; +export * from '@mui/x-data-grid/utils'; +export { + useGridRootProps, + useGridApiRef, + useGridApiContext, + GridColumnHeaders, + GridColumnMenu, + GRID_COLUMN_MENU_SLOTS, + GRID_COLUMN_MENU_SLOT_PROPS, +} from '@mui/x-data-grid'; +export type { + GridApi, + GridState, + GridInitialState, + GridExportFormat, + GridExportExtension, + GridToolbarExportProps, + GridExperimentalFeatures, +} from '@mui/x-data-grid'; diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx index 831a6bf6..c74b6658 100644 --- a/packages/react/src/components/Divider/Divider.tsx +++ b/packages/react/src/components/Divider/Divider.tsx @@ -16,22 +16,62 @@ * under the License. */ -import MuiDivider, {DividerProps as MuiDividerProps} from '@mui/material/Divider'; +import MuiDivider from '@mui/material/Divider'; +import type {DividerProps as MuiDividerProps, DividerTypeMap as MuiDividerTypeMap} from '@mui/material/Divider'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './divider.scss'; -export type DividerProps = MuiDividerProps; +export type DividerProps< + C extends ElementType = ElementType, + D extends ElementType = MuiDividerTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Divider'; -const Divider: FC & WithWrapperProps = ({className, ...rest}: DividerProps): ReactElement => { - const classes: string = clsx('oxygen-divider', className); +/** + * The Divider provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy. + * + * Demos: + * + * - [Divider (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-divider) + * - [Divider (MUI)](https://mui.com/material-ui/react-divider/) + * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list) + * - [Lists (MUI)](https://mui.com/material-ui/react-list/) + * + * API: + * + * - [Divider API](https://mui.com/material-ui/api/divider/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Divider component. + * @param ref - The ref to be forwarded to the MuiDivider component. + * @returns The rendered Divider component. + */ +const Divider: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: DividerProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-divider', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Divider.displayName = composeComponentDisplayName(COMPONENT_NAME); Divider.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Divider/index.ts b/packages/react/src/components/Divider/index.ts index 29f4138e..480521cb 100644 --- a/packages/react/src/components/Divider/index.ts +++ b/packages/react/src/components/Divider/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Divider'; -export type {DividerProps} from './Divider'; +export * from './Divider'; + +export type {DividerPropsVariantOverrides, DividerTypeMap} from '@mui/material/Divider'; diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx index 1bc11823..bdefaf56 100644 --- a/packages/react/src/components/Drawer/Drawer.tsx +++ b/packages/react/src/components/Drawer/Drawer.tsx @@ -16,22 +16,57 @@ * under the License. */ -import MuiDrawer, {DrawerProps as MuiDrawerProps} from '@mui/material/Drawer'; +import MuiDrawer from '@mui/material/Drawer'; +import type {DrawerProps as MuiDrawerProps} from '@mui/material/Drawer'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './drawer.scss'; -export type DrawerProps = MuiDrawerProps; +export type DrawerProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'Drawer'; -const Drawer: FC & WithWrapperProps = ({className, ...rest}: DrawerProps): ReactElement => { - const classes: string = clsx('oxygen-drawer', className); +/** + * The navigation drawers (or "sidebars") provide ergonomic access to destinations in a site or + * app functionality such as switching accounts. + * + * Demos: + * + * - [Drawer (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-drawer) + * - [Drawer (MUI)](https://mui.com/material-ui/react-drawer/) + * + * API: + * + * - [Drawer API](https://mui.com/material-ui/api/drawer/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ 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: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: DrawerProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-drawer', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Drawer.displayName = composeComponentDisplayName(COMPONENT_NAME); Drawer.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Drawer/index.ts b/packages/react/src/components/Drawer/index.ts index 41d950f9..11d00665 100644 --- a/packages/react/src/components/Drawer/index.ts +++ b/packages/react/src/components/Drawer/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Drawer'; -export type {DrawerProps} from './Drawer'; +export * from './Drawer'; diff --git a/packages/react/src/components/Fab/Fab.tsx b/packages/react/src/components/Fab/Fab.tsx index 19feb9bf..c2e9c596 100644 --- a/packages/react/src/components/Fab/Fab.tsx +++ b/packages/react/src/components/Fab/Fab.tsx @@ -16,18 +16,50 @@ * under the License. */ -import MuiFab, {FabProps as MuiFabProps} from '@mui/material/Fab'; +import MuiFab from '@mui/material/Fab'; +import type {FabProps as MuiFabProps, FabTypeMap as MuiFabTypeMap} from '@mui/material/Fab'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type FabProps = { +export type FabProps< + C extends ElementType = ElementType, + D extends ElementType = MuiFabTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Fab'; +/** + * A Floating Action Button (FAB) performs the primary, or most common, action on a screen. + * + * Demos: + * + * - [Floating Action Button (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-fab) + * - [Floating Action Button (MUI)](https://mui.com/material-ui/react-floating-action-button/) + * + * API: + * + * - [Fab API](https://mui.com/material-ui/api/fab/) + * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) + * + * @remarks + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Fab component. + * @param ref - The ref to be forwarded to the MuiFab component. + * @returns The rendered Fab component. + */ const Fab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ( {className, ...rest}: FabProps, @@ -35,7 +67,7 @@ const Fab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ): ReactElement => { const classes: string = clsx('oxygen-fab', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/Fab/index.ts b/packages/react/src/components/Fab/index.ts index 5aaaf4a7..e57c8110 100644 --- a/packages/react/src/components/Fab/index.ts +++ b/packages/react/src/components/Fab/index.ts @@ -17,4 +17,11 @@ */ export {default} from './Fab'; -export type {FabProps} from './Fab'; +export * from './Fab'; + +export type { + FabPropsVariantOverrides, + FabPropsSizeOverrides, + FabPropsColorOverrides, + FabTypeMap, +} from '@mui/material/Fab'; diff --git a/packages/react/src/components/Footer/Footer.tsx b/packages/react/src/components/Footer/Footer.tsx index d90c760f..cd5ceace 100644 --- a/packages/react/src/components/Footer/Footer.tsx +++ b/packages/react/src/components/Footer/Footer.tsx @@ -17,17 +17,21 @@ */ import clsx from 'clsx'; -import {FC, ReactElement, ReactNode} from 'react'; -import {useIsMobile} from '../../hooks'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; +import {useIsMobile} from '../../hooks/use-is-mobile'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import Box, {BoxProps} from '../Box'; -import Container, {ContainerProps} from '../Container'; -import Link, {LinkProps} from '../Link'; +import Box from '../Box'; +import type {BoxProps} from '../Box'; +import Container from '../Container'; +import type {ContainerProps} from '../Container'; +import Link from '../Link'; +import type {LinkProps} from '../Link'; import Typography from '../Typography'; import './footer.scss'; -export interface FooterProps extends BoxProps { +export type FooterProps = BoxProps & { /** * Copyright to display. */ @@ -40,52 +44,69 @@ export interface FooterProps extends BoxProps { * Determine the max-width of the footer container. */ maxWidth?: ContainerProps['maxWidth']; -} +}; const COMPONENT_NAME: string = 'Footer'; -const Footer: FC & WithWrapperProps = ({ - className, - copyright, - links, - maxWidth, - ...rest -}: FooterProps): ReactElement => { - const isMobile: boolean = useIsMobile(); +/** + * The Footers display a set of links and a copyright at the bottom of the application. + * + * Demos: + * + * - [Footer (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-footer) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Footer component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered Footer component. + */ +const Footer: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, copyright, component = 'footer' as C, links, maxWidth, ...rest}: FooterProps, + ref: MutableRefObject, + ): ReactElement => { + const isMobile: boolean = useIsMobile(); - const classes: string = clsx('oxygen-footer', {mobile: isMobile}, className); + const classes: string = clsx('oxygen-footer', {mobile: isMobile}, className); - return ( - - - {links !== undefined && Array.isArray(links) && links.length > 0 && ( - - {links.map((link: LinkProps) => ( - - ))} - - )} - {copyright && ( - - - - {copyright} - + return ( + + + {links !== undefined && Array.isArray(links) && links.length > 0 && ( + + {links.map((link: LinkProps) => ( + + ))} - - )} - - - ); -}; + )} + {copyright && ( + + + + {copyright} + + + + )} + + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; Footer.displayName = composeComponentDisplayName(COMPONENT_NAME); Footer.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Footer/index.ts b/packages/react/src/components/Footer/index.ts index f998389c..e3eb0bb8 100644 --- a/packages/react/src/components/Footer/index.ts +++ b/packages/react/src/components/Footer/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Footer'; -export type {FooterProps} from './Footer'; +export * from './Footer'; diff --git a/packages/react/src/components/FormControl/FormControl.tsx b/packages/react/src/components/FormControl/FormControl.tsx index b8e60c52..a577b494 100644 --- a/packages/react/src/components/FormControl/FormControl.tsx +++ b/packages/react/src/components/FormControl/FormControl.tsx @@ -16,27 +16,66 @@ * under the License. */ -import MuiFormControl, {FormControlProps as MuiFormControlProps} from '@mui/material/FormControl'; +import MuiFormControl from '@mui/material/FormControl'; +import type {FormControlProps as MuiFormControlProps, FormControlTypeMap} from '@mui/material/FormControl'; import clsx from 'clsx'; -import {ElementType, FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './form-control.scss'; -export type FormControlProps = { +export type FormControlProps< + C extends ElementType = ElementType, + D extends ElementType = FormControlTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'FormControl'; -const FormControl: FC & WithWrapperProps = ({ - className, - ...rest -}: FormControlProps): ReactElement => { - const classes: string = clsx('oxygen-form-control', className); +/** + * The Form Control apply a common state to form inputs; FormLabel, FormHelperText, Input, InputLabel. + * + * Demos: + * + * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox) + * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/) + * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group) + * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/) + * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch) + * - [Switch (MUI)](https://mui.com/material-ui/react-switch/) + * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field) + * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/) + * + * API: + * + * - [FormControl API](https://mui.com/material-ui/api/form-control/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the FormControl component. + * @param ref - The ref to be forwarded to the MuiFormControl component. + * @returns The rendered FormControl component. + */ +const FormControl: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: FormControlProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-form-control', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; FormControl.displayName = composeComponentDisplayName(COMPONENT_NAME); FormControl.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/FormControl/index.ts b/packages/react/src/components/FormControl/index.ts index f89bb9c6..60aac7e0 100644 --- a/packages/react/src/components/FormControl/index.ts +++ b/packages/react/src/components/FormControl/index.ts @@ -17,4 +17,11 @@ */ export {default} from './FormControl'; -export type {FormControlProps} from './FormControl'; +export * from './FormControl'; + +export {useFormControl, FormControlState} from '@mui/material/FormControl'; +export type { + FormControlPropsSizeOverrides, + FormControlPropsColorOverrides, + FormControlTypeMap, +} from '@mui/material/FormControl'; diff --git a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx index 334fc848..71c97739 100644 --- a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx +++ b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiFormControlLabel, {FormControlLabelProps as MuiFormControlLabelProps} from '@mui/material/FormControlLabel'; +import MuiFormControlLabel from '@mui/material/FormControlLabel'; +import type {FormControlLabelProps as MuiFormControlLabelProps} from '@mui/material/FormControlLabel'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -26,6 +28,31 @@ export type FormControlLabelProps = MuiFormControlLabelProps; const COMPONENT_NAME: string = 'FormControlLabel'; +/** + * The Form Control Label can be used to display a label for a form control. + * + * Demos: + * + * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox) + * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/) + * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group) + * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/) + * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch) + * - [Switch (MUI)](https://mui.com/material-ui/react-switch/) + * + * API: + * + * - [FormControlLabel API](https://mui.com/material-ui/api/form-control-label/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the FormControlLabel component. + * @param ref - The ref to be forwarded to the MuiFormControlLabel component. + * @returns The rendered FormControlLabel component. + */ const FormControlLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ({className, ...rest}: FormControlLabelProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-form-control-label', className); diff --git a/packages/react/src/components/FormControlLabel/index.ts b/packages/react/src/components/FormControlLabel/index.ts index b2adcbcf..09030c95 100644 --- a/packages/react/src/components/FormControlLabel/index.ts +++ b/packages/react/src/components/FormControlLabel/index.ts @@ -17,4 +17,4 @@ */ export {default} from './FormControlLabel'; -export type {FormControlLabelProps} from './FormControlLabel'; +export * from './FormControlLabel'; diff --git a/packages/react/src/components/FormGroup/FormGroup.tsx b/packages/react/src/components/FormGroup/FormGroup.tsx index ec7bac63..c6f8a11f 100644 --- a/packages/react/src/components/FormGroup/FormGroup.tsx +++ b/packages/react/src/components/FormGroup/FormGroup.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiFormGroup, {FormGroupProps as MuiFormGroupProps} from '@mui/material/FormGroup'; +import MuiFormGroup from '@mui/material/FormGroup'; +import type {FormGroupProps as MuiFormGroupProps} from '@mui/material/FormGroup'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -26,11 +28,33 @@ export type FormGroupProps = MuiFormGroupProps; const COMPONENT_NAME: string = 'FormGroup'; +/** + * The Form Group is a helpful wrapper used to group selection control components. + * + * Demos: + * + * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox) + * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/) + * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch) + * - [Switch (MUI)](https://mui.com/material-ui/react-switch/) + * + * API: + * + * - [FormGroup API](https://mui.com/material-ui/api/form-group/) + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the FormGroup component. + * @param ref - The ref to be forwarded to the MuiFormGroup component. + * @returns The rendered FormGroup component. + */ const FormGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ({className, ...rest}: FormGroupProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-form-group', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/FormGroup/index.ts b/packages/react/src/components/FormGroup/index.ts index 825627b8..48780e1d 100644 --- a/packages/react/src/components/FormGroup/index.ts +++ b/packages/react/src/components/FormGroup/index.ts @@ -17,4 +17,4 @@ */ export {default} from './FormGroup'; -export type {FormGroupProps} from './FormGroup'; +export * from './FormGroup'; diff --git a/packages/react/src/components/FormHelperText/FormHelperText.tsx b/packages/react/src/components/FormHelperText/FormHelperText.tsx index 180b4af1..233aff58 100644 --- a/packages/react/src/components/FormHelperText/FormHelperText.tsx +++ b/packages/react/src/components/FormHelperText/FormHelperText.tsx @@ -16,27 +16,60 @@ * under the License. */ -import MuiFormHelperText, {FormHelperTextProps as MuiFormHelperTextProps} from '@mui/material/FormHelperText'; +import MuiFormHelperText from '@mui/material/FormHelperText'; +import type {FormHelperTextProps as MuiFormHelperTextProps, FormHelperTextTypeMap} from '@mui/material/FormHelperText'; import clsx from 'clsx'; -import {ElementType, FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './form-helper-text.scss'; -export type FormHelperTextProps = { +export type FormHelperTextProps< + C extends ElementType = ElementType, + D extends ElementType = FormHelperTextTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'FormHelperText'; -const FormHelperText: FC & WithWrapperProps = ({ - className, - ...rest -}: FormHelperTextProps): ReactElement => { - const classes: string = clsx('oxygen-form-helper-text', className); +/** + * A Form Helper Text component is used to provide additional information about the form inputs. + * + * Demos: + * + * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field) + * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/) + * + * API: + * + * - [FormHelperText API](https://mui.com/material-ui/api/form-helper-text/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Fab component. + * @param ref - The ref to be forwarded to the MuiFab component. + * @returns The rendered Fab component. + */ +const FormHelperText: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: FormHelperTextProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-form-helper-text', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; FormHelperText.displayName = composeComponentDisplayName(COMPONENT_NAME); FormHelperText.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/FormHelperText/index.ts b/packages/react/src/components/FormHelperText/index.ts index 028cbfeb..28678a4c 100644 --- a/packages/react/src/components/FormHelperText/index.ts +++ b/packages/react/src/components/FormHelperText/index.ts @@ -17,4 +17,6 @@ */ export {default} from './FormHelperText'; -export type {FormHelperTextProps} from './FormHelperText'; +export * from './FormHelperText'; + +export type {FormHelperTextPropsVariantOverrides, FormHelperTextTypeMap} from '@mui/material/FormHelperText'; diff --git a/packages/react/src/components/FormLabel/FormLabel.tsx b/packages/react/src/components/FormLabel/FormLabel.tsx index 1de0aa56..9e5d45e1 100644 --- a/packages/react/src/components/FormLabel/FormLabel.tsx +++ b/packages/react/src/components/FormLabel/FormLabel.tsx @@ -16,18 +16,53 @@ * under the License. */ -import MuiFormLabel, {FormLabelProps as MuiFormLabelProps} from '@mui/material/FormLabel'; +import MuiFormLabel from '@mui/material/FormLabel'; +import type {FormLabelTypeMap, FormLabelProps as MuiFormLabelProps} from '@mui/material/FormLabel'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type FormLabelProps = { +export type FormLabelProps< + C extends ElementType = ElementType, + D extends ElementType = FormLabelTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'FormLabel'; +/** + * A Form Label component is used to provide a label for the form inputs. + * + * Demos: + * + * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox) + * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/) + * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group) + * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/) + * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch) + * - [Switch (MUI)](https://mui.com/material-ui/react-switch/) + * + * API: + * + * - [FormLabel API](https://mui.com/material-ui/api/form-label/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Fab component. + * @param ref - The ref to be forwarded to the MuiFab component. + * @returns The rendered Fab component. + */ const FormLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ( {className, ...rest}: FormLabelProps, @@ -35,7 +70,7 @@ const FormLabel: ForwardRefExoticComponent & WithWrapperProps = ): ReactElement => { const classes: string = clsx('oxygen-form-label', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/FormLabel/index.ts b/packages/react/src/components/FormLabel/index.ts index 51abd52b..21f04ada 100644 --- a/packages/react/src/components/FormLabel/index.ts +++ b/packages/react/src/components/FormLabel/index.ts @@ -17,4 +17,12 @@ */ export {default} from './FormLabel'; -export type {FormLabelProps} from './FormLabel'; +export * from './FormLabel'; + +export type { + FormLabelPropsColorOverrides, + FormLabelOwnProps, + FormLabelTypeMap, + FormLabelBaseProps, + ExtendFormLabelTypeMap, +} from '@mui/material/FormLabel'; diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx index 91a8b932..7beb5959 100644 --- a/packages/react/src/components/Grid/Grid.tsx +++ b/packages/react/src/components/Grid/Grid.tsx @@ -16,22 +16,59 @@ * under the License. */ -import MuiGrid, {Grid2Props as MuiGridProps} from '@mui/material/Unstable_Grid2'; +import MuiGrid from '@mui/material/Unstable_Grid2'; +import type {Grid2TypeMap, Grid2Props as MuiGridProps} from '@mui/material/Unstable_Grid2'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './grid.scss'; -export type GridProps = MuiGridProps; +export type GridProps< + C extends ElementType = ElementType, + D extends React.ElementType = Grid2TypeMap['defaultComponent'], + P = { + component?: React.ElementType; + }, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Grid'; -const Grid: FC & WithWrapperProps = ({className, ...rest}: GridProps): ReactElement => { - const classes: string = clsx('oxygen-grid', className); +/** + * The Grid adapts to screen size and orientation, ensuring consistency across layouts. + * + * Demos: + * + * - [Grid (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-grid) + * - [Grid (MUI)](https://mui.com/material-ui/react-grid2/) + * + * API: + * + * - [Grid API](https://mui.com/material-ui/api/grid-2/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the FormControl component. + * @param ref - The ref to be forwarded to the MuiFormControl component. + * @returns The rendered FormControl component. + */ +const Grid: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: GridProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-grid', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Grid.displayName = composeComponentDisplayName(COMPONENT_NAME); Grid.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Grid/index.ts b/packages/react/src/components/Grid/index.ts index b79c636d..b35f54d3 100644 --- a/packages/react/src/components/Grid/index.ts +++ b/packages/react/src/components/Grid/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Grid'; -export type {GridProps} from './Grid'; +export * from './Grid'; + +export type {Grid2Slot, Grid2TypeMap} from '@mui/material/Unstable_Grid2'; diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx index 07a4bf52..30c35385 100644 --- a/packages/react/src/components/Header/Header.tsx +++ b/packages/react/src/components/Header/Header.tsx @@ -20,22 +20,25 @@ import {useColorScheme} from '@mui/material/styles'; import {Mode} from '@mui/system/cssVars/useCurrentColorScheme'; import {ChevronDownIcon, BarsIcon, ArrowRightToBracketIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; -import {FC, ReactElement, ReactNode} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; import {useIsMobile} from '../../hooks/use-is-mobile'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import './header.scss'; -import AppBar, {AppBarProps} from '../AppBar'; +import AppBar from '../AppBar'; +import type {AppBarProps} from '../AppBar'; import Avatar from '../Avatar'; import Box from '../Box'; -import {ButtonProps} from '../Button'; +import type {ButtonProps} from '../Button'; import IconButton from '../IconButton'; import Link from '../Link'; import Toolbar from '../Toolbar'; import Typography from '../Typography'; -import UserDropdownMenu, {ModeList, UserTemplate} from '../UserDropdownMenu'; +import UserDropdownMenu from '../UserDropdownMenu'; +import type {ModeList, UserTemplate} from '../UserDropdownMenu'; +import './header.scss'; -export interface HeaderProps extends AppBarProps { +export type HeaderProps = AppBarProps & { /** * Brand information. */ @@ -74,9 +77,9 @@ export interface HeaderProps extends AppBarProps { * Props to modify the action menu item in the user dropdown menu. */ userDropdownMenu?: UserDropdownMenuHeaderProps; -} +}; -export interface UserDropdownMenuHeaderProps { +export type UserDropdownMenuHeaderProps = { /** * Action icon for the user dropdown menu. */ @@ -98,9 +101,9 @@ export interface UserDropdownMenuHeaderProps { */ onActionClick?: () => void; triggerOptions?: Omit & Record; -} +}; -export interface BrandTemplate { +export type BrandTemplate = { /** * Logo for the brand template. */ @@ -122,7 +125,7 @@ export interface BrandTemplate { * Title of the brand, portal name or company. */ title?: ReactNode; -} +}; const userDropdownMenuDefaultProps: UserDropdownMenuHeaderProps = { actionIcon: , @@ -132,119 +135,147 @@ const userDropdownMenuDefaultProps: UserDropdownMenuHeaderProps = { const COMPONENT_NAME: string = 'Header'; -const Header: FC & WithWrapperProps = ({ - brand, - className, - modes, - showCollapsibleHamburger, - leftAlignedElements, - navbarToggleIcon = , - onCollapsibleHamburgerClick, - rightAlignedElements, - user, - userDropdownMenu = userDropdownMenuDefaultProps, - ...rest -}: HeaderProps): ReactElement => { - const userDropdownMenuProps: UserDropdownMenuHeaderProps = {...userDropdownMenuDefaultProps, ...userDropdownMenu}; +/** + * The Header displays the brand, left aligned elements, right aligned elements, and the user dropdown menu. + * + * Demos: + * + * - [Header (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-header) + * + * API: + * + * - [AppBar API](https://mui.com/material-ui/api/app-bar/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [AppBar](https://mui.com/material-ui/api/app-bar//) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Header component. + * @param ref - The ref to be forwarded to the AppBar component. + * @returns The rendered Header component. + */ +const Header: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + { + brand, + className, + modes, + showCollapsibleHamburger, + leftAlignedElements, + navbarToggleIcon = , + onCollapsibleHamburgerClick, + rightAlignedElements, + user, + userDropdownMenu = userDropdownMenuDefaultProps, + ...rest + }: HeaderProps, + ref: MutableRefObject, + ): ReactElement => { + const userDropdownMenuProps: UserDropdownMenuHeaderProps = {...userDropdownMenuDefaultProps, ...userDropdownMenu}; - const {mode, setMode} = useColorScheme(); - const isMobile: boolean = useIsMobile(); + const {mode, setMode} = useColorScheme(); + const isMobile: boolean = useIsMobile(); - const classes: string = clsx( - 'oxygen-header', - { - mobile: isMobile, - 'with-hamburger': showCollapsibleHamburger, - }, - className, - ); + const classes: string = clsx( + 'oxygen-header', + { + mobile: isMobile, + 'with-hamburger': showCollapsibleHamburger, + }, + className, + ); - const onModeChange = (selectedMode: Mode): void => { - setMode(selectedMode); - }; + const onModeChange = (selectedMode: Mode): void => { + setMode(selectedMode); + }; - return ( - - - {showCollapsibleHamburger && ( -
- null)}> - {navbarToggleIcon} - -
- )} - {brand && ( - - - {isMobile ? brand.logo.mobile ?? brand.logo.desktop : brand.logo.desktop} + return ( + + + {showCollapsibleHamburger && ( +
+ null)}> + {navbarToggleIcon} + +
+ )} + {brand && ( + + + {isMobile ? brand.logo.mobile ?? brand.logo.desktop : brand.logo.desktop} + + + {brand.title} + - - {brand.title} - - - )} - {(leftAlignedElements || rightAlignedElements) && ( - - {leftAlignedElements?.length > 0 && ( - {leftAlignedElements} - )} - {rightAlignedElements?.length > 0 && ( - {rightAlignedElements} - )} + )} + {(leftAlignedElements || rightAlignedElements) && ( + + {leftAlignedElements?.length > 0 && ( + {leftAlignedElements} + )} + {rightAlignedElements?.length > 0 && ( + {rightAlignedElements} + )} + + )} + + , + startIcon: ( + + {user?.name?.split('')[0]} + + ), + ...userDropdownMenuProps.triggerOptions, + }} + modesHeading="Theme" + modes={modes} + onActionTrigger={userDropdownMenuProps.onActionClick} + actionText={userDropdownMenuProps.actionText} + actionIcon={userDropdownMenuProps.actionIcon} + mode={mode} + onModeChange={onModeChange} + menuItems={userDropdownMenuProps.menuItems} + footerContent={userDropdownMenu.footerContent} + /> - )} - - , - startIcon: ( - - {user?.name?.split('')[0]} - - ), - ...userDropdownMenuProps.triggerOptions, - }} - modesHeading="Theme" - modes={modes} - onActionTrigger={userDropdownMenuProps.onActionClick} - actionText={userDropdownMenuProps.actionText} - actionIcon={userDropdownMenuProps.actionIcon} - mode={mode} - onModeChange={onModeChange} - menuItems={userDropdownMenuProps.menuItems} - footerContent={userDropdownMenu.footerContent} - /> - - - - ); -}; + + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; Header.displayName = composeComponentDisplayName(COMPONENT_NAME); Header.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Header/index.ts b/packages/react/src/components/Header/index.ts index 40eca574..3240c0ca 100644 --- a/packages/react/src/components/Header/index.ts +++ b/packages/react/src/components/Header/index.ts @@ -17,5 +17,4 @@ */ export {default} from './Header'; -export type {HeaderProps} from './Header'; -export type {BrandTemplate} from './Header'; +export * from './Header'; diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx index b8170737..609737fd 100644 --- a/packages/react/src/components/IconButton/IconButton.tsx +++ b/packages/react/src/components/IconButton/IconButton.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiIconButton, {IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton'; +import MuiIconButton from '@mui/material/IconButton'; +import type {IconButtonTypeMap, IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './icon-button.scss'; @@ -28,23 +30,58 @@ export enum IconButtonVariants { TEXT = 'text', } -export interface IconButtonProps extends MuiIconButtonProps { +export type IconButtonProps< + C extends ElementType = ElementType, + D extends ElementType = IconButtonTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; + /** + * The variant of the icon button. + */ variant?: IconButtonVariants; -} +} & Omit, 'component'>; const COMPONENT_NAME: string = 'IconButton'; -const IconButton: FC & WithWrapperProps = ({ - className, - variant = IconButtonVariants.TEXT, - ...rest -}: IconButtonProps): ReactElement => { - const classes: string = clsx('oxygen-icon-button', className, { - 'oxygen-icon-button-contained': variant === IconButtonVariants.CONTAINED, - }); - - return ; -}; +/** + * The Icon Button component is used to render a button with an icon. + * + * Demos: + * + * - [Button (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-button) + * - [Button (MUI)](https://mui.com/material-ui/react-button/) + * + * API: + * + * - [IconButton API](https://mui.com/material-ui/api/icon-button/) + * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the FormControl component. + * @param ref - The ref to be forwarded to the MuiFormControl component. + * @returns The rendered FormControl component. + */ +const IconButton: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, variant = IconButtonVariants.TEXT, ...rest}: IconButtonProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-icon-button', className, { + 'oxygen-icon-button-contained': variant === IconButtonVariants.CONTAINED, + }); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; IconButton.displayName = composeComponentDisplayName(COMPONENT_NAME); IconButton.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/IconButton/index.ts b/packages/react/src/components/IconButton/index.ts index 5349e9af..18cd7c8c 100644 --- a/packages/react/src/components/IconButton/index.ts +++ b/packages/react/src/components/IconButton/index.ts @@ -17,4 +17,10 @@ */ export {default} from './IconButton'; -export type {IconButtonProps} from './IconButton'; +export * from './IconButton'; + +export type { + IconButtonPropsColorOverrides, + IconButtonPropsSizeOverrides, + IconButtonTypeMap, +} from '@mui/material/IconButton'; diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx index e51781e2..0f5e8de9 100644 --- a/packages/react/src/components/Image/Image.tsx +++ b/packages/react/src/components/Image/Image.tsx @@ -17,7 +17,8 @@ */ import clsx from 'clsx'; -import {FC, ImgHTMLAttributes, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ImgHTMLAttributes, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -26,14 +27,32 @@ export type ImageProps = ImgHTMLAttributes; const COMPONENT_NAME: string = 'Image'; /** + * The Footers display a set of links and a copyright at the bottom of the application. + * * TODO: Refer improvement issue if this Image component is required. * @see {@link https://github.com/wso2/oxygen-ui/issues/65} + * + * Demos: + * + * - [Image (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-image) + * + * @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. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the Image component. + * @param ref - The ref to be forwarded to the img component. + * @returns The rendered Image component. */ -const Image: FC & WithWrapperProps = ({className, alt, ...rest}: ImageProps): ReactElement => { - const classes: string = clsx('oxygen-image', className); +const Image: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, alt, ...rest}: ImageProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-image', className); - return {alt}; -}; + return {alt}; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Image.displayName = composeComponentDisplayName(COMPONENT_NAME); Image.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Image/index.ts b/packages/react/src/components/Image/index.ts index cc1ea89f..8dce47a6 100644 --- a/packages/react/src/components/Image/index.ts +++ b/packages/react/src/components/Image/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Image'; -export type {ImageProps} from './Image'; +export * from './Image'; diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx index 1370e33d..d2f7a7d9 100644 --- a/packages/react/src/components/Input/Input.tsx +++ b/packages/react/src/components/Input/Input.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiInput, {InputProps as MuiInputProps} from '@mui/material/Input'; +import MuiInput from '@mui/material/Input'; +import type {InputProps as MuiInputProps} from '@mui/material/Input'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './input.scss'; @@ -27,11 +29,35 @@ export type InputProps = MuiInputProps; const COMPONENT_NAME: string = 'Input'; -const Input: FC & WithWrapperProps = ({className, ...rest}: InputProps): ReactElement => { - const classes: string = clsx('oxygen-input', className); +/** + * The Input component is used to render a text input field. + * + * Demos: + * + * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field) + * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/) + * + * API: + * + * - [Input API](https://mui.com/material-ui/api/input/) + * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the Input component. + * @param ref - The ref to be forwarded to the MuiInput component. + * @returns The rendered Input component. + */ +const Input: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: InputProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-input', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Input.displayName = composeComponentDisplayName(COMPONENT_NAME); Input.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Input/index.ts b/packages/react/src/components/Input/index.ts index 82bf89f9..3677abeb 100644 --- a/packages/react/src/components/Input/index.ts +++ b/packages/react/src/components/Input/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Input'; -export type {InputProps} from './Input'; +export * from './Input'; diff --git a/packages/react/src/components/InputAdornment/InputAdornment.tsx b/packages/react/src/components/InputAdornment/InputAdornment.tsx index e542577d..1496f509 100644 --- a/packages/react/src/components/InputAdornment/InputAdornment.tsx +++ b/packages/react/src/components/InputAdornment/InputAdornment.tsx @@ -16,27 +16,60 @@ * under the License. */ -import MuiInputAdornment, {InputAdornmentProps as MuiInputAdornmentProps} from '@mui/material/InputAdornment'; +import MuiInputAdornment from '@mui/material/InputAdornment'; +import type {InputAdornmentTypeMap, InputAdornmentProps as MuiInputAdornmentProps} from '@mui/material/InputAdornment'; import clsx from 'clsx'; -import {ElementType, FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type InputAdornmentProps = { +export type InputAdornmentProps< + C extends ElementType = ElementType, + D extends ElementType = InputAdornmentTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'InputAdornment'; -const InputAdornment: FC & WithWrapperProps = ({ - className, - position, - ...rest -}: InputAdornmentProps): ReactElement => { - const classes: string = clsx('oxygen-input-adornment', className); +/** + * The Input Adornment can be used to add a prefix, a suffix, or an action to an input. For instance, + * you can use an icon button to hide or reveal the password. + * + * Demos: + * + * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field) + * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/) + * + * API: + * + * - [InputAdornment API](https://mui.com/material-ui/api/input-adornment/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the InputAdornment component. + * @param ref - The ref to be forwarded to the MuiInputAdornment component. + * @returns The rendered InputAdornment component. + */ +const InputAdornment: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, position, ...rest}: InputAdornmentProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-input-adornment', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; InputAdornment.displayName = composeComponentDisplayName(COMPONENT_NAME); InputAdornment.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/InputAdornment/index.ts b/packages/react/src/components/InputAdornment/index.ts index 572ab11d..811fa7c9 100644 --- a/packages/react/src/components/InputAdornment/index.ts +++ b/packages/react/src/components/InputAdornment/index.ts @@ -17,4 +17,6 @@ */ export {default} from './InputAdornment'; -export type {InputAdornmentProps} from './InputAdornment'; +export * from './InputAdornment'; + +export {InputAdornmentTypeMap} from '@mui/material/InputAdornment'; diff --git a/packages/react/src/components/InputLabel/InputLabel.tsx b/packages/react/src/components/InputLabel/InputLabel.tsx index 378ae84f..ecc8b4c6 100644 --- a/packages/react/src/components/InputLabel/InputLabel.tsx +++ b/packages/react/src/components/InputLabel/InputLabel.tsx @@ -16,22 +16,61 @@ * under the License. */ -import MuiInputLabel, {InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel'; +import MuiInputLabel from '@mui/material/InputLabel'; +import type {InputLabelTypeMap, InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './input-label.scss'; -export type InputLabelProps = MuiInputLabelProps; +export type InputLabelProps< + C extends ElementType = ElementType, + D extends React.ElementType = InputLabelTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'InputLabel'; -const InputLabel: FC & WithWrapperProps = ({className, ...rest}: InputLabelProps): ReactElement => { - const classes: string = clsx('oxygen-input-label', className); +/** + * The Form Label component is used to provide a label for the form inputs. + * + * Demos: + * + * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field) + * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/) + * + * API: + * + * - [InputLabel API](https://mui.com/material-ui/api/input-label/) + * - inherits [FormLabel API](https://mui.com/material-ui/api/form-label/) + * + * @remarks + * - ✔️ Props of the [FormLabel](https://mui.com/material-ui/api/form-label/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the InputLabel component. + * @param ref - The ref to be forwarded to the MuiInputLabel component. + * @returns The rendered InputLabel component. + */ +const InputLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: InputLabelProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-input-label', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; InputLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); InputLabel.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/InputLabel/index.ts b/packages/react/src/components/InputLabel/index.ts index b81a120a..e484081c 100644 --- a/packages/react/src/components/InputLabel/index.ts +++ b/packages/react/src/components/InputLabel/index.ts @@ -17,4 +17,6 @@ */ export {default} from './InputLabel'; -export type {InputLabelProps} from './InputLabel'; +export * from './InputLabel'; + +export type {InputLabelPropsSizeOverrides, InputLabelTypeMap} from '@mui/material/InputLabel'; diff --git a/packages/react/src/components/LinearProgress/LinearProgress.tsx b/packages/react/src/components/LinearProgress/LinearProgress.tsx index 34a09a24..a63b548d 100644 --- a/packages/react/src/components/LinearProgress/LinearProgress.tsx +++ b/packages/react/src/components/LinearProgress/LinearProgress.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiLinearProgress, {LinearProgressProps as MuiLinearProgressProps} from '@mui/material/LinearProgress'; +import MuiLinearProgress from '@mui/material/LinearProgress'; +import type {LinearProgressProps as MuiLinearProgressProps} from '@mui/material/LinearProgress'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -26,14 +28,35 @@ export type LinearProgressProps = MuiLinearProgressProps; const COMPONENT_NAME: string = 'LinearProgress'; -const LinearProgress: FC & WithWrapperProps = ({ - className, - ...rest -}: LinearProgressProps): ReactElement => { - const classes: string = clsx('oxygen-linear-progress', className); +/** + * The Linear Progress component is used to show the progress of a task in a linear fashion. + * + * Demos: + * + * TODO: Merge two progress components into one. + * - [Progress (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-circular-progress) + * - [Progress (MUI)](https://mui.com/material-ui/react-progress/) + * + * API: + * + * - [LinearProgress API](https://mui.com/material-ui/api/linear-progress/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the LinearProgress component. + * @param ref - The ref to be forwarded to the MuiLinearProgress component. + * @returns The rendered LinearProgress component. + */ +const LinearProgress: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: LinearProgressProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-linear-progress', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; LinearProgress.displayName = composeComponentDisplayName(COMPONENT_NAME); LinearProgress.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/LinearProgress/index.ts b/packages/react/src/components/LinearProgress/index.ts index 717d377d..139b485d 100644 --- a/packages/react/src/components/LinearProgress/index.ts +++ b/packages/react/src/components/LinearProgress/index.ts @@ -17,4 +17,6 @@ */ export {default} from './LinearProgress'; -export type {LinearProgressProps} from './LinearProgress'; +export * from './LinearProgress'; + +export {LinearProgressPropsColorOverrides} from '@mui/material/LinearProgress'; diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx index 8e0da0c4..3a1eaa52 100644 --- a/packages/react/src/components/Link/Link.tsx +++ b/packages/react/src/components/Link/Link.tsx @@ -16,22 +16,63 @@ * under the License. */ -import MuiLink, {LinkProps as MuiLinkProps} from '@mui/material/Link'; +import MuiLink from '@mui/material/Link'; +import type {LinkTypeMap, LinkProps as MuiLinkProps} from '@mui/material/Link'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './link.scss'; -export type LinkProps = MuiLinkProps; +export type LinkProps< + C extends ElementType = ElementType, + D extends ElementType = LinkTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Link'; -const Link: FC & WithWrapperProps = ({className, ...rest}: LinkProps): ReactElement => { - const classes: string = clsx('oxygen-link', className); +/** + * A Link allows you to easily customize anchor elements with your theme colors and typography styles. + * + * Demos: + * + * - [Breadcrumbs (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-breadcrumbs) + * - [Breadcrumbs (MUI)](https://mui.com/material-ui/react-breadcrumbs/) + * - [Links (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-link) + * - [Links (MUI)](https://mui.com/material-ui/react-link/) + * + * API: + * + * - [Link API](https://mui.com/material-ui/api/link/) + * - inherits [Typography API](https://mui.com/material-ui/api/typography/) + * + * @remarks + * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Link component. + * @param ref - The ref to be forwarded to the MuiLink component. + * @returns The rendered Link component. + */ +const Link: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: LinkProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-link', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Link.displayName = composeComponentDisplayName(COMPONENT_NAME); Link.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Link/index.ts b/packages/react/src/components/Link/index.ts index f21831fa..7601761c 100644 --- a/packages/react/src/components/Link/index.ts +++ b/packages/react/src/components/Link/index.ts @@ -18,3 +18,5 @@ export {default} from './Link'; export type {LinkProps} from './Link'; + +export type {LinkTypeMap, LinkBaseProps} from '@mui/material/Link'; diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx index b0084d21..885d1c10 100644 --- a/packages/react/src/components/List/List.tsx +++ b/packages/react/src/components/List/List.tsx @@ -16,22 +16,62 @@ * under the License. */ -import MuiList, {ListProps as MuiListProps} from '@mui/material/List'; +import MuiList from '@mui/material/List'; +import type {ListTypeMap, ListProps as MuiListProps} from '@mui/material/List'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list.scss'; -export type ListProps = MuiListProps; +export type ListProps< + C extends ElementType = ElementType, + D extends ElementType = ListTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'List'; -const List: FC & WithWrapperProps = ({className, ...rest}: ListProps): ReactElement => { - const classes: string = clsx('oxygen-list', className); +/** + * A Lists is a continuous, vertical index of text or images. + * + * Demos: + * + * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list) + * - [Lists (MUI)](https://mui.com/material-ui/react-list/) + * - [Transfer List (Oxygen UI)](TODO: Add a link after implementing: Tracker: https://github.com/wso2/oxygen-ui/issues/2) + * - [Transfer List (MUI)](https://mui.com/material-ui/react-transfer-list/) + * + * API: + * + * - [List API](https://mui.com/material-ui/api/list/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ 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 List: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: ListProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-list', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; List.displayName = composeComponentDisplayName(COMPONENT_NAME); List.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/List/index.ts b/packages/react/src/components/List/index.ts index fe765bd4..05bf674d 100644 --- a/packages/react/src/components/List/index.ts +++ b/packages/react/src/components/List/index.ts @@ -17,4 +17,6 @@ */ export {default} from './List'; -export type {ListProps} from './List'; +export * from './List'; + +export type {ListTypeMap, ExtendListTypeMap, ExtendList} from '@mui/material/List'; diff --git a/packages/react/src/components/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx index f942c978..7afdf691 100644 --- a/packages/react/src/components/ListItem/ListItem.tsx +++ b/packages/react/src/components/ListItem/ListItem.tsx @@ -16,27 +16,56 @@ * under the License. */ -import MuiListItem, {ListItemProps as MuiListItemProps} from '@mui/material/ListItem'; +import MuiListItem from '@mui/material/ListItem'; +import type {ListItemProps as MuiListItemProps} from '@mui/material/ListItem'; import clsx from 'clsx'; -import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item.scss'; -export type ListItemProps = { +export type ListItemProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'ListItem'; +/** + * The List Item is a common list item that renders as an
  • by default. + * + * Demos: + * + * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list) + * - [Transfer List (Oxygen UI)](TODO: Add a link after implementing: Tracker: https://github.com/wso2/oxygen-ui/issues/2) + * - [Lists (MUI)](https://mui.com/material-ui/react-list/) + * - [Transfer List (MUI)](https://mui.com/material-ui/react-transfer-list/) + * + * API: + * + * - [ListItem API](https://mui.com/material-ui/api/list-item/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the ListItem component. + * @param ref - The ref to be forwarded to the MuiListItem component. + * @returns The rendered ListItem component. + */ const ListItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( + ( {className, ...rest}: ListItemProps, ref: MutableRefObject, ): ReactElement => { const classes: string = clsx('oxygen-list-item', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/ListItem/index.ts b/packages/react/src/components/ListItem/index.ts index 773f905a..8e3f5404 100644 --- a/packages/react/src/components/ListItem/index.ts +++ b/packages/react/src/components/ListItem/index.ts @@ -17,4 +17,6 @@ */ export {default} from './ListItem'; -export type {ListItemProps} from './ListItem'; +export * from './ListItem'; + +export type {ListItemComponentsPropsOverrides, ListItemBaseProps, ListItemTypeMap} from '@mui/material/ListItem'; diff --git a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx index 6a81378e..c9bd6218 100644 --- a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx +++ b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiListItemAvatar, {ListItemAvatarProps as MuiListItemAvatarProps} from '@mui/material/ListItemAvatar'; +import MuiListItemAvatar from '@mui/material/ListItemAvatar'; +import type {ListItemAvatarProps as MuiListItemAvatarProps} from '@mui/material/ListItemAvatar'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item-avatar.scss'; @@ -27,14 +29,34 @@ export type ListItemAvatarProps = MuiListItemAvatarProps; const COMPONENT_NAME: string = 'ListItemAvatar'; -const ListItemAvatar: FC & WithWrapperProps = ({ - className, - ...rest -}: ListItemAvatarProps): ReactElement => { - const classes: string = clsx('oxygen-list-item-avatar', className); +/** + * The List Item Avatar component is used to display an avatar in a list item. + * + * Demos: + * + * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list) + * - [Lists (MUI)](https://mui.com/material-ui/react-list/) + * + * API: + * + * - [ListItemAvatar API](https://mui.com/material-ui/api/list-item-avatar/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the ListItemAvatar component. + * @param ref - The ref to be forwarded to the MuiListItemAvatar component. + * @returns The rendered ListItemAvatar component. + */ +const ListItemAvatar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: ListItemAvatarProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-list-item-avatar', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; ListItemAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItemAvatar.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ListItemAvatar/index.ts b/packages/react/src/components/ListItemAvatar/index.ts index a104803a..a457aee2 100644 --- a/packages/react/src/components/ListItemAvatar/index.ts +++ b/packages/react/src/components/ListItemAvatar/index.ts @@ -17,4 +17,4 @@ */ export {default} from './ListItemAvatar'; -export type {ListItemAvatarProps} from './ListItemAvatar'; +export * from './ListItemAvatar'; diff --git a/packages/react/src/components/ListItemButton/ListItemButton.tsx b/packages/react/src/components/ListItemButton/ListItemButton.tsx index 55726bd6..e88e49a1 100644 --- a/packages/react/src/components/ListItemButton/ListItemButton.tsx +++ b/packages/react/src/components/ListItemButton/ListItemButton.tsx @@ -16,24 +16,59 @@ * under the License. */ -import MuiListItemButton, {ListItemButtonProps as MuiListItemButtonProps} from '@mui/material/ListItemButton'; +import MuiListItemButton from '@mui/material/ListItemButton'; +import type {ListItemButtonProps as MuiListItemButtonProps, ListItemButtonTypeMap} from '@mui/material/ListItemButton'; import clsx from 'clsx'; -import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item-button.scss'; -export type ListItemButtonProps = { +export type ListItemButtonProps< + C extends ElementType = ElementType, + D extends ElementType = ListItemButtonTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'ListItemButton'; +/** + * The List Item Button an action element to be used inside a list item. + * + * Demos: + * + * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list) + * - [Lists (MUI)](https://mui.com/material-ui/react-list/) + * + * API: + * + * - [ListItemButton API](https://mui.com/material-ui/api/list-item-button/) + * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) + * + * @remarks + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the ListItemButton component. + * @param ref - The ref to be forwarded to the MuiListItemButton component. + * @returns The rendered ListItemButton component. + */ const ListItemButton: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: ListItemButtonProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: ListItemButtonProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-list-item-button', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx index 2dab02ca..7638cf78 100644 --- a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx +++ b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiListItemIcon, {ListItemIconProps as MuiListItemIconProps} from '@mui/material/ListItemIcon'; +import MuiListItemIcon from '@mui/material/ListItemIcon'; +import type {ListItemIconProps as MuiListItemIconProps} from '@mui/material/ListItemIcon'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item-icon.scss'; @@ -27,14 +29,34 @@ export type ListItemIconProps = MuiListItemIconProps; const COMPONENT_NAME: string = 'ListItemIcon'; -const ListItemIcon: FC & WithWrapperProps = ({ - className, - ...rest -}: ListItemIconProps): ReactElement => { - const classes: string = clsx('oxygen-list-item-icon', className); +/** + * The List Item Icon component is used to display an icon in a list item. + * + * Demos: + * + * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list) + * - [Lists (MUI)](https://mui.com/material-ui/react-list/) + * + * API: + * + * - [ListItemIcon API](https://mui.com/material-ui/api/list-item-icon/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the ListItemIcon component. + * @param ref - The ref to be forwarded to the MuiListItemIcon component. + * @returns The rendered ListItemIcon component. + */ +const ListItemIcon: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: ListItemIconProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-list-item-icon', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; ListItemIcon.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItemIcon.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ListItemIcon/index.ts b/packages/react/src/components/ListItemIcon/index.ts index f759e992..da191b73 100644 --- a/packages/react/src/components/ListItemIcon/index.ts +++ b/packages/react/src/components/ListItemIcon/index.ts @@ -17,4 +17,4 @@ */ export {default} from './ListItemIcon'; -export type {ListItemIconProps} from './ListItemIcon'; +export * from './ListItemIcon'; diff --git a/packages/react/src/components/ListItemText/ListItemText.tsx b/packages/react/src/components/ListItemText/ListItemText.tsx index f4e3b928..7d1b427f 100644 --- a/packages/react/src/components/ListItemText/ListItemText.tsx +++ b/packages/react/src/components/ListItemText/ListItemText.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiListItemText, {ListItemTextProps as MuiListItemTextProps} from '@mui/material/ListItemText'; +import MuiListItemText from '@mui/material/ListItemText'; +import type {ListItemTextProps as MuiListItemTextProps} from '@mui/material/ListItemText'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item-text.scss'; @@ -27,14 +29,34 @@ export type ListItemTextProps = MuiListItemTextProps; const COMPONENT_NAME: string = 'ListItemText'; -const ListItemText: FC & WithWrapperProps = ({ - className, - ...rest -}: ListItemTextProps): ReactElement => { - const classes: string = clsx('oxygen-list-item-text', className); +/** + * The List Item Text component is used to display text in a list item. + * + * Demos: + * + * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list) + * - [Lists (MUI)](https://mui.com/material-ui/react-list/) + * + * API: + * + * - [ListItemText API](https://mui.com/material-ui/api/list-item-text/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the ListItemText component. + * @param ref - The ref to be forwarded to the MuiListItemText component. + * @returns The rendered ListItemText component. + */ +const ListItemText: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: ListItemTextProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-list-item-text', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; ListItemText.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItemText.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ListItemText/index.ts b/packages/react/src/components/ListItemText/index.ts index 90fdd71c..85e3c763 100644 --- a/packages/react/src/components/ListItemText/index.ts +++ b/packages/react/src/components/ListItemText/index.ts @@ -17,4 +17,4 @@ */ export {default} from './ListItemText'; -export type {ListItemTextProps} from './ListItemText'; +export * from './ListItemText'; diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index e05acdc5..84945b2f 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -16,22 +16,56 @@ * under the License. */ -import MuiMenu, {MenuProps as MuiMenuProps} from '@mui/material/Menu'; +import MuiMenu from '@mui/material/Menu'; +import type {MenuProps as MuiMenuProps} from '@mui/material/Menu'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './menu.scss'; -export type MenuProps = MuiMenuProps; +export type MenuProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'Menu'; -const Menu: FC & WithWrapperProps = ({className, ...rest}: MenuProps): ReactElement => { - const classes: string = clsx('oxygen-menu', className); +/** + * A Menus display a list of choices on temporary surfaces. + * + * Demos: + * + * - [App Bar (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-app-bar) + * - [App Bar (MUI)](https://mui.com/material-ui/react-app-bar/) + * - [Menu (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-menu) + * - [Menu (MUI)](https://mui.com/material-ui/react-menu/) + * + * API: + * + * - [Menu API](https://mui.com/material-ui/api/menu/) + * - inherits [Popover API](https://mui.com/material-ui/api/popover/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ 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: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: MenuProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-menu', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Menu.displayName = composeComponentDisplayName(COMPONENT_NAME); Menu.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Menu/index.ts b/packages/react/src/components/Menu/index.ts index 7683b4e7..f480dd7c 100644 --- a/packages/react/src/components/Menu/index.ts +++ b/packages/react/src/components/Menu/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Menu'; -export type {MenuProps} from './Menu'; +export * from './Menu'; diff --git a/packages/react/src/components/MenuItem/MenuItem.tsx b/packages/react/src/components/MenuItem/MenuItem.tsx index 32cd214d..bea5bde6 100644 --- a/packages/react/src/components/MenuItem/MenuItem.tsx +++ b/packages/react/src/components/MenuItem/MenuItem.tsx @@ -16,22 +16,61 @@ * under the License. */ -import MuiMenuItem, {MenuItemProps as MuiMenuItemProps} from '@mui/material/MenuItem'; +import MuiMenuItem from '@mui/material/MenuItem'; +import type {MenuItemTypeMap, MenuItemProps as MuiMenuItemProps} from '@mui/material/MenuItem'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './menu-item.scss'; -export type MenuItemProps = MuiMenuItemProps; +export type MenuItemProps< + C extends ElementType = ElementType, + D extends ElementType = MenuItemTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'MenuItem'; -const MenuItem: FC & WithWrapperProps = ({className, ...rest}: MenuItemProps): ReactElement => { - const classes: string = clsx('oxygen-menu-item', className); +/** + * The Menu Item component is used to display a single item inside a menu. + * + * Demos: + * + * - [Menu (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-menu) + * - [Menu (MUI)](https://mui.com/material-ui/react-menu/) + * + * API: + * + * - [MenuItem API](https://mui.com/material-ui/api/menu-item/) + * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) + * + * @remarks + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the MenuItem component. + * @param ref - The ref to be forwarded to the MuiMenuItem component. + * @returns The rendered MenuItem component. + */ +const MenuItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: MenuItemProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-menu-item', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; MenuItem.displayName = composeComponentDisplayName(COMPONENT_NAME); MenuItem.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/MenuItem/index.tsx b/packages/react/src/components/MenuItem/index.tsx index 611f25f1..21637447 100644 --- a/packages/react/src/components/MenuItem/index.tsx +++ b/packages/react/src/components/MenuItem/index.tsx @@ -17,4 +17,6 @@ */ export {default} from './MenuItem'; -export type {MenuItemProps} from './MenuItem'; +export * from './MenuItem'; + +export {MenuItemTypeMap} from '@mui/material/MenuItem'; diff --git a/packages/react/src/components/Navbar/Navbar.tsx b/packages/react/src/components/Navbar/Navbar.tsx index 6da5023a..ac94b7ed 100644 --- a/packages/react/src/components/Navbar/Navbar.tsx +++ b/packages/react/src/components/Navbar/Navbar.tsx @@ -18,11 +18,20 @@ import {BarsIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; -import {FC, ReactElement, MouseEvent, Fragment, ReactNode} from 'react'; +import {forwardRef, Fragment} from 'react'; +import type { + ReactElement, + MouseEvent, + ReactNode, + ElementType, + ForwardRefExoticComponent, + MutableRefObject, +} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; import CollapsibleNavbarItem from '../CollapsibleNavbarItem'; +import type {CollapsibleNavbarItemProps} from '../CollapsibleNavbarItem'; import Divider from '../Divider'; import Drawer, {DrawerProps} from '../Drawer'; import IconButton from '../IconButton'; @@ -32,7 +41,7 @@ import type {NavbarItemProps} from '../NavbarItem'; import Typography from '../Typography'; import './navbar.scss'; -export interface NavbarProps extends DrawerProps { +export type NavbarProps = DrawerProps & { /** * Is the Navbar collapsible. If `true`, a hamburger will be shown. */ @@ -54,7 +63,7 @@ export interface NavbarProps extends DrawerProps { * @default */ toggleIcon?: ReactNode; -} +}; export type NavbarItems = { /** @@ -73,130 +82,157 @@ export type NavbarItems = { const COMPONENT_NAME: string = 'Navbar'; -const Navbar: FC & WithWrapperProps = ({ - className, - fill, - onClose, - items, - collapsible = true, - open = true, - onOpen, - toggleIcon = , - ...rest -}: NavbarProps): ReactElement => { - const classes: string = clsx( - 'oxygen-navbar', +/** + * The Navbar component is used to provide a navigation bar for the application. + * + * Demos: + * + * - [Navvar (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-navbar) + * + * API: + * + * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Drawer](https://mui.com/material-ui/api/drawer/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Navbar component. + * @param ref - The ref to be forwarded to the Drawer component. + * @returns The rendered Navbar component. + */ +const Navbar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( { - collapsible, - [`${fill}`]: fill, + className, fill, - open, - }, - className, - ); + onClose, + items, + collapsible = true, + open = true, + onOpen, + toggleIcon = , + ...rest + }: NavbarProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx( + 'oxygen-navbar', + { + collapsible, + [`${fill}`]: fill, + fill, + open, + }, + className, + ); - const handleCollapsibleHamburgerClick = (e: MouseEvent): void => { - if (open && onClose && typeof onClose === 'function') { - onClose(e, null); - return; - } + const handleCollapsibleHamburgerClick = (e: MouseEvent): void => { + if (open && onClose && typeof onClose === 'function') { + onClose(e, null); + return; + } - if (onOpen && typeof onOpen === 'function') { - onOpen(); - } - }; + if (onOpen && typeof onOpen === 'function') { + onOpen(); + } + }; - const renderDivider = (itemSetIndex: number, heading: string): ReactElement => { - if (itemSetIndex !== 0 && !heading) { - return ; - } - if (heading) { - return ( - - {heading} - - ); - } - return null; - }; + const renderDivider = (itemSetIndex: number, heading: string): ReactElement => { + if (itemSetIndex !== 0 && !heading) { + return ; + } + if (heading) { + return ( + + {heading} + + ); + } + return null; + }; - return ( - - {collapsible && ( - <> -
    - - {toggleIcon} - -
    - - - )} - - {items?.map((navbarItems: NavbarItems, itemsIndex: number) => { - const navBarListClass: string = clsx('oxygen-navbar-list', {'no-heading': !navbarItems.label}); + return ( + + {collapsible && ( + <> +
    + + {toggleIcon} + +
    + + + )} + + {items?.map((navbarItems: NavbarItems, itemsIndex: number) => { + const navBarListClass: string = clsx('oxygen-navbar-list', {'no-heading': !navbarItems.label}); - return ( - -
    {renderDivider(itemsIndex, navbarItems.label)}
    - - {navbarItems?.items?.map( - ({ - expanded, - icon, - id, - selected, - items: navbarSubItems, - label, - onClick, - tag, - tagClassName, - ...otherListItemProps - }: NavbarItemProps) => - navbarSubItems ? ( - - ) : ( - - ), - )} - -     - ); - })} -     -     - ); -}; + return ( + +
    {renderDivider(itemsIndex, navbarItems.label)}
    + + {navbarItems?.items?.map( + ({ + expanded, + icon, + id, + selected, + items: navbarSubItems, + label, + onClick, + tag, + tagClassName, + ...otherListItemProps + }: CollapsibleNavbarItemProps) => + navbarSubItems ? ( + + ) : ( + + ), + )} + +     + ); + })} +     +     + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; Navbar.displayName = composeComponentDisplayName(COMPONENT_NAME); Navbar.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Navbar/index.ts b/packages/react/src/components/Navbar/index.ts index 60745cbd..045a5cc0 100644 --- a/packages/react/src/components/Navbar/index.ts +++ b/packages/react/src/components/Navbar/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Navbar'; -export type {NavbarItems} from './Navbar'; +export * from './Navbar'; diff --git a/packages/react/src/components/NavbarItem/NavbarItem.tsx b/packages/react/src/components/NavbarItem/NavbarItem.tsx index fa847cba..670583e5 100644 --- a/packages/react/src/components/NavbarItem/NavbarItem.tsx +++ b/packages/react/src/components/NavbarItem/NavbarItem.tsx @@ -17,53 +17,76 @@ */ import clsx from 'clsx'; -import {ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode, forwardRef} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; import Chip from '../Chip'; -import type {ListItemProps} from '../ListItem'; +import type {ListItemButtonProps} from '../ListItemButton'; import ListItemButton from '../ListItemButton'; import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; -import type {NavbarProps} from '../Navbar/Navbar'; +import type {NavbarProps} from '../Navbar'; import Tooltip from '../Tooltip'; import './navbar-item.scss'; -export interface NavbarItemProps extends ListItemProps, Pick { - /** - * Icon for the Navbar item. - * @example - */ - icon?: ReactNode; - /** - * Unique id for the item. - */ - id?: string; - /** - * Label to display on the UI. - * @example Overview - */ - label: ReactNode; - /** - * Tag to display on the UI. - * @example Beta - */ - tag?: string; - /** - * Tag color variant. - */ - tagClassName?: 'premium' | 'beta' | 'new' | 'experimental'; -} +export type NavbarItemProps = ListItemButtonProps & + Pick & { + /** + * Icon for the Navbar item. + * @example + */ + icon?: ReactNode; + /** + * Unique id for the item. + */ + id?: string; + /** + * Label to display on the UI. + * @example Overview + */ + label: ReactNode; + /** + * Tag to display on the UI. + * @example Beta + */ + tag?: string; + /** + * Tag color variant. + */ + tagClassName?: 'premium' | 'beta' | 'new' | 'experimental'; + }; const COMPONENT_NAME: string = 'NavbarItem'; +/** + * The Navbar Item component is used to represent an item in the Navbar. + * + * Demos: + * + * - [Navbar Item (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-navbar-item) + * + * API: + * + * - inherits [ListItemButton API](https://mui.com/material-ui/api/list-item-button/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [ListItemButton](https://mui.com/material-ui/api/list-item-button/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the NavbarItem component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered NavbarItem component. + */ const NavbarItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( + ( { className, collapsible = true, - component, fill, icon, id, @@ -75,7 +98,7 @@ const NavbarItem: ForwardRefExoticComponent & WithWrapperProps tagClassName, open = true, ...rest - }: NavbarItemProps, + }: NavbarItemProps, ref: MutableRefObject, ): ReactElement => { const classes: string = clsx( @@ -89,7 +112,7 @@ const NavbarItem: ForwardRefExoticComponent & WithWrapperProps ); return ( - + & WithWrapperProps = ({ - className, - ...rest -}: OutlinedInputProps): ReactElement => { - const classes: string = clsx('oxygen-outlined-input', className); +/** + * The Outlined Input component is used to render a text input field with an outlined border. + * + * Demos: + * + * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field) + * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/) + * + * API: + * + * - [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/) + * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the OutlinedInput component. + * @param ref - The ref to be forwarded to the MuiOutlinedInput component. + * @returns The rendered OutlinedInput component. + */ +const OutlinedInput: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: OutlinedInputProps, ref: MutableRefObject): ReactElement => { + const classes: string = clsx('oxygen-outlined-input', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; OutlinedInput.displayName = composeComponentDisplayName(COMPONENT_NAME); OutlinedInput.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/OutlinedInput/index.ts b/packages/react/src/components/OutlinedInput/index.ts index f0beb81a..cd840b65 100644 --- a/packages/react/src/components/OutlinedInput/index.ts +++ b/packages/react/src/components/OutlinedInput/index.ts @@ -17,4 +17,4 @@ */ export {default} from './OutlinedInput'; -export type {OutlinedInputProps} from './OutlinedInput'; +export * from './OutlinedInput'; diff --git a/packages/react/src/components/Paper/Paper.tsx b/packages/react/src/components/Paper/Paper.tsx index 533c60a1..5d429d0f 100644 --- a/packages/react/src/components/Paper/Paper.tsx +++ b/packages/react/src/components/Paper/Paper.tsx @@ -16,20 +16,56 @@ * under the License. */ -import MuiPaper, {PaperProps as MuiPaperProps} from '@mui/material/Paper'; +import MuiPaper from '@mui/material/Paper'; +import type {PaperProps as MuiPaperProps, PaperTypeMap} from '@mui/material/Paper'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type PaperProps = { +export type PaperProps< + C extends ElementType = ElementType, + D extends ElementType = PaperTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Paper'; +/** + * The Paper component is a container for displaying content on an elevated surface. + * + * Demos: + * + * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card) + * - [Card (MUI)](https://mui.com/material-ui/react-card/) + * - [Paper (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-paper) + * - [Paper](https://mui.com/material-ui/react-paper/) + * + * API: + * + * - [Paper API](https://mui.com/material-ui/api/paper/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Paper component. + * @param ref - The ref to be forwarded to the MuiPaper component. + * @returns The rendered Paper component. + */ const Paper: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: PaperProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: PaperProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-paper', className); return ; diff --git a/packages/react/src/components/Paper/index.ts b/packages/react/src/components/Paper/index.ts index cff0130e..2251b4e8 100644 --- a/packages/react/src/components/Paper/index.ts +++ b/packages/react/src/components/Paper/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Paper'; -export type {PaperProps} from './Paper'; +export * from './Paper'; + +export type {PaperPropsVariantOverrides, PaperTypeMap} from '@mui/material/Paper'; diff --git a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx index 91f071f2..3854aaf4 100644 --- a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx +++ b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx @@ -17,28 +17,39 @@ */ import {FlagOutlined} from '@mui/icons-material'; +// TODO: Refactor to use the `Select` from local. import Select, {SelectChangeEvent, SelectProps as MuiSelectProps} from '@mui/material/Select'; import clsx from 'clsx'; -import {ChangeEvent, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement, useState} from 'react'; +import {forwardRef, useState} from 'react'; +import type {ChangeEvent, ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import Flag from 'react-world-flags'; -import {countries, Country} from './constants'; +import {countries, Country} from './constants/countries'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import Box, {BoxProps} from '../Box'; +import Box from '../Box'; +import type {BoxProps} from '../Box'; import InputLabel from '../InputLabel'; +import type {InputLabelProps} from '../InputLabel'; import ListItemIcon from '../ListItemIcon'; import MenuItem from '../MenuItem'; -import './phone-number-input.scss'; -import OutlinedInput, {OutlinedInputProps as MuiOutlinedInputProps} from '../OutlinedInput'; +import OutlinedInput from '../OutlinedInput'; +import type {OutlinedInputProps} from '../OutlinedInput'; import Typography from '../Typography'; +import './phone-number-input.scss'; -export interface PhoneNumberInputProps extends BoxProps { +export type PhoneNumberInputProps = BoxProps & { + /** + * Props sent to the InputLabel component. + * + * Refer props: {@link https://mui.com/material-ui/api/input-label/} + */ + InputLabelProps?: InputLabelProps; /** * Props sent to the OutlinedInput component. * * Refer props: {@link https://mui.com/material-ui/api/outlined-input/} */ - OutlinedInputProps?: Omit; + OutlinedInputProps?: Omit; /** * Props sent to the Select component. * @@ -51,6 +62,10 @@ export interface PhoneNumberInputProps extends BoxProps { * @example '+94' */ dialCodeValue?: string; + /** + * Label for the phone number input. + */ + label: string; /** * Callback function to be called when the dialCode or phoneNumber changes. */ @@ -65,12 +80,34 @@ export interface PhoneNumberInputProps extends BoxProps { * Placeholder text for the phone number input. */ placeholder?: string; -} +}; const COMPONENT_NAME: string = 'PhoneNumberInput'; +/** + * The Phone Number Input component is used to get the phone number input from the user. + * + * Demos: + * + * - [Phone Number Input (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-phone-number-input) + * + * API: + * + * - inherits [Box API](https://mui.com/material-ui/api/box/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the PhoneNumberInput component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered PhoneNumberInput component. + */ const PhoneNumberInput: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( + ( { className, dialCodeValue, @@ -82,7 +119,7 @@ const PhoneNumberInput: ForwardRefExoticComponent & WithW placeholder, SelectProps, ...rest - }: PhoneNumberInputProps, + }: PhoneNumberInputProps, ref: MutableRefObject, ): ReactElement => { const classes: string = clsx('oxygen-phone-number-input', className); diff --git a/packages/react/src/components/PhoneNumberInput/index.ts b/packages/react/src/components/PhoneNumberInput/index.ts index d8320007..f2025c60 100644 --- a/packages/react/src/components/PhoneNumberInput/index.ts +++ b/packages/react/src/components/PhoneNumberInput/index.ts @@ -17,4 +17,4 @@ */ export {default} from './PhoneNumberInput'; -export type {PhoneNumberInputProps} from './PhoneNumberInput'; +export * from './PhoneNumberInput'; diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx index 533008ee..fb490dbb 100644 --- a/packages/react/src/components/Popover/Popover.tsx +++ b/packages/react/src/components/Popover/Popover.tsx @@ -16,18 +16,53 @@ * under the License. */ -import MuiPopover, {PopoverProps as MuiPopoverProps} from '@mui/material/Popover'; +import MuiPopover from '@mui/material/Popover'; +import type {PopoverProps as MuiPopoverProps} from '@mui/material/Popover'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type PopoverProps = MuiPopoverProps; +export type PopoverProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'Popover'; +/** + * A Popover can be used to display some content on top of another. + * + * Demos: + * + * - [Menu (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-menu) + * - [Menu (MUI)](https://mui.com/material-ui/react-menu/) + * - [Popover (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/utils-popover) + * - [Popover (MUI)](https://mui.com/material-ui/react-popover/) + * + * API: + * + * - [Popover API](https://mui.com/material-ui/api/popover/) + * - inherits [Modal API](https://mui.com/material-ui/api/modal/) + * + * @remarks + * - ✔️ Props of the [Modal](https://mui.com/material-ui/api/modal/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ 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: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: PopoverProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: PopoverProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-popover', className); return ; diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/Popover/index.ts index e6be37bf..a9513f52 100644 --- a/packages/react/src/components/Popover/index.ts +++ b/packages/react/src/components/Popover/index.ts @@ -17,4 +17,7 @@ */ export {default} from './Popover'; -export type {PopoverProps} from './Popover'; +export * from './Popover'; + +export type {PopoverActions, PopoverReference, PopoverPosition, PopoverOrigin} from '@mui/material/Popover'; +export {getOffsetTop, getOffsetLeft} from '@mui/material/Popover'; diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx index 32fb979e..ac4034a5 100644 --- a/packages/react/src/components/Radio/Radio.tsx +++ b/packages/react/src/components/Radio/Radio.tsx @@ -16,18 +16,51 @@ * under the License. */ -import MuiRadio, {RadioProps as MuiRadioProps} from '@mui/material/Radio'; +import MuiRadio from '@mui/material/Radio'; +import type {RadioProps as MuiRadioProps} from '@mui/material/Radio'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type RadioProps = MuiRadioProps; +export type RadioProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'Radio'; +/** + * A Radio component is used to allow users to select a single option from a list of options. + * + * Demos: + * + * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group) + * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/) + * + * API: + * + * - [Radio API](https://mui.com/material-ui/api/radio/) + * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) + * + * @remarks + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Radio component. + * @param ref - The ref to be forwarded to the MuiRadio component. + * @returns The rendered Radio component. + */ const Radio: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: RadioProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: RadioProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-radio', className); return ; diff --git a/packages/react/src/components/Radio/index.ts b/packages/react/src/components/Radio/index.ts index c7f7cb81..67a36a3a 100644 --- a/packages/react/src/components/Radio/index.ts +++ b/packages/react/src/components/Radio/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Radio'; -export type {RadioProps} from './Radio'; +export * from './Radio'; + +export type {RadioPropsSizeOverrides, RadioPropsColorOverrides} from '@mui/material/Radio'; diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx index 8c928589..ecd5b1bd 100644 --- a/packages/react/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiRadioGroup, {RadioGroupProps as MuiRadioGroupProps} from '@mui/material/RadioGroup'; +import MuiRadioGroup from '@mui/material/RadioGroup'; +import type {RadioGroupProps as MuiRadioGroupProps} from '@mui/material/RadioGroup'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -26,8 +28,30 @@ export type RadioGroupProps = MuiRadioGroupProps; const COMPONENT_NAME: string = 'RadioGroup'; +/** + * The Radio Group allows the user to select one option from a set. + * + * Demos: + * + * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group) + * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/) + * + * API: + * + * - [RadioGroup API](https://mui.com/material-ui/api/radio-group/) + * - inherits [FormGroup API](https://mui.com/material-ui/api/form-group/) + * + * @remarks + * - ✔️ Props of the [FormGroup](https://mui.com/material-ui/api/form-group/) component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the RadioGroup component. + * @param ref - The ref to be forwarded to the MuiRadioGroup component. + * @returns The rendered RadioGroup component. + */ const RadioGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: RadioGroupProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: RadioGroupProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-radio-group', className); return ; diff --git a/packages/react/src/components/RadioGroup/index.ts b/packages/react/src/components/RadioGroup/index.ts index 4e384eff..e4703030 100644 --- a/packages/react/src/components/RadioGroup/index.ts +++ b/packages/react/src/components/RadioGroup/index.ts @@ -17,4 +17,6 @@ */ export {default} from './RadioGroup'; -export type {RadioGroupProps} from './RadioGroup'; +export * from './RadioGroup'; + +export {RadioGroupClassKey} from '@mui/material/RadioGroup'; diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx index 2f4489ba..0b5eec87 100644 --- a/packages/react/src/components/Select/Select.tsx +++ b/packages/react/src/components/Select/Select.tsx @@ -16,23 +16,48 @@ * under the License. */ -import MuiSelect, {SelectProps as MuiSelectProps} from '@mui/material/Select'; +import MuiSelect from '@mui/material/Select'; +import type {SelectProps as MuiSelectProps} from '@mui/material/Select'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import InputLabel, {InputLabelProps as MuiInputLabelProps} from '../InputLabel'; +import InputLabel from '../InputLabel'; +import type {InputLabelProps as MuiInputLabelProps} from '../InputLabel'; import './select.scss'; -export interface SelectProps extends MuiSelectProps { +export type SelectProps = MuiSelectProps & { /** * Props for the `InputLabel` component. */ InputLabelProps?: MuiInputLabelProps; -} +}; const COMPONENT_NAME: string = 'Select'; +/** + * The Select components are used for collecting user provided information from a list of options. + * + * Demos: + * + * - [Select (Oxygen UI)](https://mui.com/material-ui/react-select/) + * - [Select (MUI)](https://mui.com/material-ui/react-select/) + * + * API: + * + * - [Select API](https://mui.com/material-ui/api/select/) + * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/) + * + * @remarks + * - ✔️ Props of the [OutlinedInput](https://mui.com/material-ui/api/outlined-input/) component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the Select component. + * @param ref - The ref to be forwarded to the MuiSelect component. + * @returns The rendered Select component. + */ const Select: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ( { diff --git a/packages/react/src/components/Select/index.ts b/packages/react/src/components/Select/index.ts index 99547d5c..f9c11f7d 100644 --- a/packages/react/src/components/Select/index.ts +++ b/packages/react/src/components/Select/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Select'; -export type {SelectProps} from './Select'; +export * from './Select'; + +export {SelectChangeEvent} from '@mui/material/Select'; diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx index 933d71af..7f436e37 100644 --- a/packages/react/src/components/SignIn/SignIn.tsx +++ b/packages/react/src/components/SignIn/SignIn.tsx @@ -16,18 +16,26 @@ * under the License. */ -import {Box, FormGroup, FormControlLabel, Typography, Grid, BoxProps, Paper, Checkbox} from '@mui/material'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; -import {MuiWrapperProps} from '../../models/component'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; +import type {BoxProps} from '../Box'; +import Box from '../Box'; import Button from '../Button'; +import Checkbox from '../Checkbox'; import Divider from '../Divider'; +import FormControlLabel from '../FormControlLabel'; +import FormGroup from '../FormGroup'; +import Grid from '../Grid'; import Link from '../Link'; +import Paper from '../Paper'; import TextField from '../TextField'; +import Typography from '../Typography'; import './sign-in.scss'; -export interface SignInProps extends BoxProps { +export type SignInProps = BoxProps & { /** * URL for the login box logo. */ @@ -40,73 +48,94 @@ export interface SignInProps extends BoxProps { * URL for the sign up. */ signUpUrl?: string; -} +}; const COMPONENT_NAME: string = 'SignIn'; -const SignIn: FC & MuiWrapperProps = ({ - className, - signUpUrl, - logoUrl, - signInOptions, - ...rest -}: SignInProps): ReactElement => { - const classes: string = clsx('oxygen-sign-in', className); +/** + * The Sign In component is a custom component that is used to render a sign-in form. + * + * Demos: + * + * - [Sign In (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-sign-in--overview) + * + * API: + * + * - inherits [Box API](https://mui.com/material-ui/api/box/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the SignIn component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered SignIn component. + */ +const SignIn: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, signUpUrl, logoUrl, signInOptions, ...rest}: SignInProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-sign-in', className); - return ( - - {logoUrl && } - - - Sign in - - null} noValidate sx={{mt: 1}}> - - - - } label="Remember me on this computer" /> - - - {signInOptions && ( -
    - OR -
    {signInOptions}
    -
    - )} - {signUpUrl && ( - - Don't have an account? - - - Sign up - + return ( + + {logoUrl && } + + + Sign in + + null} noValidate sx={{mt: 1}}> + + + + } label="Remember me on this computer" /> + + + {signInOptions && ( +
    + OR +
    {signInOptions}
    +
    + )} + {signUpUrl && ( + + Don't have an account? + + + Sign up + + -     - )} -     -     -     - ); -}; + )} +     + +     + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; SignIn.displayName = composeComponentDisplayName(COMPONENT_NAME); SignIn.muiName = 'SignIn'; diff --git a/packages/react/src/components/SignIn/index.ts b/packages/react/src/components/SignIn/index.ts index bf5f76e8..c90a3aef 100644 --- a/packages/react/src/components/SignIn/index.ts +++ b/packages/react/src/components/SignIn/index.ts @@ -17,4 +17,4 @@ */ export {default} from './SignIn'; -export type {SignInProps} from './SignIn'; +export * from './SignIn'; diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/Skeleton/Skeleton.tsx index 258b8958..476e6fca 100644 --- a/packages/react/src/components/Skeleton/Skeleton.tsx +++ b/packages/react/src/components/Skeleton/Skeleton.tsx @@ -16,26 +16,59 @@ * under the License. */ -import MuiSkeleton, {SkeletonProps as MuiSkeletonProps} from '@mui/material/Skeleton'; +import MuiSkeleton from '@mui/material/Skeleton'; +import type {SkeletonProps as MuiSkeletonProps, SkeletonTypeMap} from '@mui/material/Skeleton'; import clsx from 'clsx'; -import {ElementType, FC, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -export type SkeletonProps = { +export type SkeletonProps< + C extends ElementType = ElementType, + D extends ElementType = SkeletonTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; -} & Omit; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Skeleton'; -const Skeleton: FC & WithWrapperProps = ({ - className, - ...rest -}: SkeletonProps): ReactElement => { - const classes: string = clsx('oxygen-skeleton', className); +/** + * The Skeleton displays a placeholder preview of your content before the data gets loaded to reduce load-time frustration. + * + * Demos: + * + * - [Skeleton (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-skeleton) + * - [Skeleton (MUI)](https://mui.com/material-ui/react-skeleton/) + * + * API: + * + * - [Skeleton API](https://mui.com/material-ui/api/skeleton/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Skeleton component. + * @param ref - The ref to be forwarded to the MuiSkeleton component. + * @returns The rendered Skeleton component. + */ +const Skeleton: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: SkeletonProps, + ref: MutableRefObject, + ): ReactElement => { + const classes: string = clsx('oxygen-skeleton', className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Skeleton.displayName = composeComponentDisplayName(COMPONENT_NAME); Skeleton.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Skeleton/index.ts b/packages/react/src/components/Skeleton/index.ts index 40e010aa..d7c1a671 100644 --- a/packages/react/src/components/Skeleton/index.ts +++ b/packages/react/src/components/Skeleton/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Skeleton'; -export type {SkeletonProps} from './Skeleton'; +export * from './Skeleton'; + +export type {SkeletonPropsVariantOverrides, SkeletonTypeMap} from '@mui/material/Skeleton'; diff --git a/packages/react/src/components/Snackbar/Snackbar.tsx b/packages/react/src/components/Snackbar/Snackbar.tsx index df895ed4..f53af5df 100644 --- a/packages/react/src/components/Snackbar/Snackbar.tsx +++ b/packages/react/src/components/Snackbar/Snackbar.tsx @@ -16,9 +16,11 @@ * under the License. */ -import MuiSnackbar, {SnackbarProps as MuiSnackbarProps} from '@mui/material/Snackbar'; +import MuiSnackbar from '@mui/material/Snackbar'; +import type {SnackbarProps as MuiSnackbarProps} from '@mui/material/Snackbar'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './snackbar.scss'; @@ -27,6 +29,27 @@ export type SnackbarProps = MuiSnackbarProps; const COMPONENT_NAME: string = 'Snackbar'; +/** + * The Snackbar (also known as toasts) is used for brief notifications of processes that have been or will be performed. + * + * Demos: + * + * - [Snackbar (Oxygen UI)]](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-snackbar--overview) + * - [Snackbar (MUI)](https://mui.com/material-ui/react-snackbar/) + * + * API: + * + * - [Snackbar API](https://mui.com/material-ui/api/snackbar/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the Snackbar component. + * @param ref - The ref to be forwarded to the MuiSnackbar component. + * @returns The rendered Snackbar component. + */ const Snackbar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ({className, ...rest}: SnackbarProps, ref: MutableRefObject): ReactElement => { const classes: string = clsx('oxygen-snackbar', className); diff --git a/packages/react/src/components/Snackbar/index.ts b/packages/react/src/components/Snackbar/index.ts index 76a168a1..1ac3f36a 100644 --- a/packages/react/src/components/Snackbar/index.ts +++ b/packages/react/src/components/Snackbar/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Snackbar'; -export type {SnackbarProps} from './Snackbar'; +export * from './Snackbar'; + +export type {SnackbarCloseReason, SnackbarOrigin} from '@mui/material/Snackbar'; diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index fc3ced33..88c93f4b 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -17,13 +17,15 @@ */ import clsx from 'clsx'; -import {FC, HTMLAttributes, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react'; +import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; +import type {BoxProps} from '../Box'; import './stepper.scss'; -export interface StepperProps extends HTMLAttributes { +export type StepperProps = BoxProps & { /** * Animate the slide transition. */ @@ -36,75 +38,97 @@ export interface StepperProps extends HTMLAttributes { * Steps to be rendered. */ steps: ReactElement[]; -} +}; const COMPONENT_NAME: string = 'Stepper'; -const Stepper: FC & WithWrapperProps = ({ - animateOnSlide, - className, - currentStep = 0, - steps, -}: StepperProps): ReactElement => { - const [slideLeftPosition, setSlideLeftPosition] = useState(0); - const [slideContainerWidth, setSlideContainerWidth] = useState(0); - - const slideContainerRef: MutableRefObject = useRef(null); - - const classes: string = clsx('oxygen-stepper', className); +/** + * The Stepper can be used to compose wizards and carousels. + * + * Demos: + * + * - [Stepper (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-stepper--overview) + * + * API: + * + * - inherits [Box API](https://mui.com/material-ui/api/box/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Stepper component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered Stepper component. + */ +const Stepper: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {animateOnSlide, className, currentStep = 0, steps}: StepperProps, + ref: MutableRefObject, + ): ReactElement => { + const [slideLeftPosition, setSlideLeftPosition] = useState(0); + const [slideContainerWidth, setSlideContainerWidth] = useState(0); + + const slideContainerRef: MutableRefObject = useRef(null); + + const classes: string = clsx('oxygen-stepper', className); + + const slideContainer: (position: number) => void = useCallback( + (position: number): void => { + if (!animateOnSlide) { + return; + } + + const slideBy: number = position; + setSlideLeftPosition(slideBy * -1 * currentStep); + }, + [currentStep, animateOnSlide], + ); - const slideContainer: (position: number) => void = useCallback( - (position: number): void => { - if (!animateOnSlide) { - return; + useEffect(() => { + if (!slideContainerRef?.current || !animateOnSlide) { + return () => {}; } - const slideBy: number = position; - setSlideLeftPosition(slideBy * -1 * currentStep); - }, - [currentStep, animateOnSlide], - ); - - useEffect(() => { - if (!slideContainerRef?.current || !animateOnSlide) { - return () => {}; - } - - setSlideContainerWidth(slideContainerRef.current.offsetWidth); - - const handleResize = (): void => { - const width: number = slideContainerRef.current.offsetWidth; - setSlideContainerWidth(width); - slideContainer(width); - }; - - window.addEventListener('resize', handleResize); - - return (): void => { - window.removeEventListener('resize', handleResize); - }; - }, [animateOnSlide, slideContainer]); - - useEffect(() => { - slideContainer(slideContainerWidth); - }, [slideContainerWidth, slideContainer]); - - if (animateOnSlide) { - return ( - - - {steps.map((step: ReactElement) => ( - - {step} - - ))} + setSlideContainerWidth(slideContainerRef.current.offsetWidth); + + const handleResize = (): void => { + const width: number = slideContainerRef.current.offsetWidth; + setSlideContainerWidth(width); + slideContainer(width); + }; + + window.addEventListener('resize', handleResize); + + return (): void => { + window.removeEventListener('resize', handleResize); + }; + }, [animateOnSlide, slideContainer]); + + useEffect(() => { + slideContainer(slideContainerWidth); + }, [slideContainerWidth, slideContainer]); + + if (animateOnSlide) { + return ( + + + {steps.map((step: ReactElement) => ( + + {step} + + ))} + - - ); - } + ); + } - return steps[currentStep]; -}; + return steps[currentStep]; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Stepper.displayName = composeComponentDisplayName(COMPONENT_NAME); Stepper.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Stepper/index.ts b/packages/react/src/components/Stepper/index.ts index 31cef048..c0ca389c 100644 --- a/packages/react/src/components/Stepper/index.ts +++ b/packages/react/src/components/Stepper/index.ts @@ -17,4 +17,4 @@ */ export {default} from './Stepper'; -export type {StepperProps} from './Stepper'; +export * from './Stepper'; diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx index d0ca1ec6..6a0bb4c2 100644 --- a/packages/react/src/components/Switch/Switch.tsx +++ b/packages/react/src/components/Switch/Switch.tsx @@ -16,25 +16,57 @@ * under the License. */ -import MuiSwitch, {SwitchProps as MuiSwitchProps} from '@mui/material/Switch'; +import MuiSwitch from '@mui/material/Switch'; +import type {SwitchProps as MuiSwitchProps} from '@mui/material/Switch'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './switch.scss'; -export type SwitchProps = MuiSwitchProps; +export type SwitchProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; const COMPONENT_NAME: string = 'Switch'; /** - * @remarks `any` is used as the generic type for the props because the generic type is not used in the component. + * The Switch toggles the state of a single setting on or off. + * + * Demos: + * + * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch) + * - [Switch (MUI)](https://mui.com/material-ui/react-switch/) + * - [Transfer List (Oxygen UI)](TODO: Add a link after implementing: Tracker: https://github.com/wso2/oxygen-ui/issues/2) + * - [Transfer List (MUI)](https://mui.com/material-ui/react-transfer-list/) + * + * API: + * + * - [Switch API](https://mui.com/material-ui/api/switch/) + * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/) + * + * @remarks + * - ✔️ Props of the [IconButton](https://mui.com/material-ui/api/icon-button/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Switch component. + * @param ref - The ref to be forwarded to the MuiSwitch component. + * @returns The rendered Switch component. */ const Switch: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: SwitchProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: SwitchProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-switch', className); - return ; + return ; }, ) as ForwardRefExoticComponent & WithWrapperProps; diff --git a/packages/react/src/components/Switch/index.ts b/packages/react/src/components/Switch/index.ts index 47deb744..9c151c75 100644 --- a/packages/react/src/components/Switch/index.ts +++ b/packages/react/src/components/Switch/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Switch'; -export type {SwitchProps} from './Switch'; +export * from './Switch'; + +export type {SwitchPropsSizeOverrides, SwitchPropsColorOverrides} from '@mui/material/Switch'; diff --git a/packages/react/src/components/Tab/Tab.tsx b/packages/react/src/components/Tab/Tab.tsx index a63d439f..61770178 100644 --- a/packages/react/src/components/Tab/Tab.tsx +++ b/packages/react/src/components/Tab/Tab.tsx @@ -16,19 +16,56 @@ * under the License. */ -import MuiTab, {TabProps as MuiTabProps} from '@mui/material/Tab'; +import MuiTab from '@mui/material/Tab'; +import type {TabProps as MuiTabProps, TabTypeMap} from '@mui/material/Tab'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './tab.scss'; -export type TabProps = MuiTabProps; +export type TabProps< + C extends ElementType = ElementType, + D extends ElementType = TabTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Tab'; +/** + * The Tab component is used to create a tab in a tab list. + * + * Demos: + * + * - [Tabs (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-tab) + * - [Tabs (MUI)](https://mui.com/material-ui/react-tabs/) + * + * API: + * + * - [Tab API](https://mui.com/material-ui/api/tab/) + * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) + * + * @remarks + * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the Tab component. + * @param ref - The ref to be forwarded to the MuiTab component. + * @returns The rendered Tab component. + */ const Tab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: TabProps, ref: MutableRefObject): ReactElement => { + ( + {className, ...rest}: TabProps, + ref: MutableRefObject, + ): ReactElement => { const classes: string = clsx('oxygen-tab', className); return ; diff --git a/packages/react/src/components/Tab/index.ts b/packages/react/src/components/Tab/index.ts index b42963d6..31602781 100644 --- a/packages/react/src/components/Tab/index.ts +++ b/packages/react/src/components/Tab/index.ts @@ -17,4 +17,6 @@ */ export {default} from './Tab'; -export type {TabProps} from './Tab'; +export * from './Tab'; + +export {TabTypeMap} from '@mui/material/Tab'; diff --git a/packages/react/src/components/TabPanel/TabPanel.tsx b/packages/react/src/components/TabPanel/TabPanel.tsx index ab168917..84acb90c 100644 --- a/packages/react/src/components/TabPanel/TabPanel.tsx +++ b/packages/react/src/components/TabPanel/TabPanel.tsx @@ -16,15 +16,16 @@ * under the License. */ -import {BoxProps as MuiBoxProps} from '@mui/material'; import clsx from 'clsx'; -import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; +import type {BoxProps} from '../Box'; import Box from '../Box'; import './tab-panel.scss'; -export interface TabPanelProps extends MuiBoxProps { +export type TabPanelProps = BoxProps & { /* * The index of the corresponding `TabPanel`. */ @@ -33,19 +34,41 @@ export interface TabPanelProps extends MuiBoxProps { * The value of the selected `TabPanel`. */ value: number; -} +}; const COMPONENT_NAME: string = 'TabPanel'; +/** + * TabPanel component can be used with Tabs component to implement the content of the tab views. + * + * Demos: + * + * - [TabPanel (Oxygen UI)] (https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-tab-panel--overview) + * + * API: + * + * - inherits [Card API](https://mui.com/material-ui/api/card/) + * + * @remarks + * - ✨ This is a custom component that is not available in the Material-UI library. + * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available. + * - ✅ `component` prop is supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @template C - The type of the component. + * @param props - The props for the TabPanel component. + * @param ref - The ref to be forwarded to the Box component. + * @returns The rendered TabPanel component. + */ const TabPanel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, children, value, index, ...rest}: TabPanelProps, + ( + {className, children, value, index, ...rest}: TabPanelProps, ref: MutableRefObject, ): ReactElement => { const classes: string = clsx('oxygen-tab-panel', className); return ( - ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; AppShell.displayName = composeComponentDisplayName(COMPONENT_NAME); AppShell.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx index e6fd4bd4..95491bdb 100644 --- a/packages/react/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx @@ -20,7 +20,7 @@ import MuiAutocomplete from '@mui/material/Autocomplete'; import type {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Autocomplete'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import type {ChipTypeMap} from '../Chip'; @@ -59,7 +59,7 @@ const COMPONENT_NAME: string = 'Autocomplete'; * @returns The rendered Accordion component. */ const Autocomplete: ForwardRefExoticComponent> & WithWrapperProps = forwardRef( - ({className, ...rest}: AutocompleteProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: AutocompleteProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-autocomplete', className); return ; diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx index 389f35e9..97a1f7bf 100644 --- a/packages/react/src/components/Avatar/Avatar.tsx +++ b/packages/react/src/components/Avatar/Avatar.tsx @@ -18,9 +18,10 @@ import MuiAvatar from '@mui/material/Avatar'; import type {AvatarProps as MuiAvatarProps, AvatarTypeMap} from '@mui/material/Avatar'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef, useMemo} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import usePastelColorGenerator from '../../hooks/use-pastel-color-generator'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -69,10 +70,10 @@ const COMPONENT_NAME: string = 'Avatar'; * @param ref - The ref to be forwarded to the MuiAvatar component. * @returns The rendered Avatar component. */ -const Avatar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Avatar: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, children, randomBackgroundColor, backgroundColorRandomizer, ...rest}: AvatarProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const colorRandomizer: string = useMemo(() => { if (backgroundColorRandomizer) { @@ -96,7 +97,7 @@ const Avatar: ForwardRefExoticComponent & WithWrapperProps = forwar ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Avatar.displayName = composeComponentDisplayName(COMPONENT_NAME); Avatar.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Backdrop/Backdrop.tsx b/packages/react/src/components/Backdrop/Backdrop.tsx index bcedc736..de65c5c2 100644 --- a/packages/react/src/components/Backdrop/Backdrop.tsx +++ b/packages/react/src/components/Backdrop/Backdrop.tsx @@ -18,9 +18,10 @@ import MuiBackdrop from '@mui/material/Backdrop'; import type {BackdropProps as MuiBackdropProps, BackdropTypeMap} from '@mui/material/Backdrop'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './backdrop.scss'; @@ -61,16 +62,16 @@ const COMPONENT_NAME: string = 'Backdrop'; * @param ref - The ref to be forwarded to the MuiBackdrop component. * @returns The rendered Backdrop component. */ -const Backdrop: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Backdrop: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: BackdropProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-backdrop', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Backdrop.displayName = composeComponentDisplayName(COMPONENT_NAME); Backdrop.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx index 8a976ed4..6ea9f976 100644 --- a/packages/react/src/components/Badge/Badge.tsx +++ b/packages/react/src/components/Badge/Badge.tsx @@ -18,9 +18,10 @@ import MuiBadge from '@mui/material/Badge'; import type {BadgeProps as MuiBadgeProps, BadgeTypeMap} from '@mui/material/Badge'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './badge.scss'; @@ -62,16 +63,17 @@ const COMPONENT_NAME: string = 'Badge'; * @param ref - The ref to be forwarded to the MuiBadge component. * @returns The rendered Badge component. */ -const Badge: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, ...rest}: BadgeProps, - ref: MutableRefObject, - ): ReactElement => { - const classes: string = clsx('oxygen-badge', className); +const Badge: OverridableComponent> & WithWrapperProps = + forwardRef( + ( + {className, ...rest}: BadgeProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-badge', className); - return ; - }, -) as ForwardRefExoticComponent & WithWrapperProps; + return ; + }, + ) as OverridableComponent> & WithWrapperProps; Badge.displayName = composeComponentDisplayName(COMPONENT_NAME); Badge.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Badge/index.ts b/packages/react/src/components/Badge/index.ts index f0f7774d..d251c2e4 100644 --- a/packages/react/src/components/Badge/index.ts +++ b/packages/react/src/components/Badge/index.ts @@ -19,5 +19,4 @@ export {default} from './Badge'; export * from './Badge'; -export {BadgeRoot, BadgeMark} from '@mui/material/Badge'; export type {BadgePropsVariantOverrides, BadgePropsColorOverrides, BadgeOrigin} from '@mui/material/Badge'; diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index 159bbec2..7c7f58c7 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -18,10 +18,11 @@ import MuiBox from '@mui/material/Box'; import type {BoxProps as MuiBoxProps} from '@mui/material/Box'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import {BoxTypeMap} from '@mui/system'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, ReactElement, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -60,16 +61,13 @@ const COMPONENT_NAME: string = 'Box'; * @param ref - The ref to be forwarded to the MuiBadge component. * @returns The rendered Badge component. */ -const Box: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, ...rest}: BoxProps, - ref: MutableRefObject, - ): ReactElement => { +const Box: OverridableComponent> & WithWrapperProps = forwardRef( + ({className, ...rest}: BoxProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-box', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Box.displayName = composeComponentDisplayName(COMPONENT_NAME); Box.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx index dd93a278..d69d0d31 100644 --- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -18,9 +18,10 @@ import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; import type {BreadcrumbsProps as MuiBreadcrumbsProps, BreadcrumbsTypeMap} from '@mui/material/Breadcrumbs'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './breadcrumbs.scss'; @@ -61,10 +62,10 @@ const COMPONENT_NAME: string = 'Breadcrumbs'; * @param ref - The ref to be forwarded to the MuiBreadcrumbs component. * @returns The rendered Breadcrumbs component. */ -const Breadcrumbs: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Breadcrumbs: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, children, ...rest}: BreadcrumbsProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-breadcrumbs', className); @@ -74,7 +75,7 @@ const Breadcrumbs: ForwardRefExoticComponent & WithWrapperProp ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Breadcrumbs.displayName = composeComponentDisplayName(COMPONENT_NAME); Breadcrumbs.muiName = 'Breadcrumbs'; diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index 9fb06d76..61fe36fd 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -18,9 +18,11 @@ import MuiButton from '@mui/lab/LoadingButton'; import type {LoadingButtonTypeMap, LoadingButtonProps as MuiButtonProps} from '@mui/lab/LoadingButton'; +import {ButtonTypeMap} from '@mui/material'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, ReactElement, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './button.scss'; @@ -61,16 +63,16 @@ const COMPONENT_NAME: string = 'Button'; * @param ref - The ref to be forwarded to the MuiButton component. * @returns The rendered Button component. */ -const Button: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Button: OverridableComponent> & WithWrapperProps = forwardRef( ( - {className, children, ...rest}: ButtonProps, - ref: MutableRefObject, + {className, ...rest}: ButtonProps, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-button', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Button.displayName = composeComponentDisplayName(COMPONENT_NAME); Button.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx index 96f255f8..2952d558 100644 --- a/packages/react/src/components/CardActions/CardActions.tsx +++ b/packages/react/src/components/CardActions/CardActions.tsx @@ -20,7 +20,7 @@ import MuiCardActions from '@mui/material/CardActions'; import type {CardActionsProps as MuiCardActionsProps} from '@mui/material/CardActions'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './card-actions.scss'; @@ -52,7 +52,7 @@ const COMPONENT_NAME: string = 'CardActions'; * @returns The rendered CardActions component. */ const CardActions: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: CardActionsProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: CardActionsProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-card-actions', className); return ; diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx index cffbffda..5aa1f9bd 100644 --- a/packages/react/src/components/CardContent/CardContent.tsx +++ b/packages/react/src/components/CardContent/CardContent.tsx @@ -18,16 +18,17 @@ import MuiCardContent from '@mui/material/CardContent'; import type {CardContentProps as MuiCardContentProps, CardContentTypeMap} from '@mui/material/CardContent'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './card-content.scss'; export type CardContentProps< C extends ElementType = ElementType, - D extends React.ElementType = CardContentTypeMap['defaultComponent'], + D extends ElementType = CardContentTypeMap['defaultComponent'], P = {}, > = { /** @@ -60,13 +61,13 @@ const COMPONENT_NAME: string = 'CardContent'; * @param ref - The ref to be forwarded to the MuiCardContent component. * @returns The rendered CardContent component. */ -const CardContent: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: CardContentProps, ref: MutableRefObject): ReactElement => { +const CardContent: OverridableComponent> & WithWrapperProps = forwardRef( + ({className, ...rest}: CardContentProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-card-content', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; CardContent.displayName = composeComponentDisplayName(COMPONENT_NAME); CardContent.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CardHeader/CardHeader.tsx b/packages/react/src/components/CardHeader/CardHeader.tsx index 8d03d830..d9552a29 100644 --- a/packages/react/src/components/CardHeader/CardHeader.tsx +++ b/packages/react/src/components/CardHeader/CardHeader.tsx @@ -18,9 +18,10 @@ import MuiCardHeader from '@mui/material/CardHeader'; import type {CardHeaderProps as MuiCardHeaderProps, CardHeaderTypeMap} from '@mui/material/CardHeader'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './card-header.scss'; @@ -62,16 +63,16 @@ const COMPONENT_NAME: string = 'CardHeader'; * @param ref - The ref to be forwarded to the MuiCardHeader component. * @returns The rendered CardHeader component. */ -const CardHeader: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const CardHeader: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: CardHeaderProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-card-header', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; CardHeader.displayName = composeComponentDisplayName(COMPONENT_NAME); CardHeader.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index b9e6bae6..fa4f995d 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -16,10 +16,11 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import {ChevronLeftIcon, ChevronRightIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; import {forwardRef, useEffect, useMemo, useState} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; +import type {ElementType, Ref, ReactElement, ReactNode} from 'react'; import {useIsMobile} from '../../hooks/use-is-mobile'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -114,7 +115,7 @@ const COMPONENT_NAME: string = 'Carousel'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered Carousel component. */ -const Carousel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Carousel: OverridableComponent> & WithWrapperProps = forwardRef( ( { autoPlay = false, @@ -126,7 +127,7 @@ const Carousel: ForwardRefExoticComponent & WithWrapperProps = fo title, ...rest }: CarouselProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const [currentStep, setCurrentStep] = useState(0); @@ -231,7 +232,7 @@ const Carousel: ForwardRefExoticComponent & WithWrapperProps = fo ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Carousel.displayName = composeComponentDisplayName(COMPONENT_NAME); Carousel.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx index 688c4eff..fa253b38 100644 --- a/packages/react/src/components/Checkbox/Checkbox.tsx +++ b/packages/react/src/components/Checkbox/Checkbox.tsx @@ -16,11 +16,13 @@ * under the License. */ +import type {ButtonBaseTypeMap} from '@mui/material/ButtonBase'; import MuiCheckbox from '@mui/material/Checkbox'; import type {CheckboxProps as MuiCheckboxProps} from '@mui/material/Checkbox'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import type {ReactElement, Ref, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -58,16 +60,16 @@ const COMPONENT_NAME: string = 'Checkbox'; * @param ref - The ref to be forwarded to the MuiCheckbox component. * @returns The rendered Checkbox component. */ -const Checkbox: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Checkbox: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: CheckboxProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-checkbox', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Checkbox.displayName = composeComponentDisplayName(COMPONENT_NAME); Checkbox.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Chip/Chip.tsx b/packages/react/src/components/Chip/Chip.tsx index 289bbd23..bb5cc68e 100644 --- a/packages/react/src/components/Chip/Chip.tsx +++ b/packages/react/src/components/Chip/Chip.tsx @@ -18,9 +18,10 @@ import MuiChip from '@mui/material/Chip'; import type {ChipProps as MuiChipProps, ChipTypeMap} from '@mui/material/Chip'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './chip.scss'; @@ -60,13 +61,13 @@ const COMPONENT_NAME: string = 'Chip'; * @param ref - The ref to be forwarded to the MuiChip component. * @returns The rendered Chip component. */ -const Chip: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: ChipProps, ref: MutableRefObject): ReactElement => { +const Chip: OverridableComponent> & WithWrapperProps = forwardRef( + ({className, ...rest}: ChipProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-chip', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Chip.displayName = composeComponentDisplayName(COMPONENT_NAME); Chip.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CircularProgress/CircularProgress.tsx b/packages/react/src/components/CircularProgress/CircularProgress.tsx index 64f822dc..ab4dd878 100644 --- a/packages/react/src/components/CircularProgress/CircularProgress.tsx +++ b/packages/react/src/components/CircularProgress/CircularProgress.tsx @@ -20,17 +20,12 @@ import MuiCircularProgress from '@mui/material/CircularProgress'; import type {CircularProgressProps as MuiCircularProgressProps} from '@mui/material/CircularProgress'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './circular-progress.scss'; -export type CircularProgressProps = { - /** - * The component used for the root node. Either a string to use a HTML element or a component. - */ - component?: C; -} & Omit; +export type CircularProgressProps = MuiCircularProgressProps; const COMPONENT_NAME: string = 'CircularProgress'; @@ -50,7 +45,7 @@ const COMPONENT_NAME: string = 'CircularProgress'; * * @remarks * - ✔️ Props of the native component are also available. - * - ✅ `component` prop is supported. + * - ❌ `component` prop is not supported. * - ✅ The `ref` is forwarded to the root element. * * @template C - The type of the component. @@ -59,10 +54,7 @@ const COMPONENT_NAME: string = 'CircularProgress'; * @returns The rendered CircularProgress component. */ const CircularProgress: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, ...rest}: CircularProgressProps, - ref: MutableRefObject, - ): ReactElement => { + ({className, ...rest}: CircularProgressProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-circular-progress', className); return ; diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx index 15262258..f56d8ace 100644 --- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx +++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx @@ -18,7 +18,7 @@ import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Avatar from '../Avatar'; @@ -30,10 +30,7 @@ import type {CircularProgressProps} from '../CircularProgress'; import CircularProgress from '../CircularProgress'; import './circular-progress-avatar.scss'; -export type CircularProgressAvatarProps = Omit< - CircularProgressProps, - 'value' -> & { +export type CircularProgressAvatarProps = Omit & { /** * Props sent to the Avatar component. */ @@ -65,7 +62,7 @@ const COMPONENT_NAME: string = 'CircularProgressAvatar'; * @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. + * - ❌ `component` prop is not supported. * - ✅ The `ref` is forwarded to the root element. * * @template C - The type of the component. @@ -74,9 +71,9 @@ const COMPONENT_NAME: string = 'CircularProgressAvatar'; * @returns The rendered CircularProgressAvatar component. */ const CircularProgressAvatar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, progress, badgeOptions, avatarOptions, ...rest}: CircularProgressAvatarProps, - ref: MutableRefObject, + ( + {className, progress, badgeOptions, avatarOptions, ...rest}: CircularProgressAvatarProps, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-circular-progress-avatar', className); diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx index b81600b9..705f8c3c 100644 --- a/packages/react/src/components/Code/Code.tsx +++ b/packages/react/src/components/Code/Code.tsx @@ -16,11 +16,13 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; +import {TypographyTypeMap} from '../Typography'; import Typography, {TypographyProps} from '../Typography/Typography'; import './code.scss'; @@ -61,10 +63,10 @@ const COMPONENT_NAME: string = 'Code'; * @param ref - The ref to be forwarded to the Typography component. * @returns The rendered Code component. */ -const Code: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Code: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, children, filled = true, outlined = false, ...rest}: CodeProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-code', {filled, outlined}, className); @@ -74,7 +76,7 @@ const Code: ForwardRefExoticComponent & WithWrapperProps = forwardRef ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Code.displayName = composeComponentDisplayName(COMPONENT_NAME); Code.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx index 5ccdfe29..d653726e 100644 --- a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx +++ b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx @@ -17,16 +17,18 @@ */ import MuiCollapse from '@mui/material/Collapse'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import {ChevronDownIcon, ChevronUpIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; import {forwardRef, useState} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MouseEvent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, MouseEvent, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; import Chip from '../Chip'; import List from '../List'; import ListItemButton from '../ListItemButton'; +import type {ListItemButtonTypeMap} from '../ListItemButton'; import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; import type {NavbarProps} from '../Navbar'; @@ -70,8 +72,9 @@ const COMPONENT_NAME: string = 'CollapsibleNavbarItem'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered CollapsibleNavbarItem component. */ -const CollapsibleNavbarItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const CollapsibleNavbarItem: OverridableComponent> & + WithWrapperProps = forwardRef( + ( { className, expanded, @@ -86,7 +89,7 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx( 'oxygen-collapsible-navbar-item', @@ -164,7 +167,7 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; CollapsibleNavbarItem.displayName = composeComponentDisplayName(COMPONENT_NAME); CollapsibleNavbarItem.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx b/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx index 3376ad15..fbe456c4 100644 --- a/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx +++ b/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx @@ -17,25 +17,19 @@ */ import IconButton from '@mui/material/IconButton'; -import type {IconButtonProps, IconButtonTypeMap as MuiIconButtonTypeMap} from '@mui/material/IconButton'; +import type {IconButtonProps, IconButtonTypeMap} from '@mui/material/IconButton'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import {useColorScheme} from '@mui/material/styles'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type { - ElementType, - ForwardRefExoticComponent, - MutableRefObject, - PropsWithChildren, - ReactElement, - SVGProps, -} from 'react'; +import type {ElementType, Ref, PropsWithChildren, ReactElement, SVGProps} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './color-mode-toggle.scss'; export type ColorModeToggleProps< C extends ElementType = ElementType, - D extends ElementType = MuiIconButtonTypeMap['defaultComponent'], + D extends ElementType = IconButtonTypeMap['defaultComponent'], P = {}, > = { /** @@ -106,10 +100,10 @@ const CrescentIcon = (props: PropsWithChildren>): ReactE * @param ref - The ref to be forwarded to the IconButton component. * @returns The rendered ColorModeToggle component. */ -const ColorModeToggle: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const ColorModeToggle: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: ColorModeToggleProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const {mode, setMode} = useColorScheme(); @@ -130,7 +124,7 @@ const ColorModeToggle: ForwardRefExoticComponent & WithWra ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; ColorModeToggle.displayName = composeComponentDisplayName(COMPONENT_NAME); ColorModeToggle.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Container/Container.tsx b/packages/react/src/components/Container/Container.tsx index 4654efb6..b68b4cb4 100644 --- a/packages/react/src/components/Container/Container.tsx +++ b/packages/react/src/components/Container/Container.tsx @@ -18,9 +18,10 @@ import MuiContainer from '@mui/material/Container'; import type {ContainerProps as MuiContainerProps, ContainerTypeMap} from '@mui/material/Container'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './container.scss'; @@ -60,16 +61,16 @@ const COMPONENT_NAME: string = 'Container'; * @param ref - The ref to be forwarded to the MuiContainer component. * @returns The rendered Container component. */ -const Container: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Container: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: ContainerProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-container', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Container.displayName = composeComponentDisplayName(COMPONENT_NAME); Container.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/CountryFlag/CountryFlag.tsx b/packages/react/src/components/CountryFlag/CountryFlag.tsx index fcd56a5d..51ffae4f 100644 --- a/packages/react/src/components/CountryFlag/CountryFlag.tsx +++ b/packages/react/src/components/CountryFlag/CountryFlag.tsx @@ -17,7 +17,7 @@ */ import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, HTMLAttributes, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, HTMLAttributes, Ref, ReactElement} from 'react'; import WorldFlag from 'react-world-flags'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -54,7 +54,7 @@ const COMPONENT_NAME: string = 'CountryFlag'; * @returns The rendered CountryFlag component. */ const CountryFlag: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({countryCode, height = '16', ...rest}: CountryFlagProps, ref: MutableRefObject): ReactElement => ( + ({countryCode, height = '16', ...rest}: CountryFlagProps, ref: Ref): ReactElement => ( & WithWrapperProps = forwardRef( - ({className, ...rest}: DataGridProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: DataGridProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-data-grid', className); return ; diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx index c74b6658..3f68f0fb 100644 --- a/packages/react/src/components/Divider/Divider.tsx +++ b/packages/react/src/components/Divider/Divider.tsx @@ -18,9 +18,10 @@ import MuiDivider from '@mui/material/Divider'; import type {DividerProps as MuiDividerProps, DividerTypeMap as MuiDividerTypeMap} from '@mui/material/Divider'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './divider.scss'; @@ -62,16 +63,16 @@ const COMPONENT_NAME: string = 'Divider'; * @param ref - The ref to be forwarded to the MuiDivider component. * @returns The rendered Divider component. */ -const Divider: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Divider: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: DividerProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-divider', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Divider.displayName = composeComponentDisplayName(COMPONENT_NAME); Divider.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx index bdefaf56..7f7011e8 100644 --- a/packages/react/src/components/Drawer/Drawer.tsx +++ b/packages/react/src/components/Drawer/Drawer.tsx @@ -18,9 +18,12 @@ 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, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './drawer.scss'; @@ -57,16 +60,17 @@ const COMPONENT_NAME: string = 'Drawer'; * @param ref - The ref to be forwarded to the MuiDrawer component. * @returns The rendered Drawer component. */ -const Drawer: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, ...rest}: DrawerProps, - ref: MutableRefObject, - ): ReactElement => { - const classes: string = clsx('oxygen-drawer', className); +const Drawer: OverridableComponent> & WithWrapperProps = + forwardRef( + ( + {className, ...rest}: DrawerProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-drawer', className); - return ; - }, -) as ForwardRefExoticComponent & WithWrapperProps; + return ; + }, + ) as OverridableComponent> & WithWrapperProps; Drawer.displayName = composeComponentDisplayName(COMPONENT_NAME); Drawer.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Fab/Fab.tsx b/packages/react/src/components/Fab/Fab.tsx index c2e9c596..10afc1a6 100644 --- a/packages/react/src/components/Fab/Fab.tsx +++ b/packages/react/src/components/Fab/Fab.tsx @@ -17,16 +17,17 @@ */ import MuiFab from '@mui/material/Fab'; -import type {FabProps as MuiFabProps, FabTypeMap as MuiFabTypeMap} from '@mui/material/Fab'; +import type {FabProps as MuiFabProps, FabTypeMap} from '@mui/material/Fab'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import type {ReactElement, Ref, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; export type FabProps< C extends ElementType = ElementType, - D extends ElementType = MuiFabTypeMap['defaultComponent'], + D extends ElementType = FabTypeMap['defaultComponent'], P = {}, > = { /** @@ -60,16 +61,16 @@ const COMPONENT_NAME: string = 'Fab'; * @param ref - The ref to be forwarded to the MuiFab component. * @returns The rendered Fab component. */ -const Fab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Fab: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: FabProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-fab', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Fab.displayName = composeComponentDisplayName(COMPONENT_NAME); Fab.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Footer/Footer.tsx b/packages/react/src/components/Footer/Footer.tsx index cd5ceace..f9f5ba5f 100644 --- a/packages/react/src/components/Footer/Footer.tsx +++ b/packages/react/src/components/Footer/Footer.tsx @@ -16,14 +16,15 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; +import type {ElementType, Ref, ReactElement, ReactNode} from 'react'; import {useIsMobile} from '../../hooks/use-is-mobile'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; -import type {BoxProps} from '../Box'; +import type {BoxProps, BoxTypeMap} from '../Box'; import Container from '../Container'; import type {ContainerProps} from '../Container'; import Link from '../Link'; @@ -66,10 +67,10 @@ const COMPONENT_NAME: string = 'Footer'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered Footer component. */ -const Footer: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Footer: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, copyright, component = 'footer' as C, links, maxWidth, ...rest}: FooterProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const isMobile: boolean = useIsMobile(); @@ -106,7 +107,7 @@ const Footer: ForwardRefExoticComponent & WithWrapperProps = forwar     ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Footer.displayName = composeComponentDisplayName(COMPONENT_NAME); Footer.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/FormControl/FormControl.tsx b/packages/react/src/components/FormControl/FormControl.tsx index a577b494..62c96767 100644 --- a/packages/react/src/components/FormControl/FormControl.tsx +++ b/packages/react/src/components/FormControl/FormControl.tsx @@ -18,9 +18,10 @@ import MuiFormControl from '@mui/material/FormControl'; import type {FormControlProps as MuiFormControlProps, FormControlTypeMap} from '@mui/material/FormControl'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './form-control.scss'; @@ -66,16 +67,16 @@ const COMPONENT_NAME: string = 'FormControl'; * @param ref - The ref to be forwarded to the MuiFormControl component. * @returns The rendered FormControl component. */ -const FormControl: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const FormControl: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: FormControlProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-form-control', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; FormControl.displayName = composeComponentDisplayName(COMPONENT_NAME); FormControl.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx index 71c97739..af2beb88 100644 --- a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx +++ b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx @@ -20,7 +20,7 @@ import MuiFormControlLabel from '@mui/material/FormControlLabel'; import type {FormControlLabelProps as MuiFormControlLabelProps} from '@mui/material/FormControlLabel'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -54,7 +54,7 @@ const COMPONENT_NAME: string = 'FormControlLabel'; * @returns The rendered FormControlLabel component. */ const FormControlLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: FormControlLabelProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: FormControlLabelProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-form-control-label', className); return ; diff --git a/packages/react/src/components/FormGroup/FormGroup.tsx b/packages/react/src/components/FormGroup/FormGroup.tsx index c6f8a11f..09be13b1 100644 --- a/packages/react/src/components/FormGroup/FormGroup.tsx +++ b/packages/react/src/components/FormGroup/FormGroup.tsx @@ -20,7 +20,7 @@ import MuiFormGroup from '@mui/material/FormGroup'; import type {FormGroupProps as MuiFormGroupProps} from '@mui/material/FormGroup'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -51,7 +51,7 @@ const COMPONENT_NAME: string = 'FormGroup'; * @returns The rendered FormGroup component. */ const FormGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: FormGroupProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: FormGroupProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-form-group', className); return ; diff --git a/packages/react/src/components/FormHelperText/FormHelperText.tsx b/packages/react/src/components/FormHelperText/FormHelperText.tsx index 233aff58..3130bff4 100644 --- a/packages/react/src/components/FormHelperText/FormHelperText.tsx +++ b/packages/react/src/components/FormHelperText/FormHelperText.tsx @@ -18,9 +18,10 @@ import MuiFormHelperText from '@mui/material/FormHelperText'; import type {FormHelperTextProps as MuiFormHelperTextProps, FormHelperTextTypeMap} from '@mui/material/FormHelperText'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './form-helper-text.scss'; @@ -60,16 +61,16 @@ const COMPONENT_NAME: string = 'FormHelperText'; * @param ref - The ref to be forwarded to the MuiFab component. * @returns The rendered Fab component. */ -const FormHelperText: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const FormHelperText: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: FormHelperTextProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-form-helper-text', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; FormHelperText.displayName = composeComponentDisplayName(COMPONENT_NAME); FormHelperText.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/FormLabel/FormLabel.tsx b/packages/react/src/components/FormLabel/FormLabel.tsx index 9e5d45e1..41908ca6 100644 --- a/packages/react/src/components/FormLabel/FormLabel.tsx +++ b/packages/react/src/components/FormLabel/FormLabel.tsx @@ -18,9 +18,10 @@ import MuiFormLabel from '@mui/material/FormLabel'; import type {FormLabelTypeMap, FormLabelProps as MuiFormLabelProps} from '@mui/material/FormLabel'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import type {ReactElement, Ref, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -63,16 +64,16 @@ const COMPONENT_NAME: string = 'FormLabel'; * @param ref - The ref to be forwarded to the MuiFab component. * @returns The rendered Fab component. */ -const FormLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const FormLabel: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: FormLabelProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-form-label', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; FormLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); FormLabel.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx index 7beb5959..f61efd19 100644 --- a/packages/react/src/components/Grid/Grid.tsx +++ b/packages/react/src/components/Grid/Grid.tsx @@ -16,11 +16,12 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiGrid from '@mui/material/Unstable_Grid2'; import type {Grid2TypeMap, Grid2Props as MuiGridProps} from '@mui/material/Unstable_Grid2'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './grid.scss'; @@ -62,13 +63,13 @@ const COMPONENT_NAME: string = 'Grid'; * @param ref - The ref to be forwarded to the MuiFormControl component. * @returns The rendered FormControl component. */ -const Grid: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: GridProps, ref: MutableRefObject): ReactElement => { +const Grid: OverridableComponent> & WithWrapperProps = forwardRef( + ({className, ...rest}: GridProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-grid', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Grid.displayName = composeComponentDisplayName(COMPONENT_NAME); Grid.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx index 30c35385..b437f1d4 100644 --- a/packages/react/src/components/Header/Header.tsx +++ b/packages/react/src/components/Header/Header.tsx @@ -16,17 +16,18 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import {useColorScheme} from '@mui/material/styles'; import {Mode} from '@mui/system/cssVars/useCurrentColorScheme'; import {ChevronDownIcon, BarsIcon, ArrowRightToBracketIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; +import type {ElementType, Ref, ReactElement, ReactNode} from 'react'; import {useIsMobile} from '../../hooks/use-is-mobile'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import AppBar from '../AppBar'; -import type {AppBarProps} from '../AppBar'; +import type {AppBarProps, AppBarTypeMap} from '../AppBar'; import Avatar from '../Avatar'; import Box from '../Box'; import type {ButtonProps} from '../Button'; @@ -157,8 +158,8 @@ const COMPONENT_NAME: string = 'Header'; * @param ref - The ref to be forwarded to the AppBar component. * @returns The rendered Header component. */ -const Header: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Header: OverridableComponent> & WithWrapperProps = forwardRef( + ( { brand, className, @@ -172,7 +173,7 @@ const Header: ForwardRefExoticComponent & WithWrapperProps = forwar userDropdownMenu = userDropdownMenuDefaultProps, ...rest }: HeaderProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const userDropdownMenuProps: UserDropdownMenuHeaderProps = {...userDropdownMenuDefaultProps, ...userDropdownMenu}; @@ -275,7 +276,7 @@ const Header: ForwardRefExoticComponent & WithWrapperProps = forwar ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Header.displayName = composeComponentDisplayName(COMPONENT_NAME); Header.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx index 609737fd..bf016dbb 100644 --- a/packages/react/src/components/IconButton/IconButton.tsx +++ b/packages/react/src/components/IconButton/IconButton.tsx @@ -18,9 +18,10 @@ import MuiIconButton from '@mui/material/IconButton'; import type {IconButtonTypeMap, IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './icon-button.scss'; @@ -70,10 +71,10 @@ const COMPONENT_NAME: string = 'IconButton'; * @param ref - The ref to be forwarded to the MuiFormControl component. * @returns The rendered FormControl component. */ -const IconButton: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const IconButton: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, variant = IconButtonVariants.TEXT, ...rest}: IconButtonProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-icon-button', className, { 'oxygen-icon-button-contained': variant === IconButtonVariants.CONTAINED, @@ -81,7 +82,7 @@ const IconButton: ForwardRefExoticComponent & WithWrapperProps return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; IconButton.displayName = composeComponentDisplayName(COMPONENT_NAME); IconButton.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx index 0f5e8de9..42d96d18 100644 --- a/packages/react/src/components/Image/Image.tsx +++ b/packages/react/src/components/Image/Image.tsx @@ -18,7 +18,7 @@ import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ImgHTMLAttributes, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, ImgHTMLAttributes, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -39,7 +39,7 @@ const COMPONENT_NAME: string = 'Image'; * @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. + * - ❌ `component` prop is not supported. * - ✅ The `ref` is forwarded to the root element. * * @param props - The props for the Image component. @@ -47,7 +47,7 @@ const COMPONENT_NAME: string = 'Image'; * @returns The rendered Image component. */ const Image: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, alt, ...rest}: ImageProps, ref: MutableRefObject): ReactElement => { + ({className, alt, ...rest}: ImageProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-image', className); return {alt}; diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx index d2f7a7d9..f5ab92bd 100644 --- a/packages/react/src/components/Input/Input.tsx +++ b/packages/react/src/components/Input/Input.tsx @@ -20,7 +20,7 @@ import MuiInput from '@mui/material/Input'; import type {InputProps as MuiInputProps} from '@mui/material/Input'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './input.scss'; @@ -52,7 +52,7 @@ const COMPONENT_NAME: string = 'Input'; * @returns The rendered Input component. */ const Input: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: InputProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: InputProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-input', className); return ; diff --git a/packages/react/src/components/InputAdornment/InputAdornment.tsx b/packages/react/src/components/InputAdornment/InputAdornment.tsx index 1496f509..1d928d1c 100644 --- a/packages/react/src/components/InputAdornment/InputAdornment.tsx +++ b/packages/react/src/components/InputAdornment/InputAdornment.tsx @@ -18,9 +18,10 @@ import MuiInputAdornment from '@mui/material/InputAdornment'; import type {InputAdornmentTypeMap, InputAdornmentProps as MuiInputAdornmentProps} from '@mui/material/InputAdornment'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -60,16 +61,16 @@ const COMPONENT_NAME: string = 'InputAdornment'; * @param ref - The ref to be forwarded to the MuiInputAdornment component. * @returns The rendered InputAdornment component. */ -const InputAdornment: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const InputAdornment: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, position, ...rest}: InputAdornmentProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-input-adornment', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; InputAdornment.displayName = composeComponentDisplayName(COMPONENT_NAME); InputAdornment.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/InputLabel/InputLabel.tsx b/packages/react/src/components/InputLabel/InputLabel.tsx index ecc8b4c6..a34e9df2 100644 --- a/packages/react/src/components/InputLabel/InputLabel.tsx +++ b/packages/react/src/components/InputLabel/InputLabel.tsx @@ -18,9 +18,10 @@ import MuiInputLabel from '@mui/material/InputLabel'; import type {InputLabelTypeMap, InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './input-label.scss'; @@ -61,16 +62,16 @@ const COMPONENT_NAME: string = 'InputLabel'; * @param ref - The ref to be forwarded to the MuiInputLabel component. * @returns The rendered InputLabel component. */ -const InputLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const InputLabel: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: InputLabelProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-input-label', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; InputLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); InputLabel.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/LinearProgress/LinearProgress.tsx b/packages/react/src/components/LinearProgress/LinearProgress.tsx index a63b548d..8c088048 100644 --- a/packages/react/src/components/LinearProgress/LinearProgress.tsx +++ b/packages/react/src/components/LinearProgress/LinearProgress.tsx @@ -20,7 +20,7 @@ import MuiLinearProgress from '@mui/material/LinearProgress'; import type {LinearProgressProps as MuiLinearProgressProps} from '@mui/material/LinearProgress'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -51,7 +51,7 @@ const COMPONENT_NAME: string = 'LinearProgress'; * @returns The rendered LinearProgress component. */ const LinearProgress: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: LinearProgressProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: LinearProgressProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-linear-progress', className); return ; diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx index 3a1eaa52..a0192461 100644 --- a/packages/react/src/components/Link/Link.tsx +++ b/packages/react/src/components/Link/Link.tsx @@ -18,9 +18,10 @@ import MuiLink from '@mui/material/Link'; import type {LinkTypeMap, LinkProps as MuiLinkProps} from '@mui/material/Link'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './link.scss'; @@ -63,16 +64,16 @@ const COMPONENT_NAME: string = 'Link'; * @param ref - The ref to be forwarded to the MuiLink component. * @returns The rendered Link component. */ -const Link: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Link: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, ...rest}: LinkProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-link', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Link.displayName = composeComponentDisplayName(COMPONENT_NAME); Link.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx index 885d1c10..dcc94fd6 100644 --- a/packages/react/src/components/List/List.tsx +++ b/packages/react/src/components/List/List.tsx @@ -18,9 +18,10 @@ import MuiList from '@mui/material/List'; import type {ListTypeMap, ListProps as MuiListProps} from '@mui/material/List'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list.scss'; @@ -62,16 +63,13 @@ const COMPONENT_NAME: string = 'List'; * @param ref - The ref to be forwarded to the MuiList component. * @returns The rendered List component. */ -const List: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, ...rest}: ListProps, - ref: MutableRefObject, - ): ReactElement => { +const List: OverridableComponent> & WithWrapperProps = forwardRef( + ({className, ...rest}: ListProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-list', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; List.displayName = composeComponentDisplayName(COMPONENT_NAME); List.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx index 7afdf691..9be4d2e5 100644 --- a/packages/react/src/components/ListItem/ListItem.tsx +++ b/packages/react/src/components/ListItem/ListItem.tsx @@ -17,10 +17,11 @@ */ import MuiListItem from '@mui/material/ListItem'; -import type {ListItemProps as MuiListItemProps} from '@mui/material/ListItem'; +import type {ListItemProps as MuiListItemProps, ListItemTypeMap} from '@mui/material/ListItem'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, MutableRefObject, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item.scss'; @@ -58,7 +59,7 @@ const COMPONENT_NAME: string = 'ListItem'; * @param ref - The ref to be forwarded to the MuiListItem component. * @returns The rendered ListItem component. */ -const ListItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const ListItem: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: ListItemProps, ref: MutableRefObject, @@ -67,7 +68,7 @@ const ListItem: ForwardRefExoticComponent & WithWrapperProps = fo return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; ListItem.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItem.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx index c9bd6218..87f8be99 100644 --- a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx +++ b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx @@ -20,7 +20,7 @@ import MuiListItemAvatar from '@mui/material/ListItemAvatar'; import type {ListItemAvatarProps as MuiListItemAvatarProps} from '@mui/material/ListItemAvatar'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item-avatar.scss'; @@ -51,7 +51,7 @@ const COMPONENT_NAME: string = 'ListItemAvatar'; * @returns The rendered ListItemAvatar component. */ const ListItemAvatar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: ListItemAvatarProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: ListItemAvatarProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-list-item-avatar', className); return ; diff --git a/packages/react/src/components/ListItemButton/ListItemButton.tsx b/packages/react/src/components/ListItemButton/ListItemButton.tsx index e88e49a1..18ccd998 100644 --- a/packages/react/src/components/ListItemButton/ListItemButton.tsx +++ b/packages/react/src/components/ListItemButton/ListItemButton.tsx @@ -18,9 +18,10 @@ import MuiListItemButton from '@mui/material/ListItemButton'; import type {ListItemButtonProps as MuiListItemButtonProps, ListItemButtonTypeMap} from '@mui/material/ListItemButton'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item-button.scss'; @@ -61,16 +62,16 @@ const COMPONENT_NAME: string = 'ListItemButton'; * @param ref - The ref to be forwarded to the MuiListItemButton component. * @returns The rendered ListItemButton component. */ -const ListItemButton: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const ListItemButton: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: ListItemButtonProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-list-item-button', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; ListItemButton.displayName = composeComponentDisplayName(COMPONENT_NAME); ListItemButton.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/ListItemButton/index.ts b/packages/react/src/components/ListItemButton/index.ts index 8fdd8a3a..86b65c08 100644 --- a/packages/react/src/components/ListItemButton/index.ts +++ b/packages/react/src/components/ListItemButton/index.ts @@ -18,3 +18,5 @@ export {default} from './ListItemButton'; export type {ListItemButtonProps} from './ListItemButton'; + +export {ListItemButtonTypeMap, ListItemButtonBaseProps} from '@mui/material/ListItemButton'; diff --git a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx index 7638cf78..94a931bd 100644 --- a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx +++ b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx @@ -20,7 +20,7 @@ import MuiListItemIcon from '@mui/material/ListItemIcon'; import type {ListItemIconProps as MuiListItemIconProps} from '@mui/material/ListItemIcon'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item-icon.scss'; @@ -51,7 +51,7 @@ const COMPONENT_NAME: string = 'ListItemIcon'; * @returns The rendered ListItemIcon component. */ const ListItemIcon: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: ListItemIconProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: ListItemIconProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-list-item-icon', className); return ; diff --git a/packages/react/src/components/ListItemText/ListItemText.tsx b/packages/react/src/components/ListItemText/ListItemText.tsx index 7d1b427f..1ca95b76 100644 --- a/packages/react/src/components/ListItemText/ListItemText.tsx +++ b/packages/react/src/components/ListItemText/ListItemText.tsx @@ -20,7 +20,7 @@ import MuiListItemText from '@mui/material/ListItemText'; import type {ListItemTextProps as MuiListItemTextProps} from '@mui/material/ListItemText'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './list-item-text.scss'; @@ -51,7 +51,7 @@ const COMPONENT_NAME: string = 'ListItemText'; * @returns The rendered ListItemText component. */ const ListItemText: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: ListItemTextProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: ListItemTextProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-list-item-text', className); return ; diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index 84945b2f..c85ffa26 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -18,9 +18,12 @@ 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, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './menu.scss'; @@ -59,13 +62,17 @@ const COMPONENT_NAME: string = 'Menu'; * @param ref - The ref to be forwarded to the MuiList component. * @returns The rendered List component. */ -const Menu: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: MenuProps, ref: MutableRefObject): ReactElement => { - const classes: string = clsx('oxygen-menu', className); +const Menu: OverridableComponent> & WithWrapperProps = + forwardRef( + ( + {className, ...rest}: MenuProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-menu', className); - return ; - }, -) as ForwardRefExoticComponent & WithWrapperProps; + return ; + }, + ) as OverridableComponent> & WithWrapperProps; Menu.displayName = composeComponentDisplayName(COMPONENT_NAME); Menu.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/MenuItem/MenuItem.tsx b/packages/react/src/components/MenuItem/MenuItem.tsx index bea5bde6..4c7ed9ae 100644 --- a/packages/react/src/components/MenuItem/MenuItem.tsx +++ b/packages/react/src/components/MenuItem/MenuItem.tsx @@ -18,9 +18,10 @@ import MuiMenuItem from '@mui/material/MenuItem'; import type {MenuItemTypeMap, MenuItemProps as MuiMenuItemProps} from '@mui/material/MenuItem'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './menu-item.scss'; @@ -61,16 +62,16 @@ const COMPONENT_NAME: string = 'MenuItem'; * @param ref - The ref to be forwarded to the MuiMenuItem component. * @returns The rendered MenuItem component. */ -const MenuItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const MenuItem: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: MenuItemProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-menu-item', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; MenuItem.displayName = composeComponentDisplayName(COMPONENT_NAME); MenuItem.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/NavbarItem/NavbarItem.tsx b/packages/react/src/components/NavbarItem/NavbarItem.tsx index 670583e5..7db4e21e 100644 --- a/packages/react/src/components/NavbarItem/NavbarItem.tsx +++ b/packages/react/src/components/NavbarItem/NavbarItem.tsx @@ -16,15 +16,16 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode} from 'react'; +import type {ElementType, Ref, ReactElement, ReactNode} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; import Chip from '../Chip'; -import type {ListItemButtonProps} from '../ListItemButton'; import ListItemButton from '../ListItemButton'; +import type {ListItemButtonProps, ListItemButtonTypeMap} from '../ListItemButton'; import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; import type {NavbarProps} from '../Navbar'; @@ -82,24 +83,10 @@ const COMPONENT_NAME: string = 'NavbarItem'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered NavbarItem component. */ -const NavbarItem: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - { - className, - collapsible = true, - fill, - icon, - id, - label, - onClick, - href, - selected, - tag, - tagClassName, - open = true, - ...rest - }: NavbarItemProps, - ref: MutableRefObject, +const NavbarItem: OverridableComponent> & WithWrapperProps = forwardRef( + ( + {className, fill, icon, id, label, onClick, selected, tag, tagClassName, open = true, ...rest}: NavbarItemProps, + ref: Ref, ): ReactElement => { const classes: string = clsx( 'oxygen-navbar-item', @@ -114,13 +101,7 @@ const NavbarItem: ForwardRefExoticComponent & WithWrapperProps return ( - + {icon} {open && tag ? ( @@ -135,7 +116,7 @@ const NavbarItem: ForwardRefExoticComponent & WithWrapperProps ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; NavbarItem.displayName = composeComponentDisplayName(COMPONENT_NAME); NavbarItem.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx index 5a7c7812..49ebcfc8 100644 --- a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx +++ b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx @@ -20,7 +20,7 @@ import MuiOutlinedInput from '@mui/material/OutlinedInput'; import type {OutlinedInputProps as MuiOutlinedInputProps} from '@mui/material/OutlinedInput'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './outlined-input.scss'; @@ -52,7 +52,7 @@ const COMPONENT_NAME: string = 'OutlinedInput'; * @returns The rendered OutlinedInput component. */ const OutlinedInput: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: OutlinedInputProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: OutlinedInputProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-outlined-input', className); return ; diff --git a/packages/react/src/components/Paper/Paper.tsx b/packages/react/src/components/Paper/Paper.tsx index 5d429d0f..a2616101 100644 --- a/packages/react/src/components/Paper/Paper.tsx +++ b/packages/react/src/components/Paper/Paper.tsx @@ -16,11 +16,12 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiPaper from '@mui/material/Paper'; import type {PaperProps as MuiPaperProps, PaperTypeMap} from '@mui/material/Paper'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import type {ReactElement, Ref, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -61,16 +62,16 @@ const COMPONENT_NAME: string = 'Paper'; * @param ref - The ref to be forwarded to the MuiPaper component. * @returns The rendered Paper component. */ -const Paper: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Paper: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: PaperProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-paper', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Paper.displayName = composeComponentDisplayName(COMPONENT_NAME); Paper.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx index 3854aaf4..944e612e 100644 --- a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx +++ b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx @@ -17,17 +17,18 @@ */ import {FlagOutlined} from '@mui/icons-material'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; // TODO: Refactor to use the `Select` from local. import Select, {SelectChangeEvent, SelectProps as MuiSelectProps} from '@mui/material/Select'; import clsx from 'clsx'; import {forwardRef, useState} from 'react'; -import type {ChangeEvent, ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ChangeEvent, ElementType, Ref, ReactElement} from 'react'; import Flag from 'react-world-flags'; import {countries, Country} from './constants/countries'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; -import type {BoxProps} from '../Box'; +import type {BoxProps, BoxTypeMap} from '../Box'; import InputLabel from '../InputLabel'; import type {InputLabelProps} from '../InputLabel'; import ListItemIcon from '../ListItemIcon'; @@ -106,8 +107,8 @@ const COMPONENT_NAME: string = 'PhoneNumberInput'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered PhoneNumberInput component. */ -const PhoneNumberInput: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const PhoneNumberInput: OverridableComponent> & WithWrapperProps = forwardRef( + ( { className, dialCodeValue, @@ -120,7 +121,7 @@ const PhoneNumberInput: ForwardRefExoticComponent & WithW SelectProps, ...rest }: PhoneNumberInputProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-phone-number-input', className); @@ -199,7 +200,7 @@ const PhoneNumberInput: ForwardRefExoticComponent & WithW ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; PhoneNumberInput.displayName = composeComponentDisplayName(COMPONENT_NAME); PhoneNumberInput.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx index fb490dbb..f78b937f 100644 --- a/packages/react/src/components/Popover/Popover.tsx +++ b/packages/react/src/components/Popover/Popover.tsx @@ -16,11 +16,13 @@ * 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 {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import type {ReactElement, Ref, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -58,16 +60,17 @@ const COMPONENT_NAME: string = 'Popover'; * @param ref - The ref to be forwarded to the MuiPopover component. * @returns The rendered Popover component. */ -const Popover: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, ...rest}: PopoverProps, - ref: MutableRefObject, - ): ReactElement => { - const classes: string = clsx('oxygen-popover', className); +const Popover: OverridableComponent> & WithWrapperProps = + forwardRef( + ( + {className, ...rest}: PopoverProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-popover', className); - return ; - }, -) as unknown as ForwardRefExoticComponent & WithWrapperProps; + return ; + }, + ) as OverridableComponent> & WithWrapperProps; Popover.displayName = composeComponentDisplayName(COMPONENT_NAME); Popover.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx index ac4034a5..e2d85bc1 100644 --- a/packages/react/src/components/Radio/Radio.tsx +++ b/packages/react/src/components/Radio/Radio.tsx @@ -16,11 +16,13 @@ * under the License. */ +import {ButtonBaseTypeMap} from '@mui/material/ButtonBase'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiRadio from '@mui/material/Radio'; import type {RadioProps as MuiRadioProps} from '@mui/material/Radio'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import type {ReactElement, Ref, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -56,16 +58,16 @@ const COMPONENT_NAME: string = 'Radio'; * @param ref - The ref to be forwarded to the MuiRadio component. * @returns The rendered Radio component. */ -const Radio: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Radio: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: RadioProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-radio', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Radio.displayName = composeComponentDisplayName(COMPONENT_NAME); Radio.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx index ecd5b1bd..446e312a 100644 --- a/packages/react/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx @@ -20,7 +20,7 @@ import MuiRadioGroup from '@mui/material/RadioGroup'; import type {RadioGroupProps as MuiRadioGroupProps} from '@mui/material/RadioGroup'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -51,7 +51,7 @@ const COMPONENT_NAME: string = 'RadioGroup'; * @returns The rendered RadioGroup component. */ const RadioGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: RadioGroupProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: RadioGroupProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-radio-group', className); return ; diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx index 0b5eec87..3153b352 100644 --- a/packages/react/src/components/Select/Select.tsx +++ b/packages/react/src/components/Select/Select.tsx @@ -20,7 +20,7 @@ import MuiSelect from '@mui/material/Select'; import type {SelectProps as MuiSelectProps} from '@mui/material/Select'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import InputLabel from '../InputLabel'; @@ -72,7 +72,7 @@ const Select: ForwardRefExoticComponent & WithWrapperProps = forwar required, ...rest }: SelectProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-select', className); diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx index 7f436e37..58bbdbd6 100644 --- a/packages/react/src/components/SignIn/SignIn.tsx +++ b/packages/react/src/components/SignIn/SignIn.tsx @@ -16,12 +16,13 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import type {BoxProps} from '../Box'; +import type {BoxTypeMap, BoxProps} from '../Box'; import Box from '../Box'; import Button from '../Button'; import Checkbox from '../Checkbox'; @@ -74,10 +75,10 @@ const COMPONENT_NAME: string = 'SignIn'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered SignIn component. */ -const SignIn: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const SignIn: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, signUpUrl, logoUrl, signInOptions, ...rest}: SignInProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-sign-in', className); @@ -135,7 +136,7 @@ const SignIn: ForwardRefExoticComponent & WithWrapperProps = forwar ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; SignIn.displayName = composeComponentDisplayName(COMPONENT_NAME); SignIn.muiName = 'SignIn'; diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/Skeleton/Skeleton.tsx index 476e6fca..c8917f1e 100644 --- a/packages/react/src/components/Skeleton/Skeleton.tsx +++ b/packages/react/src/components/Skeleton/Skeleton.tsx @@ -16,11 +16,12 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiSkeleton from '@mui/material/Skeleton'; import type {SkeletonProps as MuiSkeletonProps, SkeletonTypeMap} from '@mui/material/Skeleton'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; @@ -59,16 +60,16 @@ const COMPONENT_NAME: string = 'Skeleton'; * @param ref - The ref to be forwarded to the MuiSkeleton component. * @returns The rendered Skeleton component. */ -const Skeleton: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Skeleton: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: SkeletonProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-skeleton', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Skeleton.displayName = composeComponentDisplayName(COMPONENT_NAME); Skeleton.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Snackbar/Snackbar.tsx b/packages/react/src/components/Snackbar/Snackbar.tsx index f53af5df..db2eaf61 100644 --- a/packages/react/src/components/Snackbar/Snackbar.tsx +++ b/packages/react/src/components/Snackbar/Snackbar.tsx @@ -20,7 +20,7 @@ import MuiSnackbar from '@mui/material/Snackbar'; import type {SnackbarProps as MuiSnackbarProps} from '@mui/material/Snackbar'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './snackbar.scss'; @@ -51,7 +51,7 @@ const COMPONENT_NAME: string = 'Snackbar'; * @returns The rendered Snackbar component. */ const Snackbar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: SnackbarProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: SnackbarProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-snackbar', className); return ; diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index 88c93f4b..55957983 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -16,13 +16,14 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; -import type {BoxProps} from '../Box'; +import type {BoxProps, BoxTypeMap} from '../Box'; import './stepper.scss'; export type StepperProps = BoxProps & { @@ -64,15 +65,15 @@ const COMPONENT_NAME: string = 'Stepper'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered Stepper component. */ -const Stepper: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Stepper: OverridableComponent> & WithWrapperProps = forwardRef( + ( {animateOnSlide, className, currentStep = 0, steps}: StepperProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const [slideLeftPosition, setSlideLeftPosition] = useState(0); const [slideContainerWidth, setSlideContainerWidth] = useState(0); - const slideContainerRef: MutableRefObject = useRef(null); + const slideContainerRef: Ref = useRef(null); const classes: string = clsx('oxygen-stepper', className); @@ -128,7 +129,7 @@ const Stepper: ForwardRefExoticComponent & WithWrapperProps = forw return steps[currentStep]; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Stepper.displayName = composeComponentDisplayName(COMPONENT_NAME); Stepper.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx index 6a0bb4c2..25670555 100644 --- a/packages/react/src/components/Switch/Switch.tsx +++ b/packages/react/src/components/Switch/Switch.tsx @@ -16,11 +16,13 @@ * under the License. */ +import type {ButtonBaseTypeMap} from '@mui/material/ButtonBase'; +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiSwitch from '@mui/material/Switch'; import type {SwitchProps as MuiSwitchProps} from '@mui/material/Switch'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import type {ReactElement, Ref, ElementType} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './switch.scss'; @@ -59,16 +61,16 @@ const COMPONENT_NAME: string = 'Switch'; * @param ref - The ref to be forwarded to the MuiSwitch component. * @returns The rendered Switch component. */ -const Switch: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Switch: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: SwitchProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-switch', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Switch.displayName = composeComponentDisplayName(COMPONENT_NAME); Switch.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Tab/Tab.tsx b/packages/react/src/components/Tab/Tab.tsx index 61770178..127ec30e 100644 --- a/packages/react/src/components/Tab/Tab.tsx +++ b/packages/react/src/components/Tab/Tab.tsx @@ -16,11 +16,12 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiTab from '@mui/material/Tab'; import type {TabProps as MuiTabProps, TabTypeMap} from '@mui/material/Tab'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './tab.scss'; @@ -61,16 +62,13 @@ const COMPONENT_NAME: string = 'Tab'; * @param ref - The ref to be forwarded to the MuiTab component. * @returns The rendered Tab component. */ -const Tab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( - {className, ...rest}: TabProps, - ref: MutableRefObject, - ): ReactElement => { +const Tab: OverridableComponent> & WithWrapperProps = forwardRef( + ({className, ...rest}: TabProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-tab', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Tab.displayName = composeComponentDisplayName(COMPONENT_NAME); Tab.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/TabPanel/TabPanel.tsx b/packages/react/src/components/TabPanel/TabPanel.tsx index 84acb90c..9eab1481 100644 --- a/packages/react/src/components/TabPanel/TabPanel.tsx +++ b/packages/react/src/components/TabPanel/TabPanel.tsx @@ -16,13 +16,14 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import type {BoxProps} from '../Box'; import Box from '../Box'; +import type {BoxProps, BoxTypeMap} from '../Box'; import './tab-panel.scss'; export type TabPanelProps = BoxProps & { @@ -60,10 +61,10 @@ const COMPONENT_NAME: string = 'TabPanel'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered TabPanel component. */ -const TabPanel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const TabPanel: OverridableComponent> & WithWrapperProps = forwardRef( + ( {className, children, value, index, ...rest}: TabPanelProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-tab-panel', className); @@ -73,7 +74,7 @@ const TabPanel: ForwardRefExoticComponent & WithWrapperProps = fo ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; TabPanel.displayName = composeComponentDisplayName(COMPONENT_NAME); TabPanel.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 6ad2a571..c3441c27 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -16,11 +16,12 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiTabs from '@mui/material/Tabs'; import type {TabsProps as MuiTabsProps, TabsTypeMap} from '@mui/material/Tabs'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; @@ -62,10 +63,10 @@ const COMPONENT_NAME: string = 'Tabs'; * @param ref - The ref to be forwarded to the MuiSkeleton component. * @returns The rendered Skeleton component. */ -const Tabs: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Tabs: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: TabsProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-tabs', className); @@ -78,7 +79,7 @@ const Tabs: ForwardRefExoticComponent & WithWrapperProps = forwardRef ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Tabs.displayName = composeComponentDisplayName(COMPONENT_NAME); Tabs.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx index 2335d4bb..ee35a784 100644 --- a/packages/react/src/components/TextField/TextField.tsx +++ b/packages/react/src/components/TextField/TextField.tsx @@ -16,19 +16,13 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiTextField from '@mui/material/TextField'; import type {TextFieldProps as MuiTextFieldProps} from '@mui/material/TextField'; import {CircleDotIcon, EyeIcon, EyeSlashIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; import {forwardRef, useState} from 'react'; -import type { - ElementType, - ForwardRefExoticComponent, - MouseEvent, - MutableRefObject, - ReactElement, - ReactNode, -} from 'react'; +import type {ElementType, ForwardRefExoticComponent, MouseEvent, Ref, ReactElement, ReactNode} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import IconButton from '../IconButton'; @@ -40,6 +34,7 @@ import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; import Tooltip from '../Tooltip'; import './text-field.scss'; +import {FormControlTypeMap} from '@mui/material/FormControl'; export enum TextFieldInputTypes { INPUT_PASSWORD = 'password', @@ -62,7 +57,7 @@ const COMPONENT_NAME: string = 'TextField'; const PasswordField: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ( {type, variant, ...rest}: TextFieldProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const [showPassword, setShowPassword] = useState(false); @@ -100,7 +95,7 @@ const PasswordField: ForwardRefExoticComponent & WithWrapperProp const PasswordFieldWithCriteria: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ( {criteria, id, type, ...rest}: TextFieldProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const [openPasswordCriteriaTooltip, setOpenPasswordCriteriaTooltip] = useState(false); @@ -179,10 +174,10 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent & Wit * @param ref - The ref to be forwarded to the MuiTextField component. * @returns The rendered TextField component. */ -const TextField: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const TextField: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, id, label, type, InputLabelProps, variant, ...rest}: TextFieldProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-text-field', className); @@ -199,7 +194,7 @@ const TextField: ForwardRefExoticComponent & WithWrapperProps = ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; TextField.displayName = composeComponentDisplayName(COMPONENT_NAME); TextField.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx index 0294ea66..0785a737 100644 --- a/packages/react/src/components/Toolbar/Toolbar.tsx +++ b/packages/react/src/components/Toolbar/Toolbar.tsx @@ -16,11 +16,12 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiToolbar from '@mui/material/Toolbar'; import type {ToolbarProps as MuiToolbarProps, ToolbarTypeMap} from '@mui/material/Toolbar'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './toolbar.scss'; @@ -60,16 +61,16 @@ const COMPONENT_NAME: string = 'Toolbar'; * @param ref - The ref to be forwarded to the MuiSkeleton component. * @returns The rendered Skeleton component. */ -const Toolbar: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Toolbar: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: ToolbarProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-toolbar', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Toolbar.displayName = composeComponentDisplayName(COMPONENT_NAME); Toolbar.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx index 2bd74815..15d5b0d4 100644 --- a/packages/react/src/components/Tooltip/Tooltip.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.tsx @@ -20,7 +20,7 @@ import MuiTooltip from '@mui/material/Tooltip'; import type {TooltipProps as MuiTooltipProps} from '@mui/material/Tooltip'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './tooltip.scss'; @@ -51,7 +51,7 @@ const COMPONENT_NAME: string = 'Tooltip'; * @returns The rendered Tooltip component. */ const Tooltip: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: TooltipProps, ref: MutableRefObject): ReactElement => { + ({className, ...rest}: TooltipProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-tooltip', className); return ; diff --git a/packages/react/src/components/Typography/Typography.tsx b/packages/react/src/components/Typography/Typography.tsx index f9716e4f..4bb05715 100644 --- a/packages/react/src/components/Typography/Typography.tsx +++ b/packages/react/src/components/Typography/Typography.tsx @@ -16,11 +16,12 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiTypography from '@mui/material/Typography'; import type {TypographyProps as MuiTypographyProps, TypographyTypeMap} from '@mui/material/Typography'; import clsx from 'clsx'; import {forwardRef} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import './typography.scss'; @@ -62,16 +63,16 @@ const COMPONENT_NAME: string = 'Typography'; * @param ref - The ref to be forwarded to the MuiTypography component. * @returns The rendered Typography component. */ -const Typography: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const Typography: OverridableComponent> & WithWrapperProps = forwardRef( ( {className, ...rest}: TypographyProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const classes: string = clsx('oxygen-typography', className); return ; }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Typography.displayName = composeComponentDisplayName(COMPONENT_NAME); Typography.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx index 5f33a47a..c723eeb9 100644 --- a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx +++ b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx @@ -18,6 +18,7 @@ // 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'; @@ -43,6 +44,7 @@ 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 = Omit, 'open' | 'anchorEl'> & { /** @@ -144,7 +146,7 @@ const COMPONENT_NAME: string = 'UserDropdownMenu'; * @param ref - The ref to be forwarded to the Menu component. * @returns The rendered UserDropdownMenu component. */ -const UserDropdownMenu: ForwardRefExoticComponent & WithWrapperProps = forwardRef( +const UserDropdownMenu: OverridableComponent> & WithWrapperProps = forwardRef( ( { className, @@ -279,7 +281,7 @@ const UserDropdownMenu: ForwardRefExoticComponent & WithW ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; UserDropdownMenu.displayName = composeComponentDisplayName(COMPONENT_NAME); UserDropdownMenu.muiName = COMPONENT_NAME; diff --git a/packages/react/src/components/Wizard/Wizard.tsx b/packages/react/src/components/Wizard/Wizard.tsx index 0537fcf4..5ef3a7d7 100644 --- a/packages/react/src/components/Wizard/Wizard.tsx +++ b/packages/react/src/components/Wizard/Wizard.tsx @@ -16,13 +16,14 @@ * under the License. */ +import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef, useCallback, useMemo, useState} from 'react'; -import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; import Box from '../Box'; -import type {BoxProps} from '../Box'; +import type {BoxProps, BoxTypeMap} from '../Box'; import Button from '../Button'; import Card from '../Card'; import CardActions from '../CardActions'; @@ -116,8 +117,8 @@ const COMPONENT_NAME: string = 'Wizard'; * @param ref - The ref to be forwarded to the Box component. * @returns The rendered Wizard component. */ -const Wizard: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ( +const Wizard: OverridableComponent> & WithWrapperProps = forwardRef( + ( { allowBackwardNavigation = true, allowCancel = false, @@ -135,7 +136,7 @@ const Wizard: ForwardRefExoticComponent & WithWrapperProps = forwar finishButtonText = 'Finish', steps, }: WizardProps, - ref: MutableRefObject, + ref: Ref, ): ReactElement => { const [currentStep, setCurrentStep] = useState(0); @@ -213,7 +214,7 @@ const Wizard: ForwardRefExoticComponent & WithWrapperProps = forwar ); }, -) as ForwardRefExoticComponent & WithWrapperProps; +) as OverridableComponent> & WithWrapperProps; Wizard.displayName = composeComponentDisplayName(COMPONENT_NAME); Wizard.muiName = COMPONENT_NAME; diff --git a/packages/react/src/models/component.ts b/packages/react/src/models/component.ts index ea61cf6e..72173a53 100644 --- a/packages/react/src/models/component.ts +++ b/packages/react/src/models/component.ts @@ -16,9 +16,11 @@ * under the License. */ -export type WithWrapperProps = MuiWrapperProps; +import {NamedExoticComponent} from 'react'; -export interface MuiWrapperProps { +export type WithWrapperProps = MuiWrapperProps & NamedExoticComponent; + +interface MuiWrapperProps { /** * Component name with `Mui` prefix. * To provide maximum flexibility and performance, MUI needs a way to know the nature From c180abf8816f4d8abb24257bcfdabda31be59035 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 11 Oct 2024 01:41:23 +0530 Subject: [PATCH 04/10] chore(react): add temp workaround for https://github.com/wso2/oxygen-ui/issues/283 --- .../react/src/components/Drawer/Drawer.tsx | 26 ++++++++----------- packages/react/src/components/Menu/Menu.tsx | 23 ++++++---------- .../react/src/components/Popover/Popover.tsx | 25 ++++++++---------- .../UserDropdownMenu/UserDropdownMenu.tsx | 8 +++--- 4 files changed, 33 insertions(+), 49 deletions(-) diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx index 7f7011e8..d824cba7 100644 --- 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,7 +49,7 @@ 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. @@ -60,17 +57,16 @@ const COMPONENT_NAME: string = 'Drawer'; * @param ref - The ref to be forwarded to the MuiDrawer component. * @returns The rendered Drawer component. */ -const Drawer: OverridableComponent> & WithWrapperProps = - forwardRef( - ( - {className, ...rest}: DrawerProps, - ref: Ref, - ): ReactElement => { - const classes: string = clsx('oxygen-drawer', className); +const Drawer: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: DrawerProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-drawer', className); - return ; - }, - ) as OverridableComponent> & WithWrapperProps; + return ; + }, +) as ForwardRefExoticComponent & 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 index c85ffa26..644de52b 100644 --- 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,7 +51,7 @@ 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. @@ -62,17 +59,13 @@ const COMPONENT_NAME: string = 'Menu'; * @param ref - The ref to be forwarded to the MuiList component. * @returns The rendered List component. */ -const Menu: OverridableComponent> & WithWrapperProps = - forwardRef( - ( - {className, ...rest}: MenuProps, - ref: Ref, - ): ReactElement => { - const classes: string = clsx('oxygen-menu', className); +const Menu: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ({className, ...rest}: MenuProps, ref: Ref): ReactElement => { + const classes: string = clsx('oxygen-menu', className); - return ; - }, - ) as OverridableComponent> & WithWrapperProps; + return ; + }, +) as ForwardRefExoticComponent & 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 index f78b937f..134f258a 100644 --- 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,7 +50,7 @@ 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. @@ -60,17 +58,16 @@ const COMPONENT_NAME: string = 'Popover'; * @param ref - The ref to be forwarded to the MuiPopover component. * @returns The rendered Popover component. */ -const Popover: OverridableComponent> & WithWrapperProps = - forwardRef( - ( - {className, ...rest}: PopoverProps, - ref: Ref, - ): ReactElement => { - const classes: string = clsx('oxygen-popover', className); +const Popover: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + ( + {className, ...rest}: PopoverProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-popover', className); - return ; - }, - ) as OverridableComponent> & WithWrapperProps; + return ; + }, +) as ForwardRefExoticComponent & 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 index c723eeb9..fb1fd07f 100644 --- 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 = Omit, '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> & WithWrapperProps = forwardRef( +const UserDropdownMenu: ForwardRefExoticComponent & WithWrapperProps = forwardRef( ( { className, @@ -281,7 +279,7 @@ const UserDropdownMenu: OverridableComponent ); }, -) as OverridableComponent> & WithWrapperProps; +) as ForwardRefExoticComponent & WithWrapperProps; UserDropdownMenu.displayName = composeComponentDisplayName(COMPONENT_NAME); UserDropdownMenu.muiName = COMPONENT_NAME; From ff0855b6bebf43bf8eb91833f9eeb6183d2fc346 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 11 Oct 2024 01:43:27 +0530 Subject: [PATCH 05/10] chore(react): re-evaluate TODOs --- .../react/src/components/PhoneNumberInput/PhoneNumberInput.tsx | 1 - .../react/src/components/UserDropdownMenu/UserDropdownMenu.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx index 944e612e..407e8ff6 100644 --- a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx +++ b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx @@ -18,7 +18,6 @@ import {FlagOutlined} from '@mui/icons-material'; import type {OverridableComponent} from '@mui/material/OverridableComponent'; -// TODO: Refactor to use the `Select` from local. import Select, {SelectChangeEvent, SelectProps as MuiSelectProps} from '@mui/material/Select'; import clsx from 'clsx'; import {forwardRef, useState} from 'react'; diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx index fb1fd07f..c5fc3597 100644 --- a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx +++ b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx @@ -16,7 +16,6 @@ * under the License. */ -// TODO: Wrap this component. import ListSubheader from '@mui/material/ListSubheader'; import {capitalize} from '@mui/material/utils'; import clsx from 'clsx'; From 71d9ce3d106c41ed53d0d052d8230b997ffa4093 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 11 Oct 2024 12:38:20 +0530 Subject: [PATCH 06/10] chore(react): add deprecation notice --- packages/react/src/components/CountryFlag/CountryFlag.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react/src/components/CountryFlag/CountryFlag.tsx b/packages/react/src/components/CountryFlag/CountryFlag.tsx index 51ffae4f..757ce45e 100644 --- a/packages/react/src/components/CountryFlag/CountryFlag.tsx +++ b/packages/react/src/components/CountryFlag/CountryFlag.tsx @@ -34,6 +34,11 @@ export type CountryFlagProps = { height?: string; } & HTMLAttributes; +/** + * @deprecated Use the {@link CountryFlagProps} instead. + */ +export type CountryFlagsProps = CountryFlagProps; + const COMPONENT_NAME: string = 'CountryFlag'; /** From da5786e5d1722e7db9c601657b92a11b1bca7d15 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 11 Oct 2024 13:19:57 +0530 Subject: [PATCH 07/10] chore(react): fix self review issues --- packages/react/src/components/Alert/Alert.tsx | 2 +- packages/react/src/components/AlertTitle/AlertTitle.tsx | 2 +- packages/react/src/components/Autocomplete/Autocomplete.tsx | 1 - packages/react/src/components/Avatar/Avatar.tsx | 2 +- packages/react/src/components/Box/Box.tsx | 2 +- packages/react/src/components/Button/Button.tsx | 2 +- packages/react/src/components/CardActions/CardActions.tsx | 1 - packages/react/src/components/CardContent/CardContent.tsx | 5 ++++- .../src/components/CircularProgress/CircularProgress.tsx | 3 +-- .../CircularProgressAvatar/CircularProgressAvatar.tsx | 1 - packages/react/src/components/Code/Code.tsx | 2 +- packages/react/src/components/IconButton/IconButton.tsx | 6 +++--- packages/react/src/components/TextField/TextField.tsx | 2 +- 13 files changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx index c6e2f1f7..bc1fa297 100644 --- a/packages/react/src/components/Alert/Alert.tsx +++ b/packages/react/src/components/Alert/Alert.tsx @@ -24,7 +24,7 @@ import {forwardRef} from 'react'; import type {ReactElement, ElementType, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import {PaperTypeMap} from '../Paper'; +import type {PaperTypeMap} from '../Paper'; import './alert.scss'; export type AlertProps = { diff --git a/packages/react/src/components/AlertTitle/AlertTitle.tsx b/packages/react/src/components/AlertTitle/AlertTitle.tsx index ac8e8bc0..5c68ca7b 100644 --- a/packages/react/src/components/AlertTitle/AlertTitle.tsx +++ b/packages/react/src/components/AlertTitle/AlertTitle.tsx @@ -24,7 +24,7 @@ import {forwardRef} from 'react'; import type {ReactElement, ElementType, Ref} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import {TypographyTypeMap} from '../Typography'; +import type {TypographyTypeMap} from '../Typography'; import './alert-title.scss'; export type AlertProps = { diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx index 95491bdb..79a2dcba 100644 --- a/packages/react/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx @@ -53,7 +53,6 @@ const COMPONENT_NAME: string = 'Autocomplete'; * - ❌ `component` prop is not supported. * - ❌ The component cannot hold a `ref`. * - * @template C - The type of the component. * @param props - The props for the Accordion component. * @param ref - The ref to be forwarded to the MuiAccordion component. * @returns The rendered Accordion component. diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx index 97a1f7bf..c337e677 100644 --- a/packages/react/src/components/Avatar/Avatar.tsx +++ b/packages/react/src/components/Avatar/Avatar.tsx @@ -49,7 +49,7 @@ export type AvatarProps< const COMPONENT_NAME: string = 'Avatar'; /** - * The Alert component display brief messages for the user without interrupting their use of the app. + * Avatars are found throughout material design with uses in everything from tables to dialog menus. * * Demos: * diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index 7c7f58c7..d2f80265 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -19,7 +19,7 @@ import MuiBox from '@mui/material/Box'; import type {BoxProps as MuiBoxProps} from '@mui/material/Box'; import type {OverridableComponent} from '@mui/material/OverridableComponent'; -import {BoxTypeMap} from '@mui/system'; +import type {BoxTypeMap} from '@mui/system/Box'; import clsx from 'clsx'; import {forwardRef} from 'react'; import type {ElementType, ReactElement, Ref} from 'react'; diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index 61fe36fd..74214983 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -18,7 +18,7 @@ import MuiButton from '@mui/lab/LoadingButton'; import type {LoadingButtonTypeMap, LoadingButtonProps as MuiButtonProps} from '@mui/lab/LoadingButton'; -import {ButtonTypeMap} from '@mui/material'; +import type {ButtonTypeMap} from '@mui/material'; import type {OverridableComponent} from '@mui/material/OverridableComponent'; import clsx from 'clsx'; import {forwardRef} from 'react'; diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx index 2952d558..3a0e6897 100644 --- a/packages/react/src/components/CardActions/CardActions.tsx +++ b/packages/react/src/components/CardActions/CardActions.tsx @@ -46,7 +46,6 @@ const COMPONENT_NAME: string = 'CardActions'; * - ❌ `component` prop is not supported. * - ✅ The `ref` is forwarded to the root element. * - * @template C - The type of the component. * @param props - The props for the CardActions component. * @param ref - The ref to be forwarded to the MuiCardActions component. * @returns The rendered CardActions component. diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx index 5aa1f9bd..5ff85eda 100644 --- a/packages/react/src/components/CardContent/CardContent.tsx +++ b/packages/react/src/components/CardContent/CardContent.tsx @@ -62,7 +62,10 @@ const COMPONENT_NAME: string = 'CardContent'; * @returns The rendered CardContent component. */ const CardContent: OverridableComponent> & WithWrapperProps = forwardRef( - ({className, ...rest}: CardContentProps, ref: Ref): ReactElement => { + ( + {className, ...rest}: CardContentProps, + ref: Ref, + ): ReactElement => { const classes: string = clsx('oxygen-card-content', className); return ; diff --git a/packages/react/src/components/CircularProgress/CircularProgress.tsx b/packages/react/src/components/CircularProgress/CircularProgress.tsx index ab4dd878..7490e143 100644 --- a/packages/react/src/components/CircularProgress/CircularProgress.tsx +++ b/packages/react/src/components/CircularProgress/CircularProgress.tsx @@ -48,13 +48,12 @@ const COMPONENT_NAME: string = 'CircularProgress'; * - ❌ `component` prop is not supported. * - ✅ The `ref` is forwarded to the root element. * - * @template C - The type of the component. * @param props - The props for the CircularProgress component. * @param ref - The ref to be forwarded to the MuiCircularProgress component. * @returns The rendered CircularProgress component. */ const CircularProgress: ForwardRefExoticComponent & WithWrapperProps = forwardRef( - ({className, ...rest}: CircularProgressProps, ref: Ref): ReactElement => { + ({className, ...rest}: CircularProgressProps, ref: Ref): ReactElement => { const classes: string = clsx('oxygen-circular-progress', className); return ; diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx index f56d8ace..d8e46e6e 100644 --- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx +++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx @@ -65,7 +65,6 @@ const COMPONENT_NAME: string = 'CircularProgressAvatar'; * - ❌ `component` prop is not supported. * - ✅ The `ref` is forwarded to the root element. * - * @template C - The type of the component. * @param props - The props for the CircularProgressAvatar component. * @param ref - The ref to be forwarded to the Box component. * @returns The rendered CircularProgressAvatar component. diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx index 705f8c3c..076b2746 100644 --- a/packages/react/src/components/Code/Code.tsx +++ b/packages/react/src/components/Code/Code.tsx @@ -22,7 +22,7 @@ import {forwardRef} from 'react'; import type {ElementType, Ref, ReactElement} from 'react'; import type {WithWrapperProps} from '../../models/component'; import composeComponentDisplayName from '../../utils/compose-component-display-name'; -import {TypographyTypeMap} from '../Typography'; +import type {TypographyTypeMap} from '../Typography'; import Typography, {TypographyProps} from '../Typography/Typography'; import './code.scss'; diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx index bf016dbb..3dedb456 100644 --- a/packages/react/src/components/IconButton/IconButton.tsx +++ b/packages/react/src/components/IconButton/IconButton.tsx @@ -67,9 +67,9 @@ const COMPONENT_NAME: string = 'IconButton'; * - ✅ The `ref` is forwarded to the root element. * * @template C - The type of the component. - * @param props - The props for the FormControl component. - * @param ref - The ref to be forwarded to the MuiFormControl component. - * @returns The rendered FormControl component. + * @param props - The props for the IconButton component. + * @param ref - The ref to be forwarded to the MuiIconButton component. + * @returns The rendered IconButton component. */ const IconButton: OverridableComponent> & WithWrapperProps = forwardRef( ( diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx index ee35a784..aaa43396 100644 --- a/packages/react/src/components/TextField/TextField.tsx +++ b/packages/react/src/components/TextField/TextField.tsx @@ -16,6 +16,7 @@ * under the License. */ +import {FormControlTypeMap} from '@mui/material/FormControl'; import type {OverridableComponent} from '@mui/material/OverridableComponent'; import MuiTextField from '@mui/material/TextField'; import type {TextFieldProps as MuiTextFieldProps} from '@mui/material/TextField'; @@ -34,7 +35,6 @@ import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; import Tooltip from '../Tooltip'; import './text-field.scss'; -import {FormControlTypeMap} from '@mui/material/FormControl'; export enum TextFieldInputTypes { INPUT_PASSWORD = 'password', From 557b92ebe4336dc5154dbb1ac5eb56b6e3f332dd Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 11 Oct 2024 13:23:20 +0530 Subject: [PATCH 08/10] chore(react): update test snapshots --- .../CircularProgressAvatar.test.tsx.snap | 6 ++--- .../__snapshots__/Code.test.tsx.snap | 2 +- .../__snapshots__/SignIn.test.tsx.snap | 24 +++++++++---------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap index 2719003a..8abcbc5b 100644 --- a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap +++ b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap @@ -8,7 +8,7 @@ exports[`CircularProgressAvatar should match the snapshot 1`] = ` role="presentation" >
    @@ -50,7 +50,7 @@ exports[`CircularProgressAvatar should match the snapshot 1`] = ` diff --git a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap index 9419cce4..1cedb9b6 100644 --- a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap +++ b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Code should match the snapshot 1`] = `
    Code Block diff --git a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap index 348b3272..9c3b4653 100644 --- a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap +++ b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap @@ -4,22 +4,22 @@ exports[`SignIn should match the snapshot 1`] = `