refactor(select): improve keyboard and events

jest.config.js

@@ -1,13 +1,12 @@
 module.exports = {
   globals: {
-    extensionsToTreatAsEsm: ['.js'],
     'ts-jest': {
       diagnostics: false,
-      isolatedModules: true,
-      useESM: true
+      isolatedModules: true
     }
   },
-  preset: 'ts-jest/presets/js-with-ts-esm',
+  coverageReporters: ['text', 'html'],
+  preset: 'ts-jest/presets/default-esm',
   setupFilesAfterEnv: ['<rootDir>/test/setup-test.ts'],
   testEnvironment: 'jsdom'
 };

package.json

@@ -33,7 +33,7 @@
     "access": "public"
   },
   "scripts": {
-    "start": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9009",
+    "start": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9009 --no-open",
     "build:storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -o ./storybook",
     "build": "rm -rf dist && yarn run build:prod",
     "build:dev": "cross-env NODE_ENV=development rollup -c",
@@ -82,6 +82,7 @@
     "@storybook/react": "6.5.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^28.1.6",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",

src/Checkbox/Checkbox.tsx

@@ -207,8 +207,10 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     ref
   ) => {
     const [state, setState] = useControlledOrUncontrolled({
-      value: checked,
-      defaultValue: defaultChecked
+      defaultValue: defaultChecked,
+      onChange,
+      readOnly: otherProps.readOnly ?? disabled,
+      value: checked
     });
 
     const handleChange = useCallback(

src/ColorInput/ColorInput.tsx

@@ -128,8 +128,10 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
     ref
   ) => {
     const [valueDerived, setValueState] = useControlledOrUncontrolled({
-      value,
-      defaultValue
+      defaultValue,
+      onChange,
+      readOnly: otherProps.readOnly ?? disabled,
+      value
     });
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/DatePicker/DatePicker.tsx

@@ -5,7 +5,6 @@ import { Button } from '../Button/Button';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { ScrollView } from '../ScrollView/ScrollView';
 import { Select } from '../Select/Select';
-import { SelectChangeEvent } from '../Select/Select.types';
 import { Toolbar } from '../Toolbar/Toolbar';
 import { Window, WindowContent, WindowHeader } from '../Window/Window';
 
@@ -101,9 +100,12 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const [date, setDate] = useState(() => convertDateToState(initialDate));
     const { year, month, day } = date;
 
-    const handleMonthSelect = useCallback((e: SelectChangeEvent<number>) => {
-      setDate(currentDate => ({ ...currentDate, month: e.target.value }));
-    }, []);
+    const handleMonthSelect = useCallback(
+      ({ value: monthSelected }: { value: number }) => {
+        setDate(currentDate => ({ ...currentDate, month: monthSelected }));
+      },
+      []
+    );
 
     const handleYearSelect = useCallback((yearSelected: number) => {
       setDate(currentDate => ({ ...currentDate, year: yearSelected }));

src/NumberInput/NumberInput.tsx

@@ -14,6 +14,7 @@ type NumberInputProps = {
   disabled?: boolean;
   max?: number;
   min?: number;
+  readOnly?: boolean;
   step?: number;
   onChange?: (newValue: number) => void;
   style?: React.CSSProperties;
@@ -105,6 +106,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       max,
       min,
       onChange,
+      readOnly,
       step = 1,
       style,
       value,
@@ -114,8 +116,10 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     ref
   ) => {
     const [valueDerived, setValueState] = useControlledOrUncontrolled({
-      value,
-      defaultValue
+      defaultValue,
+      onChange,
+      readOnly,
+      value
     });
 
     const handleInputChange = useCallback(
@@ -169,6 +173,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           onChange={handleInputChange}
           disabled={disabled}
           type='number'
+          readOnly={readOnly}
           ref={ref}
           fullWidth
           onBlur={onBlur}
@@ -177,15 +182,15 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           <StyledButton
             data-testid='increment'
             variant={variant}
-            disabled={disabled}
+            disabled={disabled || readOnly}
             onClick={stepUp}
           >
             <StyledButtonIcon invert />
           </StyledButton>
           <StyledButton
             data-testid='decrement'
             variant={variant}
-            disabled={disabled}
+            disabled={disabled || readOnly}
             onClick={stepDown}
           >
             <StyledButtonIcon />