@razorpay/blade 12.65.1 → 12.67.0

package/build/lib/web/development/components/Table/TablePagination.web.js

@@ -1,174 +1,39 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React__default, { useEffect, useCallback } from 'react';
-import styled from 'styled-components';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useEffect, useMemo } from 'react';
 import { useTableContext } from './TableContext.js';
 import { ComponentIds } from './componentIds.js';
 import { tablePagination } from './tokens.js';
 import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
-import getIn from '../../utils/lodashButBetter/get.js';
 import '../Box/BaseBox/index.js';
-import '../Icons/index.js';
-import '../Dropdown/index.js';
-import '../Input/DropdownInputTriggers/index.js';
-import '../ActionList/index.js';
-import '../Typography/index.js';
-import '../../utils/index.js';
-import '../Button/index.js';
-import '../../utils/makeAccessible/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
-import '../BladeProvider/index.js';
 import '../../utils/logger/index.js';
-import '../../utils/getFocusRingStyles/index.js';
-import '../../utils/makeAnalyticsAttribute/index.js';
-import '../../utils/metaAttribute/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
-import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
-import { makeSize } from '../../utils/makeSize/makeSize.js';
-import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
-import useTheme from '../BladeProvider/useTheme.js';
+import '../Pagination/index.js';
+import { jsx } from 'react/jsx-runtime';
 import { throwBladeError } from '../../utils/logger/logger.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
-import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { Text } from '../Typography/Text/Text.js';
-import { Dropdown } from '../Dropdown/Dropdown.js';
-import { SelectInput } from '../Input/DropdownInputTriggers/SelectInput.js';
-import { DropdownOverlay } from '../Dropdown/DropdownOverlay.web.js';
-import { ActionList } from '../ActionList/ActionList.js';
-import { ActionListItem } from '../ActionList/ActionListItem.js';
-import Button from '../Button/Button/Button.js';
-import ChevronLeftIcon from '../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
-import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
-import ChevronsLeftIcon from '../Icons/ChevronsLeftIcon/ChevronsLeftIcon.js';
-import MoreHorizontalIcon from '../Icons/MoreHorizontalIcon/MoreHorizontalIcon.js';
-import ChevronsRightIcon from '../Icons/ChevronsRightIcon/ChevronsRightIcon.js';
-import ChevronRightIcon from '../Icons/ChevronRightIcon/ChevronRightIcon.js';
+import { Pagination } from '../Pagination/Pagination.web.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
 var _excluded = ["currentPage", "onPageChange", "onPageSizeChange", "defaultPageSize", "showPageSizePicker", "showPageNumberSelector", "showLabel", "label", "totalItemCount", "paginationType"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var pageSizeOptions = [10, 25, 50];
-var PageSelectionButton = /*#__PURE__*/styled.button.attrs(function () {
-  return _objectSpread({}, metaAttribute({
-    name: MetaConstants.TablePageSelectionButton
-  }));
-}).withConfig({
-  displayName: "TablePaginationweb__PageSelectionButton",
-  componentId: "sc-127igl5-0"
-})(function (_ref) {
-  var theme = _ref.theme,
-    isSelected = _ref.isSelected;
-  return {
-    backgroundColor: isSelected ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelected) : 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    height: makeSize(tablePagination.pageSelectionButton.height),
-    width: makeSize(tablePagination.pageSelectionButton.width),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: getIn(theme.border.radius, tablePagination.pageSelectionButton.borderRadius),
-    '&:hover': {
-      backgroundColor: isSelected ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelectedHover) : getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorHover)
-    },
-    '&:focus-visible': {
-      backgroundColor: isSelected ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelectedActive) : getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorActive),
-      outline: 'none',
-      '&:focus-visible': getFocusRingStyles({
-        theme: theme
-      })
-    },
-    '&:active': {
-      backgroundColor: isSelected ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelectedActive) : getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorActive)
-    }
-  };
-});
-var getPaginationButtons = function getPaginationButtons(_ref2) {
-  var currentSelection = _ref2.currentSelection,
-    totalPages = _ref2.totalPages;
-  var halfRange = 2;
-  var minMiddleItems = 5;
-
-  // return if totalPages is less than minMiddleItems
-  if (totalPages <= minMiddleItems) {
-    return {
-      middleItems: Array.from({
-        length: totalPages - 2
-      }, function (_, index) {
-        return index + 2;
-      }),
-      showStartEllipsis: false,
-      showEndEllipsis: false,
-      firstItem: 1,
-      lastItem: totalPages
-    };
-  }
-  var start = Math.max(1, currentSelection - halfRange);
-  var end = Math.min(totalPages, start + 2 * halfRange);
-
-  // Ensure at least minMiddleItems items in middleItems
-  while (end - start + 1 < minMiddleItems && (start > 1 || end < totalPages)) {
-    if (start > 1) {
-      start--;
-    }
-    if (end < totalPages) {
-      end++;
-    }
-  }
-  var showStartEllipsis = false;
-  var showEndEllipsis = false;
-  var paginationButtons = [];
-  for (var i = start; i <= end; i++) {
-    paginationButtons.push(i);
-  }
-
-  // if paginationButtons contains 1, remove it
-  if (paginationButtons.includes(1)) {
-    paginationButtons.shift();
-    // add an extra item at the end if length of total pages is greater than minMiddleItems+1
-    if (totalPages > minMiddleItems + 1) paginationButtons.push(end + 1);
-  }
-
-  // if paginationButtons contains totalPages, remove it
-  if (paginationButtons.includes(totalPages)) {
-    paginationButtons.pop();
-    // add an extra item at the beginning if length of total pages is greater than minMiddleItems+1
-    if (totalPages > minMiddleItems + 1) paginationButtons.unshift(start - 1);
-  }
-  if (paginationButtons[0] > 2) {
-    showStartEllipsis = true;
-  }
-  if (paginationButtons[paginationButtons.length - 1] + 1 < totalPages) {
-    showEndEllipsis = true;
-  }
-  return {
-    middleItems: paginationButtons,
-    showStartEllipsis: showStartEllipsis,
-    showEndEllipsis: showEndEllipsis,
-    firstItem: 1,
-    lastItem: totalPages
-  };
-};
-var _TablePagination = function _TablePagination(_ref3) {
-  var _currentPaginationSta;
-  var controlledCurrentPage = _ref3.currentPage,
-    onPageChange = _ref3.onPageChange,
-    onPageSizeChange = _ref3.onPageSizeChange,
-    _ref3$defaultPageSize = _ref3.defaultPageSize,
-    defaultPageSize = _ref3$defaultPageSize === void 0 ? tablePagination.defaultPageSize : _ref3$defaultPageSize,
-    _ref3$showPageSizePic = _ref3.showPageSizePicker,
-    showPageSizePicker = _ref3$showPageSizePic === void 0 ? true : _ref3$showPageSizePic,
-    _ref3$showPageNumberS = _ref3.showPageNumberSelector,
-    showPageNumberSelector = _ref3$showPageNumberS === void 0 ? false : _ref3$showPageNumberS,
-    showLabel = _ref3.showLabel,
-    label = _ref3.label,
-    totalItemCount = _ref3.totalItemCount,
-    _ref3$paginationType = _ref3.paginationType,
-    paginationType = _ref3$paginationType === void 0 ? 'client' : _ref3$paginationType,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+var _TablePagination = function _TablePagination(_ref) {
+  var controlledCurrentPage = _ref.currentPage,
+    onPageChange = _ref.onPageChange,
+    onPageSizeChange = _ref.onPageSizeChange,
+    _ref$defaultPageSize = _ref.defaultPageSize,
+    defaultPageSize = _ref$defaultPageSize === void 0 ? tablePagination.defaultPageSize : _ref$defaultPageSize,
+    _ref$showPageSizePick = _ref.showPageSizePicker,
+    showPageSizePicker = _ref$showPageSizePick === void 0 ? true : _ref$showPageSizePick,
+    _ref$showPageNumberSe = _ref.showPageNumberSelector,
+    showPageNumberSelector = _ref$showPageNumberSe === void 0 ? false : _ref$showPageNumberSe,
+    showLabel = _ref.showLabel,
+    label = _ref.label,
+    totalItemCount = _ref.totalItemCount,
+    _ref$paginationType = _ref.paginationType,
+    paginationType = _ref$paginationType === void 0 ? 'client' : _ref$paginationType,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useTableContext = useTableContext(),
     setPaginationPage = _useTableContext.setPaginationPage,
     currentPaginationState = _useTableContext.currentPaginationState,
@@ -176,53 +41,105 @@ var _TablePagination = function _TablePagination(_ref3) {
     setPaginationRowSize = _useTableContext.setPaginationRowSize,
     setPaginationType = _useTableContext.setPaginationType,
     backgroundColor = _useTableContext.backgroundColor;
-  var _React$useState = React__default.useState(defaultPageSize),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    currentPageSize = _React$useState2[0],
-    setCurrentPageSize = _React$useState2[1];
-  var _React$useState3 = React__default.useState(!isUndefined(controlledCurrentPage) ? controlledCurrentPage : (_currentPaginationSta = currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page) !== null && _currentPaginationSta !== void 0 ? _currentPaginationSta : 0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    currentPage = _React$useState4[0],
-    setCurrentPage = _React$useState4[1];
-  var _React$useState5 = React__default.useState(undefined),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    currentEllipseHover = _React$useState6[0],
-    setCurrentEllipseHover = _React$useState6[1];
-  var defaultLabel = currentPaginationState ? "Showing ".concat(currentPaginationState.page * currentPaginationState.size + 1, "-").concat(currentPaginationState.page * currentPaginationState.size + currentPaginationState.size, " Items") : "Showing 1 to ".concat(totalItems, " Items");
-  var _useTheme = useTheme(),
-    platform = _useTheme.platform;
-  var onMobile = platform === 'onMobile';
+
+  // Sync pagination type with table context
   useEffect(function () {
-    setPaginationRowSize(currentPageSize);
     setPaginationType(paginationType);
-  }, []);
-  useEffect(function () {
-    if (currentPage && (currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page) !== currentPage) {
-      setPaginationPage(currentPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paginationType]);
+
+  // Calculate totalPages - use provided value, or calculate from totalItemCount
+  var totalPages = useMemo(function () {
+    if (!isUndefined(totalItemCount) && currentPaginationState && !isUndefined(currentPaginationState.size)) {
+      return Math.ceil(totalItemCount / currentPaginationState.size);
     }
-  }, [currentPage, currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page, setPaginationPage]);
-  var totalPages = isUndefined(totalItemCount) ? Math.ceil(totalItems / currentPageSize) : Math.ceil(totalItemCount / currentPageSize);
-  var handlePageChange = useCallback(function (page) {
-    var pageToJumpTo = page;
-    if (pageToJumpTo < 0) {
-      pageToJumpTo = 0;
-    } else if (pageToJumpTo > totalPages - 1) {
-      pageToJumpTo = totalPages - 1;
+    if (paginationType === 'client' && totalItems && currentPaginationState && !isUndefined(currentPaginationState.size)) {
+      return Math.ceil(totalItems / currentPaginationState.size);
     }
-    onPageChange === null || onPageChange === void 0 || onPageChange({
-      page: pageToJumpTo
-    });
+    return 1;
+  }, [totalItemCount, currentPaginationState, totalItems, paginationType]);
+
+  // Determine current page - use controlled value, fallback to table context, or default to 0 (0-indexed)
+  var currentPage = useMemo(function () {
     if (!isUndefined(controlledCurrentPage)) {
-      pageToJumpTo = controlledCurrentPage;
+      return controlledCurrentPage;
+    }
+    if (!isUndefined(currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page)) {
+      return currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page;
+    }
+    return 0;
+  }, [controlledCurrentPage, currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page]);
+
+  // Determine current page size - fallback to table context, or default
+  var currentPageSize = useMemo(function () {
+    if (!isUndefined(currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.size)) {
+      return currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.size;
+    }
+    return defaultPageSize;
+  }, [currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.size, defaultPageSize]);
+
+  // Generate default label for table context
+  var defaultLabel = useMemo(function () {
+    if (label) {
+      return label;
+    }
+    if (currentPaginationState && totalItemCount) {
+      var start = currentPaginationState.page * currentPaginationState.size + 1;
+      var end = Math.min((currentPaginationState.page + 1) * currentPaginationState.size, totalItemCount);
+      return "Showing ".concat(start, "-").concat(end, " Items");
     }
-    setPaginationPage(pageToJumpTo);
-    setCurrentPage(pageToJumpTo);
-  }, [controlledCurrentPage, onPageChange, setPaginationPage, totalPages]);
+    if (currentPaginationState && totalItems) {
+      var _start = currentPaginationState.page * currentPaginationState.size + 1;
+      var _end = Math.min((currentPaginationState.page + 1) * currentPaginationState.size, totalItems);
+      return "Showing ".concat(_start, "-").concat(_end, " Items");
+    }
+    if (totalItemCount) {
+      return "Showing 1 to ".concat(totalItemCount, " Items");
+    }
+    if (totalItems) {
+      return "Showing 1 to ".concat(totalItems, " Items");
+    }
+    return 'Showing Items';
+  }, [label, currentPaginationState, totalItemCount, totalItems]);
+
+  // Sync page size with table context
   useEffect(function () {
-    if (!isUndefined(controlledCurrentPage) && controlledCurrentPage !== currentPage) {
-      handlePageChange(controlledCurrentPage);
+    if (!isUndefined(currentPageSize)) {
+      setPaginationRowSize(currentPageSize);
     }
-  }, [controlledCurrentPage, currentPage, handlePageChange, onPageChange]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPageSize]);
+
+  // Sync page with table context
+  useEffect(function () {
+    if (!isUndefined(currentPage) && (currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page) !== currentPage) {
+      setPaginationPage(currentPage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage, currentPaginationState === null || currentPaginationState === void 0 ? void 0 : currentPaginationState.page]);
+
+  // Handle page change - update table context and call callback
+  // Pagination component uses 1-indexed pages, but Table uses 0-indexed
+  var handlePageChange = function handlePageChange(_ref2) {
+    var page = _ref2.page;
+    // Convert from 1-indexed (Pagination) to 0-indexed (Table)
+    var zeroIndexedPage = page - 1;
+    onPageChange === null || onPageChange === void 0 || onPageChange({
+      page: zeroIndexedPage
+    });
+    setPaginationPage(zeroIndexedPage);
+  };
+
+  // Handle page size change - update table context and call callback
+  var handlePageSizeChange = function handlePageSizeChange(_ref3) {
+    var pageSize = _ref3.pageSize;
+    onPageSizeChange === null || onPageSizeChange === void 0 || onPageSizeChange({
+      pageSize: pageSize
+    });
+    setPaginationRowSize(pageSize);
+  };
+
+  // Validation for server-side pagination
   if (true) {
     if (paginationType === 'server' && (isUndefined(totalItemCount) || isUndefined(onPageChange))) {
       throwBladeError({
@@ -231,207 +148,23 @@ var _TablePagination = function _TablePagination(_ref3) {
       });
     }
   }
-  var handlePageSizeChange = function handlePageSizeChange(pageSize) {
-    onPageSizeChange === null || onPageSizeChange === void 0 || onPageSizeChange({
-      pageSize: pageSize
-    });
-    setPaginationRowSize(pageSize);
-    setCurrentPageSize(pageSize);
-  };
-  var shouldDisableNextPage = function shouldDisableNextPage() {
-    return currentPage >= totalPages - 1;
-  };
-  var paginationButtons = getPaginationButtons({
-    currentSelection: currentPage + 1,
-    totalPages: totalPages
+  return /*#__PURE__*/jsx(BaseBox, {
+    backgroundColor: backgroundColor,
+    children: /*#__PURE__*/jsx(Pagination, _objectSpread({
+      totalPages: totalPages,
+      selectedPage: currentPage !== undefined ? currentPage + 1 : undefined,
+      defaultSelectedPage: 1,
+      onSelectedPageChange: handlePageChange,
+      defaultPageSize: defaultPageSize,
+      pageSize: currentPageSize,
+      onPageSizeChange: handlePageSizeChange,
+      showPageSizePicker: showPageSizePicker,
+      showPageNumberSelector: showPageNumberSelector,
+      showLabel: showLabel,
+      label: defaultLabel,
+      pageSizeLabel: "rows / page"
+    }, rest))
   });
-  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
-    display: "flex",
-    flexDirection: "row",
-    padding: tablePagination.padding,
-    backgroundColor: backgroundColor
-  }, makeAnalyticsAttribute(rest)), {}, {
-    children: [showLabel && !onMobile && /*#__PURE__*/jsx(BaseBox, {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      children: /*#__PURE__*/jsx(Text, {
-        color: "surface.text.gray.subtle",
-        size: "small",
-        weight: "regular",
-        children: label !== null && label !== void 0 ? label : defaultLabel
-      })
-    }), /*#__PURE__*/jsxs(BaseBox, {
-      display: "flex",
-      flex: 1,
-      gap: "spacing.2",
-      justifyContent: "flex-end",
-      alignItems: "center",
-      children: [showPageSizePicker && !onMobile && /*#__PURE__*/jsxs(BaseBox, {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        children: [/*#__PURE__*/jsxs(Dropdown, {
-          selectionType: "single",
-          children: [/*#__PURE__*/jsx(SelectInput, {
-            accessibilityLabel: "Select pages per row",
-            name: "page-size",
-            label: "",
-            labelPosition: "inside-input",
-            placeholder: "",
-            onChange: function onChange(_ref4) {
-              var values = _ref4.values;
-              handlePageSizeChange(Number(values[0]));
-            },
-            defaultValue: currentPageSize.toString()
-          }), /*#__PURE__*/jsx(DropdownOverlay, {
-            children: /*#__PURE__*/jsx(ActionList, {
-              children: pageSizeOptions.map(function (item, index) {
-                return /*#__PURE__*/jsx(ActionListItem, {
-                  title: item.toString(),
-                  value: item.toString()
-                }, index);
-              })
-            })
-          })]
-        }), /*#__PURE__*/jsx(BaseBox, {
-          "aria-hidden": true,
-          paddingLeft: "spacing.3",
-          paddingRight: "spacing.3",
-          children: /*#__PURE__*/jsx(Text, {
-            children: "rows / page"
-          })
-        })]
-      }), /*#__PURE__*/jsxs(BaseBox, {
-        display: "flex",
-        flexDirection: "row",
-        gap: "spacing.2",
-        flex: onMobile ? 1 : undefined,
-        alignItems: "center",
-        children: [/*#__PURE__*/jsx(Button, {
-          icon: ChevronLeftIcon,
-          accessibilityLabel: "Previous Page",
-          variant: "tertiary",
-          onClick: function onClick() {
-            handlePageChange(currentPage - 1);
-          },
-          isDisabled: currentPage <= 0
-        }), onMobile && /*#__PURE__*/jsx(BaseBox, {
-          flex: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          children: /*#__PURE__*/jsx(Text, {
-            color: "surface.text.gray.subtle",
-            size: "small",
-            textAlign: "center",
-            children: "Showing ".concat(currentPage + 1, " of ").concat(totalPages, " pages")
-          })
-        }), totalPages > 1 && showPageNumberSelector && !onMobile && /*#__PURE__*/jsxs(BaseBox, {
-          gap: "spacing.1",
-          display: "flex",
-          flexDirection: "row",
-          children: [/*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
-            onClick: function onClick() {
-              return handlePageChange(paginationButtons.firstItem - 1);
-            },
-            isSelected: currentPage === paginationButtons.firstItem - 1
-          }, makeAccessible({
-            label: "Page ".concat(paginationButtons.firstItem)
-          })), {}, {
-            children: /*#__PURE__*/jsx(Text, {
-              size: "medium",
-              color: currentPage === paginationButtons.firstItem - 1 ? tablePagination.pageSelectionButton.textColorSelected : tablePagination.pageSelectionButton.textColor,
-              children: paginationButtons.firstItem
-            })
-          })), paginationButtons.showStartEllipsis && /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
-            onClick: function onClick() {
-              return handlePageChange(currentPage - 5);
-            },
-            onMouseOver: function onMouseOver() {
-              return setCurrentEllipseHover('start');
-            },
-            onMouseLeave: function onMouseLeave() {
-              return setCurrentEllipseHover(undefined);
-            },
-            onFocus: function onFocus() {
-              return setCurrentEllipseHover('start');
-            },
-            onBlur: function onBlur() {
-              return setCurrentEllipseHover(undefined);
-            }
-          }, makeAccessible({
-            label: 'Go back 5 pages'
-          })), {}, {
-            children: currentEllipseHover === 'start' ? /*#__PURE__*/jsx(ChevronsLeftIcon, {
-              size: "medium"
-            }) : /*#__PURE__*/jsx(MoreHorizontalIcon, {
-              size: "medium"
-            })
-          })), paginationButtons.middleItems.map(function (item) {
-            return /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
-              onClick: function onClick() {
-                return handlePageChange(item - 1);
-              },
-              isSelected: currentPage === item - 1
-            }, makeAccessible({
-              label: "Page ".concat(item)
-            })), {}, {
-              children: /*#__PURE__*/jsx(Text, {
-                size: "medium",
-                color: currentPage === item - 1 ? tablePagination.pageSelectionButton.textColorSelected : tablePagination.pageSelectionButton.textColor,
-                children: item
-              })
-            }), item - 1);
-          }), paginationButtons.showEndEllipsis && /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
-            onClick: function onClick() {
-              return handlePageChange(currentPage + 5);
-            },
-            onMouseOver: function onMouseOver() {
-              return setCurrentEllipseHover('end');
-            },
-            onMouseLeave: function onMouseLeave() {
-              return setCurrentEllipseHover(undefined);
-            },
-            onFocus: function onFocus() {
-              return setCurrentEllipseHover('end');
-            },
-            onBlur: function onBlur() {
-              return setCurrentEllipseHover(undefined);
-            }
-          }, makeAccessible({
-            label: 'Go forward 5 pages'
-          })), {}, {
-            children: currentEllipseHover === 'end' ? /*#__PURE__*/jsx(ChevronsRightIcon, {
-              size: "medium"
-            }) : /*#__PURE__*/jsx(MoreHorizontalIcon, {
-              size: "medium"
-            })
-          })), /*#__PURE__*/jsx(PageSelectionButton, _objectSpread(_objectSpread({
-            onClick: function onClick() {
-              return handlePageChange(paginationButtons.lastItem - 1);
-            },
-            isSelected: currentPage === paginationButtons.lastItem - 1
-          }, makeAccessible({
-            label: "Page ".concat(paginationButtons.lastItem)
-          })), {}, {
-            children: /*#__PURE__*/jsx(Text, {
-              size: "medium",
-              color: currentPage === paginationButtons.lastItem - 1 ? tablePagination.pageSelectionButton.textColorSelected : tablePagination.pageSelectionButton.textColor,
-              children: paginationButtons.lastItem
-            })
-          }))]
-        }), /*#__PURE__*/jsx(Button, {
-          variant: "tertiary",
-          icon: ChevronRightIcon,
-          accessibilityLabel: "Next Page",
-          onClick: function onClick() {
-            handlePageChange(currentPage + 1);
-          },
-          isDisabled: shouldDisableNextPage()
-        })]
-      })]
-    })]
-  }));
 };
 var TablePagination = /*#__PURE__*/assignWithoutSideEffects(_TablePagination, {
   componentId: ComponentIds.TablePagination