@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTPagination/README.md

@@ -0,0 +1,242 @@
+# UTPagination
+
+A comprehensive pagination component that provides both page navigation and page size selection functionality. The component consists of two main parts: a page size selector and pagination controls.
+
+## Features
+
+- **Page Size Selection**: Dropdown to select number of items per page
+- **Page Navigation**: Previous/next buttons with page numbers
+- **Responsive Design**: Adapts to different screen sizes
+- **Customizable Themes**: Support for different color themes
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+- **Double Arrow Navigation**: Quick navigation to first/last page for large datasets
+- **Size Variants**: Support for different button sizes
+
+## Props
+
+| Prop                 | Type                             | Default   | Description                         |
+| -------------------- | -------------------------------- | --------- | ----------------------------------- |
+| `page`               | `number`                         | -         | Current page number (0-based)       |
+| `rowsPerPage`        | `number`                         | -         | Number of rows per page             |
+| `totalRows`          | `number`                         | -         | Total number of rows                |
+| `rowsPerPageOptions` | `number[]`                       | -         | Available options for rows per page |
+| `totalRowsLabel`     | `string`                         | -         | Label for total rows display        |
+| `onChangePage`       | `function`                       | -         | Callback when page changes          |
+| `onChangeRowPerPage` | `function`                       | -         | Callback when rows per page changes |
+| `isResponsive`       | `boolean`                        | -         | Enable responsive behavior          |
+| `colorThemes`        | `object`                         | `{}`      | Color themes for different elements |
+| `classes`            | `object`                         | -         | Custom CSS classes                  |
+| `size`               | `'small' \| 'medium' \| 'large'` | `'large'` | Size variant for navigation buttons |
+
+### Color Themes
+
+| Theme              | Type     | Description                         |
+| ------------------ | -------- | ----------------------------------- |
+| `pageButton`       | `string` | Color theme for page number buttons |
+| `navigationButton` | `string` | Color theme for navigation buttons  |
+| `totalRows`        | `string` | Color theme for total rows label    |
+
+### Classes
+
+| Class                     | Description                   |
+| ------------------------- | ----------------------------- |
+| `paginationContainer`     | Main container wrapper        |
+| `pagination`              | Pagination controls container |
+| `pageSizeSelectContainer` | Page size selector container  |
+| `pageSizeSelect`          | Page size select dropdown     |
+| `totalRowsLabel`          | Total rows label              |
+
+## Usage
+
+### Basic Usage
+
+```jsx
+import React, { useState } from 'react';
+import { UTPagination } from '@energy/ui';
+
+function MyComponent() {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const totalRows = 150;
+  const rowsPerPageOptions = [10, 25, 50, 100];
+
+  const handlePageChange = newPage => {
+    setPage(newPage);
+  };
+
+  const handleRowsPerPageChange = newRowsPerPage => {
+    setRowsPerPage(newRowsPerPage);
+    setPage(0); // Reset to first page when changing page size
+  };
+
+  return (
+    <UTPagination
+      page={page}
+      rowsPerPage={rowsPerPage}
+      totalRows={totalRows}
+      rowsPerPageOptions={rowsPerPageOptions}
+      totalRowsLabel="items"
+      onChangePage={handlePageChange}
+      onChangeRowPerPage={handleRowsPerPageChange}
+    />
+  );
+}
+```
+
+### With Custom Themes
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="records"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  colorThemes={{
+    pageButton: 'primary',
+    navigationButton: 'secondary',
+    totalRows: 'gray'
+  }}
+/>
+```
+
+### With Custom Size
+
+The `size` prop controls the size of navigation buttons (previous/next arrows and double arrows). Available values:
+
+- `'small'`: Compact button size
+- `'medium'`: Standard button size
+- `'large'`: Large button size (default)
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  size="medium"
+/>
+```
+
+### Responsive Pagination
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  isResponsive={true}
+/>
+```
+
+### With Custom Classes
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  classes={{
+    paginationContainer: 'custom-pagination-wrapper',
+    pagination: 'custom-pagination-controls',
+    pageSizeSelectContainer: 'custom-select-container',
+    pageSizeSelect: 'custom-select',
+    totalRowsLabel: 'custom-total-label'
+  }}
+/>
+```
+
+## Component Structure
+
+The UTPagination component is composed of two main sub-components:
+
+### PageSizeSelector
+
+- Displays a dropdown to select the number of items per page
+- Shows total count with customizable label
+- Supports custom styling and themes
+- Uses UTSelect component with outlined variant
+
+### Pagination
+
+- Navigation buttons (previous/next)
+- Page number buttons with active state styling
+- Double arrow navigation for large datasets (first/last page)
+- Responsive behavior that hides double arrows on smaller screens
+- Support for different button sizes
+
+## Constants
+
+| Constant                         | Value  | Description                                   |
+| -------------------------------- | ------ | --------------------------------------------- |
+| `PREPOSITION`                    | `'de'` | Preposition used in total rows label          |
+| `PAGINATION_LIMIT_DOUBLE_ARROWS` | `10`   | Minimum pages to show double arrow navigation |
+| `MAX_PAGINATION_ITEMS`           | `5`    | Maximum page numbers to display               |
+
+## Theme Integration
+
+The component integrates with the Energy UI theme system and supports the following theme properties:
+
+```javascript
+{
+  UTPagination: {
+    paginationContainer: {
+      marginTop: 32
+    },
+    pageSizeSelect: {
+      background: 'transparent',
+      fontSize: '14px',
+      padding: 6,
+      textAlign: 'center',
+      border: '1px solid #ccc',
+      hover: {
+        border: '1px solid #999'
+      }
+    },
+    pagination: {
+      gridGap: '16px'
+    }
+  },
+  Fonts: {
+    fontFamily: 'your-font-family'
+  }
+}
+```
+
+## Accessibility
+
+- Proper ARIA labels for navigation buttons
+- Keyboard navigation support
+- Screen reader friendly page announcements
+- Focus management for interactive elements
+- Semantic HTML structure
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Dependencies
+
+- React 16.8+
+- PropTypes
+- Energy UI theme system
+- UTButton component
+- UTSelect component
+- UTLabel component
+- @tabler/icons-react (for navigation icons)

