@auth0/quantum-product 1.6.5 → 1.6.6

package/esm/pagination/index.js

@@ -1,2 +1,3 @@
+export * from './pager';
 export { Pagination } from './pagination';
 export { paginationClasses } from './pagination-classes';

package/esm/pagination/pager/index.js

@@ -0,0 +1,2 @@
+export { Pager } from './pager';
+export { pagerClasses } from './pager-classes';

package/esm/pagination/pager/pager-classes.js

@@ -0,0 +1,10 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var pagerComponentName = 'QuantumPager';
+export function getPagerUtilityClass(slot) {
+    return generateUtilityClass(pagerComponentName, slot);
+}
+export var pagerClasses = generateUtilityClasses(pagerComponentName, [
+    'root',
+    'previousPageButton',
+    'nextPageButton',
+]);

package/esm/pagination/pager/pager.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { IconButton } from '../../icon-button';
+import { StackLayout } from '../../stack-layout';
+import { useMergedClasses } from '../../styles/classes';
+import { getPagerUtilityClass, pagerClasses } from './pager-classes';
+import { clsx } from '../../utils';
+import { ChevronLeftIcon, ChevronRightIcon } from '../../icon';
+export var Pager = React.forwardRef(function (props, ref) {
+    var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages"]);
+    var classes = useMergedClasses(pagerClasses, getPagerUtilityClass, propClasses);
+    var isPrevDisabled = disabled || previousDisabled || page <= 1;
+    var isNextDisabled = disabled || nextDisabled || (totalPages != null && page >= totalPages);
+    return (React.createElement(StackLayout, __assign({ ref: ref, gutter: 1, className: clsx(classes.root, className), sx: __assign({ justifyContent: 'flex-end' }, sx) }, rootProps),
+        React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, "aria-label": "Previous page" }, nextIconButtonProps),
+            React.createElement(ChevronLeftIcon, null)),
+        React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, "aria-label": "Next page" }, previousIconButtonProps),
+            React.createElement(ChevronRightIcon, null))));
+});

package/esm/pagination/pager/pager.test.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Pager } from '..';
+import { fireEvent, render, runBaseTests } from '../../test-utils';
+runBaseTests(Pager, { page: 1 });
+test('disables previous and next page if disabled is true', function () {
+    var getByLabelText = render(React.createElement(Pager, { page: 2, disabled: true })).getByLabelText;
+    var previousPageButton = getByLabelText('Previous page');
+    var nextPageButton = getByLabelText('Next page');
+    expect(previousPageButton.disabled).toBe(true);
+    expect(nextPageButton.disabled).toBe(true);
+});
+test('disables previous page on first page', function () {
+    var getByLabelText = render(React.createElement(Pager, { page: 1 })).getByLabelText;
+    var previousPageButton = getByLabelText('Previous page');
+    expect(previousPageButton.disabled).toBe(true);
+});
+test('disables previous page if previousDisabled is true', function () {
+    var getByLabelText = render(React.createElement(Pager, { page: 2, previousDisabled: true })).getByLabelText;
+    var previousPageButton = getByLabelText('Previous page');
+    expect(previousPageButton.disabled).toBe(true);
+});
+test('disables next page if nextDisabled is true', function () {
+    var getByLabelText = render(React.createElement(Pager, { page: 2, nextDisabled: true })).getByLabelText;
+    var nextPageButton = getByLabelText('Next page');
+    expect(nextPageButton.disabled).toBe(true);
+});
+test('disables next page if page is equal to totalPages', function () {
+    var getByLabelText = render(React.createElement(Pager, { page: 2, totalPages: 2 })).getByLabelText;
+    var nextPageButton = getByLabelText('Next page');
+    expect(nextPageButton.disabled).toBe(true);
+});
+test('goes previous page if previous page is clicked', function () {
+    var currentPage = 2;
+    var pageChangeHandler = jest.fn();
+    var getByLabelText = render(React.createElement(Pager, { page: currentPage, onPageChange: pageChangeHandler })).getByLabelText;
+    var previousPageButton = getByLabelText('Previous page');
+    fireEvent.click(previousPageButton);
+    expect(pageChangeHandler).toBeCalledWith(currentPage - 1);
+});
+test('goes next page if next page is clicked', function () {
+    var currentPage = 2;
+    var pageChangeHandler = jest.fn();
+    var getByLabelText = render(React.createElement(Pager, { page: currentPage, onPageChange: pageChangeHandler })).getByLabelText;
+    var nextPageButton = getByLabelText('Next page');
+    fireEvent.click(nextPageButton);
+    expect(pageChangeHandler).toBeCalledWith(currentPage + 1);
+});

