[React 18] Fix remaining TypeScript errors

package.json

@@ -146,6 +146,7 @@
     "@testing-library/react-16-17": "npm:@testing-library/react@^12.1.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
+    "@types/cheerio": "^0.22.31",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^24.0.6",

src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx

@@ -1,4 +1,9 @@
-import React, { FunctionComponent, ReactNode, useContext } from 'react';
+import React, {
+  FunctionComponent,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+} from 'react';
 import {
   Switch,
   Route,
@@ -17,19 +22,20 @@ import {
 import { LanguageSelector, ThemeContext } from '../with_theme';
 import { GuideSection } from '../guide_section/guide_section';
 
-export type GuideTabbedPageProps = CommonProps & {
-  description?: ReactNode;
-  guidelines?: ReactNode;
-  intro?: ReactNode;
-  isBeta?: boolean;
-  isNew?: boolean;
-  notice?: ReactNode;
-  pages?: any;
-  rightSideItems?: ReactNode[];
-  showThemeLanguageToggle?: boolean;
-  tabs?: any;
-  title: string;
-};
+export type GuideTabbedPageProps = PropsWithChildren &
+  CommonProps & {
+    description?: ReactNode;
+    guidelines?: ReactNode;
+    intro?: ReactNode;
+    isBeta?: boolean;
+    isNew?: boolean;
+    notice?: ReactNode;
+    pages?: any;
+    rightSideItems?: ReactNode[];
+    showThemeLanguageToggle?: boolean;
+    tabs?: any;
+    title: string;
+  };
 
 export const GuideTabbedPage: FunctionComponent<GuideTabbedPageProps> = ({
   description,

src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx

@@ -149,6 +149,7 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 800 }}>
+      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[800, 300]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric id="1" data={DATA} />

src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx

@@ -22,6 +22,7 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
+      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 400]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric

src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx

@@ -22,6 +22,7 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 600 }}>
+      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[600, 200]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric

src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx

@@ -32,6 +32,7 @@ export default () => {
         <EuiFlexGroup gutterSize="s" alignItems="center" direction="column">
           <EuiText textAlign="center">No Data</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
+            {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
             <Chart size={[200, 200]}>
               <Settings
                 baseTheme={chartBaseTheme}
@@ -63,6 +64,7 @@ export default () => {
         <EuiFlexGroup gutterSize="s" alignItems="center" direction="column">
           <EuiText textAlign="center">Filtered Out</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
+            {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
             <Chart size={[200, 200]}>
               <Settings
                 theme={euiChartTheme.theme}

src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx

@@ -26,6 +26,7 @@ export default () => {
   }));
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
+      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 200]}>
         <Settings theme={euiChartTheme.theme} baseTheme={chartBaseTheme} />
         <Metric

src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx

@@ -33,6 +33,7 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', width: '200px' }}
         >
+          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
@@ -64,6 +65,7 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', width: '200px' }}
         >
+          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric

src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx

@@ -41,6 +41,7 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', height: '100%', width: '100%' }}
         >
+          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={['100%', '100%']}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric

src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx

