@devtron-labs/devtron-fe-common-lib 0.0.54 → 0.0.55

package/dist/Common/Pagination/PageSizeSelector.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PageSizeSelectorProps } from './types';
+declare const PageSizeSelector: ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => JSX.Element;
+export default PageSizeSelector;

package/dist/Common/Pagination/Pagination.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PaginationProps } from './types';
+import './pagination.scss';
+declare const Pagination: ({ size, pageSize, offset, changePage, changePageSize, isPageSizeFix, pageSizeOptions, rootClassName, }: PaginationProps) => JSX.Element;
+export default Pagination;

package/dist/Common/Pagination/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const VISIBLE_PAGES_LIMIT = 5;
+export declare const FALLBACK_PAGE_SIZE_OPTIONS: {
+    value: number;
+    selected: boolean;
+}[];

package/dist/Common/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination';

package/dist/Common/Pagination/types.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+export interface PageSizeOption {
+    value: number;
+    selected: boolean;
+}
+export interface PaginationProps {
+    /**
+     * number of items
+     */
+    size: number;
+    /**
+     * pageSize
+     */
+    pageSize: number;
+    offset: number;
+    changePage: (pageNo: number) => void;
+    changePageSize?: (pageSize: number) => void;
+    /**
+     * If true will not show page size selector
+     */
+    isPageSizeFix?: boolean;
+    /**
+     * If given would show these options in page size selector else [20,40,50] with 20 as selected
+     */
+    pageSizeOptions?: PageSizeOption[];
+    /**
+     * class for wrapper
+     */
+    rootClassName?: string;
+}
+export interface Page {
+    value: number;
+    selected: boolean;
+    isVisible: boolean;
+}
+export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
+    selectedPageNo: number;
+}
+export interface PageSizeSelectorProps extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {
+}
+export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
+    optionValue: PageSizeOption['value'];
+    options: PageSizeOption[];
+    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>;
+    handleCloseDropdown: () => void;
+}
+export interface PageValueItemProps {
+    value: PageSizeOption['value'];
+    isSelected: PageSizeOption['selected'];
+    selectPage: (selectedPageNo: number) => void;
+}

package/dist/Common/Pagination/utils.d.ts

@@ -0,0 +1,6 @@
+import { CreatePageArrType, Page, PageSizeOption } from './types';
+/**
+ * Returns an array of pages numbers and whether they are selected, visible or not
+ */
+export declare const createPageArr: ({ size, pageSize, selectedPageNo }: CreatePageArrType) => Page[];
+export declare const getDefaultPageValueOptions: (pageSizeOptions: PageSizeOption[]) => PageSizeOption[];

package/dist/Common/index.d.ts

@@ -47,3 +47,4 @@ export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSel
 export * from './AddCDButton';
 export * from './CustomInput';
 export * from './DraggableWrapper';
+export * from './Pagination';

package/dist/index.js

@@ -752,8 +752,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$8 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 6px;\n}\n.empty-state .subtitle--text-start {\n  text-align: start;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
-styleInject(css_248z$8);
+var css_248z$9 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 6px;\n}\n.empty-state .subtitle--text-start {\n  text-align: start;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
+styleInject(css_248z$9);
 
 var _g$7;
 function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
@@ -11918,8 +11918,8 @@ var VisibleModal = /** @class */ (function (_super) {
     return VisibleModal;
 }(React.Component));
 
-var css_248z$7 = ".drawer {\n  position: absolute;\n  overflow: hidden;\n}\n.drawer.left, .drawer.right {\n  top: 0;\n  bottom: 0;\n  width: 0;\n  transition: width 200ms;\n}\n.drawer.left.show, .drawer.right.show {\n  min-width: var(--minWidth);\n  width: var(--width);\n  max-width: var(--maxWidth);\n}\n.drawer.top, .drawer.bottom {\n  left: 0;\n  right: 0;\n  height: 0;\n  transition: height 200ms;\n}\n.drawer.top.show, .drawer.bottom.show {\n  height: var(--height);\n}\n.drawer.right {\n  right: 0;\n}\n.drawer.left {\n  left: 0;\n}\n.drawer.top {\n  top: 0;\n}\n.drawer.bottom {\n  bottom: 0;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".drawer {\n  position: absolute;\n  overflow: hidden;\n}\n.drawer.left, .drawer.right {\n  top: 0;\n  bottom: 0;\n  width: 0;\n  transition: width 200ms;\n}\n.drawer.left.show, .drawer.right.show {\n  min-width: var(--minWidth);\n  width: var(--width);\n  max-width: var(--maxWidth);\n}\n.drawer.top, .drawer.bottom {\n  left: 0;\n  right: 0;\n  height: 0;\n  transition: height 200ms;\n}\n.drawer.top.show, .drawer.bottom.show {\n  height: var(--height);\n}\n.drawer.right {\n  right: 0;\n}\n.drawer.left {\n  left: 0;\n}\n.drawer.top {\n  top: 0;\n}\n.drawer.bottom {\n  bottom: 0;\n}";
+styleInject(css_248z$8);
 
 var Drawer = function (_a) {
     var children = _a.children, position = _a.position, height = _a.height, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, parentClassName = _a.parentClassName, onEscape = _a.onEscape;
@@ -16331,8 +16331,8 @@ var SvgIcHelpOutline = function SvgIcHelpOutline(props) {
   })));
 };
 
