@epilot/base-elements 2.7.12 → 2.7.15

package/dist/Notification/Notification.js

@@ -1,52 +1,52 @@
-"use strict";
-exports.__esModule = true;
-exports.SuccessNotification = exports.ErrorNotification = exports.InfoNotification = void 0;
-var tslib_1 = require("tslib");
-var core_1 = require("@material-ui/core");
-var lab_1 = require("@material-ui/lab");
-var react_1 = tslib_1.__importDefault(require("react"));
-var __1 = require("..");
-var useStyles = core_1.makeStyles(function (theme) {
-    return core_1.createStyles({
-        root: {
-            borderRadius: 0,
-            backgroundColor: function (_a) {
-                var variant = _a.variant;
-                return variant === 'info'
-                    ? theme.palette.grey[600]
-                    : theme.palette[variant].dark;
-            },
-            color: function (_a) {
-                var variant = _a.variant;
-                return theme.palette[variant].contrastText;
-            }
-        }
-    });
-});
-function getAction(args) {
-    return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement(__1.IconButton, { "aria-label": "close", color: "inherit", onClick: args.onClose, size: "small" },
-            react_1["default"].createElement(__1.Icon, { color: "inherit", fontSize: "small", name: "close" }))));
-}
-function InfoNotification(props) {
-    var _a = props.visible, visible = _a === void 0 ? false : _a, children = props.children, rest = tslib_1.__rest(props, ["visible", "children"]);
-    var classes = useStyles({ variant: 'info' });
-    return (react_1["default"].createElement(__1.Collapse, { "in": visible },
-        react_1["default"].createElement(lab_1.Alert, tslib_1.__assign({ action: getAction(props), elevation: 0, icon: false, severity: "info", variant: "filled" }, rest, { className: classes.root }), children)));
-}
-exports.InfoNotification = InfoNotification;
-function ErrorNotification(props) {
-    var _a = props.visible, visible = _a === void 0 ? false : _a, children = props.children, rest = tslib_1.__rest(props, ["visible", "children"]);
-    var classes = useStyles({ variant: 'error' });
-    return (react_1["default"].createElement(__1.Collapse, { "in": visible },
-        react_1["default"].createElement(lab_1.Alert, tslib_1.__assign({ action: getAction(props), elevation: 0, icon: false, severity: "error", variant: "filled" }, rest, { className: classes.root }), children)));
-}
-exports.ErrorNotification = ErrorNotification;
-function SuccessNotification(props) {
-    var _a = props.visible, visible = _a === void 0 ? false : _a, children = props.children, rest = tslib_1.__rest(props, ["visible", "children"]);
-    var classes = useStyles({ variant: 'success' });
-    return (react_1["default"].createElement(__1.Collapse, { "in": visible },
-        react_1["default"].createElement(lab_1.Alert, tslib_1.__assign({ action: getAction(props), elevation: 0, icon: false, severity: "success", variant: "filled" }, rest, { className: classes.root }), children)));
-}
-exports.SuccessNotification = SuccessNotification;
+"use strict";
+exports.__esModule = true;
+exports.SuccessNotification = exports.ErrorNotification = exports.InfoNotification = void 0;
+var tslib_1 = require("tslib");
+var core_1 = require("@material-ui/core");
+var lab_1 = require("@material-ui/lab");
+var react_1 = tslib_1.__importDefault(require("react"));
+var __1 = require("..");
+var useStyles = core_1.makeStyles(function (theme) {
+    return core_1.createStyles({
+        root: {
+            borderRadius: 0,
+            backgroundColor: function (_a) {
+                var variant = _a.variant;
+                return variant === 'info'
+                    ? theme.palette.grey[600]
+                    : theme.palette[variant].dark;
+            },
+            color: function (_a) {
+                var variant = _a.variant;
+                return theme.palette[variant].contrastText;
+            }
+        }
+    });
+});
+function getAction(args) {
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement(__1.IconButton, { "aria-label": "close", color: "inherit", onClick: args.onClose, size: "small" },
+            react_1["default"].createElement(__1.Icon, { color: "inherit", fontSize: "small", name: "close" }))));
+}
+function InfoNotification(props) {
+    var _a = props.visible, visible = _a === void 0 ? false : _a, children = props.children, rest = tslib_1.__rest(props, ["visible", "children"]);
+    var classes = useStyles({ variant: 'info' });
+    return (react_1["default"].createElement(__1.Collapse, { "in": visible },
+        react_1["default"].createElement(lab_1.Alert, tslib_1.__assign({ action: getAction(props), elevation: 0, icon: false, severity: "info", variant: "filled" }, rest, { className: classes.root }), children)));
+}
+exports.InfoNotification = InfoNotification;
+function ErrorNotification(props) {
+    var _a = props.visible, visible = _a === void 0 ? false : _a, children = props.children, rest = tslib_1.__rest(props, ["visible", "children"]);
+    var classes = useStyles({ variant: 'error' });
+    return (react_1["default"].createElement(__1.Collapse, { "in": visible },
+        react_1["default"].createElement(lab_1.Alert, tslib_1.__assign({ action: getAction(props), elevation: 0, icon: false, severity: "error", variant: "filled" }, rest, { className: classes.root }), children)));
+}
+exports.ErrorNotification = ErrorNotification;
+function SuccessNotification(props) {
+    var _a = props.visible, visible = _a === void 0 ? false : _a, children = props.children, rest = tslib_1.__rest(props, ["visible", "children"]);
+    var classes = useStyles({ variant: 'success' });
+    return (react_1["default"].createElement(__1.Collapse, { "in": visible },
+        react_1["default"].createElement(lab_1.Alert, tslib_1.__assign({ action: getAction(props), elevation: 0, icon: false, severity: "success", variant: "filled" }, rest, { className: classes.root }), children)));
+}
+exports.SuccessNotification = SuccessNotification;
 //# sourceMappingURL=Notification.js.map

