@auth0/quantum-product 2.9.7 → 2.10.0

package/esm/floating-bar/floating-bar-actions.js

@@ -0,0 +1,34 @@
+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 { styled } from '../styled';
+import { useFloatingBarOrientation } from './floating-bar-context';
+export var floatingBarActionsComponentName = 'QuantumFloatingBarActions';
+var Root = styled('div', {
+    name: floatingBarActionsComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return ({
+        display: 'flex',
+        gap: theme.spacing(1),
+        alignItems: 'center',
+        justifyContent: ownerState.orientation === 'vertical' ? 'flex-end' : 'flex-start',
+        marginLeft: ownerState.orientation === 'horizontal' ? 'auto' : 0,
+        width: ownerState.orientation === 'vertical' ? '100%' : 'auto',
+        flexShrink: 0,
+    });
+});
+export var FloatingBarActions = React.forwardRef(function FloatingBarActions(props, ref) {
+    var orientation = useFloatingBarOrientation();
+    return React.createElement(Root, __assign({ ref: ref, ownerState: { orientation: orientation } }, props));
+});

package/esm/floating-bar/floating-bar-context.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export var FloatingBarOrientationContext = React.createContext('horizontal');
+export var FloatingBarScrollProgressContext = React.createContext(0);
+export var useFloatingBarOrientation = function () { return React.useContext(FloatingBarOrientationContext); };
+export var useFloatingBarScrollProgress = function () { return React.useContext(FloatingBarScrollProgressContext); };
+export var useFloatingBarContext = function () {
+    var orientation = useFloatingBarOrientation();
+    var scrollProgress = useFloatingBarScrollProgress();
+    return React.useMemo(function () { return ({
+        orientation: orientation,
+        scrollProgress: scrollProgress,
+    }); }, [orientation, scrollProgress]);
+};

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

@@ -0,0 +1,24 @@
+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 { styled } from '../styled';
+export var floatingBarDescriptionComponentName = 'QuantumFloatingBarDescription';
+var Root = styled('div', {
+    name: 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) }));
+});
+export var FloatingBarDescription = React.forwardRef(function FloatingBarDescription(props, ref) {
+    return React.createElement(Root, __assign({ ref: ref }, props));
+});

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

@@ -0,0 +1,32 @@
+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 { styled } from '../styled';
+export var floatingBarIconComponentName = 'QuantumFloatingBarIcon';
+var Root = styled('div', {
+    name: 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,
+    });
+});
+export var FloatingBarIcon = React.forwardRef(function FloatingBarIcon(props, ref) {
+    return React.createElement(Root, __assign({ ref: ref }, props));
+});

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

@@ -0,0 +1,68 @@
+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 { styled } from '../styled';
+import { useFloatingBarScrollProgress } from './floating-bar-context';
+export var floatingBarScrollComponentName = 'QuantumFloatingBarScroll';
+var Root = styled('div', {
+    name: 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,
+    });
+});
+export var FloatingBarScroll = React.forwardRef(function FloatingBarScroll(inProps, ref) {
+    var scrollProgress = 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/esm/floating-bar/floating-bar.js

@@ -0,0 +1,206 @@
+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;
+};
+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;
+};
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { rootShouldForwardProp, styled } from '../styled';
+import { FloatingBarOrientationContext, FloatingBarScrollProgressContext } from './floating-bar-context';
+export var 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 = styled('div', {
+    name: floatingBarComponentName,
+    slot: 'Root',
+    shouldForwardProp: function (prop) { return 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));
+});
+export var 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(useState(0), 2), scrollProgress = _e[0], setScrollProgress = _e[1];
+    var _f = __read(useState(open), 2), isMounted = _f[0], setIsMounted = _f[1];
+    var _g = __read(useState(false), 2), isExiting = _g[0], setIsExiting = _g[1];
+    var _h = __read(useState(open), 2), isEntering = _h[0], setIsEntering = _h[1];
+    var scrollFrameIdRef = useRef(null);
+    var lastScrollProgressRef = useRef(0);
+    var containerElement = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+    useEffect(function () {
+        if (open) {
+            setIsMounted(true);
+            setIsExiting(false);
+            setIsEntering(true);
+            return;
+        }
+        if (!isMounted) {
+            return;
+        }
+        setIsEntering(false);
+        setIsExiting(true);
+    }, [open, isMounted]);
+    useEffect(function () {
+        if (!(isMounted && isEntering && !isExiting)) {
+            return;
+        }
+        var frameId = window.requestAnimationFrame(function () {
+            setIsEntering(false);
+        });
+        return function () {
+            window.cancelAnimationFrame(frameId);
+        };
+    }, [isMounted, isEntering, isExiting]);
+    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(FloatingBarOrientationContext.Provider, { value: orientation },
+        React.createElement(FloatingBarScrollProgressContext.Provider, { value: scrollProgress },
+            React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, onTransitionEnd: handleTransitionEnd }, other), children))));
+});

