EuiSelect: converted to Typescript

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Updated `EuiNavDrawer` to accept React fragments ([#2710](https://github.com/elastic/eui/pull/2710))
 - Added `EuiFormFieldset` and `EuiFormLegend` components ([#2706](https://github.com/elastic/eui/pull/2706))
 - Adjusted colors of color blind viz palette ([#2686](https://github.com/elastic/eui/pull/2686))
+- Converted `EuiSelect` to Typescript ([#2694](https://github.com/elastic/eui/pull/2694))
 
 **Bug fixes**
 

src/components/form/select/__snapshots__/select.test.js.snap → src/components/form/select/__snapshots__/select.test.tsx.snap

@@ -120,23 +120,6 @@ exports[`EuiSelect props options are rendered 1`] = `
 </eui-form-control-layout>
 `;
 
-exports[`EuiSelect props readOnly is rendered 1`] = `
-<eui-form-control-layout
-  compressed="false"
-  fullwidth="false"
-  icon="[object Object]"
-  isloading="false"
-  readonly="true"
->
-  <eui-validatable-control>
-    <select
-      class="euiSelect"
-      readonly=""
-    />
-  </eui-validatable-control>
-</eui-form-control-layout>
-`;
-
 exports[`EuiSelect props value option is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"

src/components/form/select/select.test.js → src/components/form/select/select.test.tsx

@@ -52,12 +52,6 @@ describe('EuiSelect', () => {
       expect(component).toMatchSnapshot();
     });
 
-    test('readOnly is rendered', () => {
-      const component = render(<EuiSelect readOnly />);
-
-      expect(component).toMatchSnapshot();
-    });
-
     test('disabled options are rendered', () => {
       const component = render(
         <EuiSelect

src/components/form/select/select.js → src/components/form/select/select.tsx

@@ -1,31 +1,69 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  SelectHTMLAttributes,
+  OptionHTMLAttributes,
+  Ref,
+  FunctionComponent,
+} from 'react';
+import { CommonProps } from '../../common';
 import classNames from 'classnames';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from '../form_control_layout';
+import { EuiValidatableControl } from '../validatable_control';
+import { EuiFormControlLayoutIconsProps } from '../form_control_layout/form_control_layout_icons';
 
-import { EuiFormControlLayout } from '../form_control_layout';
+interface Option extends OptionHTMLAttributes<HTMLOptionElement> {
+  text: React.ReactNode;
+}
 
-import { EuiValidatableControl } from '../validatable_control';
+export type EuiSelectProps = SelectHTMLAttributes<HTMLSelectElement> &
+  CommonProps & {
+    options?: Option[];
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    isLoading?: boolean;
+
+    /**
+     * Simulates no selection by creating an empty, selected, hidden first option
+     */
+    hasNoInitialSelection?: boolean;
+    inputRef?: Ref<HTMLSelectElement>;
+
+    /**
+     * when `true` creates a shorter height input
+     */
+    compressed?: boolean;
+
+    /**
+     * Creates an input group with element(s) coming before select
+     */
+    prepend?: EuiFormControlLayoutProps['prepend'];
+    /**
+     * Creates an input group with element(s) coming after select
+     */
+    append?: EuiFormControlLayoutProps['append'];
+  };
 
-export const EuiSelect = ({
+export const EuiSelect: FunctionComponent<EuiSelectProps> = ({
   className,
-  options,
+  options = [],
   id,
   name,
   inputRef,
   isInvalid,
-  fullWidth,
-  isLoading,
-  hasNoInitialSelection,
+  fullWidth = false,
+  isLoading = false,
+  hasNoInitialSelection = false,
   defaultValue,
-  compressed,
+  compressed = false,
   value,
   prepend,
   append,
   onMouseUp,
-  readOnly,
   ...rest
 }) => {
-  const handleMouseUp = e => {
+  const handleMouseUp = (e: React.MouseEvent<HTMLSelectElement>) => {
     // Normalizes cross-browser mouse eventing by preventing propagation,
     // notably for use in conjunction with EuiOutsideClickDetector.
     // See https://github.com/elastic/eui/pull/1926 for full discussion on
@@ -61,7 +99,7 @@ export const EuiSelect = ({
     selectDefaultValue = defaultValue || '';
   }
 
-  const icon = {
+  const icon: EuiFormControlLayoutIconsProps['icon'] = {
     type: 'arrowDown',
     side: 'right',
   };
@@ -72,7 +110,6 @@ export const EuiSelect = ({
       fullWidth={fullWidth}
       isLoading={isLoading}
       compressed={compressed}
-      readOnly={readOnly}
       prepend={prepend}
       append={append}
       inputId={id}>
@@ -84,7 +121,6 @@ export const EuiSelect = ({
           ref={inputRef}
           defaultValue={selectDefaultValue}
           value={value}
-          readOnly={readOnly}
           onMouseUp={handleMouseUp}
           {...rest}>
           {emptyOptionNode}
@@ -101,49 +137,3 @@ export const EuiSelect = ({
     </EuiFormControlLayout>
   );
 };
-
-EuiSelect.propTypes = {
-  name: PropTypes.string,
-  id: PropTypes.string,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.node.isRequired,
-    })
-  ).isRequired,
-  isInvalid: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  isLoading: PropTypes.bool,
-
-  /**
-   * Simulates no selection by creating an empty, selected, hidden first option
-   */
-  hasNoInitialSelection: PropTypes.bool,
-  inputRef: PropTypes.func,
-  /**
-   * when `true` creates a shorter height input
-   */
-  compressed: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  /**
-   * Creates an input group with element(s) coming before select
-   */
-  prepend: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-  ]),
-  /**
-   * Creates an input group with element(s) coming after select
-   */
-  append: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-  ]),
-};
-
-EuiSelect.defaultProps = {
-  options: [],
-  fullWidth: false,
-  isLoading: false,
-  hasNoInitialSelection: false,
-  compressed: false,
-};