@auth0/quantum-product 2.9.5 → 2.10.0

package/floating-bar/floating-bar-description.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../styled';
+export declare const floatingBarDescriptionComponentName = "QuantumFloatingBarDescription";
+export type IFloatingBarDescriptionProps = IStyledComponentProps<{
+    props: {
+        children?: React.ReactNode;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const FloatingBarDescription: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "children"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/floating-bar/floating-bar-description.js

@@ -0,0 +1,60 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingBarDescription = exports.floatingBarDescriptionComponentName = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+exports.floatingBarDescriptionComponentName = 'QuantumFloatingBarDescription';
+var Root = (0, styled_1.styled)('div', {
+    name: exports.floatingBarDescriptionComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, theme.typography.body2), { color: theme.tokens.color_fg_default, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, minWidth: 0, padding: theme.spacing(0, 0.5) }));
+});
+exports.FloatingBarDescription = React.forwardRef(function FloatingBarDescription(props, ref) {
+    return React.createElement(Root, __assign({ ref: ref }, props));
+});

package/floating-bar/floating-bar-icon.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../styled';
+export declare const floatingBarIconComponentName = "QuantumFloatingBarIcon";
+export type IFloatingBarIconProps = IStyledComponentProps<{
+    props: {
+        children?: React.ReactNode;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const FloatingBarIcon: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "children"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/floating-bar/floating-bar-icon.js

@@ -0,0 +1,68 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingBarIcon = exports.floatingBarIconComponentName = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+exports.floatingBarIconComponentName = 'QuantumFloatingBarIcon';
+var Root = (0, styled_1.styled)('div', {
+    name: exports.floatingBarIconComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: theme.palette.text.secondary,
+        flexShrink: 0,
+        height: 24,
+        width: 24,
+    });
+});
+exports.FloatingBarIcon = React.forwardRef(function FloatingBarIcon(props, ref) {
+    return React.createElement(Root, __assign({ ref: ref }, props));
+});

package/floating-bar/floating-bar-scroll.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../styled';
+export declare const floatingBarScrollComponentName = "QuantumFloatingBarScroll";
+export interface IFloatingBarScrollOwnerState {
+    variant?: 'default' | 'compact' | 'dots';
+}
+export type IFloatingBarScrollProps = IStyledComponentProps<{
+    props: IFloatingBarScrollOwnerState;
+    defaultComponent: 'div';
+}>;
+export declare const FloatingBarScroll: React.ForwardRefExoticComponent<IFloatingBarScrollOwnerState & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "variant"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/floating-bar/floating-bar-scroll.js

@@ -0,0 +1,104 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.FloatingBarScroll = exports.floatingBarScrollComponentName = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var floating_bar_context_1 = require("./floating-bar-context");
+exports.floatingBarScrollComponentName = 'QuantumFloatingBarScroll';
+var Root = (0, styled_1.styled)('div', {
+    name: exports.floatingBarScrollComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var ownerState = _a.ownerState;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        width: ownerState.variant === 'compact' ? 16 : 20,
+        height: ownerState.variant === 'compact' ? 16 : 20,
+    });
+});
+exports.FloatingBarScroll = React.forwardRef(function FloatingBarScroll(inProps, ref) {
+    var scrollProgress = (0, floating_bar_context_1.useFloatingBarScrollProgress)();
+    var _a = inProps.variant, variant = _a === void 0 ? 'default' : _a, other = __rest(inProps, ["variant"]);
+    var ownerState = {
+        variant: variant,
+    };
+    var size = variant === 'compact' ? 16 : 20;
+    var strokeWidth = 2;
+    var radius = (size - strokeWidth) / 2;
+    var circumference = 2 * Math.PI * radius;
+    var progressOffset = circumference - (scrollProgress / 100) * circumference;
+    var dottedStrokeDasharray = '0 3.75';
+    var ringDasharray = variant === 'dots' ? dottedStrokeDasharray : "".concat(circumference);
+    var circleProps = {
+        cx: size / 2,
+        cy: size / 2,
+        r: radius,
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: strokeWidth,
+    };
+    return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState }, other),
+        React.createElement("svg", { width: size, height: size, style: { transform: 'rotate(-90deg)' } },
+            React.createElement("circle", __assign({}, circleProps, { opacity: 0.2, strokeDasharray: ringDasharray, strokeLinecap: "round" })),
+            React.createElement("circle", __assign({}, circleProps, { strokeDasharray: circumference, strokeDashoffset: progressOffset, strokeLinecap: "round", style: {
+                    transition: 'stroke-dashoffset 150ms ease-out',
+                } })))));
+});