-var css_248z$6 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
-styleInject(css_248z$6);
+var css_248z$7 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
+styleInject(css_248z$7);
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
@@ -24292,8 +24292,8 @@ var CustomSelect = function (props) {
     return jsxRuntime.jsx(ReactSelect, __assign({}, props));
 };
 
-var css_248z$5 = ".info-bar-container .info_text .success {\n  background-color: var(--G100);\n}\n.info-bar-container .warn {\n  background: var(--Y100);\n  border: solid var(--Y200);\n}\n.info-bar-container .warn .warning-icon path:nth-child(2) {\n  fill: var(--Y700);\n}\n.info-bar-container .info_bar {\n  background-color: var(--B100);\n  border: 1px solid var(--B200);\n}\n.info-bar-container .error_bar {\n  background-color: var(--R100);\n  border: 1px solid var(--R200);\n}\n.info-bar-container .question-bar {\n  background-color: var(--V100);\n  border: 1px solid var(--V200);\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".info-bar-container .info_text .success {\n  background-color: var(--G100);\n}\n.info-bar-container .warn {\n  background: var(--Y100);\n  border: solid var(--Y200);\n}\n.info-bar-container .warn .warning-icon path:nth-child(2) {\n  fill: var(--Y700);\n}\n.info-bar-container .info_bar {\n  background-color: var(--B100);\n  border: 1px solid var(--B200);\n}\n.info-bar-container .error_bar {\n  background-color: var(--R100);\n  border: 1px solid var(--R200);\n}\n.info-bar-container .question-bar {\n  background-color: var(--V100);\n  border: 1px solid var(--V200);\n}";
+styleInject(css_248z$6);
 
 function InfoColourBar(_a) {
     var message = _a.message, classname = _a.classname, Icon = _a.Icon, iconClass = _a.iconClass, iconSize = _a.iconSize, renderActionButton = _a.renderActionButton, linkText = _a.linkText, redirectLink = _a.redirectLink, linkOnClick = _a.linkOnClick, linkClass = _a.linkClass, internalLink = _a.internalLink, styles = _a.styles;
@@ -24613,8 +24613,8 @@ var SvgIcErrorCross = function SvgIcErrorCross(props) {
   }))));
 };
 
