@auth0/quantum-product 2.7.0 → 2.7.2

package/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.d.ts

@@ -14,5 +14,6 @@ export interface IDropdownMenuListItemProps extends Omit<IMenuItemProps, 'title'
     target?: string;
     rel?: string;
     classes?: Partial<DropdownMenuListItemClasses>;
+    analyticsId?: string;
 }
 export declare const DropdownMenuListItem: React.ForwardRefExoticComponent<Omit<IDropdownMenuListItemProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.js

@@ -159,7 +159,7 @@ var SelectedIcon = (0, styled_1.styled)('div', { name: dropdown_menu_list_item_c
     });
 });
 exports.DropdownMenuListItem = React.forwardRef(function (props, ref) {
-    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes"]);
+    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes", "analyticsId"]);
     var classes = (0, classes_1.useMergedClasses)(dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses, dropdown_menu_list_item_classes_1.getDropdownMenuListItemUtilityClass, propClasses);
     var _b = (0, dropdown_menu_context_1.useDropdownMenuContext)(), size = _b.size, onSelectItem = _b.onSelectItem;
     var isDetailed = !!description;
@@ -192,7 +192,7 @@ exports.DropdownMenuListItem = React.forwardRef(function (props, ref) {
         color: color,
         disabled: disabled,
     };
-    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: (0, clsx_1.default)(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps),
+    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: (0, clsx_1.default)(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps, (analyticsId && { 'data-analytics-id': analyticsId })),
         !!startIcon && React.createElement(StartIcon, { className: (0, clsx_1.default)(classes.icon, classes.startIcon) }, startIcon),
         React.createElement(Content, { className: classes.content },
             React.createElement(Title, { ownerState: { isDetailed: isDetailed }, className: classes.title }, titleContent),

package/esm/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.js

@@ -130,7 +130,7 @@ var SelectedIcon = styled('div', { name: dropdownMenuListItemComponentName, slot
     });
 });
 export var DropdownMenuListItem = React.forwardRef(function (props, ref) {
-    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes"]);
+    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes", "analyticsId"]);
     var classes = useMergedClasses(dropdownMenuListItemClasses, getDropdownMenuListItemUtilityClass, propClasses);
     var _b = useDropdownMenuContext(), size = _b.size, onSelectItem = _b.onSelectItem;
     var isDetailed = !!description;
@@ -163,7 +163,7 @@ export var DropdownMenuListItem = React.forwardRef(function (props, ref) {
         color: color,
         disabled: disabled,
     };
-    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: clsx(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps),
+    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: clsx(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps, (analyticsId && { 'data-analytics-id': analyticsId })),
         !!startIcon && React.createElement(StartIcon, { className: clsx(classes.icon, classes.startIcon) }, startIcon),
         React.createElement(Content, { className: classes.content },
             React.createElement(Title, { ownerState: { isDetailed: isDetailed }, className: classes.title }, titleContent),

package/esm/pagination/checkpoint-pagination/CheckpointPagination.js

@@ -0,0 +1,58 @@
+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 { ChevronLeftIcon, ChevronRightIcon } from '../../icon';
+import { StackLayout } from '../../stack-layout';
+import { styled } from '../../styled';
+import { useMergedClasses } from '../../styles/classes';
+import clsx from '../../utils/clsx';
+import { getCheckpointPaginationUtilityClass, checkpointPaginationClasses, checkpointPaginationComponentName, } from './checkpoint-pagination-classes';
+var Root = styled('div', { name: checkpointPaginationComponentName, slot: 'Root' })(function () { return ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+}); });
+export var CheckpointPagination = React.forwardRef(function (props, ref) {
+    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"]);
+    var classes = useMergedClasses(checkpointPaginationClasses, getCheckpointPaginationUtilityClass, propClasses);
+    var isPreviousDisabled = !hasPrevious;
+    var isNextDisabled = !hasMore;
+    var handleNext = function () {
+        if (!isNextDisabled && cursor) {
+            onNext(cursor);
+        }
+    };
+    var handlePrevious = function () {
+        if (!isPreviousDisabled && onPrevious && cursor) {
+            onPrevious(cursor);
+        }
+    };
+    return (React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className) }, rootProps),
+        React.createElement(StackLayout, { gutter: 1 },
+            React.createElement(IconButton, { variant: "outlined", size: size, className: classes.previousButton, onClick: handlePrevious, disabled: isPreviousDisabled, label: previousButtonLabel },
+                React.createElement(ChevronLeftIcon, null)),
+            React.createElement(IconButton, { variant: "outlined", size: size, className: classes.nextButton, onClick: handleNext, disabled: isNextDisabled, label: nextButtonLabel },
+                React.createElement(ChevronRightIcon, null)))));
+});
+CheckpointPagination.displayName = 'CheckpointPagination';

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

@@ -0,0 +1,10 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var checkpointPaginationComponentName = 'QuantumCheckpointPagination';
+export function getCheckpointPaginationUtilityClass(slot) {
+    return generateUtilityClass(checkpointPaginationComponentName, slot);
+}
+export var checkpointPaginationClasses = generateUtilityClasses(checkpointPaginationComponentName, [
+    'root',
+    'previousButton',
+    'nextButton',
+]);

package/esm/pagination/index.js

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

package/package.json

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

