@auth0/quantum-product 1.5.1

package/sidebar/sidebar-link/sidebar-link.js

@@ -0,0 +1,177 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarLink = void 0;
+var React = __importStar(require("react"));
+var identicons_1 = require("../../identicons");
+var label_1 = require("../../label");
+var sidebar_context_1 = require("../sidebar-context");
+var styled_1 = require("../../styled");
+var clsx_1 = __importDefault(require("../../utils/clsx"));
+var sidebar_link_classes_1 = require("./sidebar-link-classes");
+var classes_1 = require("../../styles/classes");
+var use_media_query_1 = require("../../use-media-query");
+var use_theme_1 = require("../../theme/use-theme");
+var Root = (0, styled_1.styled)('li', { name: sidebar_link_classes_1.sidebarLinkComponentName })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (_b = {},
+        _b["& .".concat(sidebar_link_classes_1.sidebarLinkClasses.title, ",& .").concat(sidebar_link_classes_1.sidebarLinkClasses.availabilityLabel, ",& .").concat(sidebar_link_classes_1.sidebarLinkClasses.decoration, ",& .").concat(sidebar_link_classes_1.sidebarLinkClasses.endIcon)] = __assign({}, (ownerState.collapsed
+            ? {
+                opacity: 0,
+                transition: theme.transitions.create('opacity', {
+                    easing: theme.transitions.easing.easeIn,
+                    duration: theme.transitions.duration.leavingScreen,
+                    delay: 0,
+                }),
+            }
+            : {
+                opacity: 1,
+                willChange: 'opacity',
+                transition: theme.transitions.create('opacity', {
+                    easing: theme.transitions.easing.easeIn,
+                    duration: theme.transitions.duration.enteringScreen,
+                    delay: theme.transitions.duration.enteringScreen / 2,
+                }),
+            })),
+        _b);
+});
+var getIconStyles = function (theme) { return ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    '& > svg': {
+        width: '1em',
+        height: '1em',
+        transition: theme.transitions.create(['fill', 'transform'], { duration: theme.transitions.duration.short }),
+    },
+}); };
+var StartIcon = (0, styled_1.styled)('span', { name: sidebar_link_classes_1.sidebarLinkComponentName, slot: 'StartIcon' })(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, getIconStyles(theme)), { width: theme.typography.pxToRem(20), fontSize: theme.typography.pxToRem(20) }));
+});
+var EndIcon = (0, styled_1.styled)('span', { name: sidebar_link_classes_1.sidebarLinkComponentName, slot: 'EndIcon' })(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, getIconStyles(theme)), { marginLeft: 'auto', color: theme.tokens.color_fg_decorative }));
+});
+var Link = (0, styled_1.styled)('a', { name: sidebar_link_classes_1.sidebarLinkComponentName, slot: 'Link' })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign(__assign(__assign(__assign(__assign(__assign({ fontWeight: theme.typography.fontWeightMedium, padding: theme.spacing(1) }, (ownerState.variant === 'primary' && __assign(__assign({}, theme.typography.body2), { fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.typography.pxToRem(20), color: theme.tokens.color_fg_link }))), (ownerState.variant === 'secondary' && __assign(__assign({}, theme.typography.caption), (_b = { lineHeight: theme.typography.pxToRem(22.4), color: theme.tokens.color_fg_link_subtle, paddingTop: theme.spacing(0.5), paddingBottom: theme.spacing(0.5) }, _b["& .".concat(sidebar_link_classes_1.sidebarLinkClasses.startIcon)] = {
+        fontSize: theme.typography.pxToRem(16),
+    }, _b)))), { borderRadius: theme.shape.borderRadius, textDecoration: 'none', width: '100%', display: 'flex', alignItems: 'center', cursor: 'pointer', background: 'transparent', border: 'none', transition: theme.transitions.create(['color'], { duration: theme.transitions.duration.shortest }) }), (0, identicons_1.getIdenticonsVariableOverrides)('default', theme)), (ownerState.isActive && __assign({ color: theme.tokens.color_fg_selected }, (0, identicons_1.getIdenticonsVariableOverrides)('primary', theme)))), { '&:hover': __assign({ color: theme.tokens.color_fg_selected, textDecoration: 'none' }, (0, identicons_1.getIdenticonsVariableOverrides)('primary', theme)), '&:focus-visible': __assign({ outline: 'none' }, theme.mixins.focusRing()) }));
+});
+var Title = (0, styled_1.styled)('span', { name: sidebar_link_classes_1.sidebarLinkComponentName, slot: 'Title' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        marginLeft: theme.spacing(1.25),
+        minWidth: theme.typography.pxToRem(32),
+    });
+});
+var AvailabilityLabel = (0, styled_1.styled)(label_1.Label, { name: sidebar_link_classes_1.sidebarLinkComponentName, slot: 'AvailabilityLabel' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
+var Decoration = (0, styled_1.styled)('span', { name: sidebar_link_classes_1.sidebarLinkComponentName, slot: 'Decoration' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
+var getFeatureAvailabilityLabelProps = function (featureAvailability) {
+    var labelProps = {
+        color: 'primary',
+        variant: 'default',
+    };
+    switch (featureAvailability) {
+        case 'beta':
+            labelProps.children = 'Beta';
+            break;
+        // First Availability has been replaced by Early Access
+        case 'first':
+        case 'early':
+            labelProps.children = 'Early';
+            break;
+        case 'new':
+            labelProps.variant = 'filled';
+            labelProps.children = 'New';
+            break;
+    }
+    return labelProps;
+};
+exports.SidebarLink = React.forwardRef(function (props, ref) {
+    var title = props.title, startIcon = props.startIcon, endIcon = props.endIcon, featureAvailability = props.featureAvailability, className = props.className, decoration = props.decoration, titleId = props.titleId, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.variant, variant = _b === void 0 ? 'primary' : _b, _c = props.component, LinkComponent = _c === void 0 ? 'a' : _c, propClasses = props.classes, children = props.children, sx = props.sx, propOnClick = props.onClick, _d = props.shouldCollapseSidebarOnClick, shouldCollapseSidebarOnClick = _d === void 0 ? true : _d, linkProps = __rest(props, ["title", "startIcon", "endIcon", "featureAvailability", "className", "decoration", "titleId", "isActive", "variant", "component", "classes", "children", "sx", "onClick", "shouldCollapseSidebarOnClick"]);
+    var theme = (0, use_theme_1.useTheme)();
+    var isLargeScreen = (0, use_media_query_1.useMediaQuery)(theme.breakpoints.up('lg'));
+    var sidebarCtx = (0, sidebar_context_1.useSidebarContext)();
+    var classes = (0, classes_1.useMergedClasses)(sidebar_link_classes_1.sidebarLinkClasses, sidebar_link_classes_1.getSidebarLinkUtilityClass, propClasses);
+    var handleClick = function (event) {
+        if (propOnClick) {
+            propOnClick(event);
+        }
+        if (!isLargeScreen && !sidebarCtx.collapsed && shouldCollapseSidebarOnClick) {
+            sidebarCtx.onCollapseChange();
+        }
+    };
+    return (React.createElement(Root, { ownerState: { collapsed: sidebarCtx.collapsed }, className: (0, clsx_1.default)(classes.root, className), sx: sx },
+        React.createElement(Link, __assign({ ref: ref, as: LinkComponent, title: typeof title === 'string' ? title : undefined, ownerState: { isActive: isActive, variant: variant }, className: classes.link, "aria-current": isActive ? 'page' : undefined, onClick: handleClick }, linkProps),
+            React.createElement(StartIcon, { className: (0, clsx_1.default)(classes.icon, classes.startIcon) }, startIcon),
+            React.createElement(Title, { id: titleId, className: sidebar_link_classes_1.sidebarLinkClasses.title }, title),
+            !!featureAvailability && (React.createElement(AvailabilityLabel, __assign({ className: classes.availabilityLabel }, getFeatureAvailabilityLabelProps(featureAvailability)))),
+            !!decoration && React.createElement(Decoration, { className: classes.decoration }, decoration),
+            !!endIcon && React.createElement(EndIcon, { className: (0, clsx_1.default)(classes.icon, classes.endIcon) }, endIcon)),
+        children));
+});

package/sidebar/sidebar-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { SidebarMenu } from './sidebar-menu';
+export type { ISidebarMenuProps } from './sidebar-menu';
+export { sidebarMenuClasses } from './sidebar-menu-classes';

package/sidebar/sidebar-menu/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarMenuClasses = exports.SidebarMenu = void 0;
+var sidebar_menu_1 = require("./sidebar-menu");
+Object.defineProperty(exports, "SidebarMenu", { enumerable: true, get: function () { return sidebar_menu_1.SidebarMenu; } });
+var sidebar_menu_classes_1 = require("./sidebar-menu-classes");
+Object.defineProperty(exports, "sidebarMenuClasses", { enumerable: true, get: function () { return sidebar_menu_classes_1.sidebarMenuClasses; } });

package/sidebar/sidebar-menu/sidebar-menu-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const sidebarMenuComponentName: "QuantumSidebarMenu";
+export declare function getSidebarMenuUtilityClass(slot: string): string;
+export declare const sidebarMenuClasses: Record<"region" | "icon" | "root" | "items" | "iconExpanded", string>;
+export declare type SidebarMenuClasses = typeof sidebarMenuClasses;
+export declare type SidebarMenuClassKey = keyof SidebarMenuClasses;

package/sidebar/sidebar-menu/sidebar-menu-classes.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarMenuClasses = exports.getSidebarMenuUtilityClass = exports.sidebarMenuComponentName = void 0;
+var classes_1 = require("../../styles/classes");
+exports.sidebarMenuComponentName = 'QuantumSidebarMenu';
+function getSidebarMenuUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.sidebarMenuComponentName, slot);
+}
+exports.getSidebarMenuUtilityClass = getSidebarMenuUtilityClass;
+exports.sidebarMenuClasses = (0, classes_1.generateUtilityClasses)(exports.sidebarMenuComponentName, [
+    'root',
+    'icon',
+    'iconExpanded',
+    'region',
+    'items',
+]);

package/sidebar/sidebar-menu/sidebar-menu.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ISidebarLinkProps } from '../sidebar-link';
+import { SidebarMenuClasses } from './sidebar-menu-classes';
+export interface ISidebarMenuProps<ItemComponent extends React.ElementType = 'a'> extends Omit<ISidebarLinkProps<'button'>, 'classes' | 'variant' | 'endIcon'> {
+    /**
+     * Convenience Prop for passing menu items. Maps to SidebarLink props
+     */
+    items?: Array<ISidebarLinkProps<ItemComponent> & {
+        component?: ItemComponent;
+    }>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<SidebarMenuClasses>;
+    /**
+     * Sets menu to expanded
+     * @default undefined
+     */
+    isExpanded?: boolean;
+    /**
+     * Sets menu to expanded by default. Used for uncontrolled menus.
+     * @default undefined
+     */
+    defaultIsExpanded?: boolean;
+    /**
+     * Callback executed when isExpanded changes
+     * @default undefined
+     */
+    onExpandChange?(newValue: boolean): void;
+}
+export declare function SidebarMenuImpl<LinkComponentType extends React.ElementType = 'a'>(props: ISidebarMenuProps<LinkComponentType>, ref: React.Ref<any>): JSX.Element;
+export declare const SidebarMenu: typeof SidebarMenuImpl;

package/sidebar/sidebar-menu/sidebar-menu.js

@@ -0,0 +1,136 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarMenu = exports.SidebarMenuImpl = void 0;
+var React = __importStar(require("react"));
+var collapse_1 = require("../../collapse");
+var icon_1 = require("../../icon");
+var sidebar_context_1 = require("../sidebar-context");
+var sidebar_link_1 = require("../sidebar-link");
+var styled_1 = require("../../styled");
+var clsx_1 = __importDefault(require("../../utils/clsx"));
+var use_controlled_1 = require("../../utils/use-controlled");
+var use_id_1 = require("../../utils/use-id");
+var sidebar_menu_classes_1 = require("./sidebar-menu-classes");
+var classes_1 = require("../../styles/classes");
+var Root = (0, styled_1.styled)(sidebar_link_1.SidebarLink, { name: sidebar_menu_classes_1.sidebarMenuComponentName, slot: 'Root' })({});
+var Items = (0, styled_1.styled)('ul', { name: sidebar_menu_classes_1.sidebarMenuComponentName, slot: 'Items' })({
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+});
+var Icon = (0, styled_1.styled)(icon_1.ChevronRightIcon, { name: sidebar_menu_classes_1.sidebarMenuComponentName, slot: 'Icon' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return ({
+        marginLeft: theme.spacing(1),
+        transition: theme.transitions.create(['transform'], { duration: theme.transitions.duration.shortest }),
+        transform: ownerState.expanded ? 'rotate(90deg)' : undefined,
+    });
+});
+// const useUtilityClasses = ({ classes, expanded }: ISidebarMenuProps<any> & { expanded?: boolean }) => {
+//   const slots = {
+//     root: ["root"],
+//     icon: ["icon", expanded && "iconExpanded"],
+//     region: ["region"],
+//     items: ["items"],
+//   };
+//   return composeClasses(slots, getSidebarMenuUtilityClass, classes as SidebarMenuClasses);
+// };
+function SidebarMenuImpl(props, ref) {
+    var sidebarCollapsed = (0, sidebar_context_1.useSidebarContext)().collapsed;
+    var className = props.className, propId = props.id, propClasses = props.classes, propIsExpanded = props.isExpanded, onExpandChange = props.onExpandChange, items = props.items, children = props.children, _a = props.defaultIsExpanded, defaultIsExpanded = _a === void 0 ? false : _a, rootProps = __rest(props, ["className", "id", "classes", "isExpanded", "onExpandChange", "items", "children", "defaultIsExpanded"]);
+    var sidebarCtx = (0, sidebar_context_1.useSidebarContext)();
+    var id = (0, use_id_1.useId)(propId);
+    var classes = (0, classes_1.useMergedClasses)(sidebar_menu_classes_1.sidebarMenuClasses, sidebar_menu_classes_1.getSidebarMenuUtilityClass, propClasses);
+    var titleId = "".concat(id, "-title");
+    var accordionId = "".concat(id, "-accordion");
+    var _b = __read((0, use_controlled_1.useControlled)({
+        controlled: propIsExpanded,
+        default: defaultIsExpanded,
+        name: 'SidebarMenuExpanded',
+    }), 2), isExpanded = _b[0], setIsExpanded = _b[1];
+    var isExpandedFinal = !sidebarCollapsed && isExpanded;
+    var handleExpandChange = function () {
+        var newValue = !isExpanded;
+        setIsExpanded(newValue);
+        if (onExpandChange) {
+            onExpandChange(newValue);
+        }
+        // open sidebar if we need to expand and sidebar is collapsed.
+        if (newValue && sidebarCtx.collapsed) {
+            sidebarCtx.onCollapseChange();
+        }
+    };
+    return (React.createElement(Root, __assign({}, rootProps, { id: id, ref: ref }, { component: 'button' }, { className: (0, clsx_1.default)(classes.root, className), "aria-current": undefined, onClick: handleExpandChange, titleId: titleId, endIcon: React.createElement(Icon, { ownerState: { expanded: isExpandedFinal }, className: (0, clsx_1.default)(classes.icon, isExpandedFinal && classes.iconExpanded) }), shouldCollapseSidebarOnClick: false, "aria-expanded": isExpandedFinal, "aria-controls": accordionId }),
+        React.createElement(collapse_1.Collapse, { in: isExpandedFinal },
+            React.createElement("div", { className: classes.region, role: "region", id: accordionId, "aria-labelledby": titleId },
+                React.createElement(Items, { className: classes.items }, items
+                    ? items.map(function (itemProps, i) { return React.createElement(sidebar_link_1.SidebarLink, __assign({ key: i }, itemProps, { variant: "secondary", startIcon: null })); })
+                    : children))),
+        !!items && children));
+}
+exports.SidebarMenuImpl = SidebarMenuImpl;
+exports.SidebarMenu = React.forwardRef(SidebarMenuImpl);

package/sidebar/sidebar-new.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ISidebarProps } from './sidebar-types';
+export declare const Sidebar: React.ForwardRefExoticComponent<Pick<ISidebarProps, "slot" | "style" | "title" | "anchor" | "color" | "hidden" | "open" | "transitionDuration" | "translate" | "className" | "classes" | "children" | "elevation" | "sx" | "variant" | "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" | "components" | "componentsProps" | "container" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "PaperProps" | "ModalProps" | "SlideProps" | "useNewCollapse" | "collapsed" | "defaultCollapsed" | "onCollapseChange" | "labels"> & React.RefAttributes<HTMLDivElement>>;

package/sidebar/sidebar-new.js

@@ -0,0 +1,199 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+var React = __importStar(require("react"));
+var drawer_1 = require("../drawer");
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var sidebar_classes_1 = require("./sidebar-classes");
+var sidebar_context_1 = require("./sidebar-context");
+var classes_1 = require("../styles/classes");
+var icon_1 = require("../icon");
+var tooltip_1 = require("../tooltip");
+var utils_1 = require("../utils");
+var Root = (0, styled_1.styled)(drawer_1.Drawer, { name: sidebar_classes_1.sidebarComponentName, slot: 'Root' })(function (_a) {
+    var _b, _c;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var enterTransition = {
+        easing: theme.transitions.easing.easeIn,
+        duration: theme.transitions.duration.leavingScreen,
+    };
+    var leavingTransition = {
+        easing: theme.transitions.easing.easeIn,
+        duration: theme.transitions.duration.leavingScreen,
+    };
+    var top = theme.tokens.size_layout_app_top + theme.tokens.size_layout_app_bar_height;
+    return _b = {
+            top: top,
+            zIndex: 20,
+            marginRight: theme.layout.sidebarWidthCollapsed,
+            transition: theme.transitions.create('margin', enterTransition),
+            willChange: 'margin'
+        },
+        _b[theme.breakpoints.up('lg')] = {
+            marginRight: ownerState.collapsed ? theme.layout.sidebarWidthCollapsed : theme.layout.sidebarWidth,
+            transition: theme.transitions.create('margin', leavingTransition),
+        },
+        _b["& .".concat(sidebar_classes_1.sidebarClasses.paper)] = (_c = {
+                top: top,
+                overflowX: 'hidden',
+                bottom: 0,
+                height: 'auto',
+                width: theme.layout.sidebarWidth,
+                boxShadow: '16px 0px 16px rgba(0, 0, 0, 0.1)',
+                willChange: 'margin, box-shadow',
+                transition: theme.transitions.create(['width', 'box-shadow'], leavingTransition),
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between'
+            },
+            _c[theme.breakpoints.up('lg')] = {
+                boxShadow: 'none',
+            },
+            _c["&.".concat(sidebar_classes_1.sidebarClasses.paperHovered)] = {
+                width: theme.layout.sidebarWidth,
+            },
+            _c["&.".concat(sidebar_classes_1.sidebarClasses.paperCollapsed)] = {
+                boxShadow: 'none',
+                transition: theme.transitions.create(['width', 'box-shadow'], enterTransition),
+                width: theme.layout.sidebarWidthCollapsed,
+            },
+            _c),
+        _b;
+});
+var SidebarContent = (0, styled_1.styled)('div')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(3, 2, 2),
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        flex: 1,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+    });
+});
+var SidebarCollapse = (0, styled_1.styled)('button')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        border: 0,
+        flexShrink: 0,
+        color: theme.tokens.color_fg_link,
+        borderTop: "1px solid ".concat(theme.tokens.color_border_default),
+        backgroundColor: theme.tokens.color_bg_interactive,
+        padding: theme.spacing(2),
+        display: 'flex',
+        justifyContent: 'flex-end',
+        cursor: 'pointer',
+        fontSize: theme.typography.pxToRem(16),
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+            duration: theme.transitions.duration.shortest,
+        }),
+        '&:focus-visible': __assign({ outline: 'none' }, theme.mixins.focusRing({ type: 'inset' })),
+        '&:hover': {
+            backgroundColor: theme.tokens.color_bg_interactive_hover,
+        },
+    });
+});
+var SidebarCollapseIcon = (0, styled_1.styled)('span')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        height: theme.typography.pxToRem(36),
+        width: theme.typography.pxToRem(36),
+        fontSize: theme.typography.pxToRem(20),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    });
+});
+exports.Sidebar = React.forwardRef(function (props, ref) {
+    var propisCollapsed = props.collapsed, children = props.children, className = props.className, onCollapseChange = props.onCollapseChange, _a = props.defaultCollapsed, defaultCollapsed = _a === void 0 ? false : _a, _b = props.PaperProps, PaperProps = _b === void 0 ? {} : _b, _c = props["aria-label"], ariaLabel = _c === void 0 ? 'primary navigation' : _c, propClasses = props.classes, _d = props.labels, _e = _d === void 0 ? {} : _d, _f = _e.collapse, collapseLabel = _f === void 0 ? 'Collapse navigation' : _f, _g = _e.expand, expandLabel = _g === void 0 ? 'Expand navigation' : _g, drawerProps = __rest(props, ["collapsed", "children", "className", "onCollapseChange", "defaultCollapsed", "PaperProps", 'aria-label', "classes", "labels"]);
+    var _h = __read((0, utils_1.useControlled)({
+        controlled: propisCollapsed,
+        default: defaultCollapsed,
+        name: 'SidebarCollapsed',
+    }), 2), isCollapsed = _h[0], setIsCollapsed = _h[1];
+    var classes = (0, classes_1.useMergedClasses)(sidebar_classes_1.sidebarClasses, sidebar_classes_1.getSidebarUtilityClass, propClasses);
+    var handleCollapseChange = React.useCallback(function () {
+        var newValue = !isCollapsed;
+        setIsCollapsed(newValue);
+        if (onCollapseChange) {
+            onCollapseChange(newValue);
+        }
+    }, [isCollapsed, setIsCollapsed, onCollapseChange]);
+    var contextValue = React.useMemo(function () { return ({
+        expanded: !isCollapsed,
+        collapsed: isCollapsed,
+        onCollapseChange: handleCollapseChange,
+    }); }, [isCollapsed, handleCollapseChange]);
+    return (React.createElement(sidebar_context_1.SidebarContext.Provider, { value: contextValue },
+        React.createElement(Root, __assign({ ref: ref, ownerState: { collapsed: isCollapsed }, className: (0, clsx_1.default)(classes.root, className), anchor: "left", variant: "permanent", PaperProps: __assign(__assign(__assign({ component: 'nav' }, { 'aria-label': ariaLabel }), PaperProps), { className: (0, clsx_1.default)(classes.paper, isCollapsed && classes.paperCollapsed, PaperProps.className) }) }, drawerProps),
+            React.createElement(SidebarContent, { sx: { flex: 1 } }, children),
+            React.createElement(tooltip_1.Tooltip, { enterDelay: isCollapsed ? 2000 : undefined, leaveDelay: 0, title: isCollapsed ? expandLabel : collapseLabel, placement: "right" },
+                React.createElement(SidebarCollapse, { onClick: handleCollapseChange },
+                    React.createElement(SidebarCollapseIcon, null, isCollapsed ? React.createElement(icon_1.ChevronsRightIcon, null) : React.createElement(icon_1.ChevronsLeftIcon, null)))))));
+});

package/sidebar/sidebar-old.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ISidebarProps } from './sidebar-types';
+export declare const Sidebar: React.ForwardRefExoticComponent<Pick<ISidebarProps, "slot" | "style" | "title" | "anchor" | "color" | "hidden" | "open" | "transitionDuration" | "translate" | "className" | "classes" | "children" | "elevation" | "sx" | "variant" | "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" | "components" | "componentsProps" | "container" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "PaperProps" | "ModalProps" | "SlideProps" | "useNewCollapse" | "collapsed" | "defaultCollapsed" | "onCollapseChange" | "labels"> & React.RefAttributes<HTMLDivElement>>;