-var css_248z$4 = ".search-bar:focus, .search-bar:focus-within {\n  outline: none;\n  border: solid 1px var(--B500);\n}\n.search-bar__input:focus, .search-bar__input:focus-visible {\n  border: none;\n  outline: none;\n}\n.search-bar__icon {\n  z-index: 1;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n}\n.search-bar__clear-button {\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".search-bar:focus, .search-bar:focus-within {\n  outline: none;\n  border: solid 1px var(--B500);\n}\n.search-bar__input:focus, .search-bar__input:focus-visible {\n  border: none;\n  outline: none;\n}\n.search-bar__icon {\n  z-index: 1;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n}\n.search-bar__clear-button {\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}";
+styleInject(css_248z$5);
 
 /**
  * Generic search input component with support for enter based and debounced search
@@ -24687,8 +24687,8 @@ var SearchBar = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32" }, { children: [jsxRuntime.jsx(SvgIcSearch, { className: "search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search", "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ".concat(showClearButton ? 'pr-30' : 'pr-10'), onChange: handleChange, onKeyDown: handleKeyDown, ref: inputRef })), showClearButton && (jsxRuntime.jsx("button", __assign({ className: "flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5", type: "button", onClick: clearSearch, "aria-label": "Clear search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-18 icon-n4 dc__vertical-align-middle" }) })))] })) })));
 };
 
-var css_248z$3 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";
-styleInject(css_248z$3);
+var css_248z$4 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";
+styleInject(css_248z$4);
 
 var Toggle = function (_a) {
     var _b;
@@ -24712,8 +24712,8 @@ var Toggle = function (_a) {
     return (jsxRuntime.jsxs("label", __assign({}, props, { className: "".concat(rootClassName, " toggle__switch ").concat(disabled ? 'disabled' : ''), style: (_b = {}, _b['--color'] = color, _b) }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: !!active, onChange: handleClick, className: "toggle__input" }), jsxRuntime.jsx("span", __assign({ className: "toggle__slider ".concat(Icon ? 'with-icon br-4 dc__border' : 'round'), "data-testid": dataTestId }, { children: Icon && jsxRuntime.jsx(Icon, { className: "icon-dim-20 br-4 p-2 ".concat(iconClass) }) }))] })));
 };
 
-var css_248z$2 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n    max-width: 120px;\n    word-wrap: break-word;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n    max-width: 120px;\n    word-wrap: break-word;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
+styleInject(css_248z$3);
 
 function ScanVulnerabilitiesTable(_a) {
     var vulnerabilities = _a.vulnerabilities;
@@ -24728,8 +24728,8 @@ function ScanVulnerabilitiesTable(_a) {
                 })] }) })));
 }
 
-var css_248z$1 = ".radio-group {\n  height: 30px;\n  background: white;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  border-radius: 4px;\n}\n.radio-group .label,\n.radio-group .radio,\n.radio-group .checkbox {\n  margin: 0;\n}\n.radio-group .radio {\n  height: 100%;\n  width: auto;\n  color: var(--N400);\n  display: flex;\n  align-items: center;\n}\n.radio-group .radio + .radio {\n  margin-top: 0;\n}\n.radio-group input[type=checkbox] {\n  display: contents;\n  overflow: hidden;\n  max-width: 0px;\n  height: 0;\n  opacity: 0;\n  margin: unset;\n}\n.radio-group input + .radio__item-label {\n  padding: 4px 6px;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  transition: all 0.5s;\n  cursor: pointer;\n}\n.radio-group input[type=checkbox]:checked + .radio__item-label {\n  background: #2c3354;\n  color: white;\n  border-radius: 4px;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = ".radio-group {\n  height: 30px;\n  background: white;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  border-radius: 4px;\n}\n.radio-group .label,\n.radio-group .radio,\n.radio-group .checkbox {\n  margin: 0;\n}\n.radio-group .radio {\n  height: 100%;\n  width: auto;\n  color: var(--N400);\n  display: flex;\n  align-items: center;\n}\n.radio-group .radio + .radio {\n  margin-top: 0;\n}\n.radio-group input[type=checkbox] {\n  display: contents;\n  overflow: hidden;\n  max-width: 0px;\n  height: 0;\n  opacity: 0;\n  margin: unset;\n}\n.radio-group input + .radio__item-label {\n  padding: 4px 6px;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  transition: all 0.5s;\n  cursor: pointer;\n}\n.radio-group input[type=checkbox]:checked + .radio__item-label {\n  background: #2c3354;\n  color: white;\n  border-radius: 4px;\n}";
+styleInject(css_248z$2);
 
 var RadioContext = React.createContext(null);
 function useRadioContext() {
@@ -28320,8 +28320,8 @@ var templates = {
     WrapIfAdditionalTemplate: WrapIfAdditionalTemplate,
 };
 
-var css_248z = ".rjsf-form-template__field {\n  grid-template-columns: 250px 1fr;\n}\n.rjsf-form-template__additional-fields {\n  grid-template-columns: 1fr 1fr minmax(20px, auto);\n}\n.rjsf-form-template__array-field-item {\n  grid-template-columns: 1fr auto;\n}\n.rjsf-form-template__array-field-item > :first-child {\n  margin: 0;\n}";
-styleInject(css_248z);
+var css_248z$1 = ".rjsf-form-template__field {\n  grid-template-columns: 250px 1fr;\n}\n.rjsf-form-template__additional-fields {\n  grid-template-columns: 1fr 1fr minmax(20px, auto);\n}\n.rjsf-form-template__array-field-item {\n  grid-template-columns: 1fr auto;\n}\n.rjsf-form-template__array-field-item > :first-child {\n  margin: 0;\n}";
+styleInject(css_248z$1);
 
 // Need to use this way because the default import was not working as expected
 // The default import resolves to an object intead of a function
@@ -28626,6 +28626,117 @@ function DraggableButton(_a) {
     return (jsxRuntime.jsx("button", __assign({ type: "button", className: "".concat(dragClassName, " dc__outline-none-imp dc__no-border p-0 dc__transparent h-20") }, { children: jsxRuntime.jsx(SvgIcDrag, { className: "dc__grabbable icon-dim-20 fcn-6" }) })));
 }
 
+var VISIBLE_PAGES_LIMIT = 5;
+var FALLBACK_PAGE_SIZE_OPTIONS = [
+    { value: 20, selected: true },
+    { value: 40, selected: false },
+    { value: 50, selected: false },
+];
+
+/**
+ * Returns an array of pages numbers and whether they are selected, visible or not
+ */
+var createPageArr = function (_a) {
+    var size = _a.size, pageSize = _a.pageSize, selectedPageNo = _a.selectedPageNo;
+    var arr = [];
+    var numberOfPages = Math.ceil(size / pageSize);
+    // we are showing 2 numbers before and after the selected page, so computing the lower and upper bounds
+    var lowerBound = selectedPageNo - 2 < 1 ? 1 : selectedPageNo - 2;
+    var upperBound = selectedPageNo + 2 > numberOfPages ? numberOfPages : selectedPageNo + 2;
+    for (var i = 1; i <= numberOfPages; i++) {
+        arr.push({
+            value: i,
+            selected: i === selectedPageNo,
+            isVisible: upperBound - VISIBLE_PAGES_LIMIT < i && i < lowerBound + VISIBLE_PAGES_LIMIT,
+        });
+    }
+    return arr;
+};
+var getDefaultPageValueOptions = function (pageSizeOptions) {
+    return (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.length) ? pageSizeOptions : FALLBACK_PAGE_SIZE_OPTIONS;
+};
+
+var PageSizeItems = function (_a) {
+    var optionValue = _a.optionValue, options = _a.options, setOptions = _a.setOptions, handleCloseDropdown = _a.handleCloseDropdown, changePageSize = _a.changePageSize;
+    var handlePageSizeSelect = function () {
+        var newOptions = options.map(function (_option) { return ({
+            value: _option.value,
+            selected: _option.value === optionValue,
+        }); });
+        setOptions(__spreadArray([], __read(newOptions), false));
+        handleCloseDropdown();
+        changePageSize(optionValue);
+    };
+    return (jsxRuntime.jsx("div", __assign({ className: "select__item", onClick: handlePageSizeSelect }, { children: optionValue }), optionValue));
+};
+var PageSizeSelector = function (_a) {
+    var pageSizeOptions = _a.pageSizeOptions, pageSize = _a.pageSize, changePageSize = _a.changePageSize;
+    var defaultOptions = getDefaultPageValueOptions(pageSizeOptions).map(function (option) { return ({
+        value: option.value,
+        selected: option.value === pageSize,
+    }); });
+    var _b = __read(React.useState(false), 2), isDropdownOpen = _b[0], setIsDropdownOpen = _b[1];
+    var _c = __read(React.useState(defaultOptions), 2), options = _c[0], setOptions = _c[1];
+    var handleCloseDropdown = function () {
+        setIsDropdownOpen(false);
+    };
+    var handleDropdownToggle = function () {
+        setIsDropdownOpen(!isDropdownOpen);
+    };
+    var dropdownRef = React.useRef(null);
+    useClickOutside(dropdownRef, handleCloseDropdown);
+    var selectedOption = options.find(function (option) { return option.selected; });
+    var font = isDropdownOpen ? 'fa fa-caret-up' : 'fa fa-caret-down';
+    return (jsxRuntime.jsxs("div", __assign({ ref: dropdownRef }, { children: [isDropdownOpen && (jsxRuntime.jsx("div", __assign({ className: "pagination__select-menu" }, { children: options.map(function (_option) { return (jsxRuntime.jsx(PageSizeItems, { optionValue: _option.value, options: options, setOptions: setOptions, handleCloseDropdown: handleCloseDropdown, changePageSize: changePageSize })); }) }))), jsxRuntime.jsxs("button", __assign({ type: "button", className: "select__button", onClick: handleDropdownToggle }, { children: [jsxRuntime.jsx("span", { children: selectedOption ? selectedOption.value : '' }), jsxRuntime.jsx("span", __assign({ className: "select__icon" }, { children: jsxRuntime.jsx("i", { className: font }) }))] }))] })));
+};
+
+var css_248z = ".pagination-wrapper {\n  display: flex;\n  align-items: center;\n  padding: 0px 24px;\n  justify-content: space-between;\n  margin: 0px;\n  background-color: var(--white);\n}\n\n.pagination {\n  margin-top: 16px;\n  margin-bottom: 16px;\n  padding: 0px;\n}\n\n.select {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.select__placeholder {\n  font-size: 12px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  color: var(--N700);\n  margin-right: 8px;\n}\n\n.pagination__select-menu {\n  padding: 0px;\n  list-style: none;\n  overflow: hidden;\n  border: solid 1px var(--N200);\n  border-radius: 4px;\n  width: 64px;\n  position: absolute;\n  bottom: 31px;\n  background-color: var(--white);\n}\n\n.select__button {\n  width: 64px;\n  background-color: transparent;\n  border-radius: 4px;\n  border: solid 1px var(--N200);\n  padding: 5px 10px;\n  text-align: left;\n}\n\n.select__item {\n  padding: 5px 10px;\n  cursor: pointer;\n}\n\n.select__icon {\n  margin-left: 18px;\n}\n\n.page {\n  margin: 0px 8px;\n  display: inline-block;\n}\n\n.page-number {\n  font-size: 12px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  color: var(--N700);\n}\n\n.page__button {\n  width: 24px;\n  height: 24px;\n  border-radius: 8px;\n  color: var(--B500);\n  background-color: var(--white);\n  padding: 0px;\n  user-select: none;\n}\n\n.page__button--icon {\n  background-color: var(--white);\n  color: var(--B500);\n}\n\n/* MODIFIERS */\n.page__button--selected {\n  color: var(--white);\n  background-color: var(--B500);\n}\n\n/* States and Selectorys */\n.page__button:disabled {\n  opacity: 0.5;\n}\n\n.select__item:hover {\n  background-color: var(--N50);\n}\n\n.page__button:hover ~ :disabled {\n  background-color: var(--B100);\n}\n\n.page__button--selected:hover {\n  color: var(--white);\n  background-color: var(--B500);\n}\n\n@media (min-width: 1024px) {\n  .pagination {\n    margin: 16px auto;\n  }\n}";
+styleInject(css_248z);
+
+var PageValueItem = function (_a) {
+    var value = _a.value, isSelected = _a.isSelected, selectPage = _a.selectPage;
+    var classes = isSelected ? 'page__button page__button--selected' : 'page__button';
+    var handlePageSelection = function () {
+        selectPage(value);
+    };
+    return (jsxRuntime.jsx("li", __assign({ className: "page" }, { children: jsxRuntime.jsx("button", __assign({ className: classes, onClick: handlePageSelection, type: "button" }, { children: value })) })));
+};
+// NOTE: This component will heavily benefit from data normalization
+var Pagination = function (_a) {
+    var size = _a.size, pageSize = _a.pageSize, offset = _a.offset, changePage = _a.changePage, changePageSize = _a.changePageSize, isPageSizeFix = _a.isPageSizeFix, pageSizeOptions = _a.pageSizeOptions, rootClassName = _a.rootClassName;
+    var _b = __read(React.useState([]), 2), pages = _b[0], setPages = _b[1];
+    React.useEffect(function () {
+        var _pages = createPageArr({ size: size, pageSize: pageSize, selectedPageNo: 1 });
+        setPages(_pages);
+    }, [size, pageSize]);
+    React.useEffect(function () {
+        var selectedPageNo = 1 + Math.floor(offset / pageSize);
+        var _pages = createPageArr({ size: size, pageSize: pageSize, selectedPageNo: selectedPageNo });
+        setPages(_pages);
+    }, [offset]);
+    var selectPage = function (selectedPageNo) {
+        var _pages = createPageArr({ size: size, pageSize: pageSize, selectedPageNo: selectedPageNo });
+        setPages(_pages);
+        changePage(selectedPageNo);
+    };
+    var selectPreviousPage = function () {
+        var currPage = pages.find(function (page) { return page.selected; });
+        var selectedPageNo = currPage.value - 1;
+        selectPage(selectedPageNo);
+    };
+    var selectNextPage = function () {
+        var currPage = pages.find(function (page) { return page.selected; });
+        var selectedPageNo = currPage.value + 1;
+        selectPage(selectedPageNo);
+    };
+    var lastPageNo = offset + pageSize < size ? offset + pageSize : size;
+    var pageNoIndex = pages.findIndex(function (page) { return page.selected; });
+    var visiblePages = pages.filter(function (page) { return page.isVisible; });
+    return (
+    // TODO: Remove pagination-wrapper from dashboard
+    jsxRuntime.jsxs("div", __assign({ className: rootClassName || '' }, { children: [jsxRuntime.jsxs("div", __assign({ className: "page-number" }, { children: [offset + 1, " - ", lastPageNo, " of ", size] })), jsxRuntime.jsxs("ul", __assign({ className: "pagination" }, { children: [jsxRuntime.jsx("li", __assign({ className: "page" }, { children: jsxRuntime.jsx("button", __assign({ className: "page__button page__button--icon", disabled: !pageNoIndex, onClick: selectPreviousPage, type: "button", "aria-label": "Previous page" }, { children: jsxRuntime.jsx("span", __assign({ className: "left-icon" }, { children: jsxRuntime.jsx("i", { className: "fa fa-chevron-left" }) })) })) })), visiblePages.map(function (page) { return (jsxRuntime.jsx(PageValueItem, { value: page.value, isSelected: page.selected, selectPage: selectPage }, page.value)); }), jsxRuntime.jsx("li", __assign({ className: "page" }, { children: jsxRuntime.jsx("button", __assign({ className: "page__button page__button--icon", disabled: pageNoIndex === pages.length - 1, onClick: selectNextPage, type: "button", "aria-label": "Next page" }, { children: jsxRuntime.jsx("span", __assign({ className: "left-icon" }, { children: jsxRuntime.jsx("i", { className: "fa fa-chevron-right" }) })) })) }))] })), !isPageSizeFix && (jsxRuntime.jsxs("div", __assign({ className: "select" }, { children: [jsxRuntime.jsx("span", __assign({ className: "select__placeholder" }, { children: "Rows per page" })), jsxRuntime.jsx(PageSizeSelector, { pageSizeOptions: pageSizeOptions, pageSize: pageSize, changePageSize: changePageSize })] })))] })));
+};
+
 exports.AddCDButton = AddCDButton;
 exports.AppStatus = AppStatus;
 exports.BreadCrumb = BreadCrumb;