package/dist/Notification/index.d.ts

@@ -1,2 +1,2 @@
-export { InfoNotification, SuccessNotification, ErrorNotification } from './Notification';
-export * from './types';
+export { InfoNotification, SuccessNotification, ErrorNotification } from './Notification';
+export * from './types';

package/dist/Notification/index.js

@@ -1,10 +1,10 @@
-"use strict";
-exports.__esModule = true;
-exports.ErrorNotification = exports.SuccessNotification = exports.InfoNotification = void 0;
-var tslib_1 = require("tslib");
-var Notification_1 = require("./Notification");
-tslib_1.__createBinding(exports, Notification_1, "InfoNotification");
-tslib_1.__createBinding(exports, Notification_1, "SuccessNotification");
-tslib_1.__createBinding(exports, Notification_1, "ErrorNotification");
-tslib_1.__exportStar(require("./types"), exports);
+"use strict";
+exports.__esModule = true;
+exports.ErrorNotification = exports.SuccessNotification = exports.InfoNotification = void 0;
+var tslib_1 = require("tslib");
+var Notification_1 = require("./Notification");
+tslib_1.__createBinding(exports, Notification_1, "InfoNotification");
+tslib_1.__createBinding(exports, Notification_1, "SuccessNotification");
+tslib_1.__createBinding(exports, Notification_1, "ErrorNotification");
+tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/dist/Notification/types.d.ts

@@ -1,7 +1,7 @@
-import { AlertProps as MuiAlertProps } from '@material-ui/lab/Alert';
-export declare type BaseNotificationProps = Omit<MuiAlertProps, 'action' | 'square' | 'severity' | 'icon' | 'role' | 'component' | 'variant' | 'closeText' | 'iconMapping' | 'color'> & {
-    /**
-     * If `true`, the notification is visible.
-     */
-    visible?: boolean;
-};
+import { AlertProps as MuiAlertProps } from '@material-ui/lab/Alert';
+export declare type BaseNotificationProps = Omit<MuiAlertProps, 'action' | 'square' | 'severity' | 'icon' | 'role' | 'component' | 'variant' | 'closeText' | 'iconMapping' | 'color'> & {
+    /**
+     * If `true`, the notification is visible.
+     */
+    visible?: boolean;
+};

package/dist/Notification/types.js

@@ -1,3 +1,3 @@
-"use strict";
-exports.__esModule = true;
+"use strict";
+exports.__esModule = true;
 //# sourceMappingURL=types.js.map

package/dist/Pagination/Pagination.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { PaginationProps } from './types';
-declare const Pagination: (props: PaginationProps) => JSX.Element;
-export default Pagination;
+/// <reference types="react" />
+import { PaginationProps } from './types';
+declare const Pagination: (props: PaginationProps) => JSX.Element;
+export default Pagination;

package/dist/Pagination/Pagination.js

