@auth0/quantum-product 2.9.5 → 2.10.0

package/panel/panel/panel.js

@@ -54,17 +54,33 @@ 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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = void 0;
 var React = __importStar(require("react"));
+var icon_1 = require("../../icon");
+var icon_button_1 = require("../../icon-button");
 var styled_1 = require("../../styled");
 var classes_1 = require("../../styles/classes");
 var utils_1 = require("../../utils");
-var panel_classes_1 = require("./panel-classes");
-var icon_button_1 = require("../../icon-button");
-var icon_1 = require("../../icon");
 var panel_context_1 = require("../panel-context");
 var panel_header_1 = require("../panel-header");
+var panel_classes_1 = require("./panel-classes");
 var widthBySize = {
     small: 320,
     medium: 360,
@@ -76,8 +92,9 @@ var Root = (0, styled_1.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'], {
@@ -91,8 +108,9 @@ var Content = (0, styled_1.styled)('div', {
     name: panel_classes_1.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,
@@ -117,11 +135,135 @@ var CloseButton = (0, styled_1.styled)(icon_button_1.IconButton, {
     slot: 'CloseButton',
 })({
     position: 'absolute',
-    top: 23,
+    top: 24,
     right: 24,
 });
+var ResizeHandle = (0, styled_1.styled)('div', {
+    name: panel_classes_1.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 = (0, styled_1.styled)('div', {
+    name: panel_classes_1.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',
+        })));
+});
 exports.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 = (0, classes_1.useMergedClasses)(panel_classes_1.panelClasses, panel_classes_1.getPanelUtilityClass, propClasses);
     var offsetTop = propOffsetTop != null ? propOffsetTop : isFixed ? 'appbar' : 0;
     var ownerState = {
@@ -131,13 +273,18 @@ exports.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: (0, utils_1.clsx)(classes.root, classes["size".concat((0, utils_1.capitalize)(size))], classes["variant".concat((0, utils_1.capitalize)(variant))], classes["placement".concat((0, utils_1.capitalize)(placement))], isFixed && classes.fixed, isOpen && classes.open, className) }, rootProps),
         React.createElement(panel_context_1.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(icon_1.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(panel_header_1.PanelHeader, __assign({ title: title }, PanelHeaderProps)),
                 children))));
 });

package/panel/panel-context.d.ts

@@ -21,6 +21,8 @@ export interface IPanelContextValue {
      * @default end
      * */
     placement: PanelPlacement;
+    /** Resizable panel */
+    resizable?: boolean;
     /** Sets panel to open or closed if variant is floating or persistent. Permanent panels cannot be closed. */
     isOpen?: boolean;
     /** sets position to fixed.*/

package/panel/panel-context.js

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