refactor(select): improve keyboard and events, split native to Select…

…Native

BREAKING CHANGE: Select props changed significantly, native is now the SelectNative component

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/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 }));