From 2739b0fb964c5e1b48775e89bc7f602708fccd54 Mon Sep 17 00:00:00 2001
From: Shingo Yamazaki <shingoyamazaki00@gmail.com>
Date: Tue, 27 Aug 2019 23:55:23 +0900
Subject: [PATCH 1/6] #289 Select: mv .js -> .tsx

---
 src/scripts/{Select.js => Select.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/scripts/{Select.js => Select.tsx} (100%)

diff --git a/src/scripts/Select.js b/src/scripts/Select.tsx
similarity index 100%
rename from src/scripts/Select.js
rename to src/scripts/Select.tsx

From 66b7ce4831f29ec734e02397fe192426486754ee Mon Sep 17 00:00:00 2001
From: Shingo Yamazaki <shingoyamazaki00@gmail.com>
Date: Wed, 28 Aug 2019 00:22:29 +0900
Subject: [PATCH 2/6] #289 Select: Convert PropTypes to TypeScript types

---
 src/scripts/Select.tsx | 57 +++++++++++++++++++-----------------------
 1 file changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/scripts/Select.tsx b/src/scripts/Select.tsx
index b9fe23cd8..216f9a485 100644
--- a/src/scripts/Select.tsx
+++ b/src/scripts/Select.tsx
@@ -1,16 +1,32 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { FormElement } from './FormElement';
+import { FormElement, FormElementProps } from './FormElement';
 import { uuid } from './util';
 
-export default class Select extends Component {
-  constructor() {
-    super();
+export type SelectProps = {
+  id?: string;
+  className?: string;
+  label?: string;
+  required?: boolean;
+  totalCols?: number;
+  cols?: number;
+  error?: FormElementProps['error'];
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+} & React.SelectHTMLAttributes<HTMLSelectElement>;
+
+export type SelectState = {
+  id: string;
+};
+
+export default class Select extends Component<SelectProps, SelectState> {
+  static isFormElement = true;
+
+  constructor(props: Readonly<SelectProps>) {
+    super(props);
     this.state = { id: `form-element-${uuid()}` };
   }
 
-  onChange(e) {
+  onChange(e: React.ChangeEvent<HTMLSelectElement>) {
     const { value } = e.target;
     if (this.props.onChange) {
       this.props.onChange(e, value);
@@ -44,32 +60,11 @@ export default class Select extends Component {
   }
 }
 
-Select.propTypes = {
-  id: PropTypes.string,
-  className: PropTypes.string,
-  label: PropTypes.string,
-  required: PropTypes.bool,
-  totalCols: PropTypes.number,
-  cols: PropTypes.number,
-  // FormElement.propTypes.error
-  error: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.string,
-    PropTypes.shape({
-      message: PropTypes.string,
-    }),
-  ]),
-  onChange: PropTypes.func,
-};
-
-Select.isFormElement = true;
+export type OptionProps = {
+  label: string | number;
+} & React.OptionHTMLAttributes<HTMLOptionElement>;
 
-export const Option = (props) => {
+export const Option: React.FC<OptionProps> = (props) => {
   const { label, children, ...pprops } = props;
   return <option {...pprops}>{label || children}</option>;
 };
-
-Option.propTypes = {
-  children: PropTypes.node,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};

From adf5f5b6fe3ddf16b19368e274dcb2dbcf4818a5 Mon Sep 17 00:00:00 2001
From: Shingo Yamazaki <shingoyamazaki00@gmail.com>
Date: Wed, 28 Aug 2019 00:22:50 +0900
Subject: [PATCH 3/6] #289 Select: mv story .js -> .tsx

---
 stories/{SelectStories.js => SelectStories.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename stories/{SelectStories.js => SelectStories.tsx} (100%)

diff --git a/stories/SelectStories.js b/stories/SelectStories.tsx
similarity index 100%
rename from stories/SelectStories.js
rename to stories/SelectStories.tsx

From f821bef0632720daa964c017d0d4d6c9ad106805 Mon Sep 17 00:00:00 2001
From: Shingo Yamazaki <shingoyamazaki00@gmail.com>
Date: Wed, 28 Aug 2019 00:36:56 +0900
Subject: [PATCH 4/6] #289 Select: Fix type errors of story

---
 stories/SelectStories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/stories/SelectStories.tsx b/stories/SelectStories.tsx
index c027af4c9..2067582ea 100644
--- a/stories/SelectStories.tsx
+++ b/stories/SelectStories.tsx
@@ -10,10 +10,10 @@ storiesOf('Select', module)
     () => (
       <Select
         label={text('label', 'Select Label')}
-        error={text('error')}
-        required={boolean('required')}
-        value={text('value')}
-        disabled={boolean('disabled')}
+        error={text('error', '')}
+        required={boolean('required', false)}
+        value={text('value', '')}
+        disabled={boolean('disabled', false)}
         onChange={action('change')}
         onBlur={action('blur')}
       >

From 8d5b98e6c40d5e117f635d8645f44a7cebb8ad3a Mon Sep 17 00:00:00 2001
From: Shingo Yamazaki <shingoyamazaki00@gmail.com>
Date: Wed, 28 Aug 2019 00:39:17 +0900
Subject: [PATCH 5/6] #289 Select: Update storyshots

---
 test/storyshots/__snapshots__/storyshots.test.js.snap | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/storyshots/__snapshots__/storyshots.test.js.snap b/test/storyshots/__snapshots__/storyshots.test.js.snap
index 2a765430b..14b933821 100644
--- a/test/storyshots/__snapshots__/storyshots.test.js.snap
+++ b/test/storyshots/__snapshots__/storyshots.test.js.snap
@@ -39371,9 +39371,11 @@ exports[`Storyshots Select Controlled with knobs 1`] = `
         >
           <select
             className="slds-select"
+            disabled={false}
             id="form-element-$uuid$"
             onBlur={[Function]}
             onChange={[Function]}
+            value=""
           >
             <option
               value="1"

From 521316cd7dec1939d347f3da4a4bffe5a3bfa903 Mon Sep 17 00:00:00 2001
From: Shingo Yamazaki <shingoyamazaki00@gmail.com>
Date: Wed, 28 Aug 2019 00:42:41 +0900
Subject: [PATCH 6/6] #289 Select: Quit default export

---
 src/scripts/Datepicker.js | 2 +-
 src/scripts/Select.tsx    | 2 +-
 src/scripts/index.js      | 4 +---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Datepicker.js b/src/scripts/Datepicker.js
index 095c0ce19..9c595e4d5 100644
--- a/src/scripts/Datepicker.js
+++ b/src/scripts/Datepicker.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import moment from 'moment';
 import { Button } from './Button';
-import Select, { Option } from './Select';
+import { Select, Option } from './Select';
 import { getToday, isElInChildren } from './util';
 
 function createCalendarObject(date, mnDate, mxDate) {
diff --git a/src/scripts/Select.tsx b/src/scripts/Select.tsx
index 216f9a485..dc741c6a9 100644
--- a/src/scripts/Select.tsx
+++ b/src/scripts/Select.tsx
@@ -18,7 +18,7 @@ export type SelectState = {
   id: string;
 };
 
-export default class Select extends Component<SelectProps, SelectState> {
+export class Select extends Component<SelectProps, SelectState> {
   static isFormElement = true;
 
   constructor(props: Readonly<SelectProps>) {
diff --git a/src/scripts/index.js b/src/scripts/index.js
index fbe1f0e6b..dffc4cd08 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -5,7 +5,6 @@ import Datepicker from './Datepicker';
 import Tabs, { Tab } from './Tabs';
 import SalesPath from './SalesPath';
 import Modal, { ModalHeader, ModalContent, ModalFooter } from './Modal';
-import Select, { Option } from './Select';
 import DateInput from './DateInput';
 import Grid, { Row, Col } from './Grid';
 import Notification, { Alert, Toast } from './Notification';
@@ -39,8 +38,6 @@ export {
   ModalContent,
   ModalFooter,
   SalesPath,
-  Select,
-  Option,
   DateInput,
   Grid,
   Row,
@@ -73,6 +70,7 @@ export * from './ButtonGroup';
 export * from './Container';
 export * from './Checkbox';
 export * from './CheckboxGroup';
+export * from './Select';
 export * from './DropdownMenu';
 export * from './DropdownButton';
 export * from './Icon';