package/floating-bar/floating-bar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../styled';
+export declare const floatingBarComponentName = "QuantumFloatingBar";
+export interface IFloatingBarOwnerState {
+    trackScroll?: boolean;
+    containerRef?: React.RefObject<HTMLElement>;
+    open?: boolean;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'small' | 'medium' | 'large';
+    exiting?: boolean;
+}
+export type IFloatingBarProps = IStyledComponentProps<{
+    props: IFloatingBarOwnerState;
+    defaultComponent: 'div';
+}>;
+export declare const FloatingBar: React.ForwardRefExoticComponent<IFloatingBarOwnerState & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | keyof IFloatingBarOwnerState> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/floating-bar/floating-bar.js

@@ -0,0 +1,242 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingBar = exports.floatingBarComponentName = void 0;
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var styled_1 = require("../styled");
+var floating_bar_context_1 = require("./floating-bar-context");
+exports.floatingBarComponentName = 'QuantumFloatingBar';
+var sizeMap = {
+    small: 256,
+    medium: 384,
+    large: 512,
+};
+var ENTER_TRANSITION_DURATION_MS = 300;
+var EXIT_TRANSITION_DURATION_MS = 150;
+var EASING = 'cubic-bezier(0.19, 1, 0.22, 1)';
+var TRANSFORM_SCALE = 0.95;
+var TRANSFORM_DISTANCE_PX = 20;
+var SCROLL_PROGRESS_STEP = 0.5;
+var quantizeScrollProgress = function (progress) {
+    var clampedProgress = Math.min(100, Math.max(0, progress));
+    var snapThreshold = SCROLL_PROGRESS_STEP / 2;
+    if (clampedProgress <= snapThreshold) {
+        return 0;
+    }
+    if (clampedProgress >= 100 - snapThreshold) {
+        return 100;
+    }
+    var quantizedProgress = Math.round(clampedProgress / SCROLL_PROGRESS_STEP) * SCROLL_PROGRESS_STEP;
+    return Number(quantizedProgress.toFixed(2));
+};
+var resolveSide = function (orientation, side) {
+    if (orientation === 'vertical') {
+        return side === 'left' || side === 'right' ? side : 'right';
+    }
+    return side === 'top' || side === 'bottom' ? side : 'bottom';
+};
+var getTransforms = function (orientation, resolvedSide) {
+    if (orientation === 'vertical') {
+        return {
+            restingTransform: 'translateY(-50%) scale(1)',
+            exitingTransform: resolvedSide === 'left'
+                ? "translateY(-50%) translateX(-".concat(TRANSFORM_DISTANCE_PX, "px) scale(").concat(TRANSFORM_SCALE, ")")
+                : "translateY(-50%) translateX(".concat(TRANSFORM_DISTANCE_PX, "px) scale(").concat(TRANSFORM_SCALE, ")"),
+        };
+    }
+    return {
+        restingTransform: 'translateX(-50%) scale(1)',
+        exitingTransform: resolvedSide === 'top'
+            ? "translateX(-50%) translateY(-".concat(TRANSFORM_DISTANCE_PX, "px) scale(").concat(TRANSFORM_SCALE, ")")
+            : "translateX(-50%) translateY(".concat(TRANSFORM_DISTANCE_PX, "px) scale(").concat(TRANSFORM_SCALE, ")"),
+    };
+};
+var Root = (0, styled_1.styled)('div', {
+    name: exports.floatingBarComponentName,
+    slot: 'Root',
+    shouldForwardProp: function (prop) { return (0, styled_1.rootShouldForwardProp)(prop) && prop !== 'ownerState'; },
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var orientation = ownerState.orientation || 'horizontal';
+    var resolvedSide = resolveSide(orientation, ownerState.side);
+    var size = ownerState.size || 'medium';
+    var _c = getTransforms(orientation, resolvedSide), restingTransform = _c.restingTransform, exitingTransform = _c.exitingTransform;
+    var isTransitioning = !!ownerState.exiting || !!ownerState.entering;
+    return __assign(__assign({ position: 'fixed' }, (orientation === 'vertical' ? { top: '50%' } : { left: '50%' })), (_b = {}, _b[resolvedSide] = theme.spacing(3), _b.transform = isTransitioning ? exitingTransform : restingTransform, _b.opacity = isTransitioning ? 0 : 1, _b.transition = ownerState.exiting
+        ? "opacity ".concat(EXIT_TRANSITION_DURATION_MS, "ms ").concat(EASING, ", transform ").concat(EXIT_TRANSITION_DURATION_MS, "ms ").concat(EASING)
+        : "opacity ".concat(ENTER_TRANSITION_DURATION_MS, "ms ").concat(EASING, ", transform ").concat(ENTER_TRANSITION_DURATION_MS, "ms ").concat(EASING), _b.zIndex = theme.zIndex.fab, _b.display = 'flex', _b.flexDirection = orientation === 'vertical' ? 'column' : 'row', _b.alignItems = orientation === 'vertical' ? 'stretch' : 'center', _b.gap = orientation === 'vertical' ? theme.spacing(0.75) : theme.spacing(1), _b.padding = theme.spacing(1.125), _b.minWidth = sizeMap[size], _b.maxWidth = "min(".concat(sizeMap[size], "px, calc(100vw - ").concat(theme.spacing(4), "))"), _b.boxSizing = 'border-box', _b.backgroundColor = theme.palette.background.paper, _b.border = "1px solid ".concat(theme.tokens.color_border_default), _b.borderRadius = theme.spacing(1.25), _b.overflow = 'hidden', _b.boxShadow = theme.shadows[16], _b));
+});
+exports.FloatingBar = React.forwardRef(function FloatingBar(inProps, ref) {
+    var _a = inProps.trackScroll, trackScroll = _a === void 0 ? false : _a, containerRef = inProps.containerRef, _b = inProps.open, open = _b === void 0 ? true : _b, side = inProps.side, _c = inProps.orientation, orientation = _c === void 0 ? 'horizontal' : _c, _d = inProps.size, size = _d === void 0 ? 'medium' : _d, children = inProps.children, onTransitionEnd = inProps.onTransitionEnd, other = __rest(inProps, ["trackScroll", "containerRef", "open", "side", "orientation", "size", "children", "onTransitionEnd"]);
+    var _e = __read((0, react_1.useState)(0), 2), scrollProgress = _e[0], setScrollProgress = _e[1];
+    var _f = __read((0, react_1.useState)(open), 2), isMounted = _f[0], setIsMounted = _f[1];
+    var _g = __read((0, react_1.useState)(false), 2), isExiting = _g[0], setIsExiting = _g[1];
+    var _h = __read((0, react_1.useState)(open), 2), isEntering = _h[0], setIsEntering = _h[1];
+    var scrollFrameIdRef = (0, react_1.useRef)(null);
+    var lastScrollProgressRef = (0, react_1.useRef)(0);
+    var containerElement = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+    (0, react_1.useEffect)(function () {
+        if (open) {
+            setIsMounted(true);
+            setIsExiting(false);
+            setIsEntering(true);
+            return;
+        }
+        if (!isMounted) {
+            return;
+        }
+        setIsEntering(false);
+        setIsExiting(true);
+    }, [open, isMounted]);
+    (0, react_1.useEffect)(function () {
+        if (!(isMounted && isEntering && !isExiting)) {
+            return;
+        }
+        var frameId = window.requestAnimationFrame(function () {
+            setIsEntering(false);
+        });
+        return function () {
+            window.cancelAnimationFrame(frameId);
+        };
+    }, [isMounted, isEntering, isExiting]);
+    (0, react_1.useEffect)(function () {
+        if (!(trackScroll && open))
+            return;
+        var target = containerElement || window;
+        var updateScrollProgress = function () {
+            scrollFrameIdRef.current = null;
+            var scrollTop;
+            var scrollHeight;
+            if (target === window) {
+                scrollTop = window.scrollY;
+                scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+            }
+            else if (target instanceof HTMLElement) {
+                scrollTop = target.scrollTop;
+                scrollHeight = target.scrollHeight - target.clientHeight;
+            }
+            else {
+                return;
+            }
+            var progress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
+            var quantizedProgress = quantizeScrollProgress(progress);
+            if (quantizedProgress === lastScrollProgressRef.current) {
+                return;
+            }
+            lastScrollProgressRef.current = quantizedProgress;
+            setScrollProgress(quantizedProgress);
+        };
+        var handleScroll = function () {
+            if (scrollFrameIdRef.current !== null) {
+                return;
+            }
+            scrollFrameIdRef.current = window.requestAnimationFrame(updateScrollProgress);
+        };
+        target.addEventListener('scroll', handleScroll, { passive: true });
+        handleScroll();
+        return function () {
+            target.removeEventListener('scroll', handleScroll);
+            if (scrollFrameIdRef.current !== null) {
+                window.cancelAnimationFrame(scrollFrameIdRef.current);
+                scrollFrameIdRef.current = null;
+            }
+        };
+    }, [trackScroll, open, containerElement]);
+    if (!isMounted) {
+        return null;
+    }
+    var handleTransitionEnd = function (event) {
+        onTransitionEnd === null || onTransitionEnd === void 0 ? void 0 : onTransitionEnd(event);
+        if (!isExiting) {
+            return;
+        }
+        if (event.target !== event.currentTarget || event.propertyName !== 'opacity') {
+            return;
+        }
+        setIsMounted(false);
+        setIsExiting(false);
+        setIsEntering(false);
+    };
+    var ownerState = {
+        side: side,
+        orientation: orientation,
+        size: size,
+        exiting: isExiting,
+        entering: isEntering,
+    };
+    return (React.createElement(floating_bar_context_1.FloatingBarOrientationContext.Provider, { value: orientation },
+        React.createElement(floating_bar_context_1.FloatingBarScrollProgressContext.Provider, { value: scrollProgress },
+            React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, onTransitionEnd: handleTransitionEnd }, other), children))));
+});