@@ -74,6 +74,7 @@ export default () => {
     <EuiFlexGroup direction={'column'}>
       <EuiFlexItem grow={0}>
         <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
+          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric

src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx

@@ -28,6 +28,7 @@ export default () => {
 
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
+      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 200]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric

src-docs/src/views/empty_prompt/empty_prompt_multiple_types.tsx

@@ -5,11 +5,11 @@ import { GuideSection } from '../../components/guide_section/guide_section';
 import { GuideSectionTypes } from '../../components/guide_section/guide_section_types';
 import { PanelColor } from '../../../../src/components/panel/panel';
 
-import errorPages from './prompt_types/page_not_found';
+import ErrorPages from './prompt_types/page_not_found';
 const errorPagesSource = require('!!raw-loader!./prompt_types/page_not_found');
-import noPrivileges from './prompt_types/no_permission';
+import NoPrivileges from './prompt_types/no_permission';
 const noPrivilegesSource = require('!!raw-loader!./prompt_types/no_permission');
-import licenseUpgrade from './prompt_types/license_upgrade';
+import LicenseUpgrade from './prompt_types/license_upgrade';
 const licenseUpgradeSource = require('!!raw-loader!./prompt_types/license_upgrade');
 
 export default () => {
@@ -23,19 +23,19 @@ export default () => {
     {
       value: 'errorPages',
       text: 'Page not found',
-      component: errorPages,
+      component: <ErrorPages />,
       source: errorPagesSource,
     },
     {
       value: 'noPrivileges',
       text: 'No permission',
-      component: noPrivileges,
+      component: <NoPrivileges />,
       source: noPrivilegesSource,
     },
     {
       value: 'licenseUpgrade',
       text: 'License upgrade',
-      component: licenseUpgrade,
+      component: <LicenseUpgrade />,
       source: licenseUpgradeSource,
     },
   ];

src-docs/src/views/page_components/page.tsx

@@ -12,7 +12,7 @@ export default ({
   content = <></>,
   sideBar,
   ...rest
-}: EuiPageProps & {
+}: Omit<EuiPageProps, 'content'> & {
   content: ReactElement;
   sideBar?: ReactElement;
 }) => (

src-docs/src/views/resizable_container/resizable_container_reset_values.tsx

@@ -30,7 +30,7 @@ const defaultSizes = storedSizes || {
 export default () => {
   const [savedSizes, setSavedSizes] = useState(storedSizes);
   const [sizes, setSizes] = useState(defaultSizes);
-  const onPanelWidthChange = useCallback((newSizes) => {
+  const onPanelWidthChange = useCallback((newSizes: Record<string, number>) => {
     setSizes((prevSizes: Record<string, number>) => ({
       ...prevSizes,
       ...newSizes,

src-docs/src/views/tables/custom/custom.tsx

@@ -296,7 +296,7 @@ export default class extends Component<{}, State> {
             size="m"
             style={{ verticalAlign: 'text-top' }}
           />{' '}
-          {title}
+          {title as ReactNode}
         </span>
       ),
     },
@@ -674,6 +674,7 @@ export default class extends Component<{}, State> {
             mobileOptions={{
               header: column.label,
               ...column.mobileOptions,
+              render: column.mobileOptions?.render?.(item),
             }}
           >
             {child}

src-docs/src/views/theme/typography/_typography_js.tsx

@@ -217,6 +217,14 @@ export const FontScaleJS = () => {
   );
 };
 
+interface FontScaleDetails {
+  id: typeof EuiThemeFontScales[number];
+  value: string;
+  size: string;
+  lineHeight: string;
+  index: number;
+}
+
 export const FontScaleValuesJS = () => {
   const euiThemeContext = useEuiTheme();
   const scaleKeys = EuiThemeFontScales;
@@ -261,7 +269,7 @@ export const FontScaleValuesJS = () => {
         </EuiDescribedFormGroup>
       </EuiPanel>
       <EuiSpacer />
-      <EuiBasicTable
+      <EuiBasicTable<FontScaleDetails>
         tableLayout="auto"
         items={scaleKeys.map((scale, index) => {
           return {

src-docs/src/views/theme/typography/_typography_sass.tsx

@@ -165,12 +165,18 @@ export const FontWeightSass: FunctionComponent<ThemeRowType> = ({
   );
 };
 
+interface FontWeightDetails {
+  id: typeof euiFontWeights[number];
+  token: string;
+  value: number;
+}
+
 export const FontWeightValuesSass = () => {
   const values = useJsonVars();
 
   return (
     <>
-      <EuiBasicTable
+      <EuiBasicTable<FontWeightDetails>
         items={euiFontWeights.map(function (weight) {
           return {
             id: weight,
@@ -221,7 +227,7 @@ const euiFontSizes = [
   'euiFontSizeL',
   'euiFontSizeXL',
   'euiFontSizeXXL',
-];
+] as const;
 
 export const FontScaleSass = () => {
   return (
@@ -243,12 +249,20 @@ export const FontScaleSass = () => {
   );
 };
 
+interface FontSizesDetails {
+  id: typeof euiFontSizes[number];
+  token: string;
+  mixin: string;
+  value: string;
+  index: number;
+}
+
 export const FontScaleValuesSass = () => {
   const values = useJsonVars();
 
   return (
     <>
-      <EuiBasicTable
+      <EuiBasicTable<FontSizesDetails>
         items={euiFontSizes.map(function (size, index) {
           return {
             id: size,

src/components/basic_table/in_memory_table.tsx

@@ -423,7 +423,10 @@ export class EuiInMemoryTable<T> extends Component<
     // EuiBasicTable returns the column's `field` instead of `name` on sort
     // and the column's `name` instead of `field` on pagination
     if (sortName) {
-      const sortColumn = findColumnByFieldOrName(this.props.columns, sortName);
+      const sortColumn = findColumnByFieldOrName(
+        this.props.columns,
+        sortName as ReactNode
+      );
       if (sortColumn) {
         // Ensure sortName uses `name`
         sortName = sortColumn.name as keyof T;
@@ -460,7 +463,7 @@ export class EuiInMemoryTable<T> extends Component<
     this.setState({
       pageIndex,
       pageSize,
-      sortName,
+      sortName: sortName as ReactNode,
       sortDirection,
     });
   };

src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, PropsWithChildren } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiFlyoutBody, EuiFlyoutFooter } from '../flyout';
@@ -22,7 +22,9 @@ export default meta;
 type Story = StoryObj<{}>;
 
 // TODO: Make this a stateful component in upcoming EuiCollapsibleNavBeta work
-const OpenCollapsibleNav: FunctionComponent<{}> = ({ children }) => {
+const OpenCollapsibleNav: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
   return (
     <EuiCollapsibleNavBeta isOpen={true} onClose={() => {}}>
       {children}

src/components/date_picker/date_picker.tsx

@@ -13,6 +13,7 @@ import React, {
   Ref,
   useState,
   useCallback,
+  RefCallback,
 } from 'react';
 import classNames from 'classnames';
 
@@ -226,9 +227,12 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
   }
 
   // Set an internal ref on ReactDatePicker's `input` so we can set its :invalid state via useEuiValidatableControl
-  const [inputValidityRef, _setInputValidityRef] = useState(null);
-  const setInputValidityRef = useCallback((ref) => {
-    _setInputValidityRef(ref?.input);
+  const [inputValidityRef, _setInputValidityRef] =
+    useState<HTMLInputElement | null>(null);
+  const setInputValidityRef = useCallback<
+    RefCallback<Component & { input: HTMLInputElement }>
+  >((ref) => {
+    _setInputValidityRef(ref?.input || null);
   }, []);
   useEuiValidatableControl({ isInvalid, controlEl: inputValidityRef });
   const inputRefs = useCombinedRefs([inputRef, setInputValidityRef]);

src/components/form/form.tsx

@@ -66,7 +66,7 @@ export const EuiForm = forwardRef<HTMLElement, EuiFormProps>(
       [fullWidth]
     );
 
-    const handleFocus = useCallback((node) => {
+    const handleFocus = useCallback((node: HTMLDivElement) => {
       node?.focus();
     }, []);
 

src/components/markdown_editor/markdown_editor.tsx

@@ -259,7 +259,7 @@ export const EuiMarkdownEditor = forwardRef<
     const isPreviewing = viewMode === MODE_VIEWING;
     const isEditing = viewMode === MODE_EDITING;
 
-    const replaceNode = useCallback(
+    const replaceNode = useCallback<ContextShape['replaceNode']>(
       (position, next) => {
         const leading = value.substr(0, position.start.offset);
         const trailing = value.substr(position.end.offset);

src/components/observer/resize_observer/resize_observer.tsx

@@ -76,7 +76,7 @@ export const useResizeObserver = (
   // new state (and trigger a re-render) when the new dimensions actually differ
   const _currentDimensions = useRef(size);
   const setSize = useCallback(
-    (dimensions) => {
+    (dimensions: { width: number; height: number }) => {
       const doesWidthMatter = dimension !== 'height';
       const doesHeightMatter = dimension !== 'width';
       if (

src/components/popover/wrapping_popover.tsx

@@ -10,7 +10,8 @@ import React, { Component } from 'react';
 import { EuiPopover, Props as EuiPopoverProps } from './popover';
 import { EuiPortal } from '../portal';
 
-export interface EuiWrappingPopoverProps extends EuiPopoverProps {
+export interface EuiWrappingPopoverProps
+  extends Omit<EuiPopoverProps, 'button'> {
   button: HTMLElement;
 }