package/pagination/checkpoint-pagination/CheckpointPagination.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../../styled';
+import { CheckpointPaginationClasses } from './checkpoint-pagination-classes';
+export type ICheckpointPaginationProps = IStyledComponentProps<{
+    props: {
+        cursor: string | null;
+        hasMore: boolean;
+        hasPrevious: boolean;
+        onNext: (newCursor: string) => void;
+        onPrevious?: (previousCursor: string) => void;
+        classes?: Partial<CheckpointPaginationClasses>;
+        nextButtonLabel?: string;
+        previousButtonLabel?: string;
+        size?: 'small' | 'medium' | 'large';
+    };
+    defaultComponent: 'div';
+}>;
+export declare const CheckpointPagination: React.ForwardRefExoticComponent<{
+    cursor: string | null;
+    hasMore: boolean;
+    hasPrevious: boolean;
+    onNext: (newCursor: string) => void;
+    onPrevious?: ((previousCursor: string) => void) | undefined;
+    classes?: Partial<Record<"root" | "previousButton" | "nextButton", string>> | undefined;
+    nextButtonLabel?: string | undefined;
+    previousButtonLabel?: string | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "size" | "cursor" | "classes" | "previousButtonLabel" | "nextButtonLabel" | "hasMore" | "hasPrevious" | "onNext" | "onPrevious"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/pagination/checkpoint-pagination/CheckpointPagination.js

@@ -0,0 +1,87 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckpointPagination = void 0;
+var React = __importStar(require("react"));
+var icon_button_1 = require("../../icon-button");
+var icon_1 = require("../../icon");
+var stack_layout_1 = require("../../stack-layout");
+var styled_1 = require("../../styled");
+var classes_1 = require("../../styles/classes");
+var clsx_1 = __importDefault(require("../../utils/clsx"));
+var checkpoint_pagination_classes_1 = require("./checkpoint-pagination-classes");
+var Root = (0, styled_1.styled)('div', { name: checkpoint_pagination_classes_1.checkpointPaginationComponentName, slot: 'Root' })(function () { return ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+}); });
+exports.CheckpointPagination = React.forwardRef(function (props, ref) {
+    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"]);
+    var classes = (0, classes_1.useMergedClasses)(checkpoint_pagination_classes_1.checkpointPaginationClasses, checkpoint_pagination_classes_1.getCheckpointPaginationUtilityClass, propClasses);
+    var isPreviousDisabled = !hasPrevious;
+    var isNextDisabled = !hasMore;
+    var handleNext = function () {
+        if (!isNextDisabled && cursor) {
+            onNext(cursor);
+        }
+    };
+    var handlePrevious = function () {
+        if (!isPreviousDisabled && onPrevious && cursor) {
+            onPrevious(cursor);
+        }
+    };
+    return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
+        React.createElement(stack_layout_1.StackLayout, { gutter: 1 },
+            React.createElement(icon_button_1.IconButton, { variant: "outlined", size: size, className: classes.previousButton, onClick: handlePrevious, disabled: isPreviousDisabled, label: previousButtonLabel },
+                React.createElement(icon_1.ChevronLeftIcon, null)),
+            React.createElement(icon_button_1.IconButton, { variant: "outlined", size: size, className: classes.nextButton, onClick: handleNext, disabled: isNextDisabled, label: nextButtonLabel },
+                React.createElement(icon_1.ChevronRightIcon, null)))));
+});
+exports.CheckpointPagination.displayName = 'CheckpointPagination';

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

@@ -0,0 +1,5 @@
+export declare const checkpointPaginationComponentName: "QuantumCheckpointPagination";
+export declare function getCheckpointPaginationUtilityClass(slot: string): string;
+export declare const checkpointPaginationClasses: Record<"root" | "previousButton" | "nextButton", string>;
+export type CheckpointPaginationClasses = typeof checkpointPaginationClasses;
+export type CheckpointPaginationClassKey = keyof CheckpointPaginationClasses;

package/pagination/checkpoint-pagination/checkpoint-pagination-classes.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkpointPaginationClasses = exports.getCheckpointPaginationUtilityClass = exports.checkpointPaginationComponentName = void 0;
+var classes_1 = require("../../styles/classes");
+exports.checkpointPaginationComponentName = 'QuantumCheckpointPagination';
+function getCheckpointPaginationUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.checkpointPaginationComponentName, slot);
+}
+exports.getCheckpointPaginationUtilityClass = getCheckpointPaginationUtilityClass;
+exports.checkpointPaginationClasses = (0, classes_1.generateUtilityClasses)(exports.checkpointPaginationComponentName, [
+    'root',
+    'previousButton',
+    'nextButton',
+]);

package/pagination/index.d.ts

@@ -2,3 +2,6 @@ export * from './pager';
 export { Pagination } from './pagination';
 export type { IPaginationProps } from './pagination';
 export { paginationClasses } from './pagination-classes';
+export { CheckpointPagination } from './checkpoint-pagination/CheckpointPagination';
+export type { ICheckpointPaginationProps } from './checkpoint-pagination/CheckpointPagination';
+export { checkpointPaginationClasses } from './checkpoint-pagination/checkpoint-pagination-classes';

package/pagination/index.js

@@ -14,9 +14,13 @@ 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;
+exports.checkpointPaginationClasses = exports.CheckpointPagination = 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");
 Object.defineProperty(exports, "paginationClasses", { enumerable: true, get: function () { return pagination_classes_1.paginationClasses; } });
+var CheckpointPagination_1 = require("./checkpoint-pagination/CheckpointPagination");
+Object.defineProperty(exports, "CheckpointPagination", { enumerable: true, get: function () { return CheckpointPagination_1.CheckpointPagination; } });
+var checkpoint_pagination_classes_1 = require("./checkpoint-pagination/checkpoint-pagination-classes");
+Object.defineProperty(exports, "checkpointPaginationClasses", { enumerable: true, get: function () { return checkpoint_pagination_classes_1.checkpointPaginationClasses; } });