feat: TypeScript v5 prep work

changelogs/upcoming/7340.md

@@ -0,0 +1,2 @@
+- Updated generic types of `EuiBasicTable`, `EuiInMemoryTable` and `EuiSearchBar.Query.execute` to add `extends object` constraint
+  - This change should have no impact on your applications since the updated types only affect properties that exclusively accept object values.

src-docs/src/views/theme/color/_contrast_js.tsx

@@ -23,7 +23,7 @@ const textVariants = [...brandTextKeys, ...textColors];
 type ColorSection = {
   color: keyof _EuiThemeColorsMode;
   colorValue?: string;
-  minimumContrast: string | number;
+  minimumContrast: number;
   showTextVariants: boolean;
   matchPanelColor?: boolean;
   hookName?: string;
@@ -88,7 +88,7 @@ export const ColorSectionJS: FunctionComponent<ColorSection> = ({
 type ColorsContrastItem = {
   foreground: string;
   background: string;
-  minimumContrast: string | number;
+  minimumContrast: number;
   styleString?: string;
 };
 

src-docs/src/views/theme/color/_contrast_sass.tsx

@@ -57,7 +57,7 @@ import { getContrastRatings } from './_contrast_utilities';
 
 type ColorSection = {
   color: string;
-  minimumContrast: string | number;
+  minimumContrast: number;
   showTextVariants: boolean;
   matchPanelColor?: boolean;
 };
@@ -114,7 +114,7 @@ export const ColorSectionSass: FunctionComponent<ColorSection> = ({
 type ColorsContrastItem = {
   foreground: string;
   background: string;
-  minimumContrast: string | number;
+  minimumContrast: number;
 };
 
 const ColorsContrastItem: FunctionComponent<ColorsContrastItem> = ({

src/components/basic_table/action_types.ts

@@ -12,11 +12,11 @@ import { EuiButtonIconProps } from '../button/button_icon/button_icon';
 import { EuiButtonEmptyProps } from '../button/button_empty';
 import { ExclusiveUnion } from '../common';
 
-type IconFunction<T> = (item: T) => EuiIconType;
+type IconFunction<T extends object> = (item: T) => EuiIconType;
 type ButtonColor = EuiButtonIconProps['color'] | EuiButtonEmptyProps['color'];
 type EuiButtonIconColorFunction<T> = (item: T) => ButtonColor;
 
-export interface DefaultItemActionBase<T> {
+export interface DefaultItemActionBase<T extends object> {
   /**
    * The display name of the action (will render as visible text if rendered within a collapsed menu)
    */
@@ -43,7 +43,7 @@ export interface DefaultItemActionBase<T> {
   'data-test-subj'?: string | ((item: T) => string);
 }
 
-export interface DefaultItemEmptyButtonAction<T>
+export interface DefaultItemEmptyButtonAction<T extends object>
   extends DefaultItemActionBase<T> {
   /**
    * The type of action
@@ -52,7 +52,7 @@ export interface DefaultItemEmptyButtonAction<T>
   color?: EuiButtonEmptyProps['color'] | EuiButtonIconColorFunction<T>;
 }
 
-export interface DefaultItemIconButtonAction<T>
+export interface DefaultItemIconButtonAction<T extends object>
   extends DefaultItemActionBase<T> {
   type: 'icon';
   /**
@@ -65,7 +65,7 @@ export interface DefaultItemIconButtonAction<T>
   color?: EuiButtonIconProps['color'] | EuiButtonIconColorFunction<T>;
 }
 
-export type DefaultItemAction<T> = ExclusiveUnion<
+export type DefaultItemAction<T extends object> = ExclusiveUnion<
   DefaultItemEmptyButtonAction<T>,
   DefaultItemIconButtonAction<T>
 >;
@@ -86,9 +86,11 @@ export interface CustomItemAction<T> {
   isPrimary?: boolean;
 }
 
-export type Action<T> = DefaultItemAction<T> | CustomItemAction<T>;
+export type Action<T extends object> =
+  | DefaultItemAction<T>
+  | CustomItemAction<T>;
 
-export const isCustomItemAction = <T>(
+export const isCustomItemAction = <T extends object>(
   action: DefaultItemAction<T> | CustomItemAction<T>
 ): action is CustomItemAction<T> => {
   return action.hasOwnProperty('render');

src/components/basic_table/basic_table.tsx

@@ -139,7 +139,7 @@ function getRowProps<T>(item: T, rowProps: RowPropsCallback<T>) {
   return {};
 }
 
-function getCellProps<T>(
+function getCellProps<T extends object>(
   item: T,
   column: EuiBasicTableColumn<T>,
   cellProps: CellPropsCallback<T>
@@ -154,7 +154,7 @@ function getCellProps<T>(
   return {};
 }
 
-function getColumnFooter<T>(
+function getColumnFooter<T extends object>(
   column: EuiBasicTableColumn<T>,
   { items, pagination }: EuiTableFooterProps<T>
 ) {
@@ -169,7 +169,7 @@ function getColumnFooter<T>(
   return undefined;
 }
 
-export type EuiBasicTableColumn<T> =
+export type EuiBasicTableColumn<T extends object> =
   | EuiTableFieldDataColumnType<T>
   | EuiTableComputedColumnType<T>
   | EuiTableActionsColumnType<T>;
@@ -201,10 +201,14 @@ export interface CriteriaWithPagination<T> extends Criteria<T> {
   };
 }
 
-type CellPropsCallback<T> = (item: T, column: EuiBasicTableColumn<T>) => object;
+type CellPropsCallback<T extends object> = (
+  item: T,
+  column: EuiBasicTableColumn<T>
+) => object;
 type RowPropsCallback<T> = (item: T) => object;
 
-interface BasicTableProps<T> extends Omit<EuiTableProps, 'onChange'> {
+interface BasicTableProps<T extends object>
+  extends Omit<EuiTableProps, 'onChange'> {
   /**
    * Describes how to extract a unique ID from each item, used for selections & expanded rows
    */
@@ -285,15 +289,15 @@ interface BasicTableProps<T> extends Omit<EuiTableProps, 'onChange'> {
   textOnly?: boolean;
 }
 
-type BasicTableWithPaginationProps<T> = Omit<
+type BasicTableWithPaginationProps<T extends object> = Omit<
   BasicTableProps<T>,
   'pagination' | 'onChange'
 > & {
   pagination: Pagination;
   onChange?: (criteria: CriteriaWithPagination<T>) => void;
 };
 
-export type EuiBasicTableProps<T> = CommonProps &
+export type EuiBasicTableProps<T extends object> = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
   (BasicTableProps<T> | BasicTableWithPaginationProps<T>);
 
@@ -310,13 +314,13 @@ interface SortOptions {
   readOnly?: boolean;
 }
 
-function hasPagination<T>(
+function hasPagination<T extends object>(
   x: EuiBasicTableProps<T>
 ): x is BasicTableWithPaginationProps<T> {
   return x.hasOwnProperty('pagination') && !!x.pagination;
 }
 
-export class EuiBasicTable<T = any> extends Component<
+export class EuiBasicTable<T extends object = any> extends Component<
   EuiBasicTableProps<T>,
   State<T>
 > {
@@ -331,7 +335,7 @@ export class EuiBasicTable<T = any> extends Component<
     ),
   };
 
-  static getDerivedStateFromProps<T>(
+  static getDerivedStateFromProps<T extends object>(
     nextProps: EuiBasicTableProps<T>,
     prevState: State<T>
   ) {
@@ -630,9 +634,9 @@ export class EuiBasicTable<T = any> extends Component<
 
       items.push({
         name: column.name,
-        key: `_data_s_${
+        key: `_data_s_${String(
           (column as EuiTableFieldDataColumnType<T>).field
-        }_${index}`,
+        )}_${index}`,
         onSort: this.resolveColumnOnSort(column),
         isSorted: !!sortDirection,
         isSortAscending: sortDirection
@@ -854,11 +858,11 @@ export class EuiBasicTable<T = any> extends Component<
       }
       headers.push(
         <EuiTableHeaderCell
-          key={`_data_h_${field}_${index}`}
+          key={`_data_h_${String(field)}_${index}`}
           align={columnAlign}
           width={width}
           mobileOptions={mobileOptions}
-          data-test-subj={`tableHeaderCell_${field}_${index}`}
+          data-test-subj={`tableHeaderCell_${String(field)}_${index}`}
           description={description}
           {...sorting}
         >
@@ -897,7 +901,7 @@ export class EuiBasicTable<T = any> extends Component<
       if (footer) {
         footers.push(
           <EuiTableFooterCell
-            key={`footer_${field}_${footers.length - 1}`}
+            key={`footer_${String(field)}_${footers.length - 1}`}
             align={align}
           >
             {footer}
@@ -1219,7 +1223,7 @@ export class EuiBasicTable<T = any> extends Component<
   ) {
     const { field, render, dataType } = column;
 
-    const key = `_data_column_${field}_${itemId}_${columnIndex}`;
+    const key = `_data_column_${String(field)}_${itemId}_${columnIndex}`;
     const contentRenderer = render || this.getRendererForDataType(dataType);
     const value = get(item, field as string);
     const content = contentRenderer(value, item);

src/components/basic_table/collapsed_item_actions.tsx

@@ -29,7 +29,7 @@ import {
 } from './action_types';
 import { ItemIdResolved } from './table_types';
 
-export interface CollapsedItemActionsProps<T extends {}> {
+export interface CollapsedItemActionsProps<T extends object> {
   actions: Array<Action<T>>;
   item: T;
   itemId: ItemIdResolved;

src/components/basic_table/default_item_action.tsx

@@ -24,14 +24,14 @@ import {
   callWithItemIfFunction,
 } from './action_types';
 
-export interface DefaultItemActionProps<T> {
+export interface DefaultItemActionProps<T extends object> {
   action: Action<T>;
   enabled: boolean;
   item: T;
   className?: string;
 }
 
-export const DefaultItemAction = <T,>({
+export const DefaultItemAction = <T extends object>({
   action,
   enabled,
   item,

src/components/basic_table/expanded_item_actions.tsx

@@ -18,7 +18,7 @@ import {
 } from './action_types';
 import { ItemIdResolved } from './table_types';
 
-export interface ExpandedItemActionsProps<T> {
+export interface ExpandedItemActionsProps<T extends object> {
   actions: Array<Action<T>>;
   itemId: ItemIdResolved;
   item: T;

src/components/basic_table/in_memory_table.tsx

@@ -47,7 +47,7 @@ interface onChangeArgument {
   error: Error | null;
 }
 
-function isEuiSearchBarProps<T>(
+function isEuiSearchBarProps<T extends object>(
   x: EuiInMemoryTableProps<T>['search']
 ): x is EuiSearchBarProps {
   return typeof x !== 'boolean';
@@ -71,7 +71,7 @@ interface SortingOptions {
 
 type Sorting = boolean | SortingOptions;
 
-type InMemoryTableProps<T> = Omit<
+type InMemoryTableProps<T extends object> = Omit<
   EuiBasicTableProps<T>,
   'pagination' | 'sorting' | 'noItemsMessage' | 'onChange'
 > & {
@@ -130,18 +130,18 @@ type InMemoryTableProps<T> = Omit<
   childrenBetween?: ReactNode;
 };
 
-type InMemoryTablePropsWithPagination<T> = Omit<
+type InMemoryTablePropsWithPagination<T extends object> = Omit<
   InMemoryTableProps<T>,
   'pagination' | 'onTableChange'
 > & {
   pagination: Pagination;
   onTableChange?: (nextValues: CriteriaWithPagination<T>) => void;
 };
 
-export type EuiInMemoryTableProps<T> = CommonProps &
+export type EuiInMemoryTableProps<T extends object = object> = CommonProps &
   (InMemoryTableProps<T> | InMemoryTablePropsWithPagination<T>);
 
-interface State<T> {
+interface State<T extends object> {
   prevProps: {
     items: T[];
     sortName: ReactNode;
@@ -230,7 +230,7 @@ const getInitialPagination = (
   };
 };
 
-function findColumnByProp<T>(
+function findColumnByProp<T extends object>(
   columns: Array<EuiBasicTableColumn<T>>,
   prop: 'field' | 'name',
   value: string | ReactNode
@@ -247,7 +247,7 @@ function findColumnByProp<T>(
   }
 }
 
-function findColumnByFieldOrName<T>(
+function findColumnByFieldOrName<T extends object>(
   columns: Array<EuiBasicTableColumn<T>>,
   value: string | ReactNode
 ) {
@@ -260,7 +260,7 @@ function findColumnByFieldOrName<T>(
   return column;
 }
 
-function getInitialSorting<T>(
+function getInitialSorting<T extends object>(
   columns: Array<EuiBasicTableColumn<T>>,
   sorting: Sorting | undefined
 ) {
@@ -292,7 +292,7 @@ function getInitialSorting<T>(
   };
 }
 
-export class EuiInMemoryTable<T> extends Component<
+export class EuiInMemoryTable<T extends object = object> extends Component<
   EuiInMemoryTableProps<T>,
   State<T>
 > {
@@ -305,7 +305,7 @@ export class EuiInMemoryTable<T> extends Component<
   };
   tableRef: React.RefObject<EuiBasicTable>;
 
-  static getDerivedStateFromProps<T>(
+  static getDerivedStateFromProps<T extends object>(
     nextProps: EuiInMemoryTableProps<T>,
     prevState: State<T>
   ) {

src/components/basic_table/table_types.ts

@@ -132,7 +132,7 @@ export interface EuiTableComputedColumnType<T>
   readOnly?: boolean;
 }
 
-export interface EuiTableActionsColumnType<T> {
+export interface EuiTableActionsColumnType<T extends object> {
   /**
    * An array of one of the objects: #DefaultItemAction or #CustomItemAction
    */

src/components/common.ts

@@ -46,7 +46,7 @@ export type OneOf<T, K extends keyof T> = Omit<T, K> &
 /**
  * Wraps Object.keys with proper typescript definition of the resulting array
  */
-export function keysOf<T, K extends keyof T>(obj: T): K[] {
+export function keysOf<T extends object, K extends keyof T>(obj: T): K[] {
   return Object.keys(obj) as K[];
 }