package/esm/pagination/pagination-classes.js

@@ -7,6 +7,5 @@ export var paginationClasses = generateUtilityClasses(paginationComponentName, [
     'root',
     'pageSelect',
     'pageLabelText',
-    'previousPageButton',
-    'nextPageButton',
+    'pager',
 ]);

package/esm/pagination/pagination.js

@@ -21,8 +21,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon } from '../icon';
-import { IconButton } from '../icon-button';
 import { Select } from '../select';
 import { StackLayout, StackLayoutItem } from '../stack-layout';
 import { styled } from '../styled';
@@ -30,6 +28,7 @@ import { useMergedClasses } from '../styles/classes';
 import { Text } from '../text';
 import clsx from '../utils/clsx';
 import { paginationComponentName, paginationClasses, getPaginationUtilityClass, } from './pagination-classes';
+import { Pager } from './pager';
 var Root = styled('fieldset', { name: paginationComponentName, slot: 'Root' })(function (_a) {
     var ownerState = _a.ownerState;
     return (__assign({ justifyContent: 'space-between', display: 'flex', alignItems: 'center', margin: 0, padding: 0, border: 'none' }, (ownerState.disabled && {
@@ -62,7 +61,7 @@ var changePageIfAppropriate = function (_a) {
     }
 };
 export var Pagination = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "onPageChanged", "disabled", "classes"]);
+    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _a = props.PagerProps, PagerProps = _a === void 0 ? {} : _a, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "onPageChanged", "disabled", "classes", "PagerProps"]);
     var classes = useMergedClasses(paginationClasses, getPaginationUtilityClass, propClasses);
     var pages = pagesFromItems(items, perPage);
     var pageOptions = React.useMemo(function () {
@@ -79,8 +78,6 @@ export var Pagination = React.forwardRef(function (props, ref) {
     if (pages <= 1) {
         return null;
     }
-    var inFirstPage = page === 1;
-    var inLastPage = page === pages;
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { disabled: disabled }, className: clsx(classes.root, className) }, rootProps), items > 0 && (React.createElement(React.Fragment, null,
         React.createElement(StackLayout, { gutter: 1 },
             React.createElement(StackLayoutItem, null,
@@ -99,11 +96,5 @@ export var Pagination = React.forwardRef(function (props, ref) {
                 React.createElement(Text, { className: classes.pageLabelText, variant: "body2" },
                     "of ",
                     pages))),
-        React.createElement(StackLayout, { gutter: 1 },
-            React.createElement(StackLayoutItem, null,
-                React.createElement(IconButton, { variant: "outlined", className: classes.previousPageButton, onClick: function () { return changePageIfAppropriate({ nextPage: page - 1, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, disabled: inFirstPage, "aria-label": "Previous page" },
-                    React.createElement(ChevronLeftIcon, null))),
-            React.createElement(StackLayoutItem, null,
-                React.createElement(IconButton, { variant: "outlined", className: classes.nextPageButton, onClick: function () { return changePageIfAppropriate({ nextPage: page + 1, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, disabled: inLastPage, "aria-label": "Next page" },
-                    React.createElement(ChevronRightIcon, null))))))));
+        React.createElement(Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))));
 });

package/esm/test-utils.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { faker } from '@faker-js/faker';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from './theme';
+var getClassName = function (componentName, className) { return "".concat(componentName, "-").concat(className); };
+export var createDOMId = function (id) {
+    if (id === void 0) { id = faker.random.alphaNumeric(8); }
+    // queryselectors do not like ids that begin with numbers. This avoids that.
+    return "a0-".concat(id);
+};
+var Providers = function (_a) {
+    var children = _a.children;
+    return React.createElement(ThemeProvider, null, children);
+};
+var customRender = (function (ui, options) { return render(ui, __assign({ wrapper: Providers }, options)); });
+function createClassNameGetter(componentName) {
+    return function (className) { return getClassName(componentName, className); };
+}
+// eslint-disable-next-line import/export
+export * from '@testing-library/react';
+// override render method
+// eslint-disable-next-line import/export
+export { customRender as render, faker, createClassNameGetter };
+export function runBaseTests(Component, baseProps, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.overridable, overridable = _c === void 0 ? true : _c;
+    test('spreads additional props to the element', function () {
+        var testId = faker.random.alphaNumeric();
+        var getByTestId = customRender(React.createElement(Component, __assign({}, baseProps, { "data-testid": testId }))).getByTestId;
+        expect(function () { return getByTestId(testId); }).not.toThrow();
+    });
+    // test('className is passed to the root element', () => {
+    //   const testId = faker.random.alphaNumeric();
+    //   const { getByTestId } = customRender(<Component {...baseProps} data-testid={testId} />);
+    //   expect(() => getByTestId(testId)).not.toThrow();
+    // });
+    test('ref is passed to the element', function () {
+        var testId = faker.random.alphaNumeric();
+        var ref = React.createRef();
+        var getByTestId = customRender(React.createElement(Component, __assign({}, baseProps, { ref: ref, "data-testid": testId }))).getByTestId;
+        var rootElement = getByTestId(testId);
+        expect(rootElement).toBe(ref.current);
+    });
+    if (overridable) {
+        // TODO: Refactor to suppoert `as` prop
+        // test.skip('A different html tag can be used', () => {
+        //   const testId = faker.random.alphaNumeric();
+        //   const newTag = 'header';
+        //   const { getByTestId } = customRender(<Component {...baseProps} component={newTag} data-testid={testId} />);
+        //   const rootElement = getByTestId(testId);
+        //   expect(rootElement.tagName).toBe(newTag.toUpperCase());
+        // });
+    }
+}
+export function mock(values) {
+    return values;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {

package/pagination/index.d.ts

@@ -1,3 +1,4 @@
+export * from './pager';
 export { Pagination } from './pagination';
 export type { IPaginationProps } from './pagination';
 export { paginationClasses } from './pagination-classes';

package/pagination/index.js

@@ -1,6 +1,21 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.paginationClasses = exports.Pagination = void 0;
+__exportStar(require("./pager"), exports);
 var pagination_1 = require("./pagination");
 Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return pagination_1.Pagination; } });
 var pagination_classes_1 = require("./pagination-classes");

package/pagination/pager/index.d.ts

@@ -0,0 +1,3 @@
+export { Pager } from './pager';
+export type { IPagerProps } from './pager';
+export { pagerClasses } from './pager-classes';

package/pagination/pager/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pagerClasses = exports.Pager = void 0;
+var pager_1 = require("./pager");
+Object.defineProperty(exports, "Pager", { enumerable: true, get: function () { return pager_1.Pager; } });
+var pager_classes_1 = require("./pager-classes");
+Object.defineProperty(exports, "pagerClasses", { enumerable: true, get: function () { return pager_classes_1.pagerClasses; } });

package/pagination/pager/pager-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const pagerComponentName: "QuantumPager";
+export declare function getPagerUtilityClass(slot: string): string;
+export declare const pagerClasses: Record<"root" | "previousPageButton" | "nextPageButton", string>;
+export declare type PagerClasses = typeof pagerClasses;
+export declare type PagerClassKey = keyof PagerClasses;

package/pagination/pager/pager-classes.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pagerClasses = exports.getPagerUtilityClass = exports.pagerComponentName = void 0;
+var classes_1 = require("../../styles/classes");
+exports.pagerComponentName = 'QuantumPager';
+function getPagerUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.pagerComponentName, slot);
+}
+exports.getPagerUtilityClass = getPagerUtilityClass;
+exports.pagerClasses = (0, classes_1.generateUtilityClasses)(exports.pagerComponentName, [
+    'root',
+    'previousPageButton',
+    'nextPageButton',
+]);

package/pagination/pager/pager.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IIconButtonProps } from '../../icon-button';
+import { IStackLayoutProps } from '../../stack-layout';
+import { PagerClasses } from './pager-classes';
+export interface IPagerProps extends IStackLayoutProps {
+    page: number;
+    classes?: Partial<PagerClasses>;
+    disabled?: boolean;
+    nextDisabled?: boolean;
+    nextIconButtonProps?: IIconButtonProps;
+    onPageChange?(page: number): void;
+    previousDisabled?: boolean;
+    previousIconButtonProps?: IIconButtonProps;
+    size?: IIconButtonProps['size'];
+    totalPages?: number;
+}
+export declare const Pager: React.ForwardRefExoticComponent<IPagerProps & React.RefAttributes<HTMLDivElement>>;

