@luscii-healthtech/web-ui 0.1.31 → 0.2.2

package/dist/components/ListTable/ListTable.d.ts

@@ -1,22 +1,21 @@
 /// <reference types="react" />
 import { TextProps } from "../Text/Text";
 import { RestPropped } from "../../types/general.types";
+import { Localization, OnPaginationChange, PageSize } from "../PaginationMenu/PaginationMenu.types";
 export declare type ListTableItem = RestPropped;
 export interface ListTableProps<ItemType extends ListTableItem, CellType> extends RestPropped {
     items?: ItemType[];
     configuration: ListTablePropsConfiguration<ItemType, CellType>;
     pageCount?: number;
     currentPage?: number;
+    onPaginationChange?: OnPaginationChange;
+    pageSize?: PageSize;
+    localization?: Localization;
+    resultCount?: number;
     onRowClick?: (arg: ItemType) => void;
-    onPageClick?: (arg: number) => void;
     isLoading?: boolean;
     showHeader?: boolean;
     className?: string;
-    localization: {
-        page: string;
-        next: string;
-        previous: string;
-    };
 }
 export interface ListTablePropsConfiguration<ItemType extends ListTableItem, CellType> {
     emptyValue?: string;
@@ -31,5 +30,5 @@ export interface ListTablePropsConfigurationField<ItemType extends ListTableItem
     field: (arg: ItemType) => string | CellType;
     textProps?: Omit<TextProps, "text">;
 }
-export declare function ListTable<ItemType extends ListTableItem, CellType>({ items, configuration, pageCount, currentPage, onPageClick, onRowClick, isLoading, showHeader, className, localization, ...restProps }: ListTableProps<ItemType, CellType>): JSX.Element;
+export declare function ListTable<ItemType extends ListTableItem, CellType>({ items, configuration, pageCount, currentPage, onPaginationChange, pageSize, localization, resultCount, onRowClick, isLoading, showHeader, className, ...restProps }: ListTableProps<ItemType, CellType>): JSX.Element;
 export default ListTable;

package/dist/components/PaginationMenu/PaginationMenu.d.ts

@@ -1,20 +1,3 @@
-export default PaginationMenu;
-declare function PaginationMenu({ pageCount, currentPage, onPageClick, small, className, localization }: {
-    pageCount: any;
-    currentPage: any;
-    onPageClick: any;
-    small: any;
-    className: any;
-    localization: any;
-}): JSX.Element;
-declare namespace PaginationMenu {
-    export namespace propTypes {
-        export const pageCount: PropTypes.Validator<number>;
-        export const currentPage: PropTypes.Validator<number>;
-        export const onPageClick: PropTypes.Validator<(...args: any[]) => any>;
-        export const small: PropTypes.Requireable<boolean>;
-        export const className: PropTypes.Requireable<string>;
-        export const localization: PropTypes.Requireable<object>;
-    }
-}
-import PropTypes from "prop-types";
+/// <reference types="react" />
+import { PaginationMenuProps } from "./PaginationMenu.types";
+export declare const PaginationMenu: (props: PaginationMenuProps) => JSX.Element;

package/dist/components/PaginationMenu/PaginationMenu.types.d.ts

@@ -0,0 +1,37 @@
+export interface PaginationMenuProps {
+    pageCount: number;
+    currentPageNumber: number;
+    onChange: OnPaginationChange;
+    pageSize?: PageSize;
+    localization?: Localization;
+    resultCount?: number;
+    small?: boolean;
+    className?: string;
+}
+export interface PaginationMenuSmallProps {
+    pageCount: number;
+    currentPageNumber: number;
+    onChange: OnPaginationChange;
+    pageSize?: PageSize;
+}
+export interface PaginationMenuLargeProps {
+    pageCount: number;
+    currentPageNumber: number;
+    onChange: OnPaginationChange;
+    pageSize?: PageSize;
+    localization: Localization;
+    resultCount?: number;
+}
+export declare type OnPaginationChange = (pageNumber: number, pageSize?: PageSize) => void;
+export declare type PageSize = 50 | 100 | 150 | 200;
+export interface Localization {
+    display: string;
+    page: string;
+    previous: string;
+    next: string;
+    of: string;
+}
+export declare type Option = {
+    value: number;
+    label: string;
+};