package/dist/esm/components/UTPagination/assets/arrow-head-left.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-5.000000, -5.000000)">
+            <path fill="#FFFFFF" d="M10.2321,5.3599 C10.5851,4.9359 11.2151,4.8789 11.6401,5.2319 C12.0641,5.5859 12.1211,6.2159 11.7681,6.6399 L11.7681,6.6399 L7.2921,12.0109 L11.6071,17.3729 C11.9531,17.8029 11.8851,18.4329 11.4551,18.7789 C11.2701,18.9279 11.0491,18.9999 10.8281,18.9999 C10.5361,18.9999 10.2461,18.8729 10.0491,18.6269 L10.0491,18.6269 L5.2211,12.6269 C4.9221,12.2559 4.9271,11.7259 5.2321,11.3599 L5.2321,11.3599 Z M17.2315,5.3602 C17.5855,4.9352 18.2155,4.8792 18.6405,5.2322 C19.0645,5.5852 19.1215,6.2162 18.7685,6.6402 L18.7685,6.6402 L14.2925,12.0112 L18.6075,17.3732 C18.9535,17.8032 18.8855,18.4322 18.4555,18.7792 C18.2705,18.9282 18.0485,19.0002 17.8285,19.0002 C17.5365,19.0002 17.2465,18.8722 17.0485,18.6272 L17.0485,18.6272 L12.2205,12.6272 C11.9225,12.2562 11.9265,11.7252 12.2315,11.3602 L12.2315,11.3602 Z" id="path-arrow-head-left"></path>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTPagination/assets/arrow-head-right.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-5.000000, -5.000000)">
+            <path fill="#FFFFFF" d="M12.5453,5.221 C12.9753,4.874 13.6043,4.943 13.9513,5.373 L13.9513,5.373 L18.7793,11.373 C19.0783,11.744 19.0733,12.274 18.7683,12.64 L18.7683,12.64 L13.7683,18.64 C13.5703,18.877 13.2863,19 12.9993,19 C12.7743,19 12.5473,18.924 12.3603,18.768 C11.9353,18.415 11.8783,17.784 12.2323,17.36 L12.2323,17.36 L16.7083,11.989 L12.3923,6.627 C12.0463,6.197 12.1143,5.567 12.5453,5.221 Z M5.5452,5.221 C5.9752,4.875 6.6042,4.943 6.9512,5.373 L6.9512,5.373 L11.7792,11.373 C12.0772,11.744 12.0732,12.274 11.7682,12.64 L11.7682,12.64 L6.7682,18.64 C6.5702,18.877 6.2862,19 5.9992,19 C5.7742,19 5.5472,18.924 5.3602,18.768 C4.9352,18.415 4.8782,17.784 5.2322,17.36 L5.2322,17.36 L9.7072,11.989 L5.3922,6.627 C5.0462,6.197 5.1152,5.567 5.5452,5.221 Z" id="path-1"></path>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTPagination/assets/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3623 17C13.1003 17 12.8393 16.898 12.6433 16.695L8.78028 12.695C8.40228 12.302 8.40728 11.679 8.79328 11.293L12.7933 7.29301C13.1833 6.90201 13.8163 6.90201 14.2073 7.29301C14.5973 7.68401 14.5973 8.31601 14.2073 8.70701L10.9023 12.012L14.0813 15.305C14.4653 15.703 14.4543 16.336 14.0573 16.719C13.8623 16.907 13.6123 17 13.3623 17Z" fill="#091E42"/>
+</svg>