package/pagination/pager/pager.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pager = void 0;
+var React = __importStar(require("react"));
+var icon_button_1 = require("../../icon-button");
+var stack_layout_1 = require("../../stack-layout");
+var classes_1 = require("../../styles/classes");
+var pager_classes_1 = require("./pager-classes");
+var utils_1 = require("../../utils");
+var icon_1 = require("../../icon");
+exports.Pager = React.forwardRef(function (props, ref) {
+    var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages"]);
+    var classes = (0, classes_1.useMergedClasses)(pager_classes_1.pagerClasses, pager_classes_1.getPagerUtilityClass, propClasses);
+    var isPrevDisabled = disabled || previousDisabled || page <= 1;
+    var isNextDisabled = disabled || nextDisabled || (totalPages != null && page >= totalPages);
+    return (React.createElement(stack_layout_1.StackLayout, __assign({ ref: ref, gutter: 1, className: (0, utils_1.clsx)(classes.root, className), sx: __assign({ justifyContent: 'flex-end' }, sx) }, rootProps),
+        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, "aria-label": "Previous page" }, nextIconButtonProps),
+            React.createElement(icon_1.ChevronLeftIcon, null)),
+        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, "aria-label": "Next page" }, previousIconButtonProps),
+            React.createElement(icon_1.ChevronRightIcon, null))));
+});

