fix(striker-ui): separate types from Select component

striker-ui/components/Select.tsx

@@ -1,82 +1,70 @@
-import { FC } from 'react';
+import { Close as CloseIcon } from '@mui/icons-material';
 import {
   IconButton as MUIIconButton,
-  IconButtonProps as MUIIconButtonProps,
   iconButtonClasses as muiIconButtonClasses,
   inputClasses,
   Select as MUISelect,
   selectClasses as muiSelectClasses,
-  SelectProps as MUISelectProps,
   InputAdornment as MUIInputAdornment,
   inputAdornmentClasses as muiInputAdornmentClasses,
 } from '@mui/material';
-import { Close as CloseIcon } from '@mui/icons-material';
+import { FC, useMemo } from 'react';
 
 import { GREY } from '../lib/consts/DEFAULT_THEME';
 
-type SelectOptionalProps = {
-  onClearIndicatorClick?: MUIIconButtonProps['onClick'] | null;
-};
-
-type SelectProps = MUISelectProps & SelectOptionalProps;
+const Select: FC<SelectProps> = ({
+  onClearIndicatorClick,
+  ...muiSelectProps
+}) => {
+  const { sx: selectSx, value, ...restMuiSelectProps } = muiSelectProps;
 
-const SELECT_DEFAULT_PROPS: Required<SelectOptionalProps> = {
-  onClearIndicatorClick: null,
-};
-
-const Select: FC<SelectProps> = (selectProps) => {
-  const {
-    onClearIndicatorClick = SELECT_DEFAULT_PROPS.onClearIndicatorClick,
-    ...muiSelectProps
-  } = selectProps;
-  const { children, sx, value } = muiSelectProps;
-  const clearIndicator: JSX.Element | undefined =
-    String(value).length > 0 && onClearIndicatorClick ? (
-      <MUIInputAdornment position="end">
-        <MUIIconButton onClick={onClearIndicatorClick}>
-          <CloseIcon fontSize="small" />
-        </MUIIconButton>
-      </MUIInputAdornment>
-    ) : undefined;
-
-  const combinedSx = {
-    [`& .${muiSelectClasses.icon}`]: {
-      color: GREY,
-    },
+  const combinedSx = useMemo(
+    () => ({
+      [`& .${muiSelectClasses.icon}`]: {
+        color: GREY,
+      },
 
-    [`& .${muiInputAdornmentClasses.root}`]: {
-      marginRight: '.8em',
-    },
+      [`& .${muiInputAdornmentClasses.root}`]: {
+        marginRight: '.8em',
+      },
 
-    [`& .${muiIconButtonClasses.root}`]: {
-      color: GREY,
-      visibility: 'hidden',
-    },
+      [`& .${muiIconButtonClasses.root}`]: {
+        color: GREY,
+        visibility: 'hidden',
+      },
 
-    [`&:hover .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root},
+      [`&:hover .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root},
       &.${inputClasses.focused} .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root}`]:
-      {
-        visibility: 'visible',
-      },
+        {
+          visibility: 'visible',
+        },
+
+      ...selectSx,
+    }),
+    [selectSx],
+  );
 
-    ...sx,
-  };
+  const clearIndicatorElement = useMemo(
+    () =>
+      String(value).length > 0 &&
+      onClearIndicatorClick && (
+        <MUIInputAdornment position="end">
+          <MUIIconButton onClick={onClearIndicatorClick}>
+            <CloseIcon fontSize="small" />
+          </MUIIconButton>
+        </MUIInputAdornment>
+      ),
+    [onClearIndicatorClick, value],
+  );
 
   return (
     <MUISelect
-      {...{
-        endAdornment: clearIndicator,
-        ...muiSelectProps,
-        sx: combinedSx,
-      }}
-    >
-      {children}
-    </MUISelect>
+      endAdornment={clearIndicatorElement}
+      value={value}
+      {...restMuiSelectProps}
+      sx={combinedSx}
+    />
   );
 };
 
-Select.defaultProps = SELECT_DEFAULT_PROPS;
-
-export type { SelectProps };
-
 export default Select;

striker-ui/types/Select.d.ts

@@ -0,0 +1,5 @@
+type SelectOptionalProps = {
+  onClearIndicatorClick?: import('@mui/material').IconButtonProps['onClick'];
+};
+
+type SelectProps = import('@mui/material').SelectProps & SelectOptionalProps;