@auth0/quantum-product 2.7.1 → 2.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/pagination/checkpoint-pagination/CheckpointPagination.js +58 -0
- package/esm/pagination/checkpoint-pagination/checkpoint-pagination-classes.js +10 -0
- package/esm/pagination/index.js +2 -0
- package/package.json +1 -1
- package/pagination/checkpoint-pagination/CheckpointPagination.d.ts +28 -0
- package/pagination/checkpoint-pagination/CheckpointPagination.js +87 -0
- package/pagination/checkpoint-pagination/checkpoint-pagination-classes.d.ts +5 -0
- package/pagination/checkpoint-pagination/checkpoint-pagination-classes.js +14 -0
- package/pagination/index.d.ts +3 -0
- package/pagination/index.js +5 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import * as React from 'react';
|
|
24
|
+
import { IconButton } from '../../icon-button';
|
|
25
|
+
import { ChevronLeftIcon, ChevronRightIcon } from '../../icon';
|
|
26
|
+
import { StackLayout } from '../../stack-layout';
|
|
27
|
+
import { styled } from '../../styled';
|
|
28
|
+
import { useMergedClasses } from '../../styles/classes';
|
|
29
|
+
import clsx from '../../utils/clsx';
|
|
30
|
+
import { getCheckpointPaginationUtilityClass, checkpointPaginationClasses, checkpointPaginationComponentName, } from './checkpoint-pagination-classes';
|
|
31
|
+
var Root = styled('div', { name: checkpointPaginationComponentName, slot: 'Root' })(function () { return ({
|
|
32
|
+
display: 'flex',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
justifyContent: 'flex-end',
|
|
35
|
+
}); });
|
|
36
|
+
export var CheckpointPagination = React.forwardRef(function (props, ref) {
|
|
37
|
+
var children = props.children, className = props.className, cursor = props.cursor, hasMore = props.hasMore, hasPrevious = props.hasPrevious, onNext = props.onNext, onPrevious = props.onPrevious, propClasses = props.classes, _a = props.nextButtonLabel, nextButtonLabel = _a === void 0 ? 'Next Page' : _a, _b = props.previousButtonLabel, previousButtonLabel = _b === void 0 ? 'Previous Page' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, rootProps = __rest(props, ["children", "className", "cursor", "hasMore", "hasPrevious", "onNext", "onPrevious", "classes", "nextButtonLabel", "previousButtonLabel", "size"]);
|
|
38
|
+
var classes = useMergedClasses(checkpointPaginationClasses, getCheckpointPaginationUtilityClass, propClasses);
|
|
39
|
+
var isPreviousDisabled = !hasPrevious;
|
|
40
|
+
var isNextDisabled = !hasMore;
|
|
41
|
+
var handleNext = function () {
|
|
42
|
+
if (!isNextDisabled && cursor) {
|
|
43
|
+
onNext(cursor);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
var handlePrevious = function () {
|
|
47
|
+
if (!isPreviousDisabled && onPrevious && cursor) {
|
|
48
|
+
onPrevious(cursor);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
return (React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className) }, rootProps),
|
|
52
|
+
React.createElement(StackLayout, { gutter: 1 },
|
|
53
|
+
React.createElement(IconButton, { variant: "outlined", size: size, className: classes.previousButton, onClick: handlePrevious, disabled: isPreviousDisabled, label: previousButtonLabel },
|
|
54
|
+
React.createElement(ChevronLeftIcon, null)),
|
|
55
|
+
React.createElement(IconButton, { variant: "outlined", size: size, className: classes.nextButton, onClick: handleNext, disabled: isNextDisabled, label: nextButtonLabel },
|
|
56
|
+
React.createElement(ChevronRightIcon, null)))));
|
|
57
|
+
});
|
|
58
|
+
CheckpointPagination.displayName = 'CheckpointPagination';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
|
|
2
|
+
export var checkpointPaginationComponentName = 'QuantumCheckpointPagination';
|
|
3
|
+
export function getCheckpointPaginationUtilityClass(slot) {
|
|
4
|
+
return generateUtilityClass(checkpointPaginationComponentName, slot);
|
|
5
|
+
}
|
|
6
|
+
export var checkpointPaginationClasses = generateUtilityClasses(checkpointPaginationComponentName, [
|
|
7
|
+
'root',
|
|
8
|
+
'previousButton',
|
|
9
|
+
'nextButton',
|
|
10
|
+
]);
|
package/esm/pagination/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export * from './pager';
|
|
2
2
|
export { Pagination } from './pagination';
|
|
3
3
|
export { paginationClasses } from './pagination-classes';
|
|
4
|
+
export { CheckpointPagination } from './checkpoint-pagination/CheckpointPagination';
|
|
5
|
+
export { checkpointPaginationClasses } from './checkpoint-pagination/checkpoint-pagination-classes';
|
package/package.json
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IStyledComponentProps } from '../../styled';
|
|
3
|
+
import { CheckpointPaginationClasses } from './checkpoint-pagination-classes';
|
|
4
|
+
export type ICheckpointPaginationProps = IStyledComponentProps<{
|
|
5
|
+
props: {
|
|
6
|
+
cursor: string | null;
|
|
7
|
+
hasMore: boolean;
|
|
8
|
+
hasPrevious: boolean;
|
|
9
|
+
onNext: (newCursor: string) => void;
|
|
10
|
+
onPrevious?: (previousCursor: string) => void;
|
|
11
|
+
classes?: Partial<CheckpointPaginationClasses>;
|
|
12
|
+
nextButtonLabel?: string;
|
|
13
|
+
previousButtonLabel?: string;
|
|
14
|
+
size?: 'small' | 'medium' | 'large';
|
|
15
|
+
};
|
|
16
|
+
defaultComponent: 'div';
|
|
17
|
+
}>;
|
|
18
|
+
export declare const CheckpointPagination: React.ForwardRefExoticComponent<{
|
|
19
|
+
cursor: string | null;
|
|
20
|
+
hasMore: boolean;
|
|
21
|
+
hasPrevious: boolean;
|
|
22
|
+
onNext: (newCursor: string) => void;
|
|
23
|
+
onPrevious?: ((previousCursor: string) => void) | undefined;
|
|
24
|
+
classes?: Partial<Record<"root" | "previousButton" | "nextButton", string>> | undefined;
|
|
25
|
+
nextButtonLabel?: string | undefined;
|
|
26
|
+
previousButtonLabel?: string | undefined;
|
|
27
|
+
size?: "small" | "medium" | "large" | undefined;
|
|
28
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "size" | "cursor" | "classes" | "previousButtonLabel" | "nextButtonLabel" | "hasMore" | "hasPrevious" | "onNext" | "onPrevious"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
+
var t = {};
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
+
t[p] = s[p];
|
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
+
t[p[i]] = s[p[i]];
|
|
44
|
+
}
|
|
45
|
+
return t;
|
|
46
|
+
};
|
|
47
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
48
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
49
|
+
};
|
|
50
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
|
+
exports.CheckpointPagination = void 0;
|
|
52
|
+
var React = __importStar(require("react"));
|
|
53
|
+
var icon_button_1 = require("../../icon-button");
|
|
54
|
+
var icon_1 = require("../../icon");
|
|
55
|
+
var stack_layout_1 = require("../../stack-layout");
|
|
56
|
+
var styled_1 = require("../../styled");
|
|
57
|
+
var classes_1 = require("../../styles/classes");
|
|
58
|
+
var clsx_1 = __importDefault(require("../../utils/clsx"));
|
|
59
|
+
var checkpoint_pagination_classes_1 = require("./checkpoint-pagination-classes");
|
|
60
|
+
var Root = (0, styled_1.styled)('div', { name: checkpoint_pagination_classes_1.checkpointPaginationComponentName, slot: 'Root' })(function () { return ({
|
|
61
|
+
display: 'flex',
|
|
62
|
+
alignItems: 'center',
|
|
63
|
+
justifyContent: 'flex-end',
|
|
64
|
+
}); });
|
|
65
|
+
exports.CheckpointPagination = React.forwardRef(function (props, ref) {
|
|
66
|
+
var children = props.children, className = props.className, cursor = props.cursor, hasMore = props.hasMore, hasPrevious = props.hasPrevious, onNext = props.onNext, onPrevious = props.onPrevious, propClasses = props.classes, _a = props.nextButtonLabel, nextButtonLabel = _a === void 0 ? 'Next Page' : _a, _b = props.previousButtonLabel, previousButtonLabel = _b === void 0 ? 'Previous Page' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, rootProps = __rest(props, ["children", "className", "cursor", "hasMore", "hasPrevious", "onNext", "onPrevious", "classes", "nextButtonLabel", "previousButtonLabel", "size"]);
|
|
67
|
+
var classes = (0, classes_1.useMergedClasses)(checkpoint_pagination_classes_1.checkpointPaginationClasses, checkpoint_pagination_classes_1.getCheckpointPaginationUtilityClass, propClasses);
|
|
68
|
+
var isPreviousDisabled = !hasPrevious;
|
|
69
|
+
var isNextDisabled = !hasMore;
|
|
70
|
+
var handleNext = function () {
|
|
71
|
+
if (!isNextDisabled && cursor) {
|
|
72
|
+
onNext(cursor);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
var handlePrevious = function () {
|
|
76
|
+
if (!isPreviousDisabled && onPrevious && cursor) {
|
|
77
|
+
onPrevious(cursor);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
|
|
81
|
+
React.createElement(stack_layout_1.StackLayout, { gutter: 1 },
|
|
82
|
+
React.createElement(icon_button_1.IconButton, { variant: "outlined", size: size, className: classes.previousButton, onClick: handlePrevious, disabled: isPreviousDisabled, label: previousButtonLabel },
|
|
83
|
+
React.createElement(icon_1.ChevronLeftIcon, null)),
|
|
84
|
+
React.createElement(icon_button_1.IconButton, { variant: "outlined", size: size, className: classes.nextButton, onClick: handleNext, disabled: isNextDisabled, label: nextButtonLabel },
|
|
85
|
+
React.createElement(icon_1.ChevronRightIcon, null)))));
|
|
86
|
+
});
|
|
87
|
+
exports.CheckpointPagination.displayName = 'CheckpointPagination';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const checkpointPaginationComponentName: "QuantumCheckpointPagination";
|
|
2
|
+
export declare function getCheckpointPaginationUtilityClass(slot: string): string;
|
|
3
|
+
export declare const checkpointPaginationClasses: Record<"root" | "previousButton" | "nextButton", string>;
|
|
4
|
+
export type CheckpointPaginationClasses = typeof checkpointPaginationClasses;
|
|
5
|
+
export type CheckpointPaginationClassKey = keyof CheckpointPaginationClasses;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.checkpointPaginationClasses = exports.getCheckpointPaginationUtilityClass = exports.checkpointPaginationComponentName = void 0;
|
|
4
|
+
var classes_1 = require("../../styles/classes");
|
|
5
|
+
exports.checkpointPaginationComponentName = 'QuantumCheckpointPagination';
|
|
6
|
+
function getCheckpointPaginationUtilityClass(slot) {
|
|
7
|
+
return (0, classes_1.generateUtilityClass)(exports.checkpointPaginationComponentName, slot);
|
|
8
|
+
}
|
|
9
|
+
exports.getCheckpointPaginationUtilityClass = getCheckpointPaginationUtilityClass;
|
|
10
|
+
exports.checkpointPaginationClasses = (0, classes_1.generateUtilityClasses)(exports.checkpointPaginationComponentName, [
|
|
11
|
+
'root',
|
|
12
|
+
'previousButton',
|
|
13
|
+
'nextButton',
|
|
14
|
+
]);
|
package/pagination/index.d.ts
CHANGED
|
@@ -2,3 +2,6 @@ export * from './pager';
|
|
|
2
2
|
export { Pagination } from './pagination';
|
|
3
3
|
export type { IPaginationProps } from './pagination';
|
|
4
4
|
export { paginationClasses } from './pagination-classes';
|
|
5
|
+
export { CheckpointPagination } from './checkpoint-pagination/CheckpointPagination';
|
|
6
|
+
export type { ICheckpointPaginationProps } from './checkpoint-pagination/CheckpointPagination';
|
|
7
|
+
export { checkpointPaginationClasses } from './checkpoint-pagination/checkpoint-pagination-classes';
|
package/pagination/index.js
CHANGED
|
@@ -14,9 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.paginationClasses = exports.Pagination = void 0;
|
|
17
|
+
exports.checkpointPaginationClasses = exports.CheckpointPagination = exports.paginationClasses = exports.Pagination = void 0;
|
|
18
18
|
__exportStar(require("./pager"), exports);
|
|
19
19
|
var pagination_1 = require("./pagination");
|
|
20
20
|
Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return pagination_1.Pagination; } });
|
|
21
21
|
var pagination_classes_1 = require("./pagination-classes");
|
|
22
22
|
Object.defineProperty(exports, "paginationClasses", { enumerable: true, get: function () { return pagination_classes_1.paginationClasses; } });
|
|
23
|
+
var CheckpointPagination_1 = require("./checkpoint-pagination/CheckpointPagination");
|
|
24
|
+
Object.defineProperty(exports, "CheckpointPagination", { enumerable: true, get: function () { return CheckpointPagination_1.CheckpointPagination; } });
|
|
25
|
+
var checkpoint_pagination_classes_1 = require("./checkpoint-pagination/checkpoint-pagination-classes");
|
|
26
|
+
Object.defineProperty(exports, "checkpointPaginationClasses", { enumerable: true, get: function () { return checkpoint_pagination_classes_1.checkpointPaginationClasses; } });
|