package/pagination/pager/pager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/pagination/pager/pager.test.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var __1 = require("..");
+var test_utils_1 = require("../../test-utils");
+(0, test_utils_1.runBaseTests)(__1.Pager, { page: 1 });
+test('disables previous and next page if disabled is true', function () {
+    var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 2, disabled: true })).getByLabelText;
+    var previousPageButton = getByLabelText('Previous page');
+    var nextPageButton = getByLabelText('Next page');
+    expect(previousPageButton.disabled).toBe(true);
+    expect(nextPageButton.disabled).toBe(true);
+});
+test('disables previous page on first page', function () {
+    var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 1 })).getByLabelText;
+    var previousPageButton = getByLabelText('Previous page');
+    expect(previousPageButton.disabled).toBe(true);
+});
+test('disables previous page if previousDisabled is true', function () {
+    var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 2, previousDisabled: true })).getByLabelText;
+    var previousPageButton = getByLabelText('Previous page');
+    expect(previousPageButton.disabled).toBe(true);
+});
+test('disables next page if nextDisabled is true', function () {
+    var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 2, nextDisabled: true })).getByLabelText;
+    var nextPageButton = getByLabelText('Next page');
+    expect(nextPageButton.disabled).toBe(true);
+});
+test('disables next page if page is equal to totalPages', function () {
+    var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 2, totalPages: 2 })).getByLabelText;
+    var nextPageButton = getByLabelText('Next page');
+    expect(nextPageButton.disabled).toBe(true);
+});
+test('goes previous page if previous page is clicked', function () {
+    var currentPage = 2;
+    var pageChangeHandler = jest.fn();
+    var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: currentPage, onPageChange: pageChangeHandler })).getByLabelText;
+    var previousPageButton = getByLabelText('Previous page');
+    test_utils_1.fireEvent.click(previousPageButton);
+    expect(pageChangeHandler).toBeCalledWith(currentPage - 1);
+});
+test('goes next page if next page is clicked', function () {
+    var currentPage = 2;
+    var pageChangeHandler = jest.fn();
+    var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: currentPage, onPageChange: pageChangeHandler })).getByLabelText;
+    var nextPageButton = getByLabelText('Next page');
+    test_utils_1.fireEvent.click(nextPageButton);
+    expect(pageChangeHandler).toBeCalledWith(currentPage + 1);
+});

package/pagination/pagination-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const paginationComponentName: "QuantumPagination";
 export declare function getPaginationUtilityClass(slot: string): string;
-export declare const paginationClasses: Record<"root" | "pageSelect" | "pageLabelText" | "previousPageButton" | "nextPageButton", string>;
+export declare const paginationClasses: Record<"root" | "pageSelect" | "pageLabelText" | "pager", string>;
 export declare type PaginationClasses = typeof paginationClasses;
 export declare type PaginationClassKey = keyof PaginationClasses;

package/pagination/pagination-classes.js

