fix(UI): pass rest props to underline material ui components closes364

packages/geoview-core/src/ui/card-media/card-media.tsx

@@ -18,7 +18,7 @@ interface TypeCardMediaProps extends CardMediaProps {
  * @returns {JSX.Element} the created Card Media element
  */
 export function CardMedia(props: TypeCardMediaProps): JSX.Element {
-  const { sx, src, alt, click, keyDown } = props;
+  const { sx, src, alt, click, keyDown, ...rest } = props;
 
-  return <MaterialCardMedia component="img" sx={sx} alt={alt} src={src} tabIndex={0} onClick={click} onKeyDown={keyDown} />;
+  return <MaterialCardMedia component="img" sx={sx} alt={alt} src={src} tabIndex={0} onClick={click} onKeyDown={keyDown} {...rest} />;
 }

packages/geoview-core/src/ui/circular-progress/circular-progress.tsx

@@ -22,14 +22,14 @@ interface TypeCircularProgressProps extends CircularProgressProps {
  * @returns {JSX.Element} the created Circular Progress element
  */
 export function CircularProgress(props: TypeCircularProgressProps): JSX.Element {
-  const { style = {}, isLoaded, sx = {} } = props;
+  const { style = {}, isLoaded, sx = {}, ...rest } = props;
 
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
   return !isLoaded ? (
     <Box sx={{ ...sxClasses.loading, ...sx }} style={{ ...style }}>
-      <MaterialCircularProgress sx={sxClasses.progress} />
+      <MaterialCircularProgress sx={sxClasses.progress} {...rest} />
     </Box>
   ) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment

packages/geoview-core/src/ui/divider/divider.tsx

@@ -19,7 +19,7 @@ interface TypeDividerProps extends DividerProps {
  * @returns {JSX.Element} the created Divider element
  */
 export function Divider(props: TypeDividerProps): JSX.Element {
-  const { className, style, grow, orientation, sx } = props;
+  const { className, style, grow, orientation, sx, ...rest } = props;
 
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
@@ -35,6 +35,7 @@ export function Divider(props: TypeDividerProps): JSX.Element {
       sx={{ ...(grow ? sxClasses.grow : {}), ...dividerOrientation, ...sx }}
       className={`${className ?? ''}`}
       style={style}
+      {...rest}
     />
   );
 }

packages/geoview-core/src/ui/drawer/drawer.tsx

@@ -23,7 +23,7 @@ export interface TypeDrawerProps extends DrawerProps {
  * @returns {JSX.Element} the created Drawer element
  */
 export function Drawer(props: TypeDrawerProps): JSX.Element {
-  const { variant, status, className, style, children } = props;
+  const { variant, status, className, style, children, ...rest } = props;
 
   const { t } = useTranslation<string>();
 
@@ -55,6 +55,7 @@ export function Drawer(props: TypeDrawerProps): JSX.Element {
         paper: className,
       }}
       style={style || undefined}
+      {...rest}
     >
       <Box sx={sxClasses.toolbar}>
         <IconButton

packages/geoview-core/src/ui/fade/fade.tsx

@@ -7,7 +7,11 @@ import { Fade as MaterialFade, FadeProps } from '@mui/material';
  * @returns {JSX.Element} the created Fade element
  */
 export function Fade(props: FadeProps): JSX.Element {
-  const { in: fadeIn, children } = props;
+  const { in: fadeIn, children, ...rest } = props;
 
-  return <MaterialFade in={fadeIn}>{children && children}</MaterialFade>;
+  return (
+    <MaterialFade in={fadeIn} {...rest}>
+      {children && children}
+    </MaterialFade>
+  );
 }

packages/geoview-core/src/ui/icon-button/icon-button.tsx

@@ -26,6 +26,7 @@ export function IconButton(props: TypeIconButtonProps): JSX.Element {
     size,
     disabled,
     color,
+    ...rest
   } = props;
 
   const { t } = useTranslation<string>();
@@ -44,6 +45,7 @@ export function IconButton(props: TypeIconButtonProps): JSX.Element {
         ref={iconRef}
         disabled={disabled}
         color={color}
+        {...rest}
       >
         {children && children}
       </MaterialIconButton>

packages/geoview-core/src/ui/linear-progress/linear-progress.tsx

@@ -22,8 +22,8 @@ interface ProgressbarProps {
  * @param {ProgressbarProps} props the properties passed to the element
  * @returns {JSX.Element} the created element
  */
-export function ProgressBar({ className = '', variant = 'indeterminate', value = 0 }: ProgressbarProps): JSX.Element {
-  return <LinearProgressBar variant={variant} value={value} className={className} />;
+export function ProgressBar({ className = '', variant = 'indeterminate', value = 0, ...rest }: ProgressbarProps): JSX.Element {
+  return <LinearProgressBar variant={variant} value={value} className={className} {...rest} />;
 }
 
 /**

packages/geoview-core/src/ui/list/collapse.tsx

@@ -7,12 +7,19 @@ import { Collapse as MaterialCollapse, CollapseProps } from '@mui/material';
  * @returns {JSX.Element} the created Collapse element
  */
 export function Collapse(props: CollapseProps): JSX.Element {
-  const { children, className, style, timeout, unmountOnExit } = props;
+  const { children, className, style, timeout, unmountOnExit, ...rest } = props;
   // eslint-disable-next-line react/destructuring-assignment
   const inProp = props.in;
 
   return (
-    <MaterialCollapse className={className || ''} style={style || undefined} in={inProp} timeout={timeout} unmountOnExit={unmountOnExit}>
+    <MaterialCollapse
+      className={className || ''}
+      style={style || undefined}
+      in={inProp}
+      timeout={timeout}
+      unmountOnExit={unmountOnExit}
+      {...rest}
+    >
       {children !== undefined && children}
     </MaterialCollapse>
   );

packages/geoview-core/src/ui/list/list-item-icon.tsx

@@ -7,10 +7,10 @@ import { ListItemIcon as MaterialListItemIcon, ListItemIconProps } from '@mui/ma
  * @returns {JSX.Element} the created List Item element
  */
 export function ListItemIcon(props: ListItemIconProps): JSX.Element {
-  const { children, className, style } = props;
+  const { children, className, style, ...rest } = props;
 
   return (
-    <MaterialListItemIcon className={className || ''} style={style || undefined}>
+    <MaterialListItemIcon className={className || ''} style={style || undefined} {...rest}>
       {children !== undefined && children}
     </MaterialListItemIcon>
   );

packages/geoview-core/src/ui/list/list.tsx

@@ -26,7 +26,7 @@ const sxClasses = {
  * @returns {JSX.Element} the created List element
  */
 export const List = React.forwardRef<HTMLUListElement, TypeListProps>((props: TypeListProps, ref): JSX.Element => {
-  const { children, className, style, type, sx } = props;
+  const { children, className, style, type, sx, ...rest } = props;
 
   return (
     <MaterialList
@@ -35,6 +35,7 @@ export const List = React.forwardRef<HTMLUListElement, TypeListProps>((props: Ty
       className={className || ''}
       style={style || undefined}
       component={type || 'ul'}
+      {...rest}
     >
       {children !== undefined && children}
     </MaterialList>

packages/geoview-core/src/ui/panel/panel.tsx

@@ -39,7 +39,7 @@ export type TypePanelAppProps = {
  * @returns {JSX.Element} the created Panel element
  */
 export function Panel(props: TypePanelAppProps): JSX.Element {
-  const { panel, button, onPanelOpened, onPanelClosed, onGeneralCloseClicked } = props;
+  const { panel, button, onPanelOpened, onPanelClosed, onGeneralCloseClicked, ...rest } = props;
   const { status: open = false, panelStyles, panelGroupName } = panel;
 
   const { t } = useTranslation<string>();
@@ -145,6 +145,7 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
             }
           }}
           {...{ 'data-id': button.id }}
+          {...rest}
         >
           <CardHeader
             sx={panelStyles?.panelCardHeader ? { ...panelStyles.panelCardHeader } : {}}

packages/geoview-core/src/ui/slider/slider.tsx

@@ -183,6 +183,7 @@ export function Slider(props: SliderProps): JSX.Element {
   // TODO: better implement WCAG on slider
   return (
     <MaterialSlider
+      {...properties}
       id={containerId}
       sx={{ ...(!properties.className ? sxClasses.slider : {}) }}
       className={properties.className !== undefined ? properties.className : ''}

packages/geoview-core/src/ui/snackbar/snackbar.tsx

@@ -33,7 +33,7 @@ export function Snackbar(props: SnackBarProps): JSX.Element {
   logger.logTraceRender('ui/snackbar/snackbar', props);
 
   // Read props
-  const { snackBarId, open, message, type, button, onClose } = props;
+  const { snackBarId, open, message, type, button, onClose, ...rest } = props;
 
   const fadeInAnimation = useFadeIn();
   const AnimatedSnackbar = animated(MaterialSnackbar);
@@ -50,6 +50,7 @@ export function Snackbar(props: SnackBarProps): JSX.Element {
       open={open}
       autoHideDuration={6000}
       onClose={() => onClose?.()}
+      {...rest}
     >
       <Alert onClose={() => onClose?.()} severity={type} sx={{ width: '100%' }}>
         {message}

packages/geoview-core/src/ui/stepper/custom-stepper.tsx

@@ -78,6 +78,7 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
     backButtonText,
     nextButtonText,
     resetButtonText,
+    ...rest
   } = props;
 
   const theme = useTheme();
@@ -198,6 +199,7 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
         // eslint-disable-next-line no-nested-ternary
         alternativeLabel={stepsOrientation === 'horizontal' ? (alternativeLabel !== undefined ? alternativeLabel : true) : false}
         nonLinear={nonLinear || buttonedLabels || false}
+        {...rest}
       >
         {steps?.map((step: any, index: number) => {
           return (

packages/geoview-core/src/ui/text-field/text-field.tsx

@@ -13,7 +13,7 @@ import { TypeTextFieldProps } from '@/ui/panel/panel-types';
  * @returns {JSX.Element} the text field ui component
  */
 export function TextField(props: TypeTextFieldProps): JSX.Element {
-  const { tooltip, tooltipPlacement } = props;
+  const { tooltip, tooltipPlacement, ...rest } = props;
 
   const { t } = useTranslation<string>();
 
@@ -22,7 +22,7 @@ export function TextField(props: TypeTextFieldProps): JSX.Element {
 
   return (
     <Tooltip title={t((tooltip as string) || '') as string} placement={tooltipPlacement} TransitionComponent={Fade} ref={textRef}>
-      <MaterialTextField {...props} />
+      <MaterialTextField {...props} {...rest} />
     </Tooltip>
   );
 }