package/floating-bar/index.d.ts

@@ -0,0 +1,12 @@
+export { FloatingBar } from './floating-bar';
+export type { IFloatingBarOwnerState, IFloatingBarProps } from './floating-bar';
+export { FloatingBarScroll } from './floating-bar-scroll';
+export type { IFloatingBarScrollOwnerState, IFloatingBarScrollProps } from './floating-bar-scroll';
+export { FloatingBarIcon } from './floating-bar-icon';
+export type { IFloatingBarIconProps } from './floating-bar-icon';
+export { FloatingBarDescription } from './floating-bar-description';
+export type { IFloatingBarDescriptionProps } from './floating-bar-description';
+export { FloatingBarActions } from './floating-bar-actions';
+export type { IFloatingBarActionsProps } from './floating-bar-actions';
+export { useFloatingBarContext, useFloatingBarOrientation, useFloatingBarScrollProgress } from './floating-bar-context';
+export type { IFloatingBarContextValue } from './floating-bar-context';

package/floating-bar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFloatingBarScrollProgress = exports.useFloatingBarOrientation = exports.useFloatingBarContext = exports.FloatingBarActions = exports.FloatingBarDescription = exports.FloatingBarIcon = exports.FloatingBarScroll = exports.FloatingBar = void 0;
+var floating_bar_1 = require("./floating-bar");
+Object.defineProperty(exports, "FloatingBar", { enumerable: true, get: function () { return floating_bar_1.FloatingBar; } });
+var floating_bar_scroll_1 = require("./floating-bar-scroll");
+Object.defineProperty(exports, "FloatingBarScroll", { enumerable: true, get: function () { return floating_bar_scroll_1.FloatingBarScroll; } });
+var floating_bar_icon_1 = require("./floating-bar-icon");
+Object.defineProperty(exports, "FloatingBarIcon", { enumerable: true, get: function () { return floating_bar_icon_1.FloatingBarIcon; } });
+var floating_bar_description_1 = require("./floating-bar-description");
+Object.defineProperty(exports, "FloatingBarDescription", { enumerable: true, get: function () { return floating_bar_description_1.FloatingBarDescription; } });
+var floating_bar_actions_1 = require("./floating-bar-actions");
+Object.defineProperty(exports, "FloatingBarActions", { enumerable: true, get: function () { return floating_bar_actions_1.FloatingBarActions; } });
+var floating_bar_context_1 = require("./floating-bar-context");
+Object.defineProperty(exports, "useFloatingBarContext", { enumerable: true, get: function () { return floating_bar_context_1.useFloatingBarContext; } });
+Object.defineProperty(exports, "useFloatingBarOrientation", { enumerable: true, get: function () { return floating_bar_context_1.useFloatingBarOrientation; } });
+Object.defineProperty(exports, "useFloatingBarScrollProgress", { enumerable: true, get: function () { return floating_bar_context_1.useFloatingBarScrollProgress; } });