package/dist/esm/components/UTPagination/assets/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 17C10.244 17 9.98801 16.902 9.79301 16.707C9.40201 16.316 9.40201 15.684 9.79301 15.293L13.098 11.988L9.91801 8.695C9.53501 8.297 9.54601 7.664 9.94301 7.281C10.341 6.898 10.974 6.909 11.357 7.305L15.219 11.305C15.598 11.698 15.593 12.321 15.207 12.707L11.207 16.707C11.012 16.902 10.756 17 10.5 17Z" fill="#091E42"/>
+</svg>

package/dist/esm/components/UTPagination/assets/refresh.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-1091.000000, -182.000000)">
+            <g transform="translate(1088.000000, 179.000000)">
+                <path fill="#FF6026" d="M20.3032,13.4258 C19.7772,13.2588 19.2152,13.5498 19.0472,14.0758 C18.1102,17.0218 15.3522,18.9998 12.1842,18.9998 C8.2222,18.9998 5.0002,15.8598 5.0002,11.9998 C5.0002,8.1408 8.2222,4.9998 12.1842,4.9998 C13.9122,4.9998 15.5422,5.6018 16.8292,6.6698 L14.6632,6.3128 C14.1132,6.2128 13.6032,6.5918 13.5132,7.1358 C13.4232,7.6808 13.7922,8.1958 14.3372,8.2848 L18.5832,8.9868 C18.6382,8.9958 18.6942,8.9998 18.7472,8.9998 C18.8662,8.9998 18.9822,8.9788 19.0902,8.9388 C19.1272,8.9248 19.1572,8.8988 19.1932,8.8798 C19.2592,8.8458 19.3282,8.8158 19.3852,8.7678 C19.4212,8.7388 19.4442,8.6968 19.4752,8.6628 C19.5222,8.6138 19.5722,8.5668 19.6072,8.5068 C19.6322,8.4638 19.6422,8.4128 19.6612,8.3648 C19.6852,8.3058 19.7172,8.2508 19.7292,8.1858 L20.4832,4.1858 C20.5852,3.6428 20.2282,3.1188 19.6852,3.0178 C19.1442,2.9198 18.6192,3.2728 18.5172,3.8148 L18.2452,5.2558 C16.5812,3.8148 14.4482,2.9998 12.1842,2.9998 C7.1202,2.9998 3.0002,7.0368 3.0002,11.9998 C3.0002,16.9628 7.1202,20.9998 12.1842,20.9998 C16.2262,20.9998 19.7502,18.4608 20.9532,14.6818 C21.1202,14.1558 20.8292,13.5938 20.3032,13.4258" id="path-refresh"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTPagination/components/PageSizeSelector/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { arrayOf, shape, string, number, func } from 'prop-types';
+import UTSelect from '../../../UTSelect';
+import UTLabel from '../../../UTLabel';
+import { classesType } from '../../../../types/commonTypes';
+import { getPageSizeOptions } from './utils';
+import styles from './styles.module.scss';
+const PageSizeSelector = _ref => {
+  let {
+    classes,
+    colorThemes,
+    options,
+    rowsPerPage,
+    onChangeRowPerPage,
+    label,
+    totalRows
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.pageSizeSelector
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.selectorContainer
+  }, /*#__PURE__*/React.createElement(UTSelect, {
+    options: getPageSizeOptions(options, totalRows),
+    labelKey: "label",
+    valueKey: "value",
+    input: {
+      onChange: onChangeRowPerPage,
+      value: rowsPerPage
+    },
+    disableFirstOption: true,
+    variant: "outlined",
+    selectProps: {
+      className: "".concat(styles.pageSizeSelectContainer, " ").concat(classes.pageSizeSelectContainer),
+      classes: {
+        select: classes.pageSizeSelect
+      }
+    }
+  })), /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.label, " ").concat(classes.totalRowsLabel),
+    colorTheme: colorThemes.totalRows || 'gray'
+  }, label));
+};
+PageSizeSelector.propTypes = {
+  classes: classesType,
+  colorThemes: shape({
+    pageButton: string,
+    navigationButton: string,
+    totalRows: string
+  }),
+  options: arrayOf(number),
+  rowsPerPage: number,
+  onChangeRowPerPage: func,
+  label: string,
+  totalRows: number
+};
+export default PageSizeSelector;

