fix(striker-ui): make InputWithRef compatible with Switch

striker-ui/components/InputWithRef.tsx

@@ -20,17 +20,19 @@ type InputWithRefOptionalPropsWithDefault<
 > = {
   createInputOnChangeHandlerOptions?: CreateInputOnChangeHandlerOptions<TypeName>;
   required?: boolean;
-  valueKey?: string;
   valueType?: TypeName;
 };
-type InputWithRefOptionalPropsWithoutDefault = {
+type InputWithRefOptionalPropsWithoutDefault<
+  TypeName extends keyof MapToInputType,
+> = {
   inputTestBatch?: InputTestBatch;
   onFirstRender?: (args: { isRequired: boolean }) => void;
+  valueKey?: CreateInputOnChangeHandlerOptions<TypeName>['valueKey'];
 };
 
 type InputWithRefOptionalProps<TypeName extends keyof MapToInputType> =
   InputWithRefOptionalPropsWithDefault<TypeName> &
-    InputWithRefOptionalPropsWithoutDefault;
+    InputWithRefOptionalPropsWithoutDefault<TypeName>;
 
 type InputWithRefProps<
   TypeName extends keyof MapToInputType,
@@ -48,6 +50,7 @@ type InputForwardedRefContent<TypeName extends keyof MapToInputType> = {
 
 const INPUT_TEST_ID = 'input';
 const MAP_TO_INITIAL_VALUE: MapToInputType = {
+  boolean: false,
   number: 0,
   string: '',
 };
@@ -55,38 +58,44 @@ const MAP_TO_INITIAL_VALUE: MapToInputType = {
 const INPUT_WITH_REF_DEFAULT_PROPS: Required<
   InputWithRefOptionalPropsWithDefault<'string'>
 > &
-  InputWithRefOptionalPropsWithoutDefault = {
+  InputWithRefOptionalPropsWithoutDefault<'string'> = {
   createInputOnChangeHandlerOptions: {},
   required: false,
-  valueKey: 'value',
   valueType: 'string',
 };
 
 const InputWithRef = forwardRef(
   <TypeName extends keyof MapToInputType, InputComponent extends ReactElement>(
     {
-      createInputOnChangeHandlerOptions: {
-        postSet: postSetAppend,
-        ...restCreateInputOnChangeHandlerOptions
-      } = INPUT_WITH_REF_DEFAULT_PROPS.createInputOnChangeHandlerOptions as CreateInputOnChangeHandlerOptions<TypeName>,
       input,
       inputTestBatch,
       onFirstRender,
       required: isRequired = INPUT_WITH_REF_DEFAULT_PROPS.required,
-      valueKey = INPUT_WITH_REF_DEFAULT_PROPS.valueKey,
+      valueKey,
       valueType = INPUT_WITH_REF_DEFAULT_PROPS.valueType as TypeName,
+      // Props with initial value that depend on others.
+      createInputOnChangeHandlerOptions: {
+        postSet: postSetAppend,
+        valueKey: onChangeValueKey = valueKey,
+        ...restCreateInputOnChangeHandlerOptions
+      } = INPUT_WITH_REF_DEFAULT_PROPS.createInputOnChangeHandlerOptions as CreateInputOnChangeHandlerOptions<TypeName>,
     }: InputWithRefProps<TypeName, InputComponent>,
     ref: ForwardedRef<InputForwardedRefContent<TypeName>>,
   ) => {
+    const { props: inputProps } = input;
+
+    const vKey = useMemo(
+      () => onChangeValueKey ?? ('checked' in inputProps ? 'checked' : 'value'),
+      [inputProps, onChangeValueKey],
+    );
+
     const {
-      props: {
+      onBlur: initOnBlur,
-        onBlur: initOnBlur,
+      onChange: initOnChange,
-        onChange: initOnChange,
+      onFocus: initOnFocus,
-        onFocus: initOnFocus,
+      [vKey]: initValue = MAP_TO_INITIAL_VALUE[valueType],
-        value: initValue = MAP_TO_INITIAL_VALUE[valueType],
+      ...restInitProps
-        ...restInitProps
+    } = inputProps;
-      },
-    } = input;
 
     const isFirstRender = useIsFirstRender();
 
@@ -136,6 +145,7 @@ const InputWithRef = forwardRef(
           },
           set: setValue,
           setType: valueType,
+          valueKey: vKey,
           ...restCreateInputOnChangeHandlerOptions,
         }),
       [
@@ -143,6 +153,7 @@ const InputWithRef = forwardRef(
         postSetAppend,
         restCreateInputOnChangeHandlerOptions,
         setValue,
+        vKey,
         valueType,
       ],
     );
@@ -179,7 +190,7 @@ const InputWithRef = forwardRef(
       onChange,
       onFocus,
       required: isRequired,
-      [valueKey]: inputValue,
+      [vKey]: inputValue,
     });
   },
 );

striker-ui/lib/createInputOnChangeHandler.ts

@@ -1,4 +1,4 @@
-import { InputProps as MUIInputProps } from '@mui/material';
+import { ChangeEventHandler } from 'react';
 
 import MAP_TO_VALUE_CONVERTER from './consts/MAP_TO_VALUE_CONVERTER';
 
@@ -8,10 +8,11 @@ const createInputOnChangeHandler =
     preSet,
     set,
     setType = 'string' as TypeName,
-  }: CreateInputOnChangeHandlerOptions<TypeName> = {}): MUIInputProps['onChange'] =>
+    valueKey = 'value',
+  }: CreateInputOnChangeHandlerOptions<TypeName> = {}): ChangeEventHandler<HTMLInputElement> =>
   (event) => {
     const {
-      target: { value },
+      target: { [valueKey]: value },
     } = event;
     const postConvertValue = MAP_TO_VALUE_CONVERTER[setType](
       value,

striker-ui/types/CreateInputOnChangeHandlerFunction.d.ts

@@ -1,4 +1,4 @@
-type MapToInputType = Pick<MapToType, 'number' | 'string'>;
+type MapToInputType = Pick<MapToType, 'boolean' | 'number' | 'string'>;
 
 type InputOnChangeParameters = Parameters<
   Exclude<import('@mui/material').InputBaseProps['onChange'], undefined>
@@ -12,4 +12,8 @@ type CreateInputOnChangeHandlerOptions<TypeName extends keyof MapToInputType> =
     preSet?: (...args: InputOnChangeParameters) => void;
     set?: StateSetter;
     setType?: TypeName;
+    valueKey?: Extract<
+      keyof import('react').ChangeEvent<HTMLInputElement>['target'],
+      'checked' | 'value'
+    >;
   };