package/index.d.ts

@@ -34,6 +34,7 @@ export * from './dropdown-menu';
 export * from './empty-state';
 export * from './expansion-panel';
 export * from './field-set';
+export * from './floating-bar';
 export * from './form';
 export * from './gallery-layout';
 export * from './icon';

package/index.js

@@ -50,6 +50,7 @@ __exportStar(require("./dropdown-menu"), exports);
 __exportStar(require("./empty-state"), exports);
 __exportStar(require("./expansion-panel"), exports);
 __exportStar(require("./field-set"), exports);
+__exportStar(require("./floating-bar"), exports);
 __exportStar(require("./form"), exports);
 __exportStar(require("./gallery-layout"), exports);
 __exportStar(require("./icon"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.9.5",
+  "version": "2.10.0",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -25,7 +25,7 @@
     "react-dom": "*"
   },
   "scripts": {
-    "artifactory": "cd ./build && npm publish",
+    "artifactory": "cd ./build && npm publish --access public",
     "build-storybook": "storybook build",
     "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy:files",
     "build:cjs": "node --max-old-space-size=8192 ../../node_modules/.bin/tsc --project ./tsconfig.publish.json",

package/panel/panel/panel.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { IStyledComponentProps } from '../../styled';
-import { PanelClasses } from './panel-classes';
 import { IIconButtonProps } from '../../icon-button';
+import { IStyledComponentProps } from '../../styled';
 import { IPanelContextValue } from '../panel-context';
 import { IPanelHeaderProps } from '../panel-header';
+import { PanelClasses } from './panel-classes';
 export type IPanelOwnerState = Pick<IPanelContextValue, 'size' | 'variant' | 'placement' | 'isOpen' | 'isFixed'> & {
     /** Sets top offset for panel. Defaults to appbar for fixed panels. All others default to 0. */
     offsetTop?: 'appbar' | number;
+    /** Active width of panel. Defaults to width from size. */
+    width?: number;
 };
 export type IPanelProps = IStyledComponentProps<{
     props: Partial<IPanelOwnerState> & {
@@ -18,6 +20,14 @@ export type IPanelProps = IStyledComponentProps<{
         onClose?(event: React.MouseEvent<HTMLButtonElement>, reason: 'closeButtonClick'): void;
         /** convenience prop for rendering the label for close button with a Panel component */
         closeButtonLabel?: string;
+        /** Allows resizing the panel width. */
+        resizable?: boolean;
+        /** Sets the maximum width of the panel when resizing. */
+        maxWidth?: number;
+        /** Sets the minimum width of the panel when resizing. */
+        minWidth?: number;
+        /** Show explicit drag handle */
+        showDragHandle?: boolean;
         classes?: Partial<PanelClasses>;
         closeIconButtonProps?: Partial<IIconButtonProps>;
         PanelHeaderProps?: Partial<IPanelHeaderProps>;
@@ -33,7 +43,15 @@ export declare const Panel: React.ForwardRefExoticComponent<Partial<IPanelOwnerS
     onClose?(event: React.MouseEvent<HTMLButtonElement>, reason: "closeButtonClick"): void;
     /** convenience prop for rendering the label for close button with a Panel component */
     closeButtonLabel?: string;
+    /** Allows resizing the panel width. */
+    resizable?: boolean;
+    /** Sets the maximum width of the panel when resizing. */
+    maxWidth?: number;
+    /** Sets the minimum width of the panel when resizing. */
+    minWidth?: number;
+    /** Show explicit drag handle */
+    showDragHandle?: boolean;
     classes?: Partial<PanelClasses>;
     closeIconButtonProps?: Partial<IIconButtonProps>;
     PanelHeaderProps?: Partial<IPanelHeaderProps>;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "children" | "onClose" | "classes" | "variant" | "placement" | "closeButtonLabel" | "isOpen" | "isFixed" | "offsetTop" | "closeIconButtonProps" | "PanelHeaderProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "maxWidth" | "minWidth" | "width" | "children" | "onClose" | "classes" | "variant" | "placement" | "closeButtonLabel" | "resizable" | "isOpen" | "isFixed" | "offsetTop" | "showDragHandle" | "closeIconButtonProps" | "PanelHeaderProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;