Update TypeScript to v4

CHANGELOG.md

@@ -11,6 +11,7 @@
 **Breaking changes**
 
 - Removed `size` prop from `EuiResizableButton` ([#3978](https://github.com/elastic/eui/pull/3978))
+- Upgraded to TypeScript v4.0 ([#4296](https://github.com/elastic/eui/pull/4296))
 
 ## [`30.6.0`](https://github.com/elastic/eui/tree/v30.6.0)
 

package.json

@@ -92,7 +92,7 @@
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
+    "@babel/preset-typescript": "^7.12.1",
     "@elastic/charts": "^20.0.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
@@ -111,8 +111,8 @@
     "@types/tabbable": "^3.1.0",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
     "argparse": "^2.0.1",
     "autoprefixer": "^9.8.6",
     "axe-core": "^4.0.1",
@@ -182,7 +182,7 @@
     "puppeteer": "^5.3.0",
     "raw-loader": "^4.0.1",
     "react": "^16.12.0",
-    "react-docgen-typescript": "^1.20.3",
+    "react-docgen-typescript": "^1.20.5",
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.1",
     "react-router": "^5.2.0",
@@ -203,7 +203,7 @@
     "start-server-and-test": "^1.11.3",
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^4.1.0",
-    "typescript": "3.7.2",
+    "typescript": "4.0.5",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.0",
     "webpack": "^4.44.1",
@@ -220,6 +220,6 @@
     "prop-types": "^15.5.0",
     "react": "^16.12",
     "react-dom": "^16.12",
-    "typescript": "^3.7.2"
+    "typescript": "^4.0.5"
   }
 }

src/components/basic_table/action_types.ts

@@ -98,3 +98,9 @@ export interface CustomItemAction<T> {
 }
 
 export type Action<T> = DefaultItemAction<T> | CustomItemAction<T>;
+
+export const isCustomItemAction = (
+  action: DefaultItemAction<any> | CustomItemAction<any>
+): action is CustomItemAction<any> => {
+  return action.hasOwnProperty('render');
+};

src/components/basic_table/expanded_item_actions.tsx

@@ -25,6 +25,7 @@ import {
   Action,
   CustomItemAction as CustomAction,
   DefaultItemAction as DefaultAction,
+  isCustomItemAction,
 } from './action_types';
 import { ItemIdResolved } from './table_types';
 
@@ -61,7 +62,7 @@ export const ExpandedItemActions = <T extends {}>({
           expandedItemActions__completelyHide: moreThanThree && index < 2,
         });
 
-        if ((action as CustomAction<T>).render) {
+        if (isCustomItemAction(action)) {
           // custom action has a render function
           tools.push(
             <CustomItemAction

src/components/color_picker/color_stops/color_stop_thumb.tsx

@@ -114,7 +114,9 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
     isColorInvalid(color, colorPickerShowAlpha)
   );
   const [stopIsInvalid, setStopIsInvalid] = useState(isStopInvalid(stop));
-  const [numberInputRef, setNumberInputRef] = useState();
+  const [numberInputRef, setNumberInputRef] = useState<HTMLInputElement | null>(
+    null
+  );
   const popoverRef = useRef<EuiPopover>(null);
 
   useEffect(() => {
@@ -262,7 +264,7 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       ownFocus={isPopoverOpen}
-      initialFocus={numberInputRef}
+      initialFocus={numberInputRef || undefined}
       panelClassName={
         numberInputRef ? undefined : 'euiColorStopPopover-isLoadingPanel'
       }

src/components/control_bar/control_bar.tsx

@@ -347,11 +347,11 @@ export class EuiControlBar extends Component<
             <EuiButtonIcon
               key={id + index}
               className={classNames('euiControlBar__buttonIcon', className)}
-              iconType={iconType}
               onClick={onClick}
               href={href}
               color={color as EuiButtonIconProps['color']}
               {...(rest as IconButtonControlType)}
+              iconType={iconType}
               size="s"
             />
           ) : (

src/components/form/checkbox/checkbox_group.test.tsx

@@ -34,11 +34,7 @@ const checkboxGroupRequiredProps = {
 describe('EuiCheckboxGroup (mocked checkbox)', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiCheckboxGroup
-        onChange={() => {}}
-        {...checkboxGroupRequiredProps}
-        {...requiredProps}
-      />
+      <EuiCheckboxGroup {...checkboxGroupRequiredProps} {...requiredProps} />
     );
 
     expect(component).toMatchSnapshot();

src/components/markdown_editor/markdown_editor.tsx

@@ -229,7 +229,7 @@ export const EuiMarkdownEditor = forwardRef<
       [replaceNode]
     );
 
-    const [selectedNode, setSelectedNode] = useState();
+    const [selectedNode, setSelectedNode] = useState<EuiMarkdownAstNode>();
 
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 

src/components/markdown_editor/plugins/markdown_default_plugins.tsx

@@ -17,7 +17,23 @@
  * under the License.
  */
 
-import { PluggableList, Plugin } from 'unified';
+// Importing seemingly unused types from `unified` because the definitions
+// are exported for two versions of TypeScript (3.4, 4.0) and implicit
+// imports during eui.d.ts generation default to the incorrect version (3.4).
+// Explicit imports here resolve the version mismatch.
+import {
+  Plugin,
+  PluggableList,
+  // @ts-ignore See above comment
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Attacher,
+  // @ts-ignore See above comment
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Pluggable,
+  // @ts-ignore See above comment
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Settings,
+} from 'unified';
 import remark2rehype from 'remark-rehype';
 import rehype2react from 'rehype-react';
 import * as MarkdownTooltip from './markdown_tooltip';

src/components/observer/resize_observer/resize_observer.test.tsx

@@ -89,7 +89,7 @@ describe('testResizeObservers', () => {
       expect.assertions(2);
 
       const Wrapper: FunctionComponent<{}> = jest.fn(({ children }) => {
-        const [ref, setRef] = useState();
+        const [ref, setRef] = useState<Element | null>(null);
         useResizeObserver(ref);
         return <div ref={setRef}>{children}</div>;
       });

src/components/popover/input_popover.tsx

@@ -55,9 +55,9 @@ export const EuiInputPopover: FunctionComponent<Props> = ({
   onPanelResize,
   ...props
 }) => {
-  const [inputEl, setInputEl] = useState();
-  const [inputElWidth, setInputElWidth] = useState();
-  const [panelEl, setPanelEl] = useState();
+  const [inputEl, setInputEl] = useState<HTMLElement | null>(null);
+  const [inputElWidth, setInputElWidth] = useState<number>();
+  const [panelEl, setPanelEl] = useState<HTMLElement | null>(null);
 
   const inputRef = (node: HTMLElement | null) => setInputEl(node);
   const panelRef = (node: HTMLElement | null) => setPanelEl(node);
@@ -89,7 +89,7 @@ export const EuiInputPopover: FunctionComponent<Props> = ({
   }, [setPanelWidth]);
 
   const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === cascadingMenuKeys.TAB) {
+    if (panelEl && event.key === cascadingMenuKeys.TAB) {
       const tabbableItems = tabbable(panelEl).filter((el: HTMLElement) => {
         return (
           Array.from(el.attributes)

src/components/selectable/selectable_list/selectable_list.tsx

@@ -238,7 +238,6 @@ export class EuiSelectableList<T> extends Component<EuiSelectableListProps<T>> {
         onClick={() => this.onAddOrRemoveOption(option)}
         ref={ref ? ref.bind(null, index) : undefined}
         isFocused={this.props.activeOptionIndex === index}
-        showIcons={this.props.showIcons}
         title={searchableLabel || label}
         checked={checked}
         disabled={disabled}
@@ -249,7 +248,8 @@ export class EuiSelectableList<T> extends Component<EuiSelectableListProps<T>> {
         onFocusBadge={this.props.onFocusBadge}
         allowExclusions={this.props.allowExclusions}
         // @ts-ignore complex
-        {...(optionRest as EuiSelectableListItemProps)}>
+        {...(optionRest as EuiSelectableListItemProps)}
+        showIcons={this.props.showIcons}>
         {this.props.renderOption ? (
           this.props.renderOption(option, this.props.searchValue)
         ) : (

src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide_option.test.tsx.snap

@@ -13,7 +13,7 @@ Array [
       "name": "Default Space",
     },
     "className": "euiSelectableTemplateSitewide__listItem testClass1 testClass2",
-    "data-test-subj": "test subject string",
+    "data-test-subj": "test-this",
     "key": "Basic data application",
     "label": "Basic data application",
     "meta": Array [

src/components/selectable/selectable_templates/selectable_template_sitewide.test.tsx

@@ -27,7 +27,6 @@ import { EuiSelectableTemplateSitewideOption } from './selectable_template_sitew
 const options: EuiSelectableTemplateSitewideOption[] = [
   {
     label: 'Basic data application',
-    'data-test-subj': 'test-this',
     avatar: {
       name: 'Default Space',
     },
@@ -39,6 +38,7 @@ const options: EuiSelectableTemplateSitewideOption[] = [
     ],
     url: 'welcome-dashboards',
     ...requiredProps,
+    'data-test-subj': 'test-this',
   },
   {
     label: 'Platform with deployment highlighted',

src/components/selectable/selectable_templates/selectable_template_sitewide_option.test.tsx

@@ -28,7 +28,6 @@ import {
 const options: EuiSelectableTemplateSitewideOption[] = [
   {
     label: 'Basic data application',
-    'data-test-subj': 'test-this',
     avatar: {
       name: 'Default Space',
     },
@@ -40,6 +39,7 @@ const options: EuiSelectableTemplateSitewideOption[] = [
     ],
     url: 'welcome-dashboards',
     ...requiredProps,
+    'data-test-subj': 'test-this',
   },
   {
     label: 'Platform with deployment highlighted',

src/components/selectable/selectable_templates/selectable_template_sitewide_option.tsx

@@ -81,7 +81,6 @@ export const euiSelectableTemplateSitewideFormatOptions = (
 
     return {
       key: item.label,
-      label: item.label,
       title,
       ...item,
       className: classNames(

src/components/token/token.tsx

@@ -158,7 +158,7 @@ export const EuiToken: FunctionComponent<EuiTokenProps> = ({
 
   // If the iconType passed is one of the prefab token types,
   // grab its properties
-  if (iconType in TOKEN_MAP) {
+  if (typeof iconType === 'string' && iconType in TOKEN_MAP) {
     const tokenDisplay = TOKEN_MAP[iconType as EuiTokenMapType];
     finalDisplay = defaults(currentDisplay, tokenDisplay);
   } else {

src/services/copy_to_clipboard.ts

@@ -32,6 +32,7 @@ function createHiddenTextElement(text: string): HTMLSpanElement {
   textElement.style.webkitUserSelect = 'text';
   // @ts-ignore this one doesn't appear in the TS definitions for some reason
   textElement.style.MozUserSelect = 'text';
+  // @ts-ignore this one doesn't appear in the TS definitions for some reason
   textElement.style.msUserSelect = 'text';
   textElement.style.userSelect = 'text';
   return textElement;

src/services/utils.ts

@@ -23,18 +23,15 @@ import _memoize from 'lodash/memoize';
 // wrap the lodash functions to avoid having lodash's TS type definition from being
 // exported, which can conflict with the lodash namespace if other versions are used
 
-/* eslint-disable import/export */
-export function times<T>(count: number): number[];
+export function times(count: number): number[];
 export function times<T>(count: number, iteratee: (index: number) => T): T[];
 export function times<T>(count: number, iteratee?: (index: number) => T) {
   if (iteratee === undefined) {
     return _times(count);
   }
   return _times(count, iteratee);
 }
-/* eslint-enable import/export */
 
-// eslint-disable-next-line space-before-function-paren
 export function memoize<T extends (...args: any[]) => any>(
   func: T,
   resolver?: (...args: any[]) => any