@@ -28673,6 +28784,7 @@ exports.MultiValueRemove = MultiValueRemove;
 exports.OpaqueModal = OpaqueModal;
 exports.Option = Option;
 exports.PATTERNS = PATTERNS;
+exports.Pagination = Pagination;
 exports.PopupMenu = PopupMenu;
 exports.Progressing = Progressing;
 exports.PropagateTagInfo = PropagateTagInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.54",
+    "version": "0.0.55",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/Pagination/PageSizeSelector.tsx

@@ -0,0 +1,78 @@
+import { useRef, useState } from 'react'
+import { PageSizeItemsProps, PageSizeOption, PageSizeSelectorProps } from './types'
+import { useClickOutside } from '../Hooks'
+import { getDefaultPageValueOptions } from './utils'
+
+const PageSizeItems = ({
+    optionValue,
+    options,
+    setOptions,
+    handleCloseDropdown,
+    changePageSize,
+}: PageSizeItemsProps) => {
+    const handlePageSizeSelect = () => {
+        const newOptions = options.map((_option) => ({
+            value: _option.value,
+            selected: _option.value === optionValue,
+        }))
+        setOptions([...newOptions])
+        handleCloseDropdown()
+        changePageSize(optionValue)
+    }
+
+    return (
+        <div key={optionValue} className="select__item" onClick={handlePageSizeSelect}>
+            {optionValue}
+        </div>
+    )
+}
+
+const PageSizeSelector = ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => {
+    const defaultOptions = getDefaultPageValueOptions(pageSizeOptions).map((option) => ({
+        value: option.value,
+        selected: option.value === pageSize,
+    }))
+
+    const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false)
+    const [options, setOptions] = useState<PageSizeOption[]>(defaultOptions)
+
+    const handleCloseDropdown = () => {
+        setIsDropdownOpen(false)
+    }
+
+    const handleDropdownToggle = () => {
+        setIsDropdownOpen(!isDropdownOpen)
+    }
+
+    const dropdownRef = useRef<HTMLDivElement>(null)
+    useClickOutside(dropdownRef, handleCloseDropdown)
+
+    const selectedOption = options.find((option) => option.selected)
+    const font = isDropdownOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'
+    return (
+        <div ref={dropdownRef}>
+            {isDropdownOpen && (
+                <div className="pagination__select-menu">
+                    {options.map((_option) => (
+                        <PageSizeItems
+                            optionValue={_option.value}
+                            options={options}
+                            setOptions={setOptions}
+                            handleCloseDropdown={handleCloseDropdown}
+                            changePageSize={changePageSize}
+                        />
+                    ))}
+                </div>
+            )}
+
+            <button type="button" className="select__button" onClick={handleDropdownToggle}>
+                <span>{selectedOption ? selectedOption.value : ''}</span>
+                <span className="select__icon">
+                    <i className={font} />
+                </span>
+            </button>
+        </div>
+    )
+}
+
+export default PageSizeSelector

