Migrate EuiTable and a bunch of other stuff to TS

CHANGELOG.md

@@ -9,7 +9,9 @@
 - Fixed `EuiSwitch` semantics to align with aria roles ([#2193](https://github.com/elastic/eui/pull/2193))
 - Removed Firefox's focus ring to match other browsers ([#2193](https://github.com/elastic/eui/pull/2193))
 - Added missing `onChange` TS defs for EuiRange ([#2211](https://github.com/elastic/eui/pull/2211))
+- Fixed `EuiStat` invalid DOM nesting due to a `<p>` tag nested within another `<p>` tag ([#2229](https://github.com/elastic/eui/pull/2229))
 - Fixed `EuiBadge` text cursor to default pointer ([#2234](https://github.com/elastic/eui/pull/2234))
+- Converted table, popover, buttons, pagination, outside click detector, focus trap, context menu, and panel to TypeScript ([#2212](https://github.com/elastic/eui/pull/2212))
 
 ## [`13.3.0`](https://github.com/elastic/eui/tree/v13.3.0)
 

package.json

@@ -85,6 +85,7 @@
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/resize-observer-browser": "^0.1.1",
+    "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",

scripts/babel/proptypes-from-ts-props/index.js

@@ -5,6 +5,8 @@ const path = require('path');
 const babelTemplate = require('babel-template');
 const babelCore = require('@babel/core');
 
+const importedDefinitionsCache = new Map();
+
 // react-docgen does not understand typescript annotations
 function stripTypeScript(filename, ast) {
   return babelCore.transform(
@@ -809,6 +811,16 @@ const typeDefinitionExtractors = {
         return [];
       }
 
+      if (importedDefinitionsCache.has(resolvedPath)) {
+        return importedDefinitionsCache.get(resolvedPath);
+      }
+
+      // to support circular dependencies, create & pre-cache the array of imported dependencies
+      // this array is directly mutated after parsing the subsequent files, supporting
+      // the circular nature as values settle into the correct locations
+      const importedDefinitions = [];
+      importedDefinitionsCache.set(resolvedPath, importedDefinitions);
+
       // load & parse the imported file
       const ast = parse(fs.readFileSync(resolvedPath).toString());
 
@@ -840,18 +852,15 @@ const typeDefinitionExtractors = {
       );
 
       // for each importedTypeName, fully resolve the type information
-      const importedDefinitions = definitions.reduce(
-        (importedDefinitions, { name, definition }) => {
+      definitions.forEach(
+        ({ name, definition }) => {
           if (importedTypeNames.includes(name)) {
             // this type declaration is imported by the parent script
             const propTypes = getPropTypesForNode(definition, true, state);
             propTypes.isAlreadyResolved = true; // when getPropTypesForNode is called on this node later, tell it to skip processing
             importedDefinitions.push({ name, definition: propTypes });
           }
-
-          return importedDefinitions;
-        },
-        []
+        }
       );
 
       // reset typeDefinitions and continue processing the original file
@@ -1026,7 +1035,7 @@ function processComponentDeclaration(typeDefinition, path, state) {
 
   // import PropTypes library if it isn't already
   const proptypesBinding = getVariableBinding(path, 'PropTypes');
-  if (proptypesBinding == null) {
+  if (proptypesBinding == null && state.get('hasInjectedPropTypes') !== true) {
     let targetNode;
     // find the first statement in the program and import PropTypes there
     targetNode = path;
@@ -1043,6 +1052,7 @@ function processComponentDeclaration(typeDefinition, path, state) {
         types.stringLiteral('prop-types')
       )
     );
+    state.set('hasInjectedPropTypes', true);
   }
 }
 
@@ -1268,3 +1278,7 @@ module.exports = function propTypesFromTypeScript({ types }) {
     },
   };
 };
+
+module.exports.clearImportCache = function clearImportCache() {
+  importedDefinitionsCache.clear();
+}

scripts/babel/proptypes-from-ts-props/index.test.js

@@ -10,6 +10,9 @@ const babelOptions = {
   ],
   filename: 'somefile.tsx',
 };
+const babelPlugin = require('./index');
+
+beforeEach(() => babelPlugin.clearImportCache());
 
 describe('proptypes-from-ts-props', () => {
 

src-docs/src/i18ntokens.json

@@ -661,95 +661,95 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 37,
+        "line": 61,
         "column": 6
       },
       "end": {
-        "line": 41,
+        "line": 65,
         "column": 57
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPagination.previousPage",
     "defString": "Previous page",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 57,
+        "line": 81,
         "column": 4
       },
       "end": {
-        "line": 57,
+        "line": 81,
         "column": 72
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPagination.pageOfTotal",
     "defString": "Page {page} of {total}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 75,
+        "line": 99,
         "column": 6
       },
       "end": {
-        "line": 79,
+        "line": 103,
         "column": 53
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPagination.jumpToLastPage",
     "defString": "Jump to the last page, number {pageCount}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 120,
+        "line": 144,
         "column": 6
       },
       "end": {
-        "line": 124,
+        "line": 148,
         "column": 31
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPagination.nextPage",
     "defString": "Next page",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 138,
+        "line": 162,
         "column": 4
       },
       "end": {
-        "line": 138,
+        "line": 162,
         "column": 64
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPopover.screenReaderAnnouncement",
     "defString": "You are in a popup. To exit this popup, hit escape.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 442,
+        "line": 587,
         "column": 14
       },
       "end": {
-        "line": 445,
+        "line": 590,
         "column": 16
       }
     },
-    "filepath": "src/components/popover/popover.js"
+    "filepath": "src/components/popover/popover.tsx"
   },
   {
     "token": "euiSelectable.loadingOptions",
@@ -917,47 +917,47 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 50,
+        "line": 49,
         "column": 8
       },
       "end": {
-        "line": 50,
+        "line": 49,
         "column": 72
       }
     },
-    "filepath": "src/components/table/mobile/table_sort_mobile.js"
+    "filepath": "src/components/table/mobile/table_sort_mobile.tsx"
   },
   {
     "token": "euiTablePagination.rowsPerPage",
     "defString": "Rows per page",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 50,
+        "line": 62,
         "column": 8
       },
       "end": {
-        "line": 53,
+        "line": 65,
         "column": 10
       }
     },
-    "filepath": "src/components/table/table_pagination/table_pagination.js"
+    "filepath": "src/components/table/table_pagination/table_pagination.tsx"
   },
   {
     "token": "euiTablePagination.rowsPerPageOption",
     "defString": "{rowsPerPage} rows",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 66,
+        "line": 78,
         "column": 8
       },
       "end": {
-        "line": 70,
+        "line": 82,
         "column": 10
       }
     },
-    "filepath": "src/components/table/table_pagination/table_pagination.js"
+    "filepath": "src/components/table/table_pagination/table_pagination.tsx"
   },
   {
     "token": "euiToast.dismissToast",