From e76c8da9fc715215dede6a769393196e50381bbf Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Tue, 25 Jul 2023 13:56:51 -0700
Subject: [PATCH] [EuiTablePagination] Allow page size props to be configured
 via `EuiProvider.componentProps` (#6951)

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
---
 .../pagination_bar.test.tsx.snap              |  67 --
 .../basic_table/pagination_bar.test.tsx       |  88 +--
 src/components/focus_trap/focus_trap.tsx      |  16 +-
 src/components/portal/portal.tsx              |  15 +-
 .../component_defaults.test.tsx               | 141 +++-
 .../component_defaults/component_defaults.tsx |  49 +-
 .../table_pagination.test.tsx.snap            | 631 ++++++++----------
 .../table_pagination.test.tsx                 | 100 ++-
 .../table_pagination/table_pagination.tsx     |  39 +-
 upcoming_changelogs/6951.md                   |   1 +
 10 files changed, 597 insertions(+), 550 deletions(-)
 create mode 100644 upcoming_changelogs/6951.md

diff --git a/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap b/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap
index 2366e0d0f51a..5afd7642a419 100644
--- a/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap
@@ -1,72 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PaginationBar render - custom page size options 1`] = `
-<div>
-  <EuiSpacer
-    size="m"
-  />
-  <EuiTablePagination
-    activePage={0}
-    itemsPerPage={5}
-    itemsPerPageOptions={
-      Array [
-        1,
-        2,
-        3,
-      ]
-    }
-    onChangeItemsPerPage={[Function]}
-    onChangePage={[Function]}
-    pageCount={0}
-  />
-</div>
-`;
-
-exports[`PaginationBar render - hiding per page options 1`] = `
-<div>
-  <EuiSpacer
-    size="m"
-  />
-  <EuiTablePagination
-    activePage={0}
-    itemsPerPage={5}
-    itemsPerPageOptions={
-      Array [
-        10,
-        25,
-        50,
-      ]
-    }
-    onChangeItemsPerPage={[Function]}
-    onChangePage={[Function]}
-    pageCount={0}
-    showPerPageOptions={false}
-  />
-</div>
-`;
-
-exports[`PaginationBar render - show all pageSize 1`] = `
-<div>
-  <EuiSpacer
-    size="m"
-  />
-  <EuiTablePagination
-    activePage={0}
-    itemsPerPage={0}
-    itemsPerPageOptions={
-      Array [
-        1,
-        5,
-        0,
-      ]
-    }
-    onChangeItemsPerPage={[Function]}
-    onChangePage={[Function]}
-    pageCount={1}
-  />
-</div>
-`;
-
 exports[`PaginationBar renders 1`] = `
 <div>
   <div
diff --git a/src/components/basic_table/pagination_bar.test.tsx b/src/components/basic_table/pagination_bar.test.tsx
index 5233bb14a65b..c8460b0e24fb 100644
--- a/src/components/basic_table/pagination_bar.test.tsx
+++ b/src/components/basic_table/pagination_bar.test.tsx
@@ -7,78 +7,44 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
 import { render } from '../../test/rtl';
 import { requiredProps } from '../../test';
 
 import { PaginationBar } from './pagination_bar';
 
 describe('PaginationBar', () => {
-  it('renders', () => {
-    const props = {
-      ...requiredProps,
-      pagination: {
-        pageIndex: 0,
-        pageSize: 5,
-        totalItemCount: 0,
-      },
-      onPageSizeChange: () => {},
-      onPageChange: () => {},
-    };
+  const props = {
+    ...requiredProps,
+    pagination: {
+      pageIndex: 0,
+      pageSize: 5,
+      totalItemCount: 0,
+    },
+    onPageSizeChange: () => {},
+    onPageChange: () => {},
+  };
 
+  it('renders', () => {
     const { container } = render(<PaginationBar {...props} />);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('render - custom page size options', () => {
-    const props = {
-      pagination: {
-        pageIndex: 0,
-        pageSize: 5,
-        totalItemCount: 0,
-        pageSizeOptions: [1, 2, 3],
-      },
-      onPageSizeChange: () => {},
-      onPageChange: () => {},
-    };
-
-    const component = shallow(<PaginationBar {...props} />);
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('render - hiding per page options', () => {
-    const props = {
-      pagination: {
-        pageIndex: 0,
-        pageSize: 5,
-        totalItemCount: 0,
-        showPerPageOptions: false,
-      },
-      onPageSizeChange: () => {},
-      onPageChange: () => {},
-    };
-
-    const component = shallow(<PaginationBar {...props} />);
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('render - show all pageSize', () => {
-    const props = {
-      pagination: {
-        pageIndex: 0,
-        pageSize: 0,
-        pageSizeOptions: [1, 5, 0],
-        totalItemCount: 5,
-      },
-      onPageSizeChange: () => {},
-      onPageChange: () => {},
-    };
-
-    const component = shallow(<PaginationBar {...props} />);
-
-    expect(component).toMatchSnapshot();
+  it('calls onPageChange with the correct off-by-one offset', () => {
+    const onPageChange = jest.fn();
+    const { getByLabelText } = render(
+      <PaginationBar
+        {...props}
+        pagination={{
+          ...props.pagination,
+          totalItemCount: 10,
+        }}
+        onPageChange={onPageChange}
+      />
+    );
+
+    fireEvent.click(getByLabelText('Page 2 of 2'));
+    expect(onPageChange).toHaveBeenCalledWith(1);
   });
 });
diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx
index 52a68bca9ebb..e71a892de1e1 100644
--- a/src/components/focus_trap/focus_trap.tsx
+++ b/src/components/focus_trap/focus_trap.tsx
@@ -13,7 +13,7 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { CommonProps } from '../common';
 import { findElementBySelectorOrRef, ElementTarget } from '../../services';
-import { useEuiComponentDefaults } from '../provider/component_defaults';
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 
 export type FocusTarget = ElementTarget;
 
@@ -82,16 +82,12 @@ export type EuiFocusTrapProps = Omit<
   returnFocus?: ReactFocusOnProps['returnFocus'];
 };
 
-export const EuiFocusTrap: FunctionComponent<EuiFocusTrapProps> = ({
-  children,
-  ...props
-}) => {
-  const { EuiFocusTrap: defaults } = useEuiComponentDefaults();
-  return (
-    <EuiFocusTrapClass {...defaults} {...props}>
-      {children}
-    </EuiFocusTrapClass>
+export const EuiFocusTrap: FunctionComponent<EuiFocusTrapProps> = (props) => {
+  const propsWithDefaults = usePropsWithComponentDefaults(
+    'EuiFocusTrap',
+    props
   );
+  return <EuiFocusTrapClass {...propsWithDefaults} />;
 };
 
 interface State {
diff --git a/src/components/portal/portal.tsx b/src/components/portal/portal.tsx
index bb3fae6706ce..d73863b6d06b 100644
--- a/src/components/portal/portal.tsx
+++ b/src/components/portal/portal.tsx
@@ -15,7 +15,7 @@ import React, { Component, FunctionComponent, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 import { EuiNestedThemeContext } from '../../services';
-import { useEuiComponentDefaults } from '../provider/component_defaults';
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 
 const INSERT_POSITIONS = ['after', 'before'] as const;
 type EuiPortalInsertPosition = (typeof INSERT_POSITIONS)[number];
@@ -40,16 +40,9 @@ export interface EuiPortalProps {
   portalRef?: (ref: HTMLDivElement | null) => void;
 }
 
-export const EuiPortal: FunctionComponent<EuiPortalProps> = ({
-  children,
-  ...props
-}) => {
-  const { EuiPortal: defaults } = useEuiComponentDefaults();
-  return (
-    <EuiPortalClass {...defaults} {...props}>
-      {children}
-    </EuiPortalClass>
-  );
+export const EuiPortal: FunctionComponent<EuiPortalProps> = (props) => {
+  const propsWithDefaults = usePropsWithComponentDefaults('EuiPortal', props);
+  return <EuiPortalClass {...propsWithDefaults} />;
 };
 
 export class EuiPortalClass extends Component<EuiPortalProps> {
diff --git a/src/components/provider/component_defaults/component_defaults.test.tsx b/src/components/provider/component_defaults/component_defaults.test.tsx
index f35187ed0e32..57f1cf076322 100644
--- a/src/components/provider/component_defaults/component_defaults.test.tsx
+++ b/src/components/provider/component_defaults/component_defaults.test.tsx
@@ -11,41 +11,138 @@ import { renderHook } from '@testing-library/react-hooks';
 
 import {
   EuiComponentDefaultsProvider,
-  useEuiComponentDefaults,
+  useComponentDefaults,
+  usePropsWithComponentDefaults,
 } from './component_defaults';
 
 describe('EuiComponentDefaultsProvider', () => {
-  it('sets up context that allows accessing the passed `componentDefaults` from anywhere', () => {
+  describe('useComponentDefaults', () => {
+    it('allows accessing provided `componentDefaults` from anywhere', () => {
+      const wrapper = ({ children }: PropsWithChildren<{}>) => (
+        <EuiComponentDefaultsProvider
+          componentDefaults={{
+            EuiPortal: {
+              insert: {
+                sibling: document.createElement('div'),
+                position: 'before',
+              },
+            },
+          }}
+        >
+          {children}
+        </EuiComponentDefaultsProvider>
+      );
+      const { result } = renderHook(useComponentDefaults, { wrapper });
+
+      expect(result.current).toMatchInlineSnapshot(`
+        Object {
+          "EuiPortal": Object {
+            "insert": Object {
+              "position": "before",
+              "sibling": <div />,
+            },
+          },
+        }
+      `);
+    });
+  });
+
+  describe('usePropsWithComponentDefaults', () => {
     const wrapper = ({ children }: PropsWithChildren<{}>) => (
       <EuiComponentDefaultsProvider
         componentDefaults={{
-          EuiPortal: {
-            insert: {
-              sibling: document.createElement('div'),
-              position: 'before',
-            },
+          EuiTablePagination: {
+            itemsPerPage: 20,
+            itemsPerPageOptions: [20, 40, 80, 0],
           },
         }}
       >
         {children}
       </EuiComponentDefaultsProvider>
     );
-    const { result } = renderHook(useEuiComponentDefaults, { wrapper });
-
-    expect(result.current).toMatchInlineSnapshot(`
-      Object {
-        "EuiPortal": Object {
-          "insert": Object {
-            "position": "before",
-            "sibling": <div />,
-          },
-        },
-      }
-    `);
+
+    it("returns a specific component's provided default props", () => {
+      const { result } = renderHook(
+        () => usePropsWithComponentDefaults('EuiTablePagination', {}),
+        { wrapper }
+      );
+
+      expect(result.current).toEqual({
+        itemsPerPage: 20,
+        itemsPerPageOptions: [20, 40, 80, 0],
+      });
+    });
+
+    it('correctly overrides defaults with actual props passed', () => {
+      const { result } = renderHook(
+        () =>
+          usePropsWithComponentDefaults('EuiTablePagination', {
+            itemsPerPageOptions: [5, 10, 20],
+          }),
+        { wrapper }
+      );
+
+      expect(result.current).toEqual({
+        itemsPerPage: 20,
+        itemsPerPageOptions: [5, 10, 20],
+      });
+    });
+
+    it('correctly handles props without a default defined', () => {
+      const { result } = renderHook(
+        () =>
+          usePropsWithComponentDefaults('EuiTablePagination', {
+            showPerPageOptions: false,
+          }),
+        { wrapper }
+      );
+
+      expect(result.current).toEqual({
+        itemsPerPage: 20,
+        itemsPerPageOptions: [20, 40, 80, 0],
+        showPerPageOptions: false,
+      });
+    });
+
+    it('correctly handles components with no defaults defined', () => {
+      const { result } = renderHook(
+        () =>
+          usePropsWithComponentDefaults('EuiFocusTrap', {
+            children: 'test',
+            crossFrame: true,
+          }),
+        { wrapper }
+      );
+
+      expect(result.current).toEqual({
+        children: 'test',
+        crossFrame: true,
+      });
+    });
+
+    it('correctly handles no component defaults defined at all', () => {
+      const wrapper = ({ children }: PropsWithChildren<{}>) => (
+        <EuiComponentDefaultsProvider>{children}</EuiComponentDefaultsProvider>
+      );
+      const { result } = renderHook(
+        () =>
+          usePropsWithComponentDefaults('EuiFocusTrap', {
+            children: 'test',
+            gapMode: 'margin',
+          }),
+        { wrapper }
+      );
+
+      expect(result.current).toEqual({
+        children: 'test',
+        gapMode: 'margin',
+      });
+    });
   });
 
   // NOTE: Components are in charge of their own testing to ensure that the props
-  // coming from `useEuiComponentDefaults()` were properly applied. This file
-  // is simply a very light wrapper that carries prop data.
-  // @see `src/components/portal/portal.spec.tsx` as an example
+  // coming from the `componentDefaults` configuration were properly applied.
+  // Examples:
+  // @see src/components/portal/portal.spec.tsx
+  // @see src/components/table/table_pagination/table_pagination.test.tsx
 });
diff --git a/src/components/provider/component_defaults/component_defaults.tsx b/src/components/provider/component_defaults/component_defaults.tsx
index 752fdbd8f3e4..da71ccfc71a1 100644
--- a/src/components/provider/component_defaults/component_defaults.tsx
+++ b/src/components/provider/component_defaults/component_defaults.tsx
@@ -6,24 +6,36 @@
  * Side Public License, v 1.
  */
 
-import React, { createContext, useContext, FunctionComponent } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  FunctionComponent,
+} from 'react';
 
-import { EuiPortalProps } from '../../portal';
-import { EuiFocusTrapProps } from '../../focus_trap';
+import type { EuiPortalProps } from '../../portal';
+import type { EuiFocusTrapProps } from '../../focus_trap';
+import type { EuiTablePaginationProps } from '../../table';
 
 export type EuiComponentDefaults = {
   /**
    * Provide a global configuration for EuiPortal's default insertion position.
    */
-  EuiPortal?: { insert: EuiPortalProps['insert'] };
+  EuiPortal?: Pick<EuiPortalProps, 'insert'>;
   /**
    * Provide a global configuration for EuiFocusTrap's `gapMode` and `crossFrame` props
    */
   EuiFocusTrap?: Pick<EuiFocusTrapProps, 'gapMode' | 'crossFrame'>;
   /**
-   * TODO
+   * Provide global settings for EuiTablePagination's props that affect page size
+   * / the rows per page selection.
+   *
+   * These defaults will be inherited all table and grid components that utilize EuiTablePagination.
    */
-  EuiPagination?: unknown;
+  EuiTablePagination?: Pick<
+    EuiTablePaginationProps,
+    'itemsPerPage' | 'itemsPerPageOptions' | 'showPerPageOptions'
+  >;
 };
 
 // Declaring as a static const for reference integrity/reducing rerenders
@@ -49,8 +61,29 @@ export const EuiComponentDefaultsProvider: FunctionComponent<{
 };
 
 /*
- * Hook
+ * Hooks
  */
-export const useEuiComponentDefaults = () => {
+export const useComponentDefaults = () => {
   return useContext(EuiComponentDefaultsContext);
 };
+
+// Merge individual component props with component defaults
+export const usePropsWithComponentDefaults = <
+  TComponentName extends keyof EuiComponentDefaults,
+  TComponentProps
+>(
+  componentName: TComponentName,
+  props: TComponentProps
+): TComponentProps => {
+  const context = useContext(EuiComponentDefaultsContext);
+
+  const componentDefaults = context[componentName] ?? emptyDefaults;
+
+  return useMemo(
+    () => ({
+      ...componentDefaults,
+      ...props,
+    }),
+    [componentDefaults, props]
+  );
+};
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 3536c41eb829..0186f4897931 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -1,398 +1,329 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiTablePagination is rendered 1`] = `
-<div
-  class="euiFlexGroup eui-xScroll emotion-euiFlexGroup-wrap-s-spaceBetween-center-row"
->
-  <div
-    class="euiFlexItem emotion-euiFlexItem-growZero"
-  >
+exports[`EuiTablePagination renders 1`] = `
+<body>
+  <div>
     <div
-      class="euiPopover emotion-euiPopover"
+      class="euiFlexGroup eui-xScroll emotion-euiFlexGroup-wrap-s-spaceBetween-center-row"
     >
       <div
-        class="euiPopover__anchor css-16vtueo-render"
-      >
-        <button
-          class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
-          data-test-subj="tablePaginationPopoverButton"
-          type="button"
-        >
-          <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-          >
-            <span
-              class="eui-textTruncate euiButtonEmpty__text"
-            >
-              Rows per page
-              : 
-              50
-            </span>
-            <span
-              color="inherit"
-              data-euiicon-type="arrowDown"
-            />
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiFlexItem emotion-euiFlexItem-growZero"
-  >
-    <nav
-      aria-label="aria-label"
-      class="euiPagination testClass1 testClass2 emotion-euiPagination-euiTestCss"
-      data-test-subj="test subject string"
-    >
-      <span
-        aria-atomic="true"
-        aria-relevant="additions text"
-        class="emotion-euiScreenReaderOnly"
-        role="status"
-      >
-        Page 2 of 5
-      </span>
-      <button
-        aria-label="Previous page"
-        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationButton"
-        data-test-subj="pagination-button-previous"
-        title="Previous page"
-        type="button"
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="arrowLeft"
-        />
-      </button>
-      <ul
-        aria-label="aria-label"
-        class="euiPagination__list emotion-euiPagination__list"
-      >
-        <li
-          class="euiPagination__item"
+        <div
+          class="euiPopover emotion-euiPopover"
         >
-          <button
-            aria-label="Page 1 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
-            data-test-subj="pagination-button-0"
-            type="button"
+          <div
+            class="euiPopover__anchor css-16vtueo-render"
           >
-            <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            <button
+              class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+              data-test-subj="tablePaginationPopoverButton"
+              type="button"
             >
               <span
-                class="eui-textTruncate euiButtonEmpty__text"
+                class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
               >
-                1
+                <span
+                  class="eui-textTruncate euiButtonEmpty__text"
+                >
+                  Rows per page
+                  : 
+                  50
+                </span>
+                <span
+                  color="inherit"
+                  data-euiicon-type="arrowDown"
+                />
               </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="euiPagination__item"
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <nav
+          aria-label="aria-label"
+          class="euiPagination testClass1 testClass2 emotion-euiPagination-euiTestCss"
+          data-test-subj="test subject string"
         >
-          <button
-            aria-current="true"
-            aria-label="Page 2 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
-            data-test-subj="pagination-button-1"
-            disabled=""
-            type="button"
+          <span
+            aria-atomic="true"
+            aria-relevant="additions text"
+            class="emotion-euiScreenReaderOnly"
+            role="status"
           >
-            <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-            >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
-              >
-                2
-              </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="euiPagination__item"
-        >
+            Page 2 of 5
+          </span>
           <button
-            aria-label="Page 3 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
-            data-test-subj="pagination-button-2"
+            aria-label="Previous page"
+            class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationButton"
+            data-test-subj="pagination-button-previous"
+            title="Previous page"
             type="button"
           >
             <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-            >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
-              >
-                3
-              </span>
-            </span>
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowLeft"
+            />
           </button>
-        </li>
-        <li
-          class="euiPagination__item"
-        >
-          <button
-            aria-label="Page 4 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
-            data-test-subj="pagination-button-3"
-            type="button"
+          <ul
+            aria-label="aria-label"
+            class="euiPagination__list emotion-euiPagination__list"
           >
-            <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            <li
+              class="euiPagination__item"
             >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
+              <button
+                aria-label="Page 1 of 5"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
+                data-test-subj="pagination-button-0"
+                type="button"
               >
-                4
-              </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="euiPagination__item"
-        >
-          <button
-            aria-label="Page 5 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
-            data-test-subj="pagination-button-4"
-            type="button"
-          >
-            <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                <span
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                >
+                  <span
+                    class="eui-textTruncate euiButtonEmpty__text"
+                  >
+                    1
+                  </span>
+                </span>
+              </button>
+            </li>
+            <li
+              class="euiPagination__item"
             >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
+              <button
+                aria-current="true"
+                aria-label="Page 2 of 5"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
+                data-test-subj="pagination-button-1"
+                disabled=""
+                type="button"
               >
-                5
-              </span>
-            </span>
-          </button>
-        </li>
-      </ul>
-      <button
-        aria-label="Next page"
-        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationButton"
-        data-test-subj="pagination-button-next"
-        title="Next page"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="arrowRight"
-        />
-      </button>
-    </nav>
-  </div>
-</div>
-`;
-
-exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
-<div
-  class="euiFlexGroup eui-xScroll emotion-euiFlexGroup-wrap-s-spaceBetween-center-row"
->
-  <div
-    class="euiFlexItem emotion-euiFlexItem-growZero"
-  />
-  <div
-    class="euiFlexItem emotion-euiFlexItem-growZero"
-  >
-    <nav
-      aria-label="aria-label"
-      class="euiPagination testClass1 testClass2 emotion-euiPagination-euiTestCss"
-      data-test-subj="test subject string"
-    >
-      <span
-        aria-atomic="true"
-        aria-relevant="additions text"
-        class="emotion-euiScreenReaderOnly"
-        role="status"
-      >
-        Page 2 of 5
-      </span>
-      <button
-        aria-label="Previous page"
-        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationButton"
-        data-test-subj="pagination-button-previous"
-        title="Previous page"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="arrowLeft"
-        />
-      </button>
-      <ul
-        aria-label="aria-label"
-        class="euiPagination__list emotion-euiPagination__list"
-      >
-        <li
-          class="euiPagination__item"
-        >
-          <button
-            aria-label="Page 1 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
-            data-test-subj="pagination-button-0"
-            type="button"
-          >
-            <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                <span
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                >
+                  <span
+                    class="eui-textTruncate euiButtonEmpty__text"
+                  >
+                    2
+                  </span>
+                </span>
+              </button>
+            </li>
+            <li
+              class="euiPagination__item"
             >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
+              <button
+                aria-label="Page 3 of 5"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
+                data-test-subj="pagination-button-2"
+                type="button"
               >
-                1
-              </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="euiPagination__item"
-        >
-          <button
-            aria-current="true"
-            aria-label="Page 2 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
-            data-test-subj="pagination-button-1"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                <span
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                >
+                  <span
+                    class="eui-textTruncate euiButtonEmpty__text"
+                  >
+                    3
+                  </span>
+                </span>
+              </button>
+            </li>
+            <li
+              class="euiPagination__item"
             >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
+              <button
+                aria-label="Page 4 of 5"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
+                data-test-subj="pagination-button-3"
+                type="button"
               >
-                2
-              </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="euiPagination__item"
-        >
-          <button
-            aria-label="Page 3 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
-            data-test-subj="pagination-button-2"
-            type="button"
-          >
-            <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                <span
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                >
+                  <span
+                    class="eui-textTruncate euiButtonEmpty__text"
+                  >
+                    4
+                  </span>
+                </span>
+              </button>
+            </li>
+            <li
+              class="euiPagination__item"
             >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
+              <button
+                aria-label="Page 5 of 5"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
+                data-test-subj="pagination-button-4"
+                type="button"
               >
-                3
-              </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="euiPagination__item"
-        >
+                <span
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                >
+                  <span
+                    class="eui-textTruncate euiButtonEmpty__text"
+                  >
+                    5
+                  </span>
+                </span>
+              </button>
+            </li>
+          </ul>
           <button
-            aria-label="Page 4 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
-            data-test-subj="pagination-button-3"
+            aria-label="Next page"
+            class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationButton"
+            data-test-subj="pagination-button-next"
+            title="Next page"
             type="button"
           >
             <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-            >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
-              >
-                4
-              </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="euiPagination__item"
-        >
-          <button
-            aria-label="Page 5 of 5"
-            class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
-            data-test-subj="pagination-button-4"
-            type="button"
-          >
-            <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-            >
-              <span
-                class="eui-textTruncate euiButtonEmpty__text"
-              >
-                5
-              </span>
-            </span>
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowRight"
+            />
           </button>
-        </li>
-      </ul>
-      <button
-        aria-label="Next page"
-        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationButton"
-        data-test-subj="pagination-button-next"
-        title="Next page"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="arrowRight"
-        />
-      </button>
-    </nav>
+        </nav>
+      </div>
+    </div>
   </div>
-</div>
-`;
-
-exports[`EuiTablePagination renders a "show all" itemsPerPage option 1`] = `
-<div
-  class="euiFlexGroup eui-xScroll emotion-euiFlexGroup-wrap-s-spaceBetween-center-row"
->
   <div
-    class="euiFlexItem emotion-euiFlexItem-growZero"
+    data-euiportal="true"
   >
     <div
-      class="euiPopover emotion-euiPopover"
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
+    <div
+      data-focus-lock-disabled="disabled"
     >
       <div
-        class="euiPopover__anchor css-16vtueo-render"
+        aria-describedby="generated-id"
+        aria-live="off"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel"
+        data-autofocus="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: -16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        tabindex="0"
       >
-        <button
-          class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
-          data-test-subj="tablePaginationPopoverButton"
-          type="button"
+        <div
+          class="euiPopover__arrow emotion-euiPopoverArrow-top"
+          data-popover-arrow="top"
+          style="left: 10px; top: 0px;"
+        />
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
         >
-          <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+        </p>
+        <div>
+          <div
+            class="euiContextMenuPanel"
+            data-test-subj="tablePaginationRowOptions"
+            tabindex="-1"
           >
-            <span
-              class="eui-textTruncate euiButtonEmpty__text"
-            >
-              Showing all rows
-            </span>
-            <span
-              color="inherit"
-              data-euiicon-type="arrowDown"
-            />
-          </span>
-        </button>
+            <div>
+              <button
+                class="euiContextMenuItem"
+                data-test-subj="tablePagination-10-rows"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
+                >
+                  <span
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="empty"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
+                  >
+                    10 rows
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiContextMenuItem"
+                data-test-subj="tablePagination-20-rows"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
+                >
+                  <span
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="empty"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
+                  >
+                    20 rows
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiContextMenuItem"
+                data-test-subj="tablePagination-50-rows"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
+                >
+                  <span
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="check"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
+                  >
+                    50 rows
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiContextMenuItem"
+                data-test-subj="tablePagination-100-rows"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
+                >
+                  <span
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="empty"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
+                  >
+                    100 rows
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
   </div>
-  <div
-    class="euiFlexItem emotion-euiFlexItem-growZero"
-  />
-</div>
+</body>
 `;
diff --git a/src/components/table/table_pagination/table_pagination.test.tsx b/src/components/table/table_pagination/table_pagination.test.tsx
index d05e77f59721..42ad1c6b9df7 100644
--- a/src/components/table/table_pagination/table_pagination.test.tsx
+++ b/src/components/table/table_pagination/table_pagination.test.tsx
@@ -7,9 +7,12 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 
+import { EuiProvider } from '../../provider';
+
 import { EuiTablePagination } from './table_pagination';
 
 describe('EuiTablePagination', () => {
@@ -18,16 +21,45 @@ describe('EuiTablePagination', () => {
     pageCount: 5,
     onChangePage: jest.fn(),
   };
-  test('is rendered', () => {
-    const { container } = render(
+
+  it('renders', () => {
+    const { getByTestSubject, baseElement } = render(
       <EuiTablePagination {...requiredProps} {...paginationProps} />
     );
 
-    expect(container.firstChild).toMatchSnapshot();
+    fireEvent.click(getByTestSubject('tablePaginationPopoverButton'));
+    expect(baseElement).toMatchSnapshot();
   });
 
-  test('is rendered when hiding the per page options', () => {
-    const { container } = render(
+  it('renders custom items per page / page sizes', () => {
+    const { getByText } = render(
+      <EuiTablePagination
+        {...requiredProps}
+        {...paginationProps}
+        itemsPerPage={10}
+      />
+    );
+
+    expect(getByText('Rows per page: 10')).toBeTruthy();
+  });
+
+  it('renders custom items per page size options', () => {
+    const { getByTestSubject } = render(
+      <EuiTablePagination
+        {...requiredProps}
+        {...paginationProps}
+        itemsPerPageOptions={[1, 2, 3]}
+      />
+    );
+
+    fireEvent.click(getByTestSubject('tablePaginationPopoverButton'));
+    expect(getByTestSubject('tablePagination-1-rows')).toBeTruthy();
+    expect(getByTestSubject('tablePagination-2-rows')).toBeTruthy();
+    expect(getByTestSubject('tablePagination-3-rows')).toBeTruthy();
+  });
+
+  it('hides the per page options', () => {
+    const { queryByTestSubject } = render(
       <EuiTablePagination
         {...requiredProps}
         {...paginationProps}
@@ -35,11 +67,11 @@ describe('EuiTablePagination', () => {
       />
     );
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(queryByTestSubject('tablePaginationPopoverButton')).toBe(null);
   });
 
-  test('renders a "show all" itemsPerPage option', () => {
-    const { container } = render(
+  it('renders a "show all" itemsPerPage option', () => {
+    const { getByText, getByTestSubject } = render(
       <EuiTablePagination
         {...requiredProps}
         {...paginationProps}
@@ -48,6 +80,56 @@ describe('EuiTablePagination', () => {
       />
     );
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('Showing all rows')).toBeTruthy();
+    fireEvent.click(getByTestSubject('tablePaginationPopoverButton'));
+    expect(getByText('Show all rows')).toBeTruthy();
+  });
+
+  describe('configurable defaults', () => {
+    test('itemsPerPage', () => {
+      const { getByText } = render(
+        <EuiProvider
+          componentDefaults={{ EuiTablePagination: { itemsPerPage: 20 } }}
+        >
+          <EuiTablePagination {...paginationProps} />
+        </EuiProvider>,
+        { wrapper: undefined }
+      );
+
+      expect(getByText('Rows per page: 20')).toBeTruthy();
+    });
+
+    test('itemsPerPageOptions', () => {
+      const { getByTestSubject } = render(
+        <EuiProvider
+          componentDefaults={{
+            EuiTablePagination: { itemsPerPageOptions: [5, 10, 15] },
+          }}
+        >
+          <EuiTablePagination {...paginationProps} />
+        </EuiProvider>,
+        { wrapper: undefined }
+      );
+
+      fireEvent.click(getByTestSubject('tablePaginationPopoverButton'));
+      expect(getByTestSubject('tablePaginationRowOptions').textContent).toEqual(
+        '5 rows10 rows15 rows'
+      );
+    });
+
+    test('showPerPageOptions', () => {
+      const { queryByTestSubject } = render(
+        <EuiProvider
+          componentDefaults={{
+            EuiTablePagination: { showPerPageOptions: false },
+          }}
+        >
+          <EuiTablePagination {...paginationProps} />
+        </EuiProvider>,
+        { wrapper: undefined }
+      );
+
+      expect(queryByTestSubject('tablePaginationPopoverButton')).toBe(null);
+    });
   });
 });
diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx
index 3c94efc0cced..8b254a9756ec 100644
--- a/src/components/table/table_pagination/table_pagination.tsx
+++ b/src/components/table/table_pagination/table_pagination.tsx
@@ -20,6 +20,8 @@ import { EuiPagination, EuiPaginationProps } from '../../pagination';
 import { EuiPopover } from '../../popover';
 import { EuiI18n } from '../../i18n';
 
+import { usePropsWithComponentDefaults } from '../../provider/component_defaults';
+
 export type PageChangeHandler = EuiPaginationProps['onPageClick'];
 export type ItemsPerPageChangeHandler = (pageSize: number) => void;
 
@@ -27,16 +29,22 @@ export interface EuiTablePaginationProps
   extends Omit<EuiPaginationProps, 'onPageClick'> {
   /**
    * Option to completely hide the "Rows per page" selector.
+   *
+   * @default true
    */
   showPerPageOptions?: boolean;
   /**
    * Current selection for "Rows per page".
    * Pass `0` to display the selected "Show all" option and hide the pagination.
+   *
+   * @default 50
    */
   itemsPerPage?: number;
   /**
    * Custom array of options for "Rows per page".
    * Pass `0` as one of the options to create a "Show all" option.
+   *
+   * @default [10, 20, 50, 100]
    */
   itemsPerPageOptions?: number[];
   /**
@@ -51,16 +59,20 @@ export interface EuiTablePaginationProps
   'aria-label'?: string;
 }
 
-export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
-  activePage,
-  itemsPerPage = 50,
-  itemsPerPageOptions = [10, 20, 50, 100],
-  showPerPageOptions = true,
-  onChangeItemsPerPage = () => {},
-  onChangePage,
-  pageCount,
-  ...rest
-}) => {
+export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = (
+  props
+) => {
+  const {
+    activePage,
+    itemsPerPage = 50,
+    itemsPerPageOptions = [10, 20, 50, 100],
+    showPerPageOptions = true,
+    onChangeItemsPerPage,
+    onChangePage,
+    pageCount,
+    ...rest
+  } = usePropsWithComponentDefaults('EuiTablePagination', props);
+
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const togglePopover = useCallback(() => {
@@ -105,7 +117,7 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
           icon={itemsPerPageOption === itemsPerPage ? 'check' : 'empty'}
           onClick={() => {
             closePopover();
-            onChangeItemsPerPage(itemsPerPageOption);
+            onChangeItemsPerPage?.(itemsPerPageOption);
           }}
           data-test-subj={`tablePagination-${itemsPerPageOption}-rows`}
         >
@@ -134,7 +146,10 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
       panelPaddingSize="none"
       anchorPosition="upRight"
     >
-      <EuiContextMenuPanel items={items} />
+      <EuiContextMenuPanel
+        items={items}
+        data-test-subj="tablePaginationRowOptions"
+      />
     </EuiPopover>
   );
 
diff --git a/upcoming_changelogs/6951.md b/upcoming_changelogs/6951.md
new file mode 100644
index 000000000000..98f082b1149a
--- /dev/null
+++ b/upcoming_changelogs/6951.md
@@ -0,0 +1 @@
+- `EuiTablePagination`'s `itemsPerPage`, `itemsPerPageOptions`, and `showPerPageOptions` props can now be configured globally via `EuiProvider.componentDefaults`