package/src/Common/Pagination/Pagination.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react'
+import PageSizeSelector from './PageSizeSelector'
+import { Page, PageValueItemProps, PaginationProps } from './types'
+import { createPageArr } from './utils'
+import './pagination.scss'
+
+const PageValueItem = ({ value, isSelected, selectPage }: PageValueItemProps) => {
+    const classes = isSelected ? 'page__button page__button--selected' : 'page__button'
+    const handlePageSelection = () => {
+        selectPage(value)
+    }
+
+    return (
+        <li className="page">
+            <button className={classes} onClick={handlePageSelection} type="button">
+                {value}
+            </button>
+        </li>
+    )
+}
+
+// NOTE: This component will heavily benefit from data normalization
+const Pagination = ({
+    size,
+    pageSize,
+    offset,
+    changePage,
+    changePageSize,
+    isPageSizeFix,
+    pageSizeOptions,
+    rootClassName,
+}: PaginationProps) => {
+    const [pages, setPages] = useState<Page[]>([])
+
+    useEffect(() => {
+        const _pages = createPageArr({ size, pageSize, selectedPageNo: 1 })
+        setPages(_pages)
+    }, [size, pageSize])
+
+    useEffect(() => {
+        const selectedPageNo = 1 + Math.floor(offset / pageSize)
+        const _pages = createPageArr({ size, pageSize, selectedPageNo })
+        setPages(_pages)
+    }, [offset])
+
+    const selectPage = (selectedPageNo: number): void => {
+        const _pages = createPageArr({ size, pageSize, selectedPageNo })
+        setPages(_pages)
+        changePage(selectedPageNo)
+    }
+
+    const selectPreviousPage = (): void => {
+        const currPage = pages.find((page) => page.selected)
+        const selectedPageNo = currPage.value - 1
+        selectPage(selectedPageNo)
+    }
+
+    const selectNextPage = (): void => {
+        const currPage = pages.find((page) => page.selected)
+        const selectedPageNo = currPage.value + 1
+        selectPage(selectedPageNo)
+    }
+
+    const lastPageNo = offset + pageSize < size ? offset + pageSize : size
+    const pageNoIndex = pages.findIndex((page) => page.selected)
+    const visiblePages = pages.filter((page) => page.isVisible)
+    return (
+        // TODO: Remove pagination-wrapper from dashboard
+        <div className={rootClassName || ''}>
+            <div className="page-number">
+                {offset + 1} - {lastPageNo} of {size}
+            </div>
+
+            <ul className="pagination">
+                <li className="page">
+                    <button
+                        className="page__button page__button--icon"
+                        disabled={!pageNoIndex}
+                        onClick={selectPreviousPage}
+                        type="button"
+                        aria-label="Previous page"
+                    >
+                        <span className="left-icon">
+                            <i className="fa fa-chevron-left" />
+                        </span>
+                    </button>
+                </li>
+
+                {visiblePages.map((page) => (
+                    <PageValueItem
+                        value={page.value}
+                        isSelected={page.selected}
+                        key={page.value}
+                        selectPage={selectPage}
+                    />
+                ))}
+
+                <li className="page">
+                    <button
+                        className="page__button page__button--icon"
+                        disabled={pageNoIndex === pages.length - 1}
+                        onClick={selectNextPage}
+                        type="button"
+                        aria-label="Next page"
+                    >
+                        <span className="left-icon">
+                            <i className="fa fa-chevron-right" />
+                        </span>
+                    </button>
+                </li>
+            </ul>
+
+            {!isPageSizeFix && (
+                <div className="select">
+                    <span className="select__placeholder">Rows per page</span>
+                    <PageSizeSelector
+                        pageSizeOptions={pageSizeOptions}
+                        pageSize={pageSize}
+                        changePageSize={changePageSize}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default Pagination

package/src/Common/Pagination/constants.ts

@@ -0,0 +1,6 @@
+export const VISIBLE_PAGES_LIMIT = 5
+export const FALLBACK_PAGE_SIZE_OPTIONS = [
+    { value: 20, selected: true },
+    { value: 40, selected: false },
+    { value: 50, selected: false },
+]

package/src/Common/Pagination/index.tsx

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+// Disabling since might need to export types as well
+export { default as Pagination } from './Pagination'

package/src/Common/Pagination/pagination.scss

@@ -0,0 +1,123 @@
+.pagination-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 0px 24px;
+    justify-content: space-between;
+    margin: 0px;
+    background-color: var(--white);
+}
+
+.pagination {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding: 0px;
+}
+
+.select {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.select__placeholder {
+    font-size: 12px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: var(--N700);
+    margin-right: 8px;
+}
+
+.pagination__select-menu {
+    padding: 0px;
+    list-style: none;
+    overflow: hidden;
+    border: solid 1px var(--N200);
+    border-radius: 4px;
+    width: 64px;
+    position: absolute;
+    bottom: 31px;
+    background-color: var(--white);;
+}
+
+.select__button {
+    width: 64px;
+    background-color: transparent;
+    border-radius: 4px;
+    border: solid 1px var(--N200);
+    padding: 5px 10px;
+    text-align: left;
+}
+
+.select__item {
+    padding: 5px 10px;
+    cursor: pointer;
+}
+
+.select__icon {
+    margin-left: 18px;
+}
+
+.page {
+    margin: 0px 8px;
+    display: inline-block;
+}
+
+.page-number {
+    font-size: 12px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: var(--N700);
+}
+
+.page__button {
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    color: var(--B500);
+    background-color: var(--white);
+    padding: 0px;
+    user-select: none;
+}
+
+.page__button--icon {
+    background-color: var(--white);
+    color: var(--B500);
+}
+
+/* MODIFIERS */
+
+.page__button--selected {
+    color: var(--white);
+    background-color: var(--B500);
+}
+
+/* States and Selectorys */
+
+.page__button:disabled {
+    opacity: 0.5;
+}
+
+.select__item:hover {
+    background-color: var(--N50);
+}
+
+.page__button:hover ~ :disabled {
+    background-color: var(--B100);
+}
+
+.page__button--selected:hover {
+    color: var(--white);
+    background-color: var(--B500);
+}
+
+@media (min-width: 1024px) {
+    .pagination {
+        margin: 16px auto;
+    }
+}

package/src/Common/Pagination/types.ts

@@ -0,0 +1,55 @@
+export interface PageSizeOption {
+    value: number
+    selected: boolean
+}
+export interface PaginationProps {
+    /**
+     * number of items
+     */
+    size: number
+    /**
+     * pageSize
+     */
+    pageSize: number
+    offset: number
+    changePage: (pageNo: number) => void
+    changePageSize?: (pageSize: number) => void
+    /**
+     * If true will not show page size selector
+     */
+    isPageSizeFix?: boolean
+    /**
+     * If given would show these options in page size selector else [20,40,50] with 20 as selected
+     */
+    pageSizeOptions?: PageSizeOption[]
+    /**
+     * class for wrapper
+     */
+    rootClassName?: string
+}
+
+export interface Page {
+    value: number
+    selected: boolean
+    isVisible: boolean
+}
+
+export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
+    selectedPageNo: number
+}
+
+export interface PageSizeSelectorProps
+    extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {}
+
+export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
+    optionValue: PageSizeOption['value']
+    options: PageSizeOption[]
+    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>
+    handleCloseDropdown: () => void
+}
+
+export interface PageValueItemProps {
+    value: PageSizeOption['value']
+    isSelected: PageSizeOption['selected']
+    selectPage: (selectedPageNo: number) => void
+}

package/src/Common/Pagination/utils.tsx

@@ -0,0 +1,24 @@
+import { CreatePageArrType, Page, PageSizeOption } from './types'
+import { FALLBACK_PAGE_SIZE_OPTIONS, VISIBLE_PAGES_LIMIT } from './constants'
+
+/**
+ * Returns an array of pages numbers and whether they are selected, visible or not
+ */
+export const createPageArr = ({ size, pageSize, selectedPageNo }: CreatePageArrType): Page[] => {
+    const arr = []
+    const numberOfPages = Math.ceil(size / pageSize)
+    // we are showing 2 numbers before and after the selected page, so computing the lower and upper bounds
+    const lowerBound = selectedPageNo - 2 < 1 ? 1 : selectedPageNo - 2
+    const upperBound = selectedPageNo + 2 > numberOfPages ? numberOfPages : selectedPageNo + 2
+    for (let i = 1; i <= numberOfPages; i++) {
+        arr.push({
+            value: i,
+            selected: i === selectedPageNo,
+            isVisible: upperBound - VISIBLE_PAGES_LIMIT < i && i < lowerBound + VISIBLE_PAGES_LIMIT,
+        })
+    }
+    return arr
+}
+
+export const getDefaultPageValueOptions = (pageSizeOptions: PageSizeOption[]): PageSizeOption[] =>
+    pageSizeOptions?.length ? pageSizeOptions : FALLBACK_PAGE_SIZE_OPTIONS

package/src/Common/index.ts

@@ -47,3 +47,4 @@ export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSel
 export * from './AddCDButton'
 export * from './CustomInput'
 export * from './DraggableWrapper'
+export * from './Pagination'