package/dist/esm/components/UTPagination/components/PageSizeSelector/styles.module.scss

@@ -0,0 +1,24 @@
+.pageSizeSelector {
+  align-items: center;
+  display: flex;
+  white-space: nowrap;
+}
+
+.label {
+  margin-left: 16px;
+}
+
+.selectorContainer {
+  flex-shrink: 1;
+  min-width: 80px;
+
+  legend {
+    display: none;
+  }
+}
+
+.pageSizeSelectContainer {
+  & fieldset {
+    top: 0;
+  }
+}

package/dist/esm/components/UTPagination/components/PageSizeSelector/utils.js

@@ -0,0 +1,13 @@
+import { isEmpty } from '@widergy/web-utils/lib/array';
+const getPrevOption = (options, index) => index === 0 ? 0 : options[index - 1];
+export const getPageSizeOptions = (originalOptions, totalRows) => {
+  const filteredOptions = originalOptions.filter((_, index) => getPrevOption(originalOptions, index) < totalRows);
+  if (isEmpty(filteredOptions)) return [{
+    value: originalOptions[0],
+    label: totalRows
+  }];
+  return filteredOptions.map(value => ({
+    value,
+    label: Math.min(value, totalRows)
+  }));
+};

package/dist/esm/components/UTPagination/components/Pagination/components/NavigationButton/index.js

@@ -0,0 +1,41 @@
+import React, { memo } from 'react';
+import { bool, elementType, func, number, oneOfType, string } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import styles from './styles.module.scss';
+const NavigationButton = _ref => {
+  let {
+    className,
+    colorTheme,
+    disabled,
+    Icon,
+    iconPlacement,
+    label,
+    onClick,
+    size
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "\n        ".concat(className, "\n        ").concat(styles.navigationButton, "\n      ")
+    },
+    colorTheme: colorTheme,
+    disabled: disabled,
+    Icon: Icon,
+    iconPlacement: iconPlacement,
+    onClick: onClick,
+    size: size,
+    variant: "semitransparent"
+  }, label && /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, label));
+};
+NavigationButton.propTypes = {
+  className: string,
+  colorTheme: string,
+  disabled: bool,
+  Icon: elementType,
+  iconPlacement: string,
+  label: oneOfType([string, number]),
+  onClick: func,
+  size: string
+};
+export default /*#__PURE__*/memo(NavigationButton);