package/dist/components/PaginationMenu/PaginationMenu.utils.d.ts

@@ -0,0 +1,15 @@
+import { Localization, Option, PageSize } from "./PaginationMenu.types";
+export declare const PAGE_SIZE_OPTIONS: {
+    label: string;
+    value: PageSize;
+}[];
+export declare const getPageNumberOptions: (pageCount: number) => Option[];
+/**
+ *
+ * @returns When the pageSize and resultCount params are present,
+ * this function returns a text indicating the range of elements that are being displayed,
+ * otherwise it returns a text indicating the current page and the page count.
+ * @example 1-50 of 100
+ *
+ */
+export declare const getSummaryText: (pageCount: number, currentPageNumber: number, localization: Localization, pageSize?: number | undefined, resultCount?: number | undefined) => string;

package/dist/components/PaginationMenu/PaginationMenuLarge.d.ts

@@ -1,13 +1,3 @@
 /// <reference types="react" />
-interface PaginationMenuLargeProps {
-    pageCount: number;
-    currentPage: number;
-    onPageClick: (page: number) => void;
-    localization: {
-        previous: string;
-        next: string;
-        page: string;
-    };
-}
+import { PaginationMenuLargeProps } from "./PaginationMenu.types";
 export declare const PaginationMenuLarge: (props: PaginationMenuLargeProps) => JSX.Element;
-export {};

package/dist/components/PaginationMenu/PaginationMenuSmall.d.ts

@@ -1,8 +1,3 @@
 /// <reference types="react" />
-interface PaginationMenuSmallProps {
-    pageCount: number;
-    currentPage: number;
-    onPageClick: (page: number) => void;
-}
+import { PaginationMenuSmallProps } from "./PaginationMenu.types";
 export declare const PaginationMenuSmall: (props: PaginationMenuSmallProps) => JSX.Element;
-export {};

package/dist/index.d.ts

@@ -27,7 +27,8 @@ export { NavMenu } from "./components/NavMenu/NavMenu";
 export { NotificationBanner, NotificationBannerColor, NotificationBannerLinkProps, } from "./components/NotificationBanner/NotificationBanner";
 export { default as Page } from "./components/Page/Page";
 export { default as CRUDPage } from "./components/Page/CRUDPage";
-export { default as PaginationMenu } from "./components/PaginationMenu/PaginationMenu";
+export { PaginationMenu } from "./components/PaginationMenu/PaginationMenu";
+export { PageSize as PaginationMenuPageSize, OnPaginationChange as OnPaginationMenuChange, Localization as PaginationMenuLocalization, PaginationMenuProps, } from "./components/PaginationMenu/PaginationMenu.types";
 export { default as PreviewPhone } from "./components/PreviewPhone/PreviewPhone";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";

package/dist/web-ui.cjs.development.css

@@ -190,6 +190,18 @@
     .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {
       left: 32px; }
 
