From 6f9afe3b569b7aa75b8b550b6494487e545b4d89 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 25 Feb 2019 09:39:12 -0700 Subject: [PATCH] Upgrade typescript, react, jest, & enzyme (#1583) * upgrade to typescript v3, add it as a peerdep to enforce downstream project support * upgrade to typescript v3, add it as a peerdep to enforce downstream project support * Change popover positioning's align type to use undefined instead of null * Upgrade @types/react and @types/prop-types versions * Update TSX files to move default prop values in function signature; upgrade React & ReactDOM to 16.8, upgrade enzyme & related libs to latest * Upgrade jest version * Update render_to_html to latest enzyme adapter * Handle relative import statements in eui.d.ts * SFC -> FunctionComponent * Don't track and pass a name value in context example's state * Some PR feedback * changelog --- CHANGELOG.md | 7 +- package.json | 26 +- scripts/dtsgenerator.js | 31 +- scripts/jest/setup/enzyme.js | 2 +- .../src/services/string/render_to_html.js | 2 +- src-docs/src/views/context/context.js | 2 - .../accessibility/screen_reader.tsx | 8 +- src/components/avatar/index.d.ts | 4 +- src/components/badge/index.d.ts | 6 +- .../notification_badge/badge_notification.tsx | 10 +- .../__snapshots__/basic_table.test.js.snap | 2501 ++++++++--------- .../custom_item_action.test.js.snap | 7 +- src/components/button/index.d.ts | 12 +- src/components/call_out/index.d.ts | 4 +- src/components/code/index.d.ts | 6 +- .../color_picker_empty_swatch.tsx | 4 +- .../color_picker/color_picker_swatch.tsx | 10 +- .../combo_box_title.tsx | 4 +- src/components/combo_box/index.d.ts | 6 +- src/components/common.ts | 10 +- src/components/context/context.tsx | 7 +- src/components/context_menu/index.d.ts | 8 +- .../__snapshots__/quick_select.test.js.snap | 10 +- .../quick_select_popover.test.js.snap | 84 +- src/components/delay_hide/delay_hide.tsx | 11 +- src/components/empty_prompt/index.d.ts | 4 +- src/components/expression/expression.tsx | 18 +- src/components/flex/index.d.ts | 8 +- src/components/flyout/index.d.ts | 8 +- src/components/form/checkbox/index.d.ts | 6 +- src/components/form/field_number/index.d.ts | 4 +- src/components/form/field_password/index.d.ts | 4 +- src/components/form/field_search/index.d.ts | 4 +- src/components/form/field_text/index.d.ts | 4 +- src/components/form/form_help_text/index.d.ts | 4 +- src/components/form/form_label/index.d.ts | 4 +- src/components/form/form_row/index.d.ts | 4 +- src/components/form/index.d.ts | 4 +- src/components/form/radio/index.d.ts | 6 +- src/components/form/range/index.d.ts | 6 +- src/components/form/select/index.d.ts | 4 +- .../__snapshots__/super_select.test.js.snap | 1 - src/components/form/switch/index.d.ts | 4 +- src/components/form/text_area/index.d.ts | 4 +- src/components/health/index.d.ts | 4 +- .../horizontal_rule/horizontal_rule.tsx | 15 +- .../i18n/__snapshots__/i18n.test.tsx.snap | 10 +- src/components/i18n/i18n.tsx | 6 +- src/components/i18n/i18n_number.tsx | 2 +- src/components/icon/icon.tsx | 8 +- src/components/key_pad_menu/index.d.ts | 8 +- src/components/link/index.d.ts | 4 +- src/components/list_group/index.d.ts | 4 +- src/components/loading/index.d.ts | 8 +- src/components/modal/index.d.ts | 14 +- .../observer/mutation_observer/index.d.ts | 4 +- .../observer/resize_observer/index.d.ts | 4 +- src/components/overlay_mask/index.d.ts | 4 +- src/components/page/index.d.ts | 20 +- src/components/pagination/index.d.ts | 6 +- src/components/panel/index.d.ts | 4 +- src/components/popover/index.d.ts | 6 +- .../portal/__snapshots__/portal.test.js.snap | 12 +- src/components/portal/index.d.ts | 4 +- src/components/portal/portal.test.js | 9 +- src/components/progress/index.d.ts | 4 +- .../__snapshots__/search_filters.test.js.snap | 120 +- src/components/spacer/spacer.tsx | 14 +- src/components/steps/index.d.ts | 10 +- src/components/table/index.d.ts | 20 +- .../table/table_pagination/index.d.ts | 4 +- src/components/tabs/index.d.ts | 8 +- src/components/text/index.d.ts | 8 +- src/components/title/index.d.ts | 4 +- src/components/toast/index.d.ts | 6 +- src/components/token/index.d.ts | 4 +- src/components/tool_tip/index.d.ts | 6 +- src/services/popover/popover_positioning.ts | 20 +- yarn.lock | 1574 ++++++----- 79 files changed, 2423 insertions(+), 2418 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b5a9afb76d0..4dca5aa9388 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,11 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `7.3.0`. +**Breaking changes** + +- Upgraded TypeScript to 3.3 ([#1583](https://github.com/elastic/eui/pull/1583)) +- Upgraded React to 16.8 ([#1583](https://github.com/elastic/eui/pull/1583)) +- Upgraded Jest to 24.1 ([#1583](https://github.com/elastic/eui/pull/1583)) +- Upgraded Enzyme to 3.9 ([#1583](https://github.com/elastic/eui/pull/1583)) ## [`7.3.0`](https://github.com/elastic/eui/tree/v7.3.0) diff --git a/package.json b/package.json index ccb405ef09a..3ce2d9f56bc 100644 --- a/package.json +++ b/package.json @@ -77,8 +77,8 @@ "@elastic/eslint-config-kibana": "^0.15.0", "@types/classnames": "^2.2.6", "@types/enzyme": "^3.1.13", - "@types/jest": "^23.3.9", - "@types/react": "^16.3.0", + "@types/jest": "^24.0.6", + "@types/react": "^16.8.4", "@types/react-datepicker": "1.8.0", "@types/react-is": "~16.3.0", "@types/react-virtualized": "^9.18.6", @@ -86,7 +86,7 @@ "autoprefixer": "^7.1.5", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^8.0.1", - "babel-jest": "^23.6.0", + "babel-jest": "^24.1.0", "babel-loader": "^8.0.4", "babel-plugin-add-module-exports": "^1.0.0", "babel-plugin-inline-react-svg": "^1.0.1", @@ -102,8 +102,8 @@ "css-loader": "^0.28.7", "cssnano": "^4.0.5", "dts-generator": "^2.1.0", - "enzyme": "^3.1.0", - "enzyme-adapter-react-16.3": "^1.4.1", + "enzyme": "^3.9.0", + "enzyme-adapter-react-16": "^1.9.1", "enzyme-to-json": "^3.3.0", "eslint": "^4.9.0", "eslint-config-prettier": "^2.9.0", @@ -123,8 +123,8 @@ "geckodriver": "^1.11.0", "glob": "^7.1.2", "html-webpack-plugin": "^3.2.0", - "jest": "^23.6.0", - "jest-cli": "^23.6.0", + "jest": "^24.1.0", + "jest-cli": "^24.1.0", "jquery": "^3.2.1", "markdown-it": "8.4.1", "mocha": "^5.0.4", @@ -141,8 +141,8 @@ "prompt": "^1.0.0", "prop-types": "^15.6.0", "raw-loader": "^0.5.1", - "react": "^16.3.0", - "react-dom": "^16.3.0", + "react": "^16.8.0", + "react-dom": "^16.8.0", "react-redux": "^5.0.6", "react-router": "^3.2.0", "react-router-redux": "^4.0.8", @@ -164,7 +164,7 @@ "tslint": "^5.11.0", "tslint-config-prettier": "^1.18.0", "tslint-plugin-prettier": "^2.0.1", - "typescript": "^2.9.2", + "typescript": "^3.3.3", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.0.1", "wdio-chromedriver-service": "^0.1.2", @@ -182,9 +182,11 @@ }, "peerDependencies": { "@elastic/datemath": "^5.0.2", + "@types/react": "^16.8.0", "moment": "^2.13.0", "prop-types": "^15.5.0", - "react": "^16.3", - "react-dom": "^16.3" + "react": "^16.8", + "react-dom": "^16.8", + "typescript": "^3.3.0" } } diff --git a/scripts/dtsgenerator.js b/scripts/dtsgenerator.js index 23980916ab5..927ffcf4cbf 100644 --- a/scripts/dtsgenerator.js +++ b/scripts/dtsgenerator.js @@ -78,14 +78,41 @@ const generator = dtsGenerator({ }, }); +// NOTE: once EUI is all converted to typescript this madness can be deleted forever // 1. strip any `/// { const defsFilePath = path.resolve(baseDir, 'eui.d.ts'); + fs.writeFileSync( defsFilePath, fs.readFileSync(defsFilePath).toString() .replace(/\/\/\/\W+ { + // `moduleName` is the namespace for this ambient module + return module.replace( + // replace relative imports by attaching them to the module's namespace + /import\("([.]{1,2}\/.*?)"\)/g, + (importStatement, importPath) => { + const target = path.join( + path.dirname(moduleName), + importPath + ); + return `import ("${target}")`; + } + ); + } + ) // end 3. ); }); diff --git a/scripts/jest/setup/enzyme.js b/scripts/jest/setup/enzyme.js index 7c4def46489..82edfc9e5ad 100644 --- a/scripts/jest/setup/enzyme.js +++ b/scripts/jest/setup/enzyme.js @@ -1,4 +1,4 @@ import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16.3'; +import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() }); diff --git a/src-docs/src/services/string/render_to_html.js b/src-docs/src/services/string/render_to_html.js index f632809b77b..1cd47b401c0 100644 --- a/src-docs/src/services/string/render_to_html.js +++ b/src-docs/src/services/string/render_to_html.js @@ -5,7 +5,7 @@ import { configure } from 'enzyme'; -import EnzymeAdapter from 'enzyme-adapter-react-16.3'; +import EnzymeAdapter from 'enzyme-adapter-react-16'; import html from 'html'; diff --git a/src-docs/src/views/context/context.js b/src-docs/src/views/context/context.js index 28851cb7a80..dc7ef1ce825 100644 --- a/src-docs/src/views/context/context.js +++ b/src-docs/src/views/context/context.js @@ -27,7 +27,6 @@ const mappings = { export default class extends Component { state = { language: 'en', - name: '' } setLanguage = (language) => this.setState({ language }) @@ -76,7 +75,6 @@ export default class extends Component { {placeholder => ( )} diff --git a/src/components/accessibility/screen_reader.tsx b/src/components/accessibility/screen_reader.tsx index 173f86256e5..437d8d5a5a0 100644 --- a/src/components/accessibility/screen_reader.tsx +++ b/src/components/accessibility/screen_reader.tsx @@ -1,13 +1,13 @@ -import { cloneElement, ReactElement, SFC } from 'react'; +import { cloneElement, ReactElement, FunctionComponent } from 'react'; import classNames from 'classnames'; export interface EuiScreenReaderOnlyProps { children: ReactElement; } -export const EuiScreenReaderOnly: SFC = ({ - children, -}) => { +export const EuiScreenReaderOnly: FunctionComponent< + EuiScreenReaderOnlyProps +> = ({ children }) => { const classes = classNames('euiScreenReaderOnly', children.props.className); const props = { diff --git a/src/components/avatar/index.d.ts b/src/components/avatar/index.d.ts index 905fbd1ca13..088d0b82c4f 100644 --- a/src/components/avatar/index.d.ts +++ b/src/components/avatar/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../common'; -import { HTMLAttributes, SFC } from 'react'; +import { HTMLAttributes, FunctionComponent } from 'react'; declare module '@elastic/eui' { @@ -19,7 +19,7 @@ declare module '@elastic/eui' { type?: AvatarType; } - export const EuiAvatar: SFC< + export const EuiAvatar: FunctionComponent< CommonProps & HTMLAttributes & EuiAvatarProps >; } diff --git a/src/components/badge/index.d.ts b/src/components/badge/index.d.ts index fad1e03fab8..f966ef9f003 100644 --- a/src/components/badge/index.d.ts +++ b/src/components/badge/index.d.ts @@ -1,7 +1,7 @@ import { IconType } from '../icon' /// -import { HTMLAttributes, MouseEventHandler, SFC, ReactNode } from 'react'; +import { HTMLAttributes, MouseEventHandler, FunctionComponent, ReactNode } from 'react'; import { CommonProps } from '../common'; declare module '@elastic/eui' { @@ -19,7 +19,7 @@ declare module '@elastic/eui' { closeButtonProps?: object; } - export const EuiBadge: SFC< + export const EuiBadge: FunctionComponent< CommonProps & HTMLAttributes & HTMLAttributes & EuiBadgeProps >; @@ -31,7 +31,7 @@ declare module '@elastic/eui' { title?: string; } - export const EuiBetaBadge: SFC< + export const EuiBetaBadge: FunctionComponent< CommonProps & HTMLAttributes & EuiBetaBadgeProps >; } diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/src/components/badge/notification_badge/badge_notification.tsx index ffca716d4b5..eb8a99b4c24 100644 --- a/src/components/badge/notification_badge/badge_notification.tsx +++ b/src/components/badge/notification_badge/badge_notification.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, ReactNode, SFC } from 'react'; +import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../../common'; @@ -8,11 +8,9 @@ export interface EuiNotificationBadgeProps children?: ReactNode; } -export const EuiNotificationBadge: SFC = ({ - children, - className, - ...rest -}) => { +export const EuiNotificationBadge: FunctionComponent< + EuiNotificationBadgeProps +> = ({ children, className, ...rest }) => { const classes = classNames('euiNotificationBadge', className); return ( diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap index 23424377961..e6974b7959f 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap @@ -37,63 +37,51 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback - - - - name1 - - - - + + - - - name2 - - - - + + - - - name3 - - - + name3 + + @@ -137,63 +125,51 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1 - - - - name1 - - - - + + - - - name2 - - - - + + - - - name3 - - - + name3 + + @@ -422,102 +398,90 @@ exports[`EuiBasicTable footers do not render without a column footer definition - - - - name1 - - - 1 - - - 20 - - - - + + 1 + + + 20 + + + - - - name2 - - - 2 - - - 21 - - - - + + 2 + + + 21 + + + - - - name3 - - - 3 - - - 22 - - - + name3 + + + 3 + + + 22 + + @@ -573,7 +537,9 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f + > + + - - - - - - - name1 - - - 1 - - - 20 - - - - - + + + - - - - - name2 - - - 2 - - - 21 - - - - + + 1 + + + 20 + + + - - - - - - name3 - - - 3 - - + + + + name2 + + + 2 + + + 21 + + + + + - 22 - - - + + + + + name3 + + + 3 + + + 22 + + - - - - name1 - - - + + + - -
- Expanded row -
- - - - + Expanded row + + + + - - - name2 - - - - + + - - - name3 - - - + name3 + + @@ -919,69 +867,57 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1 - - - + + - - name1 - - - - - - - + + + + + - - name2 - - - - - - - + + + + + - - name3 - - - - + name3 + + + @@ -1025,69 +961,57 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1` - - - + + - - name1 - - - - - - - + + + + + - - name2 - - - - - - - + + + + + - - name3 - - - - + name3 + + + @@ -1131,38 +1055,30 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = ` - - - - name1 - - - - + + - - - name2 - - - + name2 + + @@ -1217,54 +1133,42 @@ exports[`EuiBasicTable with pagination 1`] = ` - - - - name1 - - - - + + - - - name2 - - - - + + - - - name3 - - - + name3 + + @@ -1328,7 +1232,6 @@ exports[`EuiBasicTable with pagination and error 1`] = ` > @@ -1376,7 +1279,9 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` + > + + - - - - - - - name1 - - - - + + + + name1 + + + - - - - - - name2 - - - - + + + + name2 + + + - - - - - - name3 - - - + + + + + name3 + + @@ -1517,54 +1416,42 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = ` - - - - name1 - - - - + + - - - name2 - - - - + + - - - name3 - - - + name3 + + @@ -1632,7 +1519,9 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` + > + + - - - - - - - name1 - - - - + + + + name1 + + + - - - - - - name2 - - - - + + + + name2 + + + - - - - - - name3 - - - + + + + + name3 + + @@ -1788,7 +1671,9 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a + > + + - - - - - - - name1 - - - + + + + name1 + + + - - - - + + + - - - - - - name2 - - - + + + + name2 + + + - - - - + + + - - - - - - name3 - - - + + + + name3 + + + - - - + } + itemId="3" + /> + + @@ -2038,7 +1917,9 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 + > + + - - - - - - - 1 - - - - + + + + 1 + + + - - - - - - 2 - - - - + + + + 2 + + + - - - - - - 3 - - - + + + + + + 3 + + @@ -2194,7 +2069,9 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 + > + + - - - - - - - NAME1 - - - - + + + + NAME1 + + + - - - - - - NAME2 - - - - + + + + NAME2 + + + - - - - - - NAME3 - - - + + + + + NAME3 + + @@ -2350,7 +2221,9 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a + > + + - - - - - - - name1 - - - + + + + name1 + + + - - - - + + + - - - - - - name2 - - - + + + + name2 + + + - - - - + + + - - - - - - name3 - - - + + + + name3 + + + - - - + } + itemId="3" + /> + + @@ -2618,7 +2485,9 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and + > + + - - - - - - - x - - - - + + + + x + + + - - - - - - xx - - - - + + + + xx + + + - - - - - - xxx - - - + + + + + xxx + + @@ -2762,54 +2625,42 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = ` - - - - name1 - - - - + + - - - name2 - - - - + + - - - name3 - - - + name3 + + @@ -2870,54 +2721,42 @@ exports[`EuiBasicTable with sorting 1`] = ` - - - - name1 - - - - + + - - - name2 - - - - + + - - - name3 - - - + name3 + + diff --git a/src/components/basic_table/__snapshots__/custom_item_action.test.js.snap b/src/components/basic_table/__snapshots__/custom_item_action.test.js.snap index 8094d63208a..bcf25f1339c 100644 --- a/src/components/basic_table/__snapshots__/custom_item_action.test.js.snap +++ b/src/components/basic_table/__snapshots__/custom_item_action.test.js.snap @@ -3,5 +3,10 @@ exports[`CustomItemAction render 1`] = `
+> + +
`; diff --git a/src/components/button/index.d.ts b/src/components/button/index.d.ts index 900eb895eda..7368c08f598 100644 --- a/src/components/button/index.d.ts +++ b/src/components/button/index.d.ts @@ -2,7 +2,7 @@ import { CommonProps } from '../common'; import { IconType, IconSize } from '../icon' import { ToggleType } from '../toggle' -import { SFC, ButtonHTMLAttributes, AnchorHTMLAttributes, ChangeEventHandler, MouseEventHandler, HTMLAttributes } from 'react'; +import { FunctionComponent, ButtonHTMLAttributes, AnchorHTMLAttributes, ChangeEventHandler, MouseEventHandler, HTMLAttributes } from 'react'; declare module '@elastic/eui' { type EuiButtonPropsForButtonOrLink = ( @@ -37,7 +37,7 @@ declare module '@elastic/eui' { contentProps?: HTMLAttributes; textProps?: HTMLAttributes; } - export const EuiButton: SFC< + export const EuiButton: FunctionComponent< EuiButtonPropsForButtonOrLink >; @@ -63,7 +63,7 @@ declare module '@elastic/eui' { size?: ButtonSize; iconSize?: IconSize } - export const EuiButtonIcon: SFC< + export const EuiButtonIcon: FunctionComponent< EuiButtonPropsForButtonOrLink >; @@ -95,7 +95,7 @@ declare module '@elastic/eui' { textProps?: HTMLAttributes; }> - export const EuiButtonEmpty: SFC; + export const EuiButtonEmpty: FunctionComponent; /** * button toggle type defs @@ -112,7 +112,7 @@ declare module '@elastic/eui' { type?: ToggleType; } - export const EuiButtonToggle: SFC< + export const EuiButtonToggle: FunctionComponent< EuiButtonPropsForButtonOrLink >; @@ -145,7 +145,7 @@ declare module '@elastic/eui' { name?: string; } - export const EuiButtonGroup: SFC< + export const EuiButtonGroup: FunctionComponent< HTMLAttributes & EuiButtonGroupProps >; } diff --git a/src/components/call_out/index.d.ts b/src/components/call_out/index.d.ts index 5cc151d8fc8..2403f9166a4 100644 --- a/src/components/call_out/index.d.ts +++ b/src/components/call_out/index.d.ts @@ -1,7 +1,7 @@ import { CommonProps, Omit } from '../common'; import { IconType } from '../icon' -import { SFC, ReactNode, HTMLAttributes } from 'react'; +import { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; declare module '@elastic/eui' { /** @@ -20,7 +20,7 @@ declare module '@elastic/eui' { size?: Size, } - export const EuiCallOut: SFC< + export const EuiCallOut: FunctionComponent< CommonProps & EuiCallOutProps & Omit, 'title'> >; } diff --git a/src/components/code/index.d.ts b/src/components/code/index.d.ts index 2b839cbfb8c..4f770b08e0e 100644 --- a/src/components/code/index.d.ts +++ b/src/components/code/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../common'; -import { SFC, HTMLAttributes } from 'react'; +import { FunctionComponent, HTMLAttributes } from 'react'; declare module '@elastic/eui' { type FontSize = 's' | 'm' | 'l'; @@ -38,7 +38,7 @@ declare module '@elastic/eui' { inline?: true } - export const EuiCode: SFC< + export const EuiCode: FunctionComponent< CommonProps & EuiCodeProps & HTMLAttributes >; @@ -52,7 +52,7 @@ declare module '@elastic/eui' { inline?: false } - export const EuiCodeBlock: SFC< + export const EuiCodeBlock: FunctionComponent< CommonProps & EuiCodeBlockProps & HTMLAttributes >; } diff --git a/src/components/color_picker/color_picker_empty_swatch.tsx b/src/components/color_picker/color_picker_empty_swatch.tsx index aa6bcf59ccd..d28349c705d 100644 --- a/src/components/color_picker/color_picker_empty_swatch.tsx +++ b/src/components/color_picker/color_picker_empty_swatch.tsx @@ -1,6 +1,6 @@ -import React, { SFC } from 'react'; +import React, { FunctionComponent } from 'react'; -export const EuiColorPickerEmptySwatch: SFC<{}> = () => { +export const EuiColorPickerEmptySwatch: FunctionComponent<{}> = () => { return ( diff --git a/src/components/color_picker/color_picker_swatch.tsx b/src/components/color_picker/color_picker_swatch.tsx index 908cd3a9893..037a2458f2e 100644 --- a/src/components/color_picker/color_picker_swatch.tsx +++ b/src/components/color_picker/color_picker_swatch.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, SFC } from 'react'; +import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; import { EuiColorPickerEmptySwatch } from './color_picker_empty_swatch'; @@ -7,11 +7,9 @@ export interface EuiColorPickerSwatchProps color?: string; } -export const EuiColorPickerSwatch: SFC = ({ - color, - className, - ...rest -}) => { +export const EuiColorPickerSwatch: FunctionComponent< + EuiColorPickerSwatchProps +> = ({ color, className, ...rest }) => { const isClear = !color; const classes = classNames('euiColorPicker__swatch', className, { euiColorPicker__emptySwatch: isClear, diff --git a/src/components/combo_box/combo_box_options_list/combo_box_title.tsx b/src/components/combo_box/combo_box_options_list/combo_box_title.tsx index e307866eede..7bdb55b7f7d 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_title.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_title.tsx @@ -1,5 +1,5 @@ -import React, { SFC } from 'react'; +import React, { FunctionComponent } from 'react'; -export const EuiComboBoxTitle: SFC<{}> = ({ children }) => ( +export const EuiComboBoxTitle: FunctionComponent<{}> = ({ children }) => (
{children}
); diff --git a/src/components/combo_box/index.d.ts b/src/components/combo_box/index.d.ts index 7da37f331f4..25dd0b601df 100644 --- a/src/components/combo_box/index.d.ts +++ b/src/components/combo_box/index.d.ts @@ -1,4 +1,4 @@ -import { ButtonHTMLAttributes, ReactNode, SFC, FocusEventHandler } from 'react'; +import { ButtonHTMLAttributes, ReactNode, FunctionComponent, FocusEventHandler } from 'react'; import { ListProps } from 'react-virtualized'; import { EuiComboBoxOption, @@ -48,7 +48,7 @@ declare module '@elastic/eui' { rowHeight?: number, fullWidth?: boolean, } - export const EuiComboBoxOptionsList: SFC; + export const EuiComboBoxOptionsList: FunctionComponent; export type EuiComboBoxSingleSelectionShape = { asPlainText?: boolean; }; @@ -75,5 +75,5 @@ declare module '@elastic/eui' { fullWidth?: boolean, inputRef?: (element: HTMLInputElement) => void; } - export const EuiComboBox: SFC; + export const EuiComboBox: FunctionComponent; } diff --git a/src/components/common.ts b/src/components/common.ts index 5a46b0a2240..81f34a9fd46 100644 --- a/src/components/common.ts +++ b/src/components/common.ts @@ -1,4 +1,4 @@ -import { Component, SFC } from 'react'; +import { Component, FunctionComponent, SFC } from 'react'; export interface CommonProps { className?: string; @@ -21,7 +21,9 @@ export function keysOf(obj: T): K[] { } export type PropsOf = C extends SFC - ? SFCProps // C extends FunctionComponent ? FunctionalProps : + ? SFCProps + : C extends FunctionComponent + ? FunctionProps : C extends Component ? ComponentProps : never; @@ -60,7 +62,7 @@ passing additional props down through `...rest`, which can be specified as type Spanlike = HTMLAttributes; type Buttonlike = { onClick: MouseEventHandler }; // onClick is the discriminant -React.SFC +React.FunctionComponent Internally, the component would have a type guard to check if props contains `onClick` and resolve to Buttonlike. Externally, however, you could use the component as @@ -72,7 +74,7 @@ This prevents immediate feedback to the develop, and would actually lead to Reac still propogate down to the span's props, which is invalid. The following two utility types provide a solution for creating exclusive unions: -React.SFC> +React.FunctionComponent> */ /** diff --git a/src/components/context/context.tsx b/src/components/context/context.tsx index b2de3bd56af..e6995e2c338 100644 --- a/src/components/context/context.tsx +++ b/src/components/context/context.tsx @@ -23,8 +23,9 @@ interface IEuiContextProps { children: React.ReactNode; } -const EuiContext: React.SFC = ({ i18n = {}, children }) => ( - {children} -); +const EuiContext: React.FunctionComponent = ({ + i18n = {}, + children, +}) => {children}; export { EuiContext, EuiI18nConsumer }; diff --git a/src/components/context_menu/index.d.ts b/src/components/context_menu/index.d.ts index e386544ee7c..2fe9ac7aa41 100644 --- a/src/components/context_menu/index.d.ts +++ b/src/components/context_menu/index.d.ts @@ -1,7 +1,7 @@ import { CommonProps, RefCallback, NoArgCallback, Omit } from '../common'; import { - SFC, + FunctionComponent, ButtonHTMLAttributes, HTMLAttributes, ReactElement, @@ -38,7 +38,7 @@ declare module '@elastic/eui' { initialFocusedItemIndex?: number; } - export const EuiContextMenuPanel: SFC< + export const EuiContextMenuPanel: FunctionComponent< CommonProps & Omit< HTMLAttributes, @@ -70,7 +70,7 @@ declare module '@elastic/eui' { children?: ReactNode; } - export const EuiContextMenuItem: SFC< + export const EuiContextMenuItem: FunctionComponent< CommonProps & Omit, 'type'> & EuiContextMenuItemProps @@ -106,5 +106,5 @@ declare module '@elastic/eui' { initialPanelId?: EuiContextMenuPanelId; }; - export const EuiContextMenu: SFC; + export const EuiContextMenu: FunctionComponent; } diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap index 37fcd8b38a8..85fa7767ee1 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap +++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiQuickSelect is rendered 1`] = ` - + - + `; exports[`EuiQuickSelect prevQuickSelect 1`] = ` - + - + `; diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap index 45db5f6c09b..b2f89eaabb9 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap +++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap @@ -21,7 +21,6 @@ exports[`EuiQuickSelectPopover is rendered 1`] = ` type="button" > @@ -37,48 +36,46 @@ exports[`EuiQuickSelectPopover is rendered 1`] = ` className="euiQuickSelectPopover__content" data-test-subj="superDatePickerQuickMenu" > - - - - - + + + diff --git a/src/components/delay_hide/delay_hide.tsx b/src/components/delay_hide/delay_hide.tsx index f450a764238..898a5e9f64b 100644 --- a/src/components/delay_hide/delay_hide.tsx +++ b/src/components/delay_hide/delay_hide.tsx @@ -8,13 +8,13 @@ function isComponentBecomingVisible( } export interface EuiDelayHideProps { - hide?: boolean; - minimumDuration?: number; + hide: boolean; + minimumDuration: number; render: () => ReactNode; } interface EuiDelayHideState { - hide?: boolean; + hide: boolean; countdownExpired?: boolean; } @@ -76,7 +76,10 @@ export class EuiDelayHide extends Component< if (this.timeoutId == null) { this.timeoutId = setTimeout( this.finishCountdown, - this.props.minimumDuration + // even though `minimumDuration` cannot be undefined, passing a strict number type to setTimeout makes TS interpret + // it as a NodeJS.Timer instead of a number. The DOM lib defines the setTimeout call as taking `number | undefined` + // so we cast minimumDuration to this type instead to force TS's cooperation + this.props.minimumDuration as number | undefined ); } }; diff --git a/src/components/empty_prompt/index.d.ts b/src/components/empty_prompt/index.d.ts index 076f001ac1f..6867001cdc0 100644 --- a/src/components/empty_prompt/index.d.ts +++ b/src/components/empty_prompt/index.d.ts @@ -2,7 +2,7 @@ import { CommonProps, Omit } from '../common'; import { IconColor, IconType } from '../icon' /// -import { SFC, ReactNode, HTMLAttributes } from 'react'; +import { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; declare module '@elastic/eui' { /** @@ -20,7 +20,7 @@ declare module '@elastic/eui' { actions?: ReactNode; } - export const EuiEmptyPrompt: SFC< + export const EuiEmptyPrompt: FunctionComponent< CommonProps & EuiEmptyPromptProps & Omit, 'title'> >; diff --git a/src/components/expression/expression.tsx b/src/components/expression/expression.tsx index d19660ea595..b1321be5da9 100644 --- a/src/components/expression/expression.tsx +++ b/src/components/expression/expression.tsx @@ -56,15 +56,17 @@ type Buttonlike = EuiExpressionProps & type Spanlike = EuiExpressionProps & HTMLAttributes; -export const EuiExpression: React.SFC> = ({ +export const EuiExpression: React.FunctionComponent< + ExclusiveUnion +> = ({ className, description, descriptionProps, value, valueProps, - color, - uppercase, - isActive, + color = 'secondary', + uppercase = true, + isActive = false, onClick, ...rest }) => { @@ -76,7 +78,7 @@ export const EuiExpression: React.SFC> = ({ 'euiExpression-isClickable': onClick, 'euiExpression-isUppercase': uppercase, }, - color ? colorToClassNameMap[color] : undefined + colorToClassNameMap[color] ); const Component = onClick ? 'button' : 'span'; @@ -92,9 +94,3 @@ export const EuiExpression: React.SFC> = ({ ); }; - -EuiExpression.defaultProps = { - color: 'secondary', - uppercase: true, - isActive: false, -}; diff --git a/src/components/flex/index.d.ts b/src/components/flex/index.d.ts index 38f89dac7c4..af01aa70b97 100644 --- a/src/components/flex/index.d.ts +++ b/src/components/flex/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../common'; -import { SFC, HTMLAttributes } from 'react'; +import { FunctionComponent, HTMLAttributes } from 'react'; declare module '@elastic/eui' { /** @@ -17,7 +17,7 @@ declare module '@elastic/eui' { gutterSize?: FlexGridGutterSize; } - export const EuiFlexGrid: SFC< + export const EuiFlexGrid: FunctionComponent< CommonProps & HTMLAttributes & EuiFlexGridProps >; @@ -60,7 +60,7 @@ declare module '@elastic/eui' { wrap?: boolean; } - export const EuiFlexGroup: SFC< + export const EuiFlexGroup: FunctionComponent< CommonProps & HTMLAttributes & EuiFlexGroupProps @@ -93,7 +93,7 @@ declare module '@elastic/eui' { component?: FlexItemComponentType; } - export const EuiFlexItem: SFC< + export const EuiFlexItem: FunctionComponent< CommonProps & HTMLAttributes & EuiFlexItemProps diff --git a/src/components/flyout/index.d.ts b/src/components/flyout/index.d.ts index 866661dc3ce..8eae9ab62e0 100644 --- a/src/components/flyout/index.d.ts +++ b/src/components/flyout/index.d.ts @@ -26,17 +26,17 @@ declare module '@elastic/eui' { maxWidth?: boolean | number | string; } - export const EuiFlyout: React.SFC< + export const EuiFlyout: React.FunctionComponent< CommonProps & EuiFlyoutProps >; - export const EuiFlyoutBody: React.SFC; + export const EuiFlyoutBody: React.FunctionComponent; export interface EuiFlyoutHeaderProps { hasBorder?: boolean; } - export const EuiFlyoutHeader: React.SFC; + export const EuiFlyoutHeader: React.FunctionComponent; - export const EuiFlyoutFooter: React.SFC; + export const EuiFlyoutFooter: React.FunctionComponent; } diff --git a/src/components/form/checkbox/index.d.ts b/src/components/form/checkbox/index.d.ts index 91ec6d14b15..544a594b1aa 100644 --- a/src/components/form/checkbox/index.d.ts +++ b/src/components/form/checkbox/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../../common'; -import { SFC, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react'; +import { FunctionComponent, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react'; declare module '@elastic/eui' { /** @@ -21,7 +21,7 @@ declare module '@elastic/eui' { indeterminate?: boolean; } - export const EuiCheckbox: SFC< + export const EuiCheckbox: FunctionComponent< CommonProps & InputHTMLAttributes & EuiCheckboxProps >; @@ -44,7 +44,7 @@ declare module '@elastic/eui' { onChange: ChangeEventHandler; } - export const EuiCheckboxGroup: SFC< + export const EuiCheckboxGroup: FunctionComponent< CommonProps & HTMLAttributes & EuiCheckboxGroupProps >; } diff --git a/src/components/form/field_number/index.d.ts b/src/components/form/field_number/index.d.ts index 64a25bce56d..83669d92d76 100644 --- a/src/components/form/field_number/index.d.ts +++ b/src/components/form/field_number/index.d.ts @@ -1,7 +1,7 @@ import { CommonProps } from '../../common'; import { IconType } from '../../icon'; -import { ReactNode, SFC, InputHTMLAttributes, Ref } from 'react'; +import { ReactNode, FunctionComponent, InputHTMLAttributes, Ref } from 'react'; declare module '@elastic/eui' { @@ -21,7 +21,7 @@ declare module '@elastic/eui' { inputRef?: Ref; } - export const EuiFieldNumber: SFC< + export const EuiFieldNumber: FunctionComponent< CommonProps & InputHTMLAttributes & EuiFieldNumberProps >; } diff --git a/src/components/form/field_password/index.d.ts b/src/components/form/field_password/index.d.ts index f344ffc8230..b1152129d37 100644 --- a/src/components/form/field_password/index.d.ts +++ b/src/components/form/field_password/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../../common'; -import { SFC, InputHTMLAttributes, Ref } from 'react'; +import { FunctionComponent, InputHTMLAttributes, Ref } from 'react'; declare module '@elastic/eui' { @@ -17,7 +17,7 @@ declare module '@elastic/eui' { compressed?: boolean; } - export const EuiFieldPassword: SFC< + export const EuiFieldPassword: FunctionComponent< CommonProps & InputHTMLAttributes & EuiFieldPasswordProps >; } diff --git a/src/components/form/field_search/index.d.ts b/src/components/form/field_search/index.d.ts index 2d67b8144cc..a8379a36b51 100644 --- a/src/components/form/field_search/index.d.ts +++ b/src/components/form/field_search/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../../common'; -import { SFC, InputHTMLAttributes } from 'react'; +import { FunctionComponent, InputHTMLAttributes } from 'react'; declare module '@elastic/eui' { /** @@ -20,7 +20,7 @@ declare module '@elastic/eui' { incremental?: boolean; } - export const EuiFieldSearch: SFC< + export const EuiFieldSearch: FunctionComponent< CommonProps & InputHTMLAttributes & EuiFieldSearchProps >; } diff --git a/src/components/form/field_text/index.d.ts b/src/components/form/field_text/index.d.ts index 8ce171ce80e..a2bd7aece79 100644 --- a/src/components/form/field_text/index.d.ts +++ b/src/components/form/field_text/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../../common'; -import { SFC, InputHTMLAttributes, Ref } from 'react'; +import { FunctionComponent, InputHTMLAttributes, Ref } from 'react'; declare module '@elastic/eui' { @@ -19,7 +19,7 @@ declare module '@elastic/eui' { append?: React.ReactNode; } - export const EuiFieldText: SFC< + export const EuiFieldText: FunctionComponent< CommonProps & InputHTMLAttributes & EuiFieldTextProps >; } diff --git a/src/components/form/form_help_text/index.d.ts b/src/components/form/form_help_text/index.d.ts index f8564267b1a..86b42c0b1b6 100644 --- a/src/components/form/form_help_text/index.d.ts +++ b/src/components/form/form_help_text/index.d.ts @@ -1,7 +1,7 @@ import { CommonProps } from '../../common'; /// -import { ReactNode, SFC, HTMLAttributes } from 'react'; +import { ReactNode, FunctionComponent, HTMLAttributes } from 'react'; declare module '@elastic/eui' { @@ -11,7 +11,7 @@ declare module '@elastic/eui' { export interface EuiFormHelpTextProps { } - export const EuiFormHelpText: SFC< + export const EuiFormHelpText: FunctionComponent< CommonProps & HTMLAttributes & EuiFormHelpTextProps >; } diff --git a/src/components/form/form_label/index.d.ts b/src/components/form/form_label/index.d.ts index d441bc3976d..2e98bfa86ec 100644 --- a/src/components/form/form_label/index.d.ts +++ b/src/components/form/form_label/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../../common'; -import { SFC, ReactNode, LabelHTMLAttributes } from 'react'; +import { FunctionComponent, ReactNode, LabelHTMLAttributes } from 'react'; declare module '@elastic/eui' { /** @@ -13,5 +13,5 @@ declare module '@elastic/eui' { isInvalid?: boolean; }; - export const EuiFormLabel: SFC; + export const EuiFormLabel: FunctionComponent; } diff --git a/src/components/form/form_row/index.d.ts b/src/components/form/form_row/index.d.ts index 94916d5cf11..ea37b1321ff 100644 --- a/src/components/form/form_row/index.d.ts +++ b/src/components/form/form_row/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../../common'; -import { SFC, ReactNode, HTMLAttributes } from 'react'; +import { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; declare module '@elastic/eui' { /** @@ -20,5 +20,5 @@ declare module '@elastic/eui' { displayOnly?: boolean; }; - export const EuiFormRow: SFC; + export const EuiFormRow: FunctionComponent; } diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts index f04a27614e5..9cdb70720dd 100644 --- a/src/components/form/index.d.ts +++ b/src/components/form/index.d.ts @@ -13,7 +13,7 @@ import { CommonProps } from '../common'; /// /// -import { SFC, FormHTMLAttributes, ReactNode } from 'react'; +import { FunctionComponent, FormHTMLAttributes, ReactNode } from 'react'; declare module '@elastic/eui' { /** @@ -25,5 +25,5 @@ declare module '@elastic/eui' { error?: ReactNode | ReactNode[]; }; - export const EuiForm: SFC; + export const EuiForm: FunctionComponent; } diff --git a/src/components/form/radio/index.d.ts b/src/components/form/radio/index.d.ts index 4673106cd91..0c92c70a9a1 100644 --- a/src/components/form/radio/index.d.ts +++ b/src/components/form/radio/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps, Omit } from '../../common'; -import { SFC, ChangeEventHandler, HTMLAttributes, ReactNode } from 'react'; +import { FunctionComponent, ChangeEventHandler, HTMLAttributes, ReactNode } from 'react'; declare module '@elastic/eui' { /** @@ -24,7 +24,7 @@ declare module '@elastic/eui' { export type x = EuiRadioGroupProps['onChange']; - export const EuiRadioGroup: SFC; + export const EuiRadioGroup: FunctionComponent; export interface EuiRadioProps { autoFocus?: boolean; @@ -37,7 +37,7 @@ declare module '@elastic/eui' { onChange: ChangeEventHandler; // overriding to make it required } - export const EuiRadio: SFC< + export const EuiRadio: FunctionComponent< CommonProps & HTMLAttributes & EuiRadioProps >; } diff --git a/src/components/form/range/index.d.ts b/src/components/form/range/index.d.ts index be89c006857..d93b523bb90 100644 --- a/src/components/form/range/index.d.ts +++ b/src/components/form/range/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps, Omit } from '../../common'; -import { SFC, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react'; +import { FunctionComponent, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react'; declare module '@elastic/eui' { export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger'; @@ -31,7 +31,7 @@ declare module '@elastic/eui' { tickInterval?: number; } - export const EuiRange: SFC< + export const EuiRange: FunctionComponent< CommonProps & InputHTMLAttributes & EuiRangeProps >; @@ -46,7 +46,7 @@ declare module '@elastic/eui' { value: [number | string, number | string] } - export const EuiDualRange: SFC< + export const EuiDualRange: FunctionComponent< CommonProps & Omit, 'value'> & EuiRangeProps & EuiDualRangeProps >; } diff --git a/src/components/form/select/index.d.ts b/src/components/form/select/index.d.ts index 051d3e85fee..f6109ebce29 100644 --- a/src/components/form/select/index.d.ts +++ b/src/components/form/select/index.d.ts @@ -1,6 +1,6 @@ import { CommonProps } from '../../common'; -import {SFC, ReactNode, Ref, OptionHTMLAttributes, SelectHTMLAttributes} from 'react'; +import {FunctionComponent, ReactNode, Ref, OptionHTMLAttributes, SelectHTMLAttributes} from 'react'; declare module '@elastic/eui' { /** @@ -22,5 +22,5 @@ declare module '@elastic/eui' { append?: ReactNode | ReactNode[]; }; - export const EuiSelect: SFC; + export const EuiSelect: FunctionComponent; } diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index 9216741e7a2..0f802dec6d9 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -628,7 +628,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `