@auth0/quantum-product 1.6.7 → 1.7.0

package/esm/panel/panel/panel.js

@@ -0,0 +1,106 @@
+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 { 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';
+var widthBySize = {
+    small: 320,
+    medium: 360,
+    large: 440,
+};
+var Root = styled('div', {
+    name: panelComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var _b;
+    var ownerState = _a.ownerState, theme = _a.theme;
+    var width = widthBySize[ownerState.size];
+    var isOpen = ownerState.variant === 'permanent' || ownerState.isOpen;
+    var marginProp = ownerState.placement === 'start' ? 'marginRight' : 'marginLeft';
+    return __assign({ transition: theme.transitions.create(['margin'], {
+            duration: isOpen ? theme.transitions.duration.enteringScreen : theme.transitions.duration.leavingScreen,
+        }) }, (ownerState.variant !== 'floating'
+        ? (_b = {},
+            _b[marginProp] = isOpen ? width : 0,
+            _b) : {}));
+});
+var Content = styled('div', {
+    name: panelComponentName,
+    slot: 'Content',
+})(function (_a) {
+    var ownerState = _a.ownerState, theme = _a.theme;
+    var width = 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,
+        }), display: 'flex', flexDirection: 'column', boxShadow: ownerState.variant === 'floating' ? theme.shadows[2] : undefined }, (ownerState.placement === 'start'
+        ? {
+            left: 0,
+            right: 'auto',
+            borderRight: '1px solid',
+            borderColor: theme.tokens.color_border_default,
+            transform: isOpen ? undefined : 'translate(-101%, 0)',
+        }
+        : {
+            right: 0,
+            left: 'auto',
+            borderLeft: '1px solid',
+            borderColor: theme.tokens.color_border_default,
+            transform: isOpen ? undefined : 'translate(101%, 0)',
+        }));
+});
+var CloseButton = styled(IconButton, {
+    name: panelComponentName,
+    slot: 'CloseButton',
+})({
+    position: 'absolute',
+    top: 23,
+    right: 24,
+});
+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, 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", "className", "classes", "isFixed", "offsetTop", "children", "closeIconButtonProps", "PanelHeaderProps"]);
+    var classes = useMergedClasses(panelClasses, getPanelUtilityClass, propClasses);
+    var offsetTop = propOffsetTop != null ? propOffsetTop : isFixed ? 'appbar' : 0;
+    var ownerState = {
+        isOpen: isOpen,
+        placement: placement,
+        variant: variant,
+        size: size,
+        isFixed: isFixed,
+        offsetTop: offsetTop,
+    };
+    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 },
+                showCloseButton && (React.createElement(CloseButton, __assign({ "aria-label": "Close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
+                    React.createElement(XIcon, null))),
+                !!title && React.createElement(PanelHeader, __assign({ title: title }, PanelHeaderProps)),
+                children))));
+});

package/esm/{panel-layout → panel}/panel-body/panel-body.js

@@ -22,13 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '../../styled';
-var panelBodyComponentName = 'QuantumPanels';
-export var Root = styled('div', {
-    name: panelBodyComponentName,
-    slot: 'Root',
-})(function (_a) {
+export var panelBodyComponentName = 'QuantumPanelBody';
+var Root = styled('div', { name: panelBodyComponentName })(function (_a) {
     var theme = _a.theme;
-    return { overflowY: 'auto', padding: theme.spacing(3), paddingTop: theme.spacing(0), marginTop: theme.spacing(1) };
+    return ({
+        flex: 1,
+        padding: theme.spacing(2, 3, 3),
+        overflowY: 'auto',
+    });
 });
 export var PanelBody = React.forwardRef(function (props, ref) {
     var children = props.children, rootProps = __rest(props, ["children"]);

package/esm/panel/panel-context.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export var defaultPanelSize = 'medium';
+export var defaultPanelPlacement = 'end';
+export var defaultPanelVariant = 'permanent';
+export var PanelContext = React.createContext({
+    size: defaultPanelSize,
+    placement: defaultPanelPlacement,
+    variant: defaultPanelVariant,
+    isOpen: true,
+    isFixed: false,
+    isCloseButtonVisible: false,
+});
+export var usePanelContext = function () { return React.useContext(PanelContext); };

package/esm/panel/panel-footer/panel-footer.js

@@ -22,18 +22,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '../../styled';
-export var panelComponentName = 'QuantumPanelFooter';
-export var Root = styled('div', { name: panelComponentName, slot: 'Root' })(function (_a) {
+export var panelFooterComponentName = 'QuantumPanelFooter';
+var Root = styled('div', { name: panelFooterComponentName })(function (_a) {
     var theme = _a.theme;
     return ({
-        display: 'flex',
-        padding: theme.spacing(3),
-        alignItems: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        padding: theme.spacing(3, 3),
         borderTop: "1px solid ".concat(theme.tokens.color_border_default),
-        justifyContent: 'space-between',
     });
 });
-export var PanelFooter = React.forwardRef(function (_a) {
-    var children = _a.children, ref = _a.ref, sx = _a.sx, rootProps = __rest(_a, ["children", "ref", "sx"]);
-    return (React.createElement(Root, __assign({ ref: ref, sx: sx }, rootProps), children));
+export var PanelFooter = React.forwardRef(function (props, ref) {
+    var children = props.children, rootProps = __rest(props, ["children"]);
+    return (React.createElement(Root, __assign({ ref: ref }, rootProps), children));
 });

package/esm/panel/panel-header/panel-header-classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var panelHeaderComponentName = 'QuantumPanelHeader';
+export function getPanelHeaderUtilityClass(slot) {
+    return generateUtilityClass(panelHeaderComponentName, slot);
+}
+export var panelHeaderClasses = generateUtilityClasses(panelHeaderComponentName, [
+    'root',
+    'content',
+    'title',
+    'endAdornment',
+]);

package/esm/panel/panel-header/panel-header.js

@@ -22,32 +22,37 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '../../styled';
+import { useMergedClasses } from '../../styles/classes';
+import { Text } from '../../text';
+import { clsx } from '../../utils';
+import { usePanelContext } from '../panel-context';
+import { panelHeaderClasses, getPanelHeaderUtilityClass } from './panel-header-classes';
 export var panelHeaderComponentName = 'QuantumPanelHeader';
-export var Root = styled('div', { name: panelHeaderComponentName, slot: 'Root' })(function (_a) {
-    var theme = _a.theme;
+var Root = styled('div')(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
     return ({
         display: 'flex',
-        padding: theme.spacing(3),
-        paddingBottom: theme.spacing(2),
-        paddingRight: '70px',
-        alignItems: 'flex-start',
-        minHeight: theme.spacing(8.5),
-        justifyContent: 'space-between',
+        padding: theme.spacing(3, ownerState.isCloseButtonVisible ? 9 : 3, 2, 3),
+        gap: theme.spacing(2),
+        flexGrow: 0,
+        flexShrink: 0,
     });
 });
-var PanelTitle = styled('div', { name: panelHeaderComponentName, slot: 'Title' })(function (_a) {
-    var theme = _a.theme;
-    return theme.tokens.type_heading_100;
-});
-var Container = styled('div', { name: panelHeaderComponentName, slot: 'Container' })(function (_a) {
+var Content = styled('div')({});
+var EndAdornment = styled('div')(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
         alignItems: 'center',
-        minHeight: theme.spacing(3.5),
+        gap: theme.spacing(1),
     });
 });
-export var PanelHeader = React.forwardRef(function (_a) {
-    var children = _a.children, title = _a.title, sx = _a.sx, ref = _a.ref, rootProps = __rest(_a, ["children", "title", "sx", "ref"]);
-    return (React.createElement(Root, __assign({ ref: ref, sx: sx }, rootProps), title ? React.createElement(PanelTitle, null, title) : React.createElement(Container, null, children)));
+export var PanelHeader = React.forwardRef(function (props, ref) {
+    var title = props.title, className = props.className, propClasses = props.classes, endAdornment = props.endAdornment, titleTextProps = props.titleTextProps, titleComponent = props.titleComponent, rootProps = __rest(props, ["title", "className", "classes", "endAdornment", "titleTextProps", "titleComponent"]);
+    var classes = useMergedClasses(panelHeaderClasses, getPanelHeaderUtilityClass, propClasses);
+    var panelContext = usePanelContext();
+    return (React.createElement(Root, __assign({ className: clsx(classes.root, className), ownerState: { isCloseButtonVisible: panelContext.isCloseButtonVisible }, ref: ref }, rootProps),
+        React.createElement(Content, { className: classes.content },
+            React.createElement(Text, __assign({ className: classes.title, component: titleComponent, variant: "h5" }, titleTextProps), title)),
+        !!endAdornment && React.createElement(EndAdornment, { className: classes.endAdornment }, endAdornment)));
 });

package/esm/panel/panel-layout/index.js

@@ -0,0 +1 @@
+export { PanelLayout } from './panel-layout';

package/esm/panel/panel-layout/panel-layout-classes.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var panelLayoutComponentName = 'QuantumPanelLayout';
+export function getPanelLayoutUtilityClass(slot) {
+    return generateUtilityClass(panelLayoutComponentName, slot);
+}
+export var panelLayoutClasses = generateUtilityClasses(panelLayoutComponentName, ['root', 'content']);

package/esm/{panel-layout → panel/panel-layout}/panel-layout.js

@@ -21,24 +21,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { Grid } from '@mui/material';
-import { styled } from '../styled';
-import { Panel } from './panel';
-var panelsLayoutComponentName = 'QuantumPanelsLayout';
-var RightPanel = styled(Panel, { name: panelsLayoutComponentName, slot: 'RightPanel' })({
-    width: '320px', // fixed width base on design requirements
-});
-var LeftPanel = styled(Panel, { name: panelsLayoutComponentName, slot: 'LeftPanel' })({
-    width: '265px', // fixed width base on design requirements
-});
-var Root = styled(Grid, { name: panelsLayoutComponentName, slot: 'Root' })({
+import { styled } from '../../styled';
+import { useMergedClasses } from '../../styles/classes';
+import { clsx } from '../../utils';
+import { getPanelLayoutUtilityClass, panelLayoutClasses, panelLayoutComponentName, } from './panel-layout-classes';
+var Root = styled('div', { name: panelLayoutComponentName })({
     display: 'flex',
-    height: '-webkit-fill-available',
+    alignItems: 'stretch',
+    height: '100%',
+    flex: 1,
+    position: 'relative',
+    overflowX: 'hidden',
+});
+var Content = styled('div', { name: panelLayoutComponentName, slot: 'Content' })({
+    flex: 1,
+    overflow: 'auto',
 });
 export var PanelLayout = React.forwardRef(function (props, ref) {
-    var startPanel = props.startPanel, endPanel = props.endPanel, children = props.children, rootProps = __rest(props, ["startPanel", "endPanel", "children"]);
-    return (React.createElement(Root, __assign({ ref: ref }, rootProps),
-        !!startPanel && React.createElement(LeftPanel, { position: "start" }, startPanel),
-        React.createElement(Grid, { item: true, xs: true }, children),
-        !!endPanel && React.createElement(RightPanel, { position: "end" }, endPanel)));
+    var startPanel = props.startPanel, endPanel = props.endPanel, children = props.children, className = props.className, propClasses = props.classes, rootProps = __rest(props, ["startPanel", "endPanel", "children", "className", "classes"]);
+    var classes = useMergedClasses(panelLayoutClasses, getPanelLayoutUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className) }, rootProps),
+        startPanel,
+        React.createElement(Content, { className: classes.content }, children),
+        endPanel));
 });

package/esm/paper/index.js

@@ -1 +1 @@
-export { default as Paper } from '@mui/material/Paper';
+export { default as Paper, paperClasses } from '@mui/material/Paper';

package/esm/sidebar/sidebar-new.js

@@ -60,7 +60,7 @@ var Root = styled(Drawer, { name: sidebarComponentName, slot: 'Root' })(function
     var top = theme.tokens.size_layout_app_top + theme.tokens.size_layout_app_bar_height;
     return _b = {
             top: top,
-            zIndex: 20,
+            zIndex: theme.zIndex.drawer,
             marginRight: theme.layout.sidebarWidthCollapsed,
             transition: theme.transitions.create('margin', enterTransition),
             willChange: 'margin'

package/esm/sidebar/sidebar-old.js

@@ -59,7 +59,7 @@ var Root = styled(Drawer, { name: sidebarComponentName, slot: 'Root' })(function
     var top = theme.tokens.size_layout_app_top + theme.tokens.size_layout_app_bar_height;
     return _b = {
             top: top,
-            zIndex: 20,
+            zIndex: theme.zIndex.drawer,
             marginRight: theme.layout.sidebarWidthCollapsed,
             transition: theme.transitions.create('margin', enterTransition),
             willChange: 'margin'

package/esm/theme/create-theme.js

@@ -52,8 +52,8 @@ import { createComponents } from './create-components';
 import { createMixins } from './create-mixins';
 import { createPalette } from './create-palette';
 import { createTypography } from './create-typography';
-import { auth0 } from '@auth0/quantum-tokens';
-var defaultThemeTokens = auth0;
+import { okta } from '@auth0/quantum-tokens';
+var defaultThemeTokens = okta;
 export var createTheme = function (_a) {
     if (_a === void 0) { _a = {}; }
     var layoutOptions = _a.layout, componentsOptions = _a.components, paletteOptions = _a.palette, typographyOptions = _a.typography, _b = _a.breakpoints, breakpointsOptions = _b === void 0 ? {} : _b, tokens = _a.tokens, options = __rest(_a, ["layout", "components", "palette", "typography", "breakpoints", "tokens"]);

package/esm/theme/default-theme.js

@@ -1,7 +1,7 @@
-import { auth0 } from '@auth0/quantum-tokens';
+import { okta } from '@auth0/quantum-tokens';
 import { createQuantumTheme } from './create-quantum-theme';
 import { createTheme } from './create-theme';
 export var defaultTheme = createTheme();
 export var defaultQuantumTheme = createQuantumTheme({
-    tokens: auth0,
+    tokens: okta,
 });

package/esm/utils/capitalize.js

@@ -0,0 +1 @@
+export { capitalize } from '@mui/material';

package/esm/utils/index.js

@@ -1,3 +1,4 @@
 export { default as clsx } from './clsx';
 export { useControlled } from './use-controlled';
 export { useId } from './use-id';
+export { capitalize } from './capitalize';

package/floating-panel/floating-panel.d.ts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import { IStyledComponentProps } from '../styled';
-import { Drawer } from '@mui/material';
-import { SxProps } from '@mui/system';
-import { ITheme } from '../theme';
+import { Drawer } from '../drawer';
 export declare const floatingPanelComponentName = "QuantumFloatingPanel";
 export interface IFloatingPanelOwnerState {
-    ref?: React.Ref<HTMLDivElement>;
     panelWidth?: number;
     position: 'left' | 'right';
-    sx?: SxProps<ITheme>;
     closeOnOutsideClick?: boolean;
     showCloseButton?: boolean;
     hideBackdrop?: boolean;
@@ -22,5 +18,5 @@ export declare type IFloatingPanelProps = IStyledComponentProps<{
     children: React.ReactNode;
     defaultComponent: 'div';
 }>;
-export declare const Root: import("styled-components").StyledComponent<typeof Drawer, ITheme, import("@mui/system").MUIStyledCommonProps<ITheme> & IFloatingPanelOwnerState & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IFloatingPanelOwnerState> & import("../styled").IStyledCommonProps, never>;
-export declare const FloatingPanel: React.ForwardRefExoticComponent<Pick<IFloatingPanelProps, "slot" | "style" | "title" | "color" | "hidden" | "open" | "position" | "translate" | "className" | "children" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "hideBackdrop" | "onClose" | "as" | "panelWidth" | "closeOnOutsideClick" | "showCloseButton" | "topOffset" | "elevated"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Root: import("styled-components").StyledComponent<typeof Drawer, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme> & IFloatingPanelOwnerState & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | keyof IFloatingPanelOwnerState> & import("../styled").IStyledCommonProps, never>;
+export declare const FloatingPanel: React.ForwardRefExoticComponent<IFloatingPanelOwnerState & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | keyof IFloatingPanelOwnerState> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/floating-panel/floating-panel.js

@@ -50,14 +50,15 @@ var React = __importStar(require("react"));
 var styled_1 = require("../styled");
 var icon_button_1 = require("../icon-button");
 var icon_1 = require("../icon");
-var material_1 = require("@mui/material");
+var drawer_1 = require("../drawer");
+var paper_1 = require("../paper");
 exports.floatingPanelComponentName = 'QuantumFloatingPanel';
 var CloseButton = function (_a) {
     var onCloseButtonClick = _a.onCloseButtonClick;
     return (React.createElement(StyledIconButton, { variant: "outlined", shape: "circular", size: "small", onClick: onCloseButtonClick },
         React.createElement(icon_1.XIcon, null)));
 };
-var StyledIconButton = (0, styled_1.styled)(icon_button_1.IconButton)(function (_a) {
+var StyledIconButton = (0, styled_1.styled)(icon_button_1.IconButton, { name: exports.floatingPanelComponentName, slot: 'CloseButton' })(function (_a) {
     var theme = _a.theme;
     return ({
         position: 'absolute',
@@ -66,24 +67,28 @@ var StyledIconButton = (0, styled_1.styled)(icon_button_1.IconButton)(function (
         zIndex: theme.zIndex.drawer,
     });
 });
-var SubContainer = (0, styled_1.styled)('div')({
+var SubContainer = (0, styled_1.styled)('div', { name: exports.floatingPanelComponentName, slot: 'SubContainer' })({
     display: 'flex',
     width: 0,
 });
-exports.Root = (0, styled_1.styled)(material_1.Drawer, { name: exports.floatingPanelComponentName, slot: 'Root' })(function (_a) {
+exports.Root = (0, styled_1.styled)(drawer_1.Drawer, { name: exports.floatingPanelComponentName, slot: 'Root' })(function (_a) {
     var _b;
     var theme = _a.theme, panelWidth = _a.panelWidth, elevated = _a.elevated, topOffset = _a.topOffset, anchor = _a.anchor;
     var boxShadowStyle = elevated ? theme.shadows[2] : 'none';
-    var topOffsetStyle = topOffset ? (topOffset === 'appbar' ? 56 : topOffset) : 0;
+    var topOffsetStyle = topOffset
+        ? topOffset === 'appbar'
+            ? theme.layout.appTop + theme.layout.appBarHeight
+            : topOffset
+        : 0;
     var borderStyle = "1px solid ".concat(theme.tokens.color_border_default);
     var borderPositionStyle = anchor === 'left' ? { borderRight: borderStyle } : { borderLeft: borderStyle };
     return _b = {},
-        _b["& .MuiPaper-root"] = __assign({ width: "".concat(panelWidth, "px"), top: topOffsetStyle, bottom: 0, height: 'auto', boxShadow: boxShadowStyle, background: theme.tokens.color_bg_layer_elevated }, borderPositionStyle),
+        _b["& .".concat(paper_1.paperClasses.root)] = __assign({ width: panelWidth, top: topOffsetStyle, bottom: 0, height: 'auto', boxShadow: boxShadowStyle, background: theme.tokens.color_bg_layer_elevated }, borderPositionStyle),
         _b;
 });
-exports.FloatingPanel = React.forwardRef(function (_a) {
-    var _b = _a.panelWidth, panelWidth = _b === void 0 ? 360 : _b, _c = _a.closeOnOutsideClick, closeOnOutsideClick = _c === void 0 ? true : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, open = _a.open, _e = _a.elevated, elevated = _e === void 0 ? true : _e, topOffset = _a.topOffset, ref = _a.ref, position = _a.position, onClose = _a.onClose, children = _a.children, sx = _a.sx, rootProps = __rest(_a, ["panelWidth", "closeOnOutsideClick", "showCloseButton", "open", "elevated", "topOffset", "ref", "position", "onClose", "children", "sx"]);
-    return (React.createElement(exports.Root, __assign({ ref: ref, panelWidth: panelWidth, open: open, anchor: position, onClose: onClose, elevated: elevated, topOffset: topOffset, hideBackdrop: !closeOnOutsideClick, sx: sx, BackdropProps: { invisible: true } }, rootProps),
+exports.FloatingPanel = React.forwardRef(function (_a, ref) {
+    var _b = _a.panelWidth, panelWidth = _b === void 0 ? 360 : _b, _c = _a.closeOnOutsideClick, closeOnOutsideClick = _c === void 0 ? true : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, open = _a.open, _e = _a.elevated, elevated = _e === void 0 ? true : _e, topOffset = _a.topOffset, position = _a.position, onClose = _a.onClose, children = _a.children, rootProps = __rest(_a, ["panelWidth", "closeOnOutsideClick", "showCloseButton", "open", "elevated", "topOffset", "position", "onClose", "children"]);
+    return (React.createElement(exports.Root, __assign({ ref: ref, panelWidth: panelWidth, open: open, anchor: position, onClose: onClose, elevated: elevated, topOffset: topOffset, hideBackdrop: !closeOnOutsideClick, BackdropProps: { invisible: true } }, rootProps),
         children,
         showCloseButton && (React.createElement(SubContainer, null,
             React.createElement(CloseButton, { onCloseButtonClick: onClose })))));

package/index.d.ts

@@ -51,7 +51,7 @@ export * from './mobile-stepper';
 export * from './no-ssr';
 export * from './page';
 export * from './pagination';
-export * from './panel-layout';
+export * from './panel';
 export * from './paper';
 export * from './popover';
 export * from './popper';

package/index.js

@@ -67,7 +67,7 @@ __exportStar(require("./mobile-stepper"), exports);
 __exportStar(require("./no-ssr"), exports);
 __exportStar(require("./page"), exports);
 __exportStar(require("./pagination"), exports);
-__exportStar(require("./panel-layout"), exports);
+__exportStar(require("./panel"), exports);
 __exportStar(require("./paper"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./popper"), exports);

package/package.json

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

package/panel/index.d.ts

@@ -0,0 +1,7 @@
+export * from './panel';
+export * from './panel-body';
+export * from './panel-footer';
+export * from './panel-header';
+export * from './panel-layout';
+export { PanelContext, usePanelContext } from './panel-context';
+export type { IPanelContextValue, PanelPlacement, PanelSize, PanelVariant } from './panel-context';

package/panel/index.js

@@ -0,0 +1,25 @@
+"use strict";
+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 __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.usePanelContext = exports.PanelContext = void 0;
+__exportStar(require("./panel"), exports);
+__exportStar(require("./panel-body"), exports);
+__exportStar(require("./panel-footer"), exports);
+__exportStar(require("./panel-header"), exports);
+__exportStar(require("./panel-layout"), exports);
+var panel_context_1 = require("./panel-context");
+Object.defineProperty(exports, "PanelContext", { enumerable: true, get: function () { return panel_context_1.PanelContext; } });
+Object.defineProperty(exports, "usePanelContext", { enumerable: true, get: function () { return panel_context_1.usePanelContext; } });

package/{panel-layout → panel}/panel/index.d.ts

@@ -1,2 +1,3 @@
 export { Panel } from './panel';
 export type { IPanelProps } from './panel';
+export { panelClasses } from './panel-classes';

package/panel/panel/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelClasses = exports.Panel = void 0;
+var panel_1 = require("./panel");
+Object.defineProperty(exports, "Panel", { enumerable: true, get: function () { return panel_1.Panel; } });
+var panel_classes_1 = require("./panel-classes");
+Object.defineProperty(exports, "panelClasses", { enumerable: true, get: function () { return panel_classes_1.panelClasses; } });

package/panel/panel/panel-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const panelComponentName: "QuantumPanel";
+export declare function getPanelUtilityClass(slot: string): string;
+export declare const panelClasses: Record<"fixed" | "content" | "open" | "root" | "sizeSmall" | "sizeMedium" | "sizeLarge" | "closeButton" | "variantFloating" | "variantPersistent" | "variantPermanent" | "placementStart" | "placementEnd", string>;
+export declare type PanelClasses = typeof panelClasses;
+export declare type PanelClassKey = keyof PanelClasses;

package/panel/panel/panel-classes.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelClasses = exports.getPanelUtilityClass = exports.panelComponentName = void 0;
+var classes_1 = require("../../styles/classes");
+exports.panelComponentName = 'QuantumPanel';
+function getPanelUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.panelComponentName, slot);
+}
+exports.getPanelUtilityClass = getPanelUtilityClass;
+exports.panelClasses = (0, classes_1.generateUtilityClasses)(exports.panelComponentName, [
+    'root',
+    'content',
+    'variantFloating',
+    'variantPersistent',
+    'variantPermanent',
+    'sizeSmall',
+    'sizeMedium',
+    'sizeLarge',
+    'placementStart',
+    'placementEnd',
+    'closeButton',
+    'fixed',
+    'open',
+]);

package/panel/panel/panel.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../../styled';
+import { PanelClasses } from './panel-classes';
+import { IIconButtonProps } from '../../icon-button';
+import { IPanelContextValue } from '../panel-context';
+import { IPanelHeaderProps } from '../panel-header';
+export declare 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;
+};
+export declare type IPanelProps = IStyledComponentProps<{
+    props: Partial<IPanelOwnerState> & {
+        /** Renders a title in the PanelHeader.*/
+        title?: React.ReactNode;
+        /** Main content. Recommended content is PanelHeader, PanelBody, and PanelFooter. */
+        children?: React.ReactNode;
+        /** Event fired when panel tries to close. */
+        onClose?(event: React.MouseEvent<HTMLButtonElement>, reason: 'closeButtonClick'): void;
+        classes?: Partial<PanelClasses>;
+        closeIconButtonProps?: Partial<IIconButtonProps>;
+        PanelHeaderProps?: Partial<IPanelHeaderProps>;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const Panel: React.ForwardRefExoticComponent<Partial<IPanelOwnerState> & {
+    /** Renders a title in the PanelHeader.*/
+    title?: React.ReactNode;
+    /** Main content. Recommended content is PanelHeader, PanelBody, and PanelFooter. */
+    children?: React.ReactNode;
+    /** Event fired when panel tries to close. */
+    onClose?(event: React.MouseEvent<HTMLButtonElement>, reason: 'closeButtonClick'): void;
+    classes?: Partial<Record<"fixed" | "content" | "open" | "root" | "sizeSmall" | "sizeMedium" | "sizeLarge" | "closeButton" | "variantFloating" | "variantPersistent" | "variantPermanent" | "placementStart" | "placementEnd", string>> | undefined;
+    closeIconButtonProps?: Partial<IIconButtonProps<"button", {}>> | undefined;
+    PanelHeaderProps?: Partial<IPanelHeaderProps> | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "classes" | "children" | "variant" | "onClose" | "placement" | "isOpen" | "isFixed" | "offsetTop" | "closeIconButtonProps" | "PanelHeaderProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;