+.vitals-confirmation-dialog {
+  margin-top: 4rem !important; }
+  .vitals-confirmation-dialog .vitals-confirmation-dialog-content {
+    padding: 24px; }
+    .vitals-confirmation-dialog .vitals-confirmation-dialog-content .vitals-confirmation-dialog-action-container {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      margin-top: 16px; }
+
 .cweb-box-shadow-default {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -432,18 +444,6 @@
     .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {
       color: #cccccc; }
 
-.vitals-confirmation-dialog {
-  margin-top: 4rem !important; }
-  .vitals-confirmation-dialog .vitals-confirmation-dialog-content {
-    padding: 24px; }
-    .vitals-confirmation-dialog .vitals-confirmation-dialog-content .vitals-confirmation-dialog-action-container {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-      margin-top: 16px; }
-
 .cweb-box-shadow-default {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -516,20 +516,6 @@
     background: url("../../assets/error-icon.svg") no-repeat center;
     background-size: contain; }
 
-.cweb-list-item {
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: row;
-  align-items: center;
-  padding: 16px 0 16px 0;
-  border-bottom: 1px solid #eeeeee; }
-  .cweb-list-item:last-child {
-    border-bottom: none; }
-  .cweb-list-item.cweb-list-item-clickable {
-    cursor: pointer; }
-  .cweb-list-item.cweb-list-item-clickable:hover {
-    background-color: #f2fafd; }
-
 .cweb-info-block {
   position: relative;
   padding: 16px 16px 16px 56px;
@@ -546,6 +532,20 @@
     background: url("../../assets/info-icon.svg") no-repeat center;
     background-size: contain; }
 
+.cweb-list-item {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px 0 16px 0;
+  border-bottom: 1px solid #eeeeee; }
+  .cweb-list-item:last-child {
+    border-bottom: none; }
+  .cweb-list-item.cweb-list-item-clickable {
+    cursor: pointer; }
+  .cweb-list-item.cweb-list-item-clickable:hover {
+    background-color: #f2fafd; }
+
 .cweb-loading {
   display: flex;
   justify-content: center;

package/dist/web-ui.cjs.development.js

@@ -322,9 +322,8 @@ var ButtonV2 = function ButtonV2(_ref) {
 
   var buttonClassName = classNames(["h-11", "relative flex flex-row justify-center items-center", "border", "transition-outline transition-colors duration-300 ease-in-out", "rounded-full", "leading-none", "shadow-sm", "cursor-pointer", "focus:outline-primary"], {
     "w-11": !text && icon,
-    "px-4": text,
-    "py-2.5": text && icon,
-    "py-3": text && !icon
+    "pl-4 pr-6": text && icon,
+    "px-4": text && !icon
   }, {
     "opacity-50": isDisabled,
     "pointer-events-none": isDisabled || isPending
@@ -1898,30 +1897,29 @@ var ListItem = function ListItem(props) {
 };
 
 var PaginationMenuSmall = function PaginationMenuSmall(props) {
-  function handleOnPageClick(event) {
-    event.preventDefault();
-    var page = event.currentTarget.dataset.page;
-    page && props.onPageClick(parseInt(page, 10));
-  }
+  var handleOnChange = function handleOnChange(event) {
+    var pageNumber = event.currentTarget.dataset.page;
+    pageNumber && props.onChange(parseInt(pageNumber, 10), props.pageSize);
+  };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TertiaryButton, {
     "data-test-id": "prev-button",
-    role: BUTTON_ROLES.TERTIARY,
-    iconName: props.currentPage === 1 ? "chevron-left-grey" : "chevron-left-blue",
-    "data-page": props.currentPage - 1,
-    onClick: handleOnPageClick,
-    isDisabled: props.currentPage === 1
-  }), /*#__PURE__*/React.createElement(Text, {
-    text: props.currentPage + " / " + props.pageCount,
+    icon: LeftArrowIcon,
+    "data-page": props.currentPageNumber - 1,
+    onClick: handleOnChange,
+    isDisabled: props.currentPageNumber === 1
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    className: "ml-4",
+    text: props.currentPageNumber + " / " + props.pageCount,
     type: "sm",
     color: "gray-500"
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React__default.createElement(TertiaryButton, {
+    className: "ml-4",
     "data-test-id": "next-button",
-    role: BUTTON_ROLES.TERTIARY,
-    iconName: props.currentPage === props.pageCount ? "chevron-right-grey" : "chevron-right-blue",
-    isDisabled: props.currentPage === props.pageCount,
-    "data-page": props.currentPage + 1,
-    onClick: handleOnPageClick
+    icon: RightArrowIcon,
+    isDisabled: props.currentPageNumber === props.pageCount,
+    "data-page": props.currentPageNumber + 1,
+    onClick: handleOnChange
   }));
 };
 
@@ -2038,118 +2036,134 @@ var CustomSelect = /*#__PURE__*/React__default.forwardRef(function (props, _ref)
   }));
 });
 
-var PaginationMenuLarge = function PaginationMenuLarge(props) {
-  var _useState = React.useState({
-    value: "",
-    label: ""
-  }),
-      page = _useState[0],
-      setPage = _useState[1];
+var PAGE_SIZES = [50, 100, 150, 200];
+var PAGE_SIZE_OPTIONS = /*#__PURE__*/PAGE_SIZES.map(function (pageSize) {
+  return {
+    label: pageSize.toString(),
+    value: pageSize
+  };
+});
+var getPageNumberOptions = function getPageNumberOptions(pageCount) {
+  var items = [];
 
-  React.useEffect(function () {
-    setPage({
-      label: props.currentPage.toString(),
-      value: props.currentPage.toString()
+  for (var i = 1; i <= pageCount; i++) {
+    items.push({
+      label: i.toString(),
+      value: i
     });
-  }, [props.currentPage]);
-
-  function handleOnPageClick(event) {
-    event.preventDefault();
-    var newPage = event.currentTarget.dataset.page;
-
-    if (newPage) {
-      setPage({
-        value: newPage,
-        label: newPage
-      });
-      props.onPageClick(parseInt(newPage, 10));
-    }
   }
 
-  function handleOnPageSelect(newValue) {
-    (newValue == null ? void 0 : newValue.value) && props.onPageClick(parseInt(newValue.value));
+  return items;
+};
+/**
+ *
+ * @returns When the pageSize and resultCount params are present,
+ * this function returns a text indicating the range of elements that are being displayed,
+ * otherwise it returns a text indicating the current page and the page count.
+ * @example 1-50 of 100
+ *
+ */
+
+var getSummaryText = function getSummaryText(pageCount, currentPageNumber, localization, pageSize, resultCount) {
+  if (pageSize && resultCount) {
+    var lowestElement = (currentPageNumber - 1) * pageSize + 1;
+    var highestElement = currentPageNumber === pageCount ? resultCount : currentPageNumber * pageSize;
+    return lowestElement + "-" + highestElement + " " + localization.of + " " + resultCount;
+  } else {
+    return localization.page + " " + currentPageNumber + " / " + pageCount;
   }
+};
 
-  function getPageOptions() {
-    var items = [];
+var PaginationMenuLarge = function PaginationMenuLarge(props) {
+  var handleOnPageNumberSelect = function handleOnPageNumberSelect(optionSelected) {
+    optionSelected && props.onChange(optionSelected.value, props.pageSize);
+  };
 
-    for (var i = 1; i <= props.pageCount; i++) {
-      items.push({
-        label: i.toString(),
-        value: i.toString()
-      });
-    }
+  var handleOnPageSizeSelect = function handleOnPageSizeSelect(optionSelected) {
+    var pageSize = PAGE_SIZE_OPTIONS.find(function (option) {
+      return option === optionSelected;
+    });
+    pageSize && props.onChange(1, pageSize.value);
+  };
 
-    return items;
-  }
+  var handleOnPrevNextButtonClick = function handleOnPrevNextButtonClick(event) {
+    var newPage = event.currentTarget.dataset.page;
+    newPage && props.onChange(parseInt(newPage, 10), props.pageSize);
+  };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row ml-2 mr-3 items-center"
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "mr-3",
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center"
+  }, props.pageSize && props.resultCount && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Text, {
+    text: props.localization.display
+  }), /*#__PURE__*/React__default.createElement(CustomSelect, {
+    className: "w-24 ml-2 mr-4",
+    options: PAGE_SIZE_OPTIONS,
+    onChange: handleOnPageSizeSelect,
+    value: {
+      label: props.pageSize.toString(),
+      value: props.pageSize
+    },
+    menuPlacement: "auto"
+  })), /*#__PURE__*/React__default.createElement(Text, {
     text: props.localization.page
-  }), /*#__PURE__*/React.createElement(CustomSelect, {
-    className: "w-24",
-    options: getPageOptions(),
-    onChange: handleOnPageSelect,
-    value: page,
+  }), /*#__PURE__*/React__default.createElement(CustomSelect, {
+    className: "w-24 ml-2",
+    options: getPageNumberOptions(props.pageCount),
+    onChange: handleOnPageNumberSelect,
+    value: {
+      label: props.currentPageNumber.toString(),
+      value: props.currentPageNumber
+    },
     isDisabled: props.pageCount < 2,
     menuPlacement: "auto"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "mr-2 ml-auto flex flex-row items-center"
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "mr-3",
-    text: props.localization.page + " " + props.currentPage + " / " + props.pageCount,
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-4 flex flex-row items-center"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    text: getSummaryText(props.pageCount, props.currentPageNumber, props.localization, props.pageSize, props.resultCount),
     color: "gray-500"
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React__default.createElement(SecondaryButton, {
     "data-test-id": "prev-button",
-    role: BUTTON_ROLES.SECONDARY,
     text: props.localization.previous,
-    "data-page": props.currentPage - 1,
-    onClick: handleOnPageClick,
-    isDisabled: props.currentPage === 1,
-    className: "w-24 mr-3"
-  }), /*#__PURE__*/React.createElement(Button, {
+    "data-page": props.currentPageNumber - 1,
+    onClick: handleOnPrevNextButtonClick,
+    isDisabled: props.currentPageNumber === 1,
+    className: "ml-4"
+  }), /*#__PURE__*/React__default.createElement(SecondaryButton, {
     "data-test-id": "next-button",
-    role: BUTTON_ROLES.SECONDARY,
     text: props.localization.next,
-    isDisabled: props.currentPage === props.pageCount,
-    "data-page": props.currentPage + 1,
-    onClick: handleOnPageClick,
-    className: "w-24"
+    isDisabled: props.currentPageNumber === props.pageCount,
+    "data-page": props.currentPageNumber + 1,
+    onClick: handleOnPrevNextButtonClick,
+    className: "ml-4"
   })));
 };
 
-PaginationMenu.propTypes = {
-  pageCount: PropTypes.number.isRequired,
-  currentPage: PropTypes.number.isRequired,
-  onPageClick: PropTypes.func.isRequired,
-  small: PropTypes.bool,
-  className: PropTypes.string,
-  localization: PropTypes.object
-};
+var PaginationMenu = function PaginationMenu(props) {
+  var buildPaginationLarge = function buildPaginationLarge() {
+    if (!props.localization) {
+      console.error("Localization is required to use the non small Pagination component, please make sure to pass it as a prop.");
+      return /*#__PURE__*/React__default.createElement("span", null, "Invalid props passed to this component.");
+    }
+
+    return /*#__PURE__*/React__default.createElement(PaginationMenuLarge, {
+      pageCount: props.pageCount,
+      currentPageNumber: props.currentPageNumber,
+      onChange: props.onChange,
+      pageSize: props.pageSize,
+      localization: props.localization,
+      resultCount: props.resultCount
+    });
+  };
 
-function PaginationMenu(_ref) {
-  var pageCount = _ref.pageCount,
-      currentPage = _ref.currentPage,
-      onPageClick = _ref.onPageClick,
-      small = _ref.small,
-      className = _ref.className,
-      localization = _ref.localization;
-  var containerClassName = classNames("flex flex-row flex-space-between w-full items-center", className);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: containerClassName
-  }, small ? /*#__PURE__*/React__default.createElement(PaginationMenuSmall, {
-    pageCount: pageCount,
-    currentPage: currentPage,
-    onPageClick: onPageClick
-  }) : /*#__PURE__*/React__default.createElement(PaginationMenuLarge, {
-    pageCount: pageCount,
-    currentPage: currentPage,
-    onPageClick: onPageClick,
-    localization: localization
-  }));
-}
+    className: "flex flex-row w-full items-center justify-between"
+  }, props.small ? /*#__PURE__*/React__default.createElement(PaginationMenuSmall, {
+    pageCount: props.pageCount,
+    currentPageNumber: props.currentPageNumber,
+    pageSize: props.pageSize,
+    onChange: props.onChange
+  }) : buildPaginationLarge());
+};
 
 var loadingImage = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"20\" viewBox=\"0 0 68 20\">\n    <g fill=\"none\" fill-rule=\"nonzero\">\n        <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#F09\">\n            <animate attributeName=\"opacity\" dur=\"2s\" values=\"1;0.6;1\" repeatCount=\"indefinite\" begin=\"0.1\"/>\n            <animate attributeName=\"r\" dur=\"2s\" repeatCount=\"indefinite\" values=\"10;8;10\" begin=\"0.1\"/>\n        </circle>\n        <circle cx=\"34\" cy=\"10\" r=\"10\" fill=\"#6ABFA5\">\n            <animate attributeName=\"opacity\" dur=\"2s\" values=\"1;0.6;1\" repeatCount=\"indefinite\" begin=\"0.6\"/>\n            <animate attributeName=\"r\" dur=\"2s\" repeatCount=\"indefinite\" values=\"10;8;10\" begin=\"0.6\"/>\n        </circle>\n        <circle cx=\"58\" cy=\"10\" r=\"10\" fill=\"#6670A5\">\n            <animate attributeName=\"opacity\" dur=\"2s\" values=\"1;0.6;1\" repeatCount=\"indefinite\" begin=\"1.1\"/>\n            <animate attributeName=\"r\" dur=\"2s\" repeatCount=\"indefinite\" values=\"10;8;10\" begin=\"1.1\"/>\n        </circle>\n    </g>\n</svg>";
 
@@ -2287,7 +2301,7 @@ function ListTableHeader(_ref) {
   })));
 }
 
