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

striker-ui/components/OutlinedLabeledInputWithSelect.tsx

@@ -12,7 +12,7 @@ import { MessageBoxProps } from './MessageBox';
 import OutlinedInputWithLabel, {
   OutlinedInputWithLabelProps,
 } from './OutlinedInputWithLabel';
-import SelectWithLabel, { SelectWithLabelProps } from './SelectWithLabel';
+import SelectWithLabel from './SelectWithLabel';
 
 type OutlinedLabeledInputWithSelectOptionalProps = {
   inputWithLabelProps?: Partial<OutlinedInputWithLabelProps>;
@@ -66,19 +66,11 @@ const OutlinedLabeledInputWithSelect: FC<
         },
       }}
     >
-      <OutlinedInputWithLabel
+      <OutlinedInputWithLabel id={id} label={label} {...inputWithLabelProps} />
-        {...{
-          id,
-          label,
-          ...inputWithLabelProps,
-        }}
-      />
       <SelectWithLabel
-        {...{
+        id={`${id}-nested-select`}
-          id: `${id}-nested-select`,
+        selectItems={selectItems}
-          selectItems,
+        {...selectWithLabelProps}
-          ...selectWithLabelProps,
-        }}
       />
     </Box>
     <InputMessageBox {...messageBoxProps} />

striker-ui/components/SelectWithLabel.tsx

@@ -1,48 +1,15 @@
-import { FC, useCallback, useMemo } from 'react';
 import {
   Checkbox as MUICheckbox,
   FormControl as MUIFormControl,
   selectClasses as muiSelectClasses,
 } from '@mui/material';
+import { FC, useCallback, useMemo } from 'react';
 
 import InputMessageBox from './InputMessageBox';
 import MenuItem from './MenuItem';
-import { MessageBoxProps } from './MessageBox';
 import OutlinedInput from './OutlinedInput';
-import OutlinedInputLabel, {
+import OutlinedInputLabel from './OutlinedInputLabel';
-  OutlinedInputLabelProps,
+import Select from './Select';
-} from './OutlinedInputLabel';
-import Select, { SelectProps } from './Select';
-
-type SelectWithLabelOptionalProps = {
-  checkItem?: ((value: string) => boolean) | null;
-  disableItem?: ((value: string) => boolean) | null;
-  hideItem?: ((value: string) => boolean) | null;
-  isCheckableItems?: boolean;
-  isReadOnly?: boolean;
-  inputLabelProps?: Partial<OutlinedInputLabelProps>;
-  label?: string | null;
-  messageBoxProps?: Partial<MessageBoxProps>;
-  selectProps?: Partial<SelectProps>;
-};
-
-type SelectWithLabelProps = SelectWithLabelOptionalProps & {
-  id: string;
-  selectItems: Array<SelectItem | string>;
-};
-
-const SELECT_WITH_LABEL_DEFAULT_PROPS: Required<SelectWithLabelOptionalProps> =
-  {
-    checkItem: null,
-    disableItem: null,
-    hideItem: null,
-    isReadOnly: false,
-    isCheckableItems: false,
-    inputLabelProps: {},
-    label: null,
-    messageBoxProps: {},
-    selectProps: {},
-  };
 
 const SelectWithLabel: FC<SelectWithLabelProps> = ({
   id,
@@ -51,14 +18,19 @@ const SelectWithLabel: FC<SelectWithLabelProps> = ({
   checkItem,
   disableItem,
   hideItem,
-  inputLabelProps,
+  inputLabelProps = {},
-  isReadOnly,
+  isReadOnly = false,
-  messageBoxProps,
+  messageBoxProps = {},
-  selectProps = {},
+  onChange,
-  isCheckableItems = selectProps?.multiple,
+  selectProps: {
+    multiple: selectMultiple,
+    sx: selectSx,
+    ...restSelectProps
+  } = {},
+  value: selectValue,
+  // Props with initial value that depend on others.
+  isCheckableItems = selectMultiple,
 }) => {
-  const { sx: selectSx } = selectProps;
-
   const combinedSx = useMemo(
     () =>
       isReadOnly
@@ -124,8 +96,11 @@ const SelectWithLabel: FC<SelectWithLabelProps> = ({
       <Select
         id={id}
         input={inputElement}
+        multiple={selectMultiple}
+        onChange={onChange}
         readOnly={isReadOnly}
-        {...selectProps}
+        value={selectValue}
+        {...restSelectProps}
         sx={combinedSx}
       >
         {menuItemElements}
@@ -135,8 +110,4 @@ const SelectWithLabel: FC<SelectWithLabelProps> = ({
   );
 };
 
-SelectWithLabel.defaultProps = SELECT_WITH_LABEL_DEFAULT_PROPS;
-
-export type { SelectWithLabelProps };
-
 export default SelectWithLabel;

striker-ui/types/SelectWithLabel.d.ts

@@ -5,3 +5,25 @@ type SelectItem<
   displayValue?: DisplayValueType;
   value: ValueType;
 };
+
+type OperateSelectItemFunction = (value: string) => boolean;
+
+type SelectWithLabelOptionalProps = {
+  checkItem?: OperateSelectItemFunction;
+  disableItem?: OperateSelectItemFunction;
+  hideItem?: OperateSelectItemFunction;
+  isCheckableItems?: boolean;
+  isReadOnly?: boolean;
+  inputLabelProps?: Partial<
+    import('../components/OutlinedInputLabel').OutlinedInputLabelProps
+  >;
+  label?: string;
+  messageBoxProps?: Partial<import('../components/MessageBox').MessageBoxProps>;
+  selectProps?: Partial<SelectProps>;
+};
+
+type SelectWithLabelProps = SelectWithLabelOptionalProps &
+  Pick<SelectProps, 'onChange' | 'value'> & {
+    id: string;
+    selectItems: Array<SelectItem | string>;
+  };