@@ -1,194 +1,194 @@
-"use strict";
-exports.__esModule = true;
-var tslib_1 = require("tslib");
-var core_1 = require("@material-ui/core");
-var icons_1 = require("@material-ui/icons");
-var classnames_1 = tslib_1.__importDefault(require("classnames"));
-var react_1 = tslib_1.__importStar(require("react"));
-var Menu_1 = require("../Menu");
-var Select_1 = require("../Select");
-var TextField_1 = require("../TextField");
-var Typography_1 = require("../Typography");
-var PaginationHelper_1 = tslib_1.__importDefault(require("./PaginationHelper"));
-var types_1 = require("./types");
-var STANDARD_DIMENSIONS = {
-    width: 33,
-    height: 33
-};
-var useButtonClasses = core_1.makeStyles(function (theme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return core_1.createStyles({
-        root: {
-            width: STANDARD_DIMENSIONS.width,
-            height: STANDARD_DIMENSIONS.height,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            border: "1px solid " + ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a.grey[70]),
-            borderRadius: '50%',
-            backgroundColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.background["default"],
-            fontWeight: 600,
-            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.text.primary,
-            cursor: 'pointer',
-            '&:hover': {
-                backgroundColor: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.background["default"],
-                borderColor: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.primary.main
-            }
-        },
-        active: {
-            backgroundColor: (_f = theme.palette) === null || _f === void 0 ? void 0 : _f.primary.main,
-            borderColor: (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary.main,
-            color: (_h = theme.palette) === null || _h === void 0 ? void 0 : _h.background["default"],
-            '&:hover': {
-                backgroundColor: (_j = theme.palette) === null || _j === void 0 ? void 0 : _j.primary[600],
-                borderColor: (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.primary[600]
-            }
-        }
-    });
-});
-var PageButton = function (_a) {
-    var _b;
-    var children = _a.children, _c = _a.active, active = _c === void 0 ? false : _c, onClick = _a.onClick;
-    var classes = useButtonClasses();
-    var buttonClasses = classnames_1["default"]((_b = {},
-        _b[classes.root] = true,
-        _b[classes.active] = active,
-        _b));
-    return (react_1["default"].createElement("button", { className: buttonClasses, onClick: onClick }, children));
-};
-var usePaginationClasses = core_1.makeStyles(function (theme) {
-    var _a, _b, _c;
-    return core_1.createStyles({
-        buttonsContainer: {
-            display: 'flex',
-            alignItems: 'center',
-            '& >*:not(:last-child)': {
-                marginRight: 8
-            }
-        },
-        arrowIcon: {
-            padding: 0,
-            width: STANDARD_DIMENSIONS.width,
-            height: STANDARD_DIMENSIONS.height,
-            color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.grey[200]
-        },
-        dotsContainer: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: STANDARD_DIMENSIONS.width,
-            height: STANDARD_DIMENSIONS.height
-        },
-        dotsIcon: {
-            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.grey[200]
-        },
-        pageInput: {
-            width: 56
-        },
-        countText: {
-            marginTop: 3,
-            minWidth: 96,
-            textAlign: 'right',
-            marginLeft: -8
-        },
-        selectRoot: {
-            paddingTop: 6.5,
-            paddingBottom: 6.5
-        },
-        selectContainer: {
-            marginTop: 4,
-            '& svg': {
-                color: ((_c = theme.palette) === null || _c === void 0 ? void 0 : _c.text.primary) + " !important"
-            }
-        }
-    });
-});
-var getCountText = function (locales, numberOfPages, activePage, pageSize, itemsCount) {
-    if (numberOfPages === activePage) {
-        return locales.countText({
-            from: (activePage - 1) * pageSize + 1,
-            to: itemsCount,
-            total: itemsCount
-        });
-    }
-    return locales.countText({
-        from: (activePage - 1) * pageSize + 1,
-        to: activePage * pageSize,
-        total: itemsCount
-    });
-};
-var Pagination = function (props) {
-    // state
-    var activePage = props.activePage, pageSizes = props.pageSizes, pageSize = props.pageSize, itemsCount = props.itemsCount, _a = props.showPageInput, showPageInput = _a === void 0 ? true : _a, _b = props.showPageSizeSelector, showPageSizeSelector = _b === void 0 ? true : _b, _c = props.locales, propLocales = _c === void 0 ? {} : _c;
-    // actions
-    var onActivePageChange = props.onActivePageChange, onPageSizeChange = props.onPageSizeChange;
-    var locales = PaginationHelper_1["default"].useLocales(propLocales);
-    var classes = usePaginationClasses();
-    var _d = react_1.useState(activePage.toString()), pageInputValue = _d[0], setPageInputValue = _d[1];
-    var numberOfPages = Math.ceil(itemsCount / pageSize);
-    var pages = PaginationHelper_1["default"].getPages(numberOfPages, activePage);
-    react_1.useEffect(function () {
-        setPageInputValue(activePage.toString());
-    }, [activePage]);
-    var onPageChange = function (pageValue) {
-        onActivePageChange(pageValue);
-        setPageInputValue(pageValue.toString());
-    };
-    var updateActivePageByInputPageValue = function () {
-        var pageInputNumber = Number(pageInputValue);
-        if (pageInputNumber <= 1) {
-            onPageChange(1);
-            setPageInputValue('1');
-            return;
-        }
-        if (pageInputNumber >= numberOfPages) {
-            onPageChange(numberOfPages);
-            setPageInputValue(numberOfPages.toString());
-            return;
-        }
-        onPageChange(pageInputNumber);
-        setPageInputValue(pageInputNumber.toString());
-    };
-    var onPageSizeUpdate = function (event) {
-        var newPageSize = event.target.value;
-        onActivePageChange(1);
-        setPageInputValue('1');
-        onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(newPageSize);
-    };
-    var onPageInputChange = function (event) {
-        setPageInputValue(event.target.value);
-    };
-    var onPageInputEnterPressed = function (event) {
-        if (event.key === 'Enter') {
-            updateActivePageByInputPageValue();
-        }
-    };
-    var onPageInputBlur = function () {
-        updateActivePageByInputPageValue();
-    };
-    var countText = getCountText(locales, numberOfPages, activePage, pageSize, itemsCount);
-    return (react_1["default"].createElement("div", { className: classes.buttonsContainer },
-        showPageInput && (react_1["default"].createElement(react_1["default"].Fragment, null,
-            react_1["default"].createElement(Typography_1.BodyText, null, locales.pageInputLabel),
-            react_1["default"].createElement(TextField_1.TextField, { classes: { root: classes.pageInput }, label: "Label", onBlur: onPageInputBlur, onChange: onPageInputChange, onKeyPress: onPageInputEnterPressed, placeholder: "...", size: "small", type: "number", value: pageInputValue, variant: "outlined" }))),
-        react_1["default"].createElement(core_1.IconButton, { classes: { root: classes.arrowIcon }, disabled: activePage === 1, onClick: function () { return onPageChange(1); } },
-            react_1["default"].createElement(icons_1.FirstPage, null)),
-        react_1["default"].createElement(core_1.IconButton, { classes: { root: classes.arrowIcon }, disabled: activePage === 1, onClick: function () { return onPageChange(activePage - 1); } },
-            react_1["default"].createElement(icons_1.ChevronLeft, null)),
-        pages.map(function (page) {
-            if (page.type === types_1.PAGE_TYPE.DOTS) {
-                return (react_1["default"].createElement("div", { className: classes.dotsContainer, key: page.value },
-                    react_1["default"].createElement(icons_1.MoreHoriz, { className: classes.dotsIcon })));
-            }
-            return (react_1["default"].createElement(PageButton, { active: activePage === page.value, key: page.value, onClick: function () { return onPageChange(page.value); } }, page.value));
-        }),
-        react_1["default"].createElement(core_1.IconButton, { classes: { root: classes.arrowIcon }, disabled: activePage === numberOfPages, onClick: function () { return onPageChange(activePage + 1); } },
-            react_1["default"].createElement(icons_1.ChevronRight, null)),
-        react_1["default"].createElement(core_1.IconButton, { classes: { root: classes.arrowIcon }, disabled: activePage === numberOfPages, onClick: function () { return onPageChange(numberOfPages); } },
-            react_1["default"].createElement(icons_1.LastPage, null)),
-        react_1["default"].createElement(Typography_1.BodyText, { className: classes.countText }, countText),
-        showPageSizeSelector && (react_1["default"].createElement("div", { className: classes.selectContainer },
-            react_1["default"].createElement(Select_1.Select, { classes: { root: classes.selectRoot }, onChange: onPageSizeUpdate, value: pageSize, variant: "outlined" }, pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.map(function (pageSize) { return (react_1["default"].createElement(Menu_1.MenuItem, { key: pageSize, value: pageSize }, pageSize)); }))))));
-};
-exports["default"] = Pagination;
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var core_1 = require("@material-ui/core");
+var icons_1 = require("@material-ui/icons");
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var react_1 = tslib_1.__importStar(require("react"));
+var Menu_1 = require("../Menu");
+var Select_1 = require("../Select");
+var TextField_1 = require("../TextField");
+var Typography_1 = require("../Typography");
+var PaginationHelper_1 = tslib_1.__importDefault(require("./PaginationHelper"));
+var types_1 = require("./types");
+var STANDARD_DIMENSIONS = {
+    width: 33,
+    height: 33
+};
+var useButtonClasses = core_1.makeStyles(function (theme) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return core_1.createStyles({
+        root: {
+            width: STANDARD_DIMENSIONS.width,
+            height: STANDARD_DIMENSIONS.height,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: "1px solid " + ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a.grey[70]),
+            borderRadius: '50%',
+            backgroundColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.background["default"],
+            fontWeight: 600,
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.text.primary,
+            cursor: 'pointer',
+            '&:hover': {
+                backgroundColor: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.background["default"],
+                borderColor: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.primary.main
+            }
+        },
+        active: {
+            backgroundColor: (_f = theme.palette) === null || _f === void 0 ? void 0 : _f.primary.main,
+            borderColor: (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary.main,
+            color: (_h = theme.palette) === null || _h === void 0 ? void 0 : _h.background["default"],
+            '&:hover': {
+                backgroundColor: (_j = theme.palette) === null || _j === void 0 ? void 0 : _j.primary[600],
+                borderColor: (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.primary[600]
+            }
+        }
+    });
+});
+var PageButton = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.active, active = _c === void 0 ? false : _c, onClick = _a.onClick;
+    var classes = useButtonClasses();
+    var buttonClasses = classnames_1["default"]((_b = {},
+        _b[classes.root] = true,
+        _b[classes.active] = active,
+        _b));
+    return (react_1["default"].createElement("button", { className: buttonClasses, onClick: onClick }, children));
+};
+var usePaginationClasses = core_1.makeStyles(function (theme) {
+    var _a, _b, _c;
+    return core_1.createStyles({
+        buttonsContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            '& >*:not(:last-child)': {
+                marginRight: 8
+            }
+        },
+        arrowIcon: {
+            padding: 0,
+            width: STANDARD_DIMENSIONS.width,
+            height: STANDARD_DIMENSIONS.height,
+            color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.grey[200]
+        },
+        dotsContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: STANDARD_DIMENSIONS.width,
+            height: STANDARD_DIMENSIONS.height
+        },
+        dotsIcon: {
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.grey[200]
+        },
+        pageInput: {
+            width: 56
+        },
+        countText: {
+            marginTop: 3,
+            minWidth: 96,
+            textAlign: 'right',
+            marginLeft: -8
+        },
+        selectRoot: {
+            paddingTop: 6.5,
+            paddingBottom: 6.5
+        },
+        selectContainer: {
+            marginTop: 4,
+            '& svg': {
+                color: ((_c = theme.palette) === null || _c === void 0 ? void 0 : _c.text.primary) + " !important"
+            }
+        }
+    });
+});
+var getCountText = function (locales, numberOfPages, activePage, pageSize, itemsCount) {
+    if (numberOfPages === activePage) {
+        return locales.countText({
+            from: (activePage - 1) * pageSize + 1,
+            to: itemsCount,
+            total: itemsCount
+        });
+    }
+    return locales.countText({
+        from: (activePage - 1) * pageSize + 1,
+        to: activePage * pageSize,
+        total: itemsCount
+    });
+};
+var Pagination = function (props) {
+    // state
+    var activePage = props.activePage, pageSizes = props.pageSizes, pageSize = props.pageSize, itemsCount = props.itemsCount, _a = props.showPageInput, showPageInput = _a === void 0 ? true : _a, _b = props.showPageSizeSelector, showPageSizeSelector = _b === void 0 ? true : _b, _c = props.locales, propLocales = _c === void 0 ? {} : _c;
+    // actions
+    var onActivePageChange = props.onActivePageChange, onPageSizeChange = props.onPageSizeChange;
+    var locales = PaginationHelper_1["default"].useLocales(propLocales);
+    var classes = usePaginationClasses();
+    var _d = react_1.useState(activePage.toString()), pageInputValue = _d[0], setPageInputValue = _d[1];
+    var numberOfPages = Math.ceil(itemsCount / pageSize);
+    var pages = PaginationHelper_1["default"].getPages(numberOfPages, activePage);
+    react_1.useEffect(function () {
+        setPageInputValue(activePage.toString());
+    }, [activePage]);
+    var onPageChange = function (pageValue) {
+        onActivePageChange(pageValue);
+        setPageInputValue(pageValue.toString());
+    };
+    var updateActivePageByInputPageValue = function () {
+        var pageInputNumber = Number(pageInputValue);
+        if (pageInputNumber <= 1) {
+            onPageChange(1);
+            setPageInputValue('1');
+            return;
+        }
+        if (pageInputNumber >= numberOfPages) {
+            onPageChange(numberOfPages);
+            setPageInputValue(numberOfPages.toString());
+            return;
+        }
+        onPageChange(pageInputNumber);
+        setPageInputValue(pageInputNumber.toString());
+    };
+    var onPageSizeUpdate = function (event) {
+        var newPageSize = event.target.value;
+        onActivePageChange(1);
+        setPageInputValue('1');
+        onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(newPageSize);
+    };
+    var onPageInputChange = function (event) {
+        setPageInputValue(event.target.value);
+    };
+    var onPageInputEnterPressed = function (event) {
+        if (event.key === 'Enter') {
+            updateActivePageByInputPageValue();
+        }
+    };
+    var onPageInputBlur = function () {
+        updateActivePageByInputPageValue();
+    };
+    var countText = getCountText(locales, numberOfPages, activePage, pageSize, itemsCount);
+    return (react_1["default"].createElement("div", { className: classes.buttonsContainer },
+        showPageInput && (react_1["default"].createElement(react_1["default"].Fragment, null,
+            react_1["default"].createElement(Typography_1.BodyText, null, locales.pageInputLabel),
+            react_1["default"].createElement(TextField_1.TextField, { classes: { root: classes.pageInput }, label: "Label", onBlur: onPageInputBlur, onChange: onPageInputChange, onKeyPress: onPageInputEnterPressed, placeholder: "...", size: "small", type: "number", value: pageInputValue, variant: "outlined" }))),
+        react_1["default"].createElement(core_1.IconButton, { classes: { root: classes.arrowIcon }, disabled: activePage === 1, onClick: function () { return onPageChange(1); } },
+            react_1["default"].createElement(icons_1.FirstPage, null)),
+        react_1["default"].createElement(core_1.IconButton, { classes: { root: classes.arrowIcon }, disabled: activePage === 1, onClick: function () { return onPageChange(activePage - 1); } },
+            react_1["default"].createElement(icons_1.ChevronLeft, null)),
+        pages.map(function (page) {
+            if (page.type === types_1.PAGE_TYPE.DOTS) {
+                return (react_1["default"].createElement("div", { className: classes.dotsContainer, key: page.value },
+                    react_1["default"].createElement(icons_1.MoreHoriz, { className: classes.dotsIcon })));
+            }
+            return (react_1["default"].createElement(PageButton, { active: activePage === page.value, key: page.value, onClick: function () { return onPageChange(page.value); } }, page.value));
+        }),
+        react_1["default"].createElement(core_1.IconButton, { classes: { root: classes.arrowIcon }, disabled: activePage === numberOfPages, onClick: function () { return onPageChange(activePage + 1); } },
+            react_1["default"].createElement(icons_1.ChevronRight, null)),
+        react_1["default"].createElement(core_1.IconButton, { classes: { root: classes.arrowIcon }, disabled: activePage === numberOfPages, onClick: function () { return onPageChange(numberOfPages); } },
+            react_1["default"].createElement(icons_1.LastPage, null)),
+        react_1["default"].createElement(Typography_1.BodyText, { className: classes.countText }, countText),
+        showPageSizeSelector && (react_1["default"].createElement("div", { className: classes.selectContainer },
+            react_1["default"].createElement(Select_1.Select, { classes: { root: classes.selectRoot }, onChange: onPageSizeUpdate, value: pageSize, variant: "outlined" }, pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.map(function (pageSize) { return (react_1["default"].createElement(Menu_1.MenuItem, { key: pageSize, value: pageSize }, pageSize)); }))))));
+};
+exports["default"] = Pagination;
 //# sourceMappingURL=Pagination.js.map

package/dist/Pagination/PaginationHelper.d.ts

@@ -1,6 +1,6 @@
-import { Page, PaginationLocales } from './types';
-declare const _default: {
-    getPages: (limit: number, activePage: number) => Page[];
-    useLocales: (locales: Partial<PaginationLocales>) => PaginationLocales;
-};
-export default _default;
+import { Page, PaginationLocales } from './types';
+declare const _default: {
+    getPages: (limit: number, activePage: number) => Page[];
+    useLocales: (locales: Partial<PaginationLocales>) => PaginationLocales;
+};
+export default _default;