-var _excluded$9 = ["items", "configuration", "pageCount", "currentPage", "onPageClick", "onRowClick", "isLoading", "showHeader", "className", "localization"];
+var _excluded$9 = ["items", "configuration", "pageCount", "currentPage", "onPaginationChange", "pageSize", "localization", "resultCount", "onRowClick", "isLoading", "showHeader", "className"];
 function ListTable(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -2296,14 +2310,16 @@ function ListTable(_ref) {
       pageCount = _ref$pageCount === void 0 ? 0 : _ref$pageCount,
       _ref$currentPage = _ref.currentPage,
       currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
-      onPageClick = _ref.onPageClick,
+      onPaginationChange = _ref.onPaginationChange,
+      pageSize = _ref.pageSize,
+      localization = _ref.localization,
+      resultCount = _ref.resultCount,
       onRowClick = _ref.onRowClick,
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       _ref$showHeader = _ref.showHeader,
       showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
       className = _ref.className,
-      localization = _ref.localization,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   // For not displaying empty view at creation
@@ -2344,15 +2360,17 @@ function ListTable(_ref) {
   }), /*#__PURE__*/React__default.createElement(Text, {
     className: classNames("no-item-found-text", "w-56 text-base text-gray-600 text-center whitespace-pre-wrap"),
     text: configuration.emptyListText
-  }))))), !showEmptyView && pageCount > 0 && onPageClick && /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }))))), !showEmptyView && pageCount > 0 && onPaginationChange && /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: configuration.fields.length
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classNames("cweb-list-table-footer", "flex justify-center flex-row items-center", "h-20 py-4 px-4")
   }, /*#__PURE__*/React__default.createElement(PaginationMenu, {
-    onPageClick: onPageClick,
     pageCount: pageCount,
-    currentPage: currentPage,
-    localization: localization
+    currentPageNumber: currentPage,
+    onChange: onPaginationChange,
+    pageSize: pageSize,
+    localization: localization,
+    resultCount: resultCount
   })))))));
 }