feature: EuiDataGrid type improvements to support React 18 (#6958)

elastic · Jul 25, 2023 · 963fac3 · 963fac3
1 parent 0b15098
commit 963fac3
Show file tree

Hide file tree

Showing 19 changed files with 175 additions and 91 deletions.
diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js
@@ -10,7 +10,7 @@ function stripTypeScript(filename, ast) {
   return babelCore.transform(babelCore.transformFromAst(ast).code, {
     filename: filename,
     babelrc: false,
-    presets: ['@babel/typescript'],
+    presets: [['@babel/typescript', { allowDeclareFields: true }]],
   }).code;
 }
 

diff --git a/src-docs/src/views/datagrid/advanced/custom_renderer.tsx b/src-docs/src/views/datagrid/advanced/custom_renderer.tsx
@@ -16,6 +16,9 @@ import {
   EuiSpacer,
   useEuiTheme,
   logicalCSS,
+  EuiDataGridPaginationProps,
+  EuiDataGridSorting,
+  EuiDataGridColumnSortingConfig,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -166,16 +169,16 @@ export default () => {
 
   // Pagination
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
-  const onChangePage = useCallback((pageIndex) => {
+  const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>((pageIndex) => {
     setPagination((pagination) => ({ ...pagination, pageIndex }));
   }, []);
-  const onChangePageSize = useCallback((pageSize) => {
+  const onChangePageSize = useCallback<EuiDataGridPaginationProps['onChangeItemsPerPage']>((pageSize) => {
     setPagination((pagination) => ({ ...pagination, pageSize }));
   }, []);
 
   // Sorting
-  const [sortingColumns, setSortingColumns] = useState([]);
-  const onSort = useCallback((sortingColumns) => {
+  const [sortingColumns, setSortingColumns] = useState<EuiDataGridColumnSortingConfig[]>([]);
+  const onSort = useCallback<EuiDataGridSorting['onSort']>((sortingColumns) => {
     setSortingColumns(sortingColumns);
   }, []);
 

diff --git a/src-docs/src/views/datagrid/advanced/ref.tsx b/src-docs/src/views/datagrid/advanced/ref.tsx
@@ -16,6 +16,10 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiText,
+  EuiDataGridColumnCellAction,
+  EuiDataGridColumnSortingConfig,
+  EuiDataGridPaginationProps,
+  EuiDataGridSorting,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -44,13 +48,16 @@ export default () => {
     dataGridRef.current!.setFocusedCell(lastFocusedCell); // Set the data grid focus back to the cell that opened the modal
   }, [lastFocusedCell]);
 
-  const showModal = useCallback(({ rowIndex, colIndex }) => {
-    setIsModalVisible(true);
-    dataGridRef.current!.closeCellPopover(); // Close any open cell popovers
-    setLastFocusedCell({ rowIndex, colIndex }); // Store the cell that opened this modal
-  }, []);
+  const showModal = useCallback(
+    ({ rowIndex, colIndex }: { rowIndex: number; colIndex: number }) => {
+      setIsModalVisible(true);
+      dataGridRef.current!.closeCellPopover(); // Close any open cell popovers
+      setLastFocusedCell({ rowIndex, colIndex }); // Store the cell that opened this modal
+    },
+    []
+  );
 
-  const openModalAction = useCallback(
+  const openModalAction = useCallback<EuiDataGridColumnCellAction>(
     ({ Component, rowIndex, colIndex }) => {
       return (
         <Component
@@ -105,16 +112,23 @@ export default () => {
 
   // Pagination
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
-  const onChangePage = useCallback((pageIndex) => {
-    setPagination((pagination) => ({ ...pagination, pageIndex }));
-  }, []);
-  const onChangePageSize = useCallback((pageSize) => {
+  const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
+    (pageIndex) => {
+      setPagination((pagination) => ({ ...pagination, pageIndex }));
+    },
+    []
+  );
+  const onChangePageSize = useCallback<
+    EuiDataGridPaginationProps['onChangeItemsPerPage']
+  >((pageSize) => {
     setPagination((pagination) => ({ ...pagination, pageSize }));
   }, []);
 
   // Sorting
-  const [sortingColumns, setSortingColumns] = useState([]);
-  const onSort = useCallback((sortingColumns) => {
+  const [sortingColumns, setSortingColumns] = useState<
+    EuiDataGridColumnSortingConfig[]
+  >([]);
+  const onSort = useCallback<EuiDataGridSorting['onSort']>((sortingColumns) => {
     setSortingColumns(sortingColumns);
   }, []);
 

diff --git a/src-docs/src/views/datagrid/styling/row_height_auto.tsx b/src-docs/src/views/datagrid/styling/row_height_auto.tsx
@@ -18,6 +18,9 @@ import {
   EuiText,
   EuiSpacer,
   formatDate,
+  EuiDataGridSorting,
+  EuiDataGridColumnSortingConfig,
+  EuiDataGridPaginationProps,
 } from '../../../../../src';
 
 interface DataShape {
@@ -146,15 +149,19 @@ export default () => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
 
   // Sorting
-  const [sortingColumns, setSortingColumns] = useState([]);
-  const onSort = useCallback(
+  const [sortingColumns, setSortingColumns] = useState<
+    EuiDataGridColumnSortingConfig[]
+  >([]);
+  const onSort = useCallback<EuiDataGridSorting['onSort']>(
     (sortingColumns) => {
       setSortingColumns(sortingColumns);
     },
     [setSortingColumns]
   );
 
-  const onChangeItemsPerPage = useCallback(
+  const onChangeItemsPerPage = useCallback<
+    EuiDataGridPaginationProps['onChangeItemsPerPage']
+  >(
     (pageSize) =>
       setPagination((pagination) => ({
         ...pagination,
@@ -164,7 +171,7 @@ export default () => {
     [setPagination]
   );
 
-  const onChangePage = useCallback(
+  const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
     (pageIndex) =>
       setPagination((pagination) => ({ ...pagination, pageIndex })),
     [setPagination]

diff --git a/src-docs/src/views/datagrid/styling/row_height_fixed.tsx b/src-docs/src/views/datagrid/styling/row_height_fixed.tsx
@@ -18,6 +18,9 @@ import {
   EuiText,
   EuiSpacer,
   formatDate,
+  EuiDataGridSorting,
+  EuiDataGridColumnSortingConfig,
+  EuiDataGridPaginationProps,
 } from '../../../../../src';
 
 interface DataShape {
@@ -146,15 +149,15 @@ export default () => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
 
   // Sorting
-  const [sortingColumns, setSortingColumns] = useState([]);
-  const onSort = useCallback(
+  const [sortingColumns, setSortingColumns] = useState<EuiDataGridColumnSortingConfig[]>([]);
+  const onSort = useCallback<EuiDataGridSorting['onSort']>(
     (sortingColumns) => {
       setSortingColumns(sortingColumns);
     },
     [setSortingColumns]
   );
 
-  const onChangeItemsPerPage = useCallback(
+  const onChangeItemsPerPage = useCallback<EuiDataGridPaginationProps['onChangeItemsPerPage']>(
     (pageSize) =>
       setPagination((pagination) => ({
         ...pagination,
@@ -164,7 +167,7 @@ export default () => {
     [setPagination]
   );
 
-  const onChangePage = useCallback(
+  const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
     (pageIndex) =>
       setPagination((pagination) => ({ ...pagination, pageIndex })),
     [setPagination]

diff --git a/src-docs/src/views/datagrid/styling/row_line_height.tsx b/src-docs/src/views/datagrid/styling/row_line_height.tsx
@@ -8,7 +8,14 @@ import React, {
 } from 'react';
 import githubData from '../_row_auto_height_data.json';
 
-import { EuiDataGrid, EuiDataGridProps, formatDate } from '../../../../../src';
+import {
+  EuiDataGrid,
+  EuiDataGridColumnSortingConfig,
+  EuiDataGridPaginationProps,
+  EuiDataGridProps,
+  EuiDataGridSorting,
+  formatDate,
+} from '../../../../../src';
 
 interface DataShape {
   html_url: string;
@@ -96,15 +103,19 @@ export default () => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
 
   // Sorting
-  const [sortingColumns, setSortingColumns] = useState([]);
-  const onSort = useCallback(
+  const [sortingColumns, setSortingColumns] = useState<
+    EuiDataGridColumnSortingConfig[]
+  >([]);
+  const onSort = useCallback<EuiDataGridSorting['onSort']>(
     (sortingColumns) => {
       setSortingColumns(sortingColumns);
     },
     [setSortingColumns]
   );
 
-  const onChangeItemsPerPage = useCallback(
+  const onChangeItemsPerPage = useCallback<
+    EuiDataGridPaginationProps['onChangeItemsPerPage']
+  >(
     (pageSize) =>
       setPagination((pagination) => ({
         ...pagination,
@@ -114,7 +125,7 @@ export default () => {
     [setPagination]
   );
 
-  const onChangePage = useCallback(
+  const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
     (pageIndex) =>
       setPagination((pagination) => ({ ...pagination, pageIndex })),
     [setPagination]

diff --git a/src-docs/src/views/datagrid/toolbar/additional_controls.tsx b/src-docs/src/views/datagrid/toolbar/additional_controls.tsx
@@ -16,6 +16,7 @@ import {
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiPopover,
+  EuiDataGridPaginationProps,
 } from '../../../../../src';
 
 const columns = [
@@ -94,12 +95,14 @@ export default () => {
     columns.map(({ id }) => id)
   );
 
-  const setPageIndex = useCallback(
+  const setPageIndex = useCallback<EuiDataGridPaginationProps['onChangePage']>(
     (pageIndex) =>
       setPagination((pagination) => ({ ...pagination, pageIndex })),
     []
   );
-  const setPageSize = useCallback(
+  const setPageSize = useCallback<
+    EuiDataGridPaginationProps['onChangeItemsPerPage']
+  >(
     (pageSize) =>
       setPagination((pagination) => ({
         ...pagination,

diff --git a/src/components/datagrid/body/data_grid_body_custom.tsx b/src/components/datagrid/body/data_grid_body_custom.tsx
@@ -19,6 +19,7 @@ import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
 
 import {
   EuiDataGridBodyProps,
+  EuiDataGridCustomBodyProps,
   EuiDataGridSetCustomGridBodyProps,
 } from '../data_grid_types';
 import { useDataGridHeader } from './header';
@@ -140,7 +141,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
     rowHeightUtils,
   };
 
-  const _Cell = useCallback(
+  const _Cell = useCallback<EuiDataGridCustomBodyProps['Cell']>(
     ({ colIndex, visibleRowIndex, ...rest }) => {
       const style = {
         height: rowHeightUtils.isAutoHeight(visibleRowIndex, rowHeightsOptions)

diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -9,6 +9,7 @@
 import classNames from 'classnames';
 import React, {
   Component,
+  ContextType,
   createRef,
   FocusEvent,
   FunctionComponent,
@@ -143,6 +144,7 @@ export class EuiDataGridCell extends Component<
   style = null;
 
   static contextType = DataGridFocusContext;
+  declare context: ContextType<typeof DataGridFocusContext>;
 
   getInteractables = () => {
     const tabbingRef = this.cellContentsRef;

diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx
@@ -46,7 +46,9 @@ export const useCellPopover = (): {
   >({});
 
   const closeCellPopover = useCallback(() => setPopoverIsOpen(false), []);
-  const openCellPopover = useCallback(
+  const openCellPopover = useCallback<
+    DataGridCellPopoverContextShape['openCellPopover']
+  >(
     ({ rowIndex, colIndex }) => {
       // Prevent popover DOM issues when re-opening the same popover
       if (

diff --git a/src/components/datagrid/body/data_grid_row_manager.ts b/src/components/datagrid/body/data_grid_row_manager.ts
@@ -18,7 +18,7 @@ export const useRowManager = ({
 }): EuiDataGridRowManager => {
   const rowIdToElements = useRef(new Map<number, HTMLDivElement>());
 
-  const getRow = useCallback(
+  const getRow = useCallback<EuiDataGridRowManager['getRow']>(
     ({ rowIndex, visibleRowIndex, top, height }) => {
       let rowElement = rowIdToElements.current.get(rowIndex);
 

diff --git a/src/components/datagrid/body/header/data_grid_header_cell.tsx b/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -314,7 +314,7 @@ export const useSortingUtils = ({
 export const usePopoverArrowNavigation = () => {
   const popoverPanelRef = useRef<HTMLElement | null>(null);
   const actionsRef = useRef<FocusableElement[] | undefined>(undefined);
-  const panelRef = useCallback((ref) => {
+  const panelRef = useCallback((ref: HTMLElement | null) => {
     popoverPanelRef.current = ref;
     actionsRef.current = ref ? tabbable(ref) : undefined;
   }, []);