package/dist/esm/components/UTPagination/components/Pagination/components/NavigationButton/styles.module.scss

@@ -0,0 +1,9 @@
+.navigationButton {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  + .navigationButton {
+    margin-left: 4px;
+  }
+}

package/dist/esm/components/UTPagination/components/Pagination/index.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { func, number, bool, shape, string, oneOf } from 'prop-types';
+import UTButton from '../../../UTButton';
+import { PAGINATION_LIMIT_DOUBLE_ARROWS } from '../../constants';
+import { classesType } from '../../../../types/commonTypes';
+import NavigationButton from './components/NavigationButton';
+import { getPageNumbers } from './utils';
+import styles from './styles.module.scss';
+const Pagination = _ref => {
+  let {
+    classes,
+    colorThemes,
+    currentPage,
+    isResponsive,
+    onChangePage,
+    rowsPerPage,
+    size,
+    totalRows
+  } = _ref;
+  const totalPages = rowsPerPage >= totalRows ? 1 : Math.ceil(totalRows / rowsPerPage);
+  const pageList = getPageNumbers(totalPages, currentPage, isResponsive);
+  const navigationButtonColorTheme = colorThemes.navigationButton || 'secondary';
+  const navigationButtonSize = size || 'large';
+  const pageButtonSize = size || 'medium';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.pagination, " ").concat(classes.pagination)
+  }, totalPages > PAGINATION_LIMIT_DOUBLE_ARROWS && !isResponsive && /*#__PURE__*/React.createElement(NavigationButton, {
+    colorTheme: navigationButtonColorTheme,
+    disabled: currentPage === 0,
+    Icon: "IconChevronsLeft",
+    label: "1",
+    onClick: () => onChangePage(0),
+    size: navigationButtonSize
+  }), /*#__PURE__*/React.createElement(NavigationButton, {
+    colorTheme: navigationButtonColorTheme,
+    disabled: currentPage === 0,
+    Icon: "IconChevronLeft",
+    onClick: () => onChangePage(currentPage - 1),
+    size: navigationButtonSize
+  }), pageList.map(page => /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      childrenContainer: styles.pageButtonChildrenContainer,
+      root: "".concat(styles.pageButton, " ").concat(currentPage === page && styles.pageButtondisabled)
+    },
+    colorTheme: colorThemes.pageButton || currentPage === page ? 'primary' : 'secondary',
+    key: "page_".concat(page),
+    onClick: () => onChangePage(page),
+    variant: currentPage === page ? 'semitransparent' : 'text',
+    size: pageButtonSize
+  }, page + 1)), /*#__PURE__*/React.createElement(NavigationButton, {
+    colorTheme: navigationButtonColorTheme,
+    disabled: currentPage === totalPages - 1,
+    Icon: "IconChevronRight",
+    onClick: () => onChangePage(currentPage + 1),
+    size: navigationButtonSize
+  }), totalPages > PAGINATION_LIMIT_DOUBLE_ARROWS && !isResponsive && /*#__PURE__*/React.createElement(NavigationButton, {
+    colorTheme: navigationButtonColorTheme,
+    disabled: currentPage === totalPages - 1,
+    Icon: "IconChevronsRight",
+    iconPlacement: "right",
+    label: totalPages,
+    onClick: () => onChangePage(totalPages - 1),
+    size: navigationButtonSize
+  }));
+};
+Pagination.propTypes = {
+  classes: classesType,
+  colorThemes: shape({
+    pageButton: string,
+    navigationButton: string,
+    totalRows: string
+  }),
+  currentPage: number,
+  isResponsive: bool,
+  onChangePage: func,
+  rowsPerPage: number,
+  size: oneOf(['small', 'medium', 'large']),
+  totalRows: number
+};
+export default Pagination;

package/dist/esm/components/UTPagination/components/Pagination/styles.module.scss