package/esm/floating-bar/index.js

@@ -0,0 +1,6 @@
+export { FloatingBar } from './floating-bar';
+export { FloatingBarScroll } from './floating-bar-scroll';
+export { FloatingBarIcon } from './floating-bar-icon';
+export { FloatingBarDescription } from './floating-bar-description';
+export { FloatingBarActions } from './floating-bar-actions';
+export { useFloatingBarContext, useFloatingBarOrientation, useFloatingBarScrollProgress } from './floating-bar-context';

package/esm/index.js

@@ -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/esm/panel/panel/panel.js

@@ -20,15 +20,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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;
+};
 import * as React from 'react';
+import { XIcon } from '../../icon';
+import { IconButton } from '../../icon-button';
 import { styled } from '../../styled';
 import { useMergedClasses } from '../../styles/classes';
 import { capitalize, clsx } from '../../utils';
-import { panelClasses, getPanelUtilityClass, panelComponentName } from './panel-classes';
-import { IconButton } from '../../icon-button';
-import { XIcon } from '../../icon';
 import { PanelContext } from '../panel-context';
 import { PanelHeader } from '../panel-header';
+import { getPanelUtilityClass, panelClasses, panelComponentName } from './panel-classes';
 var widthBySize = {
     small: 320,
     medium: 360,
@@ -40,8 +56,9 @@ var Root = styled('div', {
     slot: 'Root',
 })(function (_a) {
     var _b;
+    var _c;
     var ownerState = _a.ownerState, theme = _a.theme;
-    var width = widthBySize[ownerState.size];
+    var width = (_c = ownerState.width) !== null && _c !== void 0 ? _c : widthBySize[ownerState.size];
     var isOpen = ownerState.variant === 'permanent' || ownerState.isOpen;
     var marginProp = ownerState.placement === 'start' ? 'marginRight' : 'marginLeft';
     return __assign({ transition: theme.transitions.create(['margin'], {
@@ -55,8 +72,9 @@ var Content = styled('div', {
     name: panelComponentName,
     slot: 'Content',
 })(function (_a) {
+    var _b;
     var ownerState = _a.ownerState, theme = _a.theme;
-    var width = widthBySize[ownerState.size];
+    var width = (_b = ownerState.width) !== null && _b !== void 0 ? _b : widthBySize[ownerState.size];
     var isOpen = ownerState.variant === 'permanent' || ownerState.isOpen;
     return __assign({ position: ownerState.isFixed ? 'fixed' : 'absolute', zIndex: theme.zIndex.drawer - 1, top: ownerState.offsetTop === 'appbar' ? theme.layout.appTop + theme.layout.appBarHeight : ownerState.offsetTop || 0, bottom: 0, width: width, backgroundColor: ownerState.variant === 'floating' ? theme.tokens.color_bg_layer_elevated : theme.tokens.color_bg_layer, transition: theme.transitions.create(['transform'], {
             duration: isOpen ? theme.transitions.duration.enteringScreen : theme.transitions.duration.leavingScreen,
@@ -81,11 +99,135 @@ var CloseButton = styled(IconButton, {
     slot: 'CloseButton',
 })({
     position: 'absolute',
-    top: 23,
+    top: 24,
     right: 24,
 });
+var ResizeHandle = styled('div', {
+    name: panelComponentName,
+    slot: 'ResizeHandle',
+})(function (_a) {
+    var ownerState = _a.ownerState, theme = _a.theme;
+    return (__assign({ width: '16px', cursor: 'ew-resize', position: 'absolute', top: 0, bottom: 0, zIndex: 1, outline: 'none', transition: theme.transitions.create(['all'], {
+            duration: theme.transitions.duration.shortest,
+        }) }, (ownerState.placement === 'start'
+        ? {
+            right: -16,
+            '&:hover, &:focus, &:focus-visible': {
+                boxShadow: "inset 2px 0 0 0 ".concat(theme.tokens.color_border_brand_primary),
+            },
+        }
+        : {
+            left: -16,
+            '&:hover, &:focus, &:focus-visible': {
+                boxShadow: "inset -2px 0 0 0 ".concat(theme.tokens.color_border_brand_primary),
+            },
+        })));
+});
+var DragIcon = styled('div', {
+    name: panelComponentName,
+    slot: 'ResizeIcon',
+})(function (_a) {
+    var ownerState = _a.ownerState, theme = _a.theme;
+    return (__assign(__assign(__assign({ display: 'flex', width: 18, height: 48, cursor: 'col-resize', position: 'absolute', top: '50%', transform: 'translateY(-50%)', zIndex: 2 }, (ownerState.placement === 'start'
+        ? {
+            right: 10,
+        }
+        : {
+            left: 10,
+        })), { '&:after': {
+            content: '""',
+            display: 'block',
+            background: theme.tokens.color_bg_layer_bold,
+            width: 4,
+            height: 40,
+            borderRadius: 4,
+            alignItems: 'center',
+        } }), (ownerState.placement === 'start'
+        ? {
+            justifyContent: 'flex-start',
+        }
+        : {
+            justifyContent: 'flex-end',
+        })));
+});
 export var Panel = React.forwardRef(function (props, ref) {
-    var title = props.title, isOpen = props.isOpen, _a = props.placement, placement = _a === void 0 ? 'end' : _a, _b = props.variant, variant = _b === void 0 ? 'permanent' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, onClose = props.onClose, closeButtonLabel = props.closeButtonLabel, className = props.className, propClasses = props.classes, isFixed = props.isFixed, propOffsetTop = props.offsetTop, children = props.children, _d = props.closeIconButtonProps, closeIconButtonProps = _d === void 0 ? {} : _d, _e = props.PanelHeaderProps, PanelHeaderProps = _e === void 0 ? {} : _e, rootProps = __rest(props, ["title", "isOpen", "placement", "variant", "size", "onClose", "closeButtonLabel", "className", "classes", "isFixed", "offsetTop", "children", "closeIconButtonProps", "PanelHeaderProps"]);
+    var title = props.title, isOpen = props.isOpen, _a = props.placement, placement = _a === void 0 ? 'end' : _a, _b = props.variant, variant = _b === void 0 ? 'permanent' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, onClose = props.onClose, closeButtonLabel = props.closeButtonLabel, className = props.className, propClasses = props.classes, isFixed = props.isFixed, propOffsetTop = props.offsetTop, children = props.children, _d = props.closeIconButtonProps, closeIconButtonProps = _d === void 0 ? {} : _d, _e = props.PanelHeaderProps, PanelHeaderProps = _e === void 0 ? {} : _e, _f = props.resizable, resizable = _f === void 0 ? false : _f, _g = props.maxWidth, maxWidth = _g === void 0 ? 960 : _g, _h = props.minWidth, minWidth = _h === void 0 ? 200 : _h, _j = props.showDragHandle, showDragHandle = _j === void 0 ? false : _j, rootProps = __rest(props, ["title", "isOpen", "placement", "variant", "size", "onClose", "closeButtonLabel", "className", "classes", "isFixed", "offsetTop", "children", "closeIconButtonProps", "PanelHeaderProps", "resizable", "maxWidth", "minWidth", "showDragHandle"]);
+    var _k = __read(React.useState(widthBySize[size]), 2), panelWidth = _k[0], setPanelWidth = _k[1];
+    var _l = __read(React.useState(false), 2), isDragging = _l[0], setIsDragging = _l[1];
+    var lastSyncedSizeRef = React.useRef(size);
+    var panelRef = React.useRef(null);
+    var dragStartRef = React.useRef(null);
+    var isDraggingRef = React.useRef(false);
+    React.useEffect(function () {
+        if (size === lastSyncedSizeRef.current || isDragging) {
+            return;
+        }
+        setPanelWidth(widthBySize[size]);
+        lastSyncedSizeRef.current = size;
+    }, [size, isDragging]);
+    React.useEffect(function () {
+        var handleDocumentMouseMove = function (dragEvent) {
+            if (!isDraggingRef.current || !dragStartRef.current) {
+                return;
+            }
+            var _a = dragStartRef.current, startX = _a.startX, startWidth = _a.startWidth;
+            var deltaX = dragEvent.clientX - startX;
+            var tentativeWidth = placement === 'start' ? startWidth + deltaX : startWidth - deltaX;
+            var nextWidth = Math.min(maxWidth, Math.max(minWidth, tentativeWidth));
+            setPanelWidth(nextWidth);
+        };
+        var handleDocumentMouseUp = function () {
+            isDraggingRef.current = false;
+            dragStartRef.current = null;
+            setIsDragging(false);
+        };
+        document.addEventListener('mousemove', handleDocumentMouseMove);
+        document.addEventListener('mouseup', handleDocumentMouseUp);
+        return function () {
+            document.removeEventListener('mousemove', handleDocumentMouseMove);
+            document.removeEventListener('mouseup', handleDocumentMouseUp);
+        };
+    }, [placement, maxWidth, minWidth]);
+    var handleMouseDown = function (e) {
+        if (!resizable)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        var startX = e.clientX;
+        var startWidth = panelRef.current ? panelRef.current.offsetWidth : 0;
+        dragStartRef.current = { startX: startX, startWidth: startWidth };
+        isDraggingRef.current = true;
+        setIsDragging(true);
+    };
+    var handleClick = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    var handleKeyDown = function (e) {
+        if (!resizable) {
+            return;
+        }
+        var step = 16;
+        var delta = 0;
+        if (placement === 'start') {
+            if (e.key === 'ArrowRight')
+                delta = step;
+            if (e.key === 'ArrowLeft')
+                delta = -step;
+        }
+        else {
+            if (e.key === 'ArrowLeft')
+                delta = step;
+            if (e.key === 'ArrowRight')
+                delta = -step;
+        }
+        if (delta === 0) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setPanelWidth(function (currentWidth) { return Math.min(maxWidth, Math.max(minWidth, currentWidth + delta)); });
+    };
     var classes = useMergedClasses(panelClasses, getPanelUtilityClass, propClasses);
     var offsetTop = propOffsetTop != null ? propOffsetTop : isFixed ? 'appbar' : 0;
     var ownerState = {
@@ -95,13 +237,18 @@ export var Panel = React.forwardRef(function (props, ref) {
         size: size,
         isFixed: isFixed,
         offsetTop: offsetTop,
+        width: panelWidth,
     };
     var showCloseButton = variant !== 'permanent' && !!onClose;
     return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.root, classes["size".concat(capitalize(size))], classes["variant".concat(capitalize(variant))], classes["placement".concat(capitalize(placement))], isFixed && classes.fixed, isOpen && classes.open, className) }, rootProps),
         React.createElement(PanelContext.Provider, { value: __assign(__assign({}, ownerState), { isCloseButtonVisible: showCloseButton }) },
-            React.createElement(Content, { className: classes.content, ownerState: ownerState },
+            React.createElement(Content, { ref: panelRef, className: classes.content, ownerState: ownerState },
                 showCloseButton && (React.createElement(CloseButton, __assign({ label: closeButtonLabel || 'close', className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
                     React.createElement(XIcon, null))),
+                resizable && (React.createElement(ResizeHandle, { tabIndex: 0, role: "separator", "aria-orientation": placement === 'start' || placement === 'end' ? 'vertical' : 'horizontal', "aria-label": "Resize panel", "aria-valuemin": minWidth, "aria-valuemax": maxWidth, "aria-valuenow": panelWidth, onMouseDown: function (event) {
+                        event.currentTarget.focus();
+                        handleMouseDown(event);
+                    }, onKeyDown: handleKeyDown, onClick: handleClick, ownerState: ownerState }, showDragHandle && React.createElement(DragIcon, { ownerState: ownerState }))),
                 !!title && React.createElement(PanelHeader, __assign({ title: title }, PanelHeaderProps)),
                 children))));
 });

package/esm/panel/panel-context.js

@@ -6,6 +6,7 @@ export var PanelContext = React.createContext({
     size: defaultPanelSize,
     placement: defaultPanelPlacement,
     variant: defaultPanelVariant,
+    resizable: false,
     isOpen: true,
     isFixed: false,
     isCloseButtonVisible: false,

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

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