@@ -11,6 +11,5 @@ exports.paginationClasses = (0, classes_1.generateUtilityClasses)(exports.pagina
     'root',
     'pageSelect',
     'pageLabelText',
-    'previousPageButton',
-    'nextPageButton',
+    'pager',
 ]);

package/pagination/pagination.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IStyledComponentProps } from '../styled';
 import { PaginationClasses } from './pagination-classes';
+import { IPagerProps } from './pager';
 export declare type IPaginationProps = IStyledComponentProps<{
     props: {
         items: number;
@@ -8,6 +9,7 @@ export declare type IPaginationProps = IStyledComponentProps<{
         perPage: number;
         disabled?: boolean;
         onPageChanged(page: number): void;
+        PagerProps?: Partial<IPagerProps>;
         classes?: Partial<PaginationClasses>;
     };
     defaultComponent: 'fieldset';
@@ -18,5 +20,6 @@ export declare const Pagination: React.ForwardRefExoticComponent<{
     perPage: number;
     disabled?: boolean | undefined;
     onPageChanged(page: number): void;
-    classes?: Partial<Record<"root" | "pageSelect" | "pageLabelText" | "previousPageButton" | "nextPageButton", string>> | undefined;
-} & Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref" | "disabled" | "page" | "classes" | "items" | "perPage" | "onPageChanged"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLFieldSetElement>>;
+    PagerProps?: Partial<IPagerProps> | undefined;
+    classes?: Partial<Record<"root" | "pageSelect" | "pageLabelText" | "pager", string>> | undefined;
+} & Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref" | "disabled" | "page" | "classes" | "items" | "perPage" | "onPageChanged" | "PagerProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLFieldSetElement>>;

package/pagination/pagination.js

@@ -50,8 +50,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = void 0;
 var React = __importStar(require("react"));
-var icon_1 = require("../icon");
-var icon_button_1 = require("../icon-button");
 var select_1 = require("../select");
 var stack_layout_1 = require("../stack-layout");
 var styled_1 = require("../styled");
@@ -59,6 +57,7 @@ var classes_1 = require("../styles/classes");
 var text_1 = require("../text");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var pagination_classes_1 = require("./pagination-classes");
+var pager_1 = require("./pager");
 var Root = (0, styled_1.styled)('fieldset', { name: pagination_classes_1.paginationComponentName, slot: 'Root' })(function (_a) {
     var ownerState = _a.ownerState;
     return (__assign({ justifyContent: 'space-between', display: 'flex', alignItems: 'center', margin: 0, padding: 0, border: 'none' }, (ownerState.disabled && {
@@ -91,7 +90,7 @@ var changePageIfAppropriate = function (_a) {
     }
 };
 exports.Pagination = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "onPageChanged", "disabled", "classes"]);
+    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _a = props.PagerProps, PagerProps = _a === void 0 ? {} : _a, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "onPageChanged", "disabled", "classes", "PagerProps"]);
     var classes = (0, classes_1.useMergedClasses)(pagination_classes_1.paginationClasses, pagination_classes_1.getPaginationUtilityClass, propClasses);
     var pages = pagesFromItems(items, perPage);
     var pageOptions = React.useMemo(function () {
@@ -108,8 +107,6 @@ exports.Pagination = React.forwardRef(function (props, ref) {
     if (pages <= 1) {
         return null;
     }
-    var inFirstPage = page === 1;
-    var inLastPage = page === pages;
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { disabled: disabled }, className: (0, clsx_1.default)(classes.root, className) }, rootProps), items > 0 && (React.createElement(React.Fragment, null,
         React.createElement(stack_layout_1.StackLayout, { gutter: 1 },
             React.createElement(stack_layout_1.StackLayoutItem, null,
@@ -128,11 +125,5 @@ exports.Pagination = React.forwardRef(function (props, ref) {
                 React.createElement(text_1.Text, { className: classes.pageLabelText, variant: "body2" },
                     "of ",
                     pages))),
-        React.createElement(stack_layout_1.StackLayout, { gutter: 1 },
-            React.createElement(stack_layout_1.StackLayoutItem, null,
-                React.createElement(icon_button_1.IconButton, { variant: "outlined", className: classes.previousPageButton, onClick: function () { return changePageIfAppropriate({ nextPage: page - 1, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, disabled: inFirstPage, "aria-label": "Previous page" },
-                    React.createElement(icon_1.ChevronLeftIcon, null))),
-            React.createElement(stack_layout_1.StackLayoutItem, null,
-                React.createElement(icon_button_1.IconButton, { variant: "outlined", className: classes.nextPageButton, onClick: function () { return changePageIfAppropriate({ nextPage: page + 1, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, disabled: inLastPage, "aria-label": "Next page" },
-                    React.createElement(icon_1.ChevronRightIcon, null))))))));
+        React.createElement(pager_1.Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))));
 });

package/test-utils.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { faker } from '@faker-js/faker';
+import { render } from '@testing-library/react';
+export declare const createDOMId: (id?: string) => string;
+declare const customRender: typeof render;
+declare function createClassNameGetter<ClassKey extends string>(componentName: string): (className: ClassKey) => string;
+export * from '@testing-library/react';
+export { customRender as render, faker, createClassNameGetter };
+interface IBaseTestOptions {
+    /** Disables/Enables base test for overriding the element */
+    overridable?: boolean;
+}
+export declare function runBaseTests<PropsType, ElementType extends HTMLElement = HTMLElement>(Component: React.ComponentType<PropsType>, baseProps: PropsType, { overridable }?: IBaseTestOptions): void;
+export declare function mock<Item = any>(values: Partial<Item>): Item;

package/test-utils.js

@@ -0,0 +1,99 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mock = exports.runBaseTests = exports.createClassNameGetter = exports.faker = exports.render = exports.createDOMId = void 0;
+var React = __importStar(require("react"));
+var faker_1 = require("@faker-js/faker");
+Object.defineProperty(exports, "faker", { enumerable: true, get: function () { return faker_1.faker; } });
+var react_1 = require("@testing-library/react");
+var theme_1 = require("./theme");
+var getClassName = function (componentName, className) { return "".concat(componentName, "-").concat(className); };
+var createDOMId = function (id) {
+    if (id === void 0) { id = faker_1.faker.random.alphaNumeric(8); }
+    // queryselectors do not like ids that begin with numbers. This avoids that.
+    return "a0-".concat(id);
+};
+exports.createDOMId = createDOMId;
+var Providers = function (_a) {
+    var children = _a.children;
+    return React.createElement(theme_1.ThemeProvider, null, children);
+};
+var customRender = (function (ui, options) { return (0, react_1.render)(ui, __assign({ wrapper: Providers }, options)); });
+exports.render = customRender;
+function createClassNameGetter(componentName) {
+    return function (className) { return getClassName(componentName, className); };
+}
+exports.createClassNameGetter = createClassNameGetter;
+// eslint-disable-next-line import/export
+__exportStar(require("@testing-library/react"), exports);
+function runBaseTests(Component, baseProps, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.overridable, overridable = _c === void 0 ? true : _c;
+    test('spreads additional props to the element', function () {
+        var testId = faker_1.faker.random.alphaNumeric();
+        var getByTestId = customRender(React.createElement(Component, __assign({}, baseProps, { "data-testid": testId }))).getByTestId;
+        expect(function () { return getByTestId(testId); }).not.toThrow();
+    });
+    // test('className is passed to the root element', () => {
+    //   const testId = faker.random.alphaNumeric();
+    //   const { getByTestId } = customRender(<Component {...baseProps} data-testid={testId} />);
+    //   expect(() => getByTestId(testId)).not.toThrow();
+    // });
+    test('ref is passed to the element', function () {
+        var testId = faker_1.faker.random.alphaNumeric();
+        var ref = React.createRef();
+        var getByTestId = customRender(React.createElement(Component, __assign({}, baseProps, { ref: ref, "data-testid": testId }))).getByTestId;
+        var rootElement = getByTestId(testId);
+        expect(rootElement).toBe(ref.current);
+    });
+    if (overridable) {
+        // TODO: Refactor to suppoert `as` prop
+        // test.skip('A different html tag can be used', () => {
+        //   const testId = faker.random.alphaNumeric();
+        //   const newTag = 'header';
+        //   const { getByTestId } = customRender(<Component {...baseProps} component={newTag} data-testid={testId} />);
+        //   const rootElement = getByTestId(testId);
+        //   expect(rootElement.tagName).toBe(newTag.toUpperCase());
+        // });
+    }
+}
+exports.runBaseTests = runBaseTests;
+function mock(values) {
+    return values;
+}
+exports.mock = mock;