@@ -0,0 +1,33 @@
+.pagination {
+  align-items: center;
+  display: flex;
+}
+
+.pageButton {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.pageButtonChildrenContainer {
+  justify-content: center;
+  width: 14px;
+}
+
+.pageButtondisabled {
+  pointer-events: none;
+}
+
+.invertNavigationLabel {
+  flex-direction: row-reverse;
+
+  :first-child {
+    margin-left: 4px;
+  }
+}
+
+.navigationLabel {
+  :first-child {
+    margin-right: 4px;
+  }
+}

package/dist/esm/components/UTPagination/components/Pagination/utils.js

@@ -0,0 +1,11 @@
+import { MAX_PAGINATION_ITEMS } from '../../constants';
+export const getPageNumbers = (totalPages, currentPage, isResponsive) => {
+  if (isResponsive) return [currentPage];
+  if (totalPages <= MAX_PAGINATION_ITEMS) return [...Array(totalPages).keys()];
+  const paginationFactor = MAX_PAGINATION_ITEMS / 2;
+  if (currentPage < Math.ceil(paginationFactor)) return [...Array(MAX_PAGINATION_ITEMS).keys()];
+  if (totalPages - currentPage < paginationFactor) return [...Array(totalPages).keys()].slice(totalPages - MAX_PAGINATION_ITEMS, totalPages);
+  const floorFactor = Math.floor(paginationFactor);
+  const ceilFactor = Math.ceil(paginationFactor);
+  return [...Array(currentPage + ceilFactor).keys()].slice(currentPage - floorFactor);
+};

package/dist/esm/components/UTPagination/constants.js

@@ -0,0 +1,3 @@
+export const PREPOSITION = 'de';
+export const PAGINATION_LIMIT_DOUBLE_ARROWS = 10;
+export const MAX_PAGINATION_ITEMS = 5;

package/dist/esm/components/UTPagination/index.js

@@ -0,0 +1,62 @@
+import React, { memo } from 'react';
+import { arrayOf, number, func, shape, string, bool, oneOf } from 'prop-types';
+import WithTheme from '../WithTheme';
+import { classesType } from '../../types/commonTypes';
+import PageSizeSelector from './components/PageSizeSelector';
+import Pagination from './components/Pagination';
+import { PREPOSITION } from './constants';
+import styles from './styles.module.scss';
+import { retrieveStyle } from './theme';
+const UTPagination = _ref => {
+  let {
+    classes,
+    colorThemes = {},
+    isResponsive,
+    onChangePage,
+    onChangeRowPerPage,
+    page,
+    rowsPerPage,
+    rowsPerPageOptions,
+    size,
+    totalRows,
+    totalRowsLabel
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.paginationContainer, " ").concat(classes.paginationContainer)
+  }, /*#__PURE__*/React.createElement(PageSizeSelector, {
+    classes: classes,
+    colorThemes: colorThemes,
+    label: "".concat(PREPOSITION, " ").concat(totalRows, " ").concat(totalRowsLabel),
+    onChangeRowPerPage: onChangeRowPerPage,
+    options: rowsPerPageOptions,
+    rowsPerPage: rowsPerPage,
+    totalRows: totalRows
+  }), /*#__PURE__*/React.createElement(Pagination, {
+    classes: classes,
+    colorThemes: colorThemes,
+    currentPage: page,
+    isResponsive: isResponsive,
+    onChangePage: onChangePage,
+    rowsPerPage: rowsPerPage,
+    size: size,
+    totalRows: totalRows
+  }));
+};
+UTPagination.propTypes = {
+  classes: classesType,
+  colorThemes: shape({
+    pageButton: string,
+    navigationButton: string,
+    totalRows: string
+  }),
+  isResponsive: bool,
+  onChangePage: func,
+  onChangeRowPerPage: func,
+  page: number,
+  rowsPerPage: number,
+  rowsPerPageOptions: arrayOf(number),
+  size: oneOf(['small', 'medium', 'large']),
+  totalRows: number,
+  totalRowsLabel: string
+};
+export default WithTheme(retrieveStyle)(/*#__PURE__*/memo(UTPagination));

package/dist/esm/components/UTPagination/styles.module.scss

@@ -0,0 +1,10 @@
+.paginationContainer {
+  align-content: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.totalRowsLabel {
+  align-items: center;
+  display: flex;
+}