fix(striker-ui): revise inner and expandable panel types

striker-ui/components/Panels/ExpandablePanel.tsx

@@ -3,7 +3,7 @@ import {
   ExpandMore as ExpandMoreIcon,
 } from '@mui/icons-material';
 import { Box, IconButton } from '@mui/material';
-import { FC, ReactNode, useMemo, useState } from 'react';
+import { FC, useMemo, useState } from 'react';
 
 import { GREY } from '../../lib/consts/DEFAULT_THEME';
 
@@ -14,31 +14,15 @@ import InnerPanelHeader from './InnerPanelHeader';
 import Spinner from '../Spinner';
 import { BodyText } from '../Text';
 
-type ExpandablePanelOptionalProps = {
-  expandInitially?: boolean;
-  loading?: boolean;
-  showHeaderSpinner?: boolean;
-};
-
-type ExpandablePanelProps = ExpandablePanelOptionalProps & {
-  header: ReactNode;
-};
-
-const EXPANDABLE_PANEL_DEFAULT_PROPS: Required<ExpandablePanelOptionalProps> = {
-  expandInitially: false,
-  loading: false,
-  showHeaderSpinner: false,
-};
 const HEADER_SPINNER_LENGTH = '1.2em';
 
 const ExpandablePanel: FC<ExpandablePanelProps> = ({
   children,
-  expandInitially:
-    isExpandInitially = EXPANDABLE_PANEL_DEFAULT_PROPS.expandInitially,
+  expandInitially: isExpandInitially = false,
   header,
-  loading: isLoading = EXPANDABLE_PANEL_DEFAULT_PROPS.loading,
-  showHeaderSpinner:
-    isShowHeaderSpinner = EXPANDABLE_PANEL_DEFAULT_PROPS.showHeaderSpinner,
+  loading: isLoading = false,
+  panelProps,
+  showHeaderSpinner: isShowHeaderSpinner = false,
 }) => {
   const [isExpand, setIsExpand] = useState<boolean>(isExpandInitially);
 
@@ -76,7 +60,7 @@ const ExpandablePanel: FC<ExpandablePanelProps> = ({
   );
 
   return (
-    <InnerPanel>
+    <InnerPanel {...panelProps}>
       <InnerPanelHeader>
         <FlexBox row>
           {headerElement}
@@ -96,6 +80,4 @@ const ExpandablePanel: FC<ExpandablePanelProps> = ({
   );
 };
 
-ExpandablePanel.defaultProps = EXPANDABLE_PANEL_DEFAULT_PROPS;
-
 export default ExpandablePanel;

striker-ui/components/Panels/InnerPanel.tsx

@@ -1,14 +1,11 @@
-import { FC } from 'react';
-import { Box as MUIBox, BoxProps as MUIBoxProps } from '@mui/material';
+import { FC, useMemo } from 'react';
+import { Box as MUIBox, SxProps, Theme } from '@mui/material';
 
 import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
 
-type InnerPanelProps = MUIBoxProps;
-
-const InnerPanel: FC<InnerPanelProps> = ({ sx, ...muiBoxRestProps }) => (
-  <MUIBox
-    {...{
-      sx: {
+const InnerPanel: FC<InnerPanelProps> = ({ sx, ...muiBoxRestProps }) => {
+  const combinedSx = useMemo<SxProps<Theme>>(
+    () => ({
       borderWidth: '1px',
       borderRadius: BORDER_RADIUS,
       borderStyle: 'solid',
@@ -19,10 +16,11 @@ const InnerPanel: FC<InnerPanelProps> = ({ sx, ...muiBoxRestProps }) => (
       position: 'relative',
 
       ...sx,
-      },
-      ...muiBoxRestProps,
-    }}
-  />
-);
+    }),
+    [sx],
+  );
+
+  return <MUIBox {...muiBoxRestProps} sx={combinedSx} />;
+};
 
 export default InnerPanel;

striker-ui/types/ExpandablePanel.d.ts

@@ -0,0 +1,10 @@
+type ExpandablePanelOptionalProps = {
+  expandInitially?: boolean;
+  loading?: boolean;
+  panelProps?: InnerPanelProps;
+  showHeaderSpinner?: boolean;
+};
+
+type ExpandablePanelProps = ExpandablePanelOptionalProps & {
+  header: import('react').ReactNode;
+};

striker-ui/types/InnerPanel.d.ts

@@ -0,0 +1 @@
+type InnerPanelProps = import('@mui/material').BoxProps;