@auth0/quantum-product 1.5.1

package/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.js

@@ -0,0 +1,202 @@
+"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.DropdownMenuListItem = void 0;
+var React = __importStar(require("react"));
+var dropdown_menu_context_1 = require("../dropdown-menu-context");
+var icon_1 = require("../../icon");
+var menu_1 = require("../../menu");
+var styled_1 = require("../../styled");
+var clsx_1 = __importDefault(require("../../utils/clsx"));
+var dropdown_menu_list_item_classes_1 = require("./dropdown-menu-list-item-classes");
+var classes_1 = require("../../styles/classes");
+var Root = (0, styled_1.styled)(menu_1.MenuItem, { name: dropdown_menu_list_item_classes_1.dropdownMenuListItemComponentName, slot: 'Root' })(function (_a) {
+    var _b, _c, _d, _e;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, theme.typography.caption), { fontWeight: theme.typography.fontWeightRegular, color: theme.tokens.color_fg_link_subtle, height: 'auto', display: 'flex', alignItems: 'center', width: '100%', padding: theme.spacing(0.5, 1), borderRadius: 6, transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
+            duration: theme.transitions.duration.shortest,
+        }), '&:active,&:hover': {
+            color: theme.tokens.color_fg_link_subtle_hover,
+            backgroundColor: theme.tokens.color_bg_interactive_hover,
+            boxShadow: 'none',
+        }, '&:focus:not(:active)': __assign({ backgroundColor: 'transparent' }, theme.mixins.focusRing()), '&.Mui-selected': {
+            color: theme.tokens.color_fg_selected,
+            backgroundColor: 'transparent',
+            '& $startIcon': {
+                color: 'currentColor',
+            },
+            '&:active,&:hover': {
+                backgroundColor: theme.tokens.color_bg_interactive_hover,
+                color: theme.tokens.color_fg_selected,
+                '& $startIcon': {
+                    color: 'currentColor',
+                },
+            },
+            '&.Mui-disabled': {
+                color: theme.tokens.color_fg_disabled,
+                backgroundColor: 'transparent',
+            },
+        }, '&.Mui-disabled': {
+            opacity: 1,
+            color: theme.tokens.color_fg_disabled,
+        } }), (ownerState.size === 'large' && {
+        padding: theme.spacing(0.75, 1.5),
+    })), (ownerState.color === 'danger' && (_b = {
+            color: theme.tokens.color_fg_link_danger
+        },
+        _b["& .".concat(dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses.startIcon, ", & .").concat(dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses.endIcon)] = {
+            color: 'currentColor',
+        },
+        _b['&:active,&:hover'] = {
+            color: theme.tokens.color_fg_link_danger_hover,
+            backgroundColor: theme.tokens.color_bg_link_danger_hover,
+        },
+        _b['&:focus:not(:active)'] = __assign({ backgroundColor: 'transparent' }, theme.mixins.focusRing({ color: theme.tokens.color_border_focus_state_danger })),
+        _b['&:$disabled'] = {},
+        _b))), (ownerState.selected && (_c = {},
+        _c["& .".concat(dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses.selected)] = {},
+        _c))), (ownerState.disabled && (_d = {},
+        _d["& .".concat(dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses.disabled)] = {},
+        _d))), (_e = {}, _e["& .".concat(dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses.icon)] = {
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: theme.typography.pxToRem(16),
+        '& > svg': {
+            height: '1em',
+            width: '1em',
+        },
+    }, _e)));
+});
+var StartIcon = (0, styled_1.styled)('div', { name: dropdown_menu_list_item_classes_1.dropdownMenuListItemComponentName, slot: 'StartIcon' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginRight: theme.spacing(1),
+        color: theme.tokens.color_fg_default,
+    });
+});
+var EndIcon = (0, styled_1.styled)('div', { name: dropdown_menu_list_item_classes_1.dropdownMenuListItemComponentName, slot: 'EndIcon' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+        color: theme.tokens.color_fg_decorative,
+    });
+});
+var Content = (0, styled_1.styled)('div', { name: dropdown_menu_list_item_classes_1.dropdownMenuListItemComponentName, slot: 'Content' })({
+    flex: 1,
+    overflow: 'hidden',
+});
+var Title = (0, styled_1.styled)('div', { name: dropdown_menu_list_item_classes_1.dropdownMenuListItemComponentName, slot: 'Title' })(function (_a) {
+    var ownerState = _a.ownerState, theme = _a.theme;
+    return ({
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontWeight: ownerState.isDetailed ? theme.typography.fontWeightMedium : undefined,
+    });
+});
+var Description = (0, styled_1.styled)('div', { name: dropdown_menu_list_item_classes_1.dropdownMenuListItemComponentName, slot: 'Description' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.tokens.color_fg_default,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    });
+});
+var SelectedIcon = (0, styled_1.styled)('div', { name: dropdown_menu_list_item_classes_1.dropdownMenuListItemComponentName, slot: 'SelectedIcon' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+        color: theme.tokens.color_fg_selected,
+    });
+});
+exports.DropdownMenuListItem = React.forwardRef(function (props, ref) {
+    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes"]);
+    var classes = (0, classes_1.useMergedClasses)(dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses, dropdown_menu_list_item_classes_1.getDropdownMenuListItemUtilityClass, propClasses);
+    var _b = (0, dropdown_menu_context_1.useDropdownMenuContext)(), size = _b.size, onSelectItem = _b.onSelectItem;
+    var isDetailed = !!description;
+    var titleContent = title || children;
+    var ComponentProp = component;
+    if (ComponentProp === 'button' && rootProps.href) {
+        ComponentProp = 'a';
+    }
+    var buttonProps = {};
+    if (ComponentProp === 'button') {
+        buttonProps.type = 'button';
+        buttonProps.disabled = disabled;
+    }
+    else {
+        if (ComponentProp !== 'a' || !rootProps.href) {
+            buttonProps.role = 'button';
+        }
+        buttonProps['aria-disabled'] = disabled;
+    }
+    var handleItemClick = function (event) {
+        onSelectItem();
+        if (rootProps.onClick) {
+            rootProps.onClick(event);
+        }
+    };
+    var ownerState = {
+        size: size,
+        isDetailed: isDetailed,
+        selected: selected,
+        color: color,
+        disabled: disabled,
+    };
+    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: (0, clsx_1.default)(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps),
+        !!startIcon && React.createElement(StartIcon, { className: (0, clsx_1.default)(classes.icon, classes.startIcon) }, startIcon),
+        React.createElement(Content, { className: classes.content },
+            React.createElement(Title, { ownerState: { isDetailed: isDetailed }, className: classes.title }, titleContent),
+            !!description && React.createElement(Description, { className: classes.description }, description)),
+        !!endIcon && React.createElement(EndIcon, { className: (0, clsx_1.default)(classes.icon, classes.endIcon) }, endIcon),
+        !!selected && (React.createElement(SelectedIcon, { className: (0, clsx_1.default)(classes.icon, classes.selectedIcon) },
+            React.createElement(icon_1.CheckIcon, null)))));
+});

package/dropdown-menu/dropdown-menu-list-item/index.d.ts

@@ -0,0 +1,3 @@
+export { DropdownMenuListItem } from './dropdown-menu-list-item';
+export type { IDropdownMenuListItemProps } from './dropdown-menu-list-item';
+export { dropdownMenuListItemClasses } from './dropdown-menu-list-item-classes';

package/dropdown-menu/dropdown-menu-list-item/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdownMenuListItemClasses = exports.DropdownMenuListItem = void 0;
+var dropdown_menu_list_item_1 = require("./dropdown-menu-list-item");
+Object.defineProperty(exports, "DropdownMenuListItem", { enumerable: true, get: function () { return dropdown_menu_list_item_1.DropdownMenuListItem; } });
+var dropdown_menu_list_item_classes_1 = require("./dropdown-menu-list-item-classes");
+Object.defineProperty(exports, "dropdownMenuListItemClasses", { enumerable: true, get: function () { return dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses; } });

package/dropdown-menu/dropdown-menu-search/dropdown-menu-search-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const dropdownMenuSearchComponentName: "QuantumDropdownMenuSearch";
+export declare function getDropdownMenuSearchUtilityClass(slot: string): string;
+export declare const dropdownMenuSearchClasses: Record<"input" | "root", string>;
+export declare type DropdownMenuSearchClasses = typeof dropdownMenuSearchClasses;
+export declare type DropdownMenuSearchClassKey = keyof DropdownMenuSearchClasses;

package/dropdown-menu/dropdown-menu-search/dropdown-menu-search-classes.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdownMenuSearchClasses = exports.getDropdownMenuSearchUtilityClass = exports.dropdownMenuSearchComponentName = void 0;
+var classes_1 = require("../../styles/classes");
+exports.dropdownMenuSearchComponentName = 'QuantumDropdownMenuSearch';
+function getDropdownMenuSearchUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.dropdownMenuSearchComponentName, slot);
+}
+exports.getDropdownMenuSearchUtilityClass = getDropdownMenuSearchUtilityClass;
+exports.dropdownMenuSearchClasses = (0, classes_1.generateUtilityClasses)(exports.dropdownMenuSearchComponentName, ['root', 'input']);

package/dropdown-menu/dropdown-menu-search/dropdown-menu-search.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IInputProps } from '../../input';
+import { IStyledComponentProps } from '../../styled';
+import { DropdownMenuSearchClasses } from './dropdown-menu-search-classes';
+declare type InputPropKeys = 'aria-label' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'placeholder' | 'inputRef';
+export declare type IDropdownMenuSearchProps = IStyledComponentProps<{
+    props: Pick<IInputProps, InputPropKeys> & {
+        InputProps?: Partial<IInputProps>;
+        classes?: Partial<DropdownMenuSearchClasses>;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const DropdownMenuSearch: React.ForwardRefExoticComponent<Pick<IInputProps, InputPropKeys> & {
+    InputProps?: Partial<IInputProps> | undefined;
+    classes?: Partial<Record<"input" | "root", string>> | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "classes" | "InputProps" | InputPropKeys> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dropdown-menu/dropdown-menu-search/dropdown-menu-search.js

@@ -0,0 +1,77 @@
+"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.DropdownMenuSearch = void 0;
+var React = __importStar(require("react"));
+var dropdown_menu_context_1 = require("../dropdown-menu-context");
+var icon_1 = require("../../icon");
+var input_1 = require("../../input");
+var styled_1 = require("../../styled");
+var clsx_1 = __importDefault(require("../../utils/clsx"));
+var dropdown_menu_search_classes_1 = require("./dropdown-menu-search-classes");
+var classes_1 = require("../../styles/classes");
+var Root = (0, styled_1.styled)('div', { name: dropdown_menu_search_classes_1.dropdownMenuSearchComponentName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(0, 0, 1),
+    });
+});
+exports.DropdownMenuSearch = React.forwardRef(function (props, ref) {
+    var _a = props["aria-label"], ariaLabel = _a === void 0 ? 'Search' : _a, defaultValue = props.defaultValue, inputRef = props.inputRef, onBlur = props.onBlur, onChange = props.onChange, placeholder = props.placeholder, value = props.value, className = props.className, _b = props.InputProps, InputProps = _b === void 0 ? {} : _b, propClasses = props.classes, 
+    // MenuList adds this. We need to remove to avoid focus
+    rootProps = __rest(props, ['aria-label', "defaultValue", "inputRef", "onBlur", "onChange", "placeholder", "value", "className", "InputProps", "classes"]);
+    var classes = (0, classes_1.useMergedClasses)(dropdown_menu_search_classes_1.dropdownMenuSearchClasses, dropdown_menu_search_classes_1.getDropdownMenuSearchUtilityClass, propClasses);
+    var size = (0, dropdown_menu_context_1.useDropdownMenuContext)().size;
+    return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root, className), ownerState: { size: size } }, rootProps),
+        React.createElement(input_1.Input, __assign({ autoFocus: true, fullWidth: true, size: "small", "aria-label": ariaLabel, className: classes.input, defaultValue: defaultValue, inputRef: inputRef, onBlur: onBlur, onChange: onChange, placeholder: placeholder, value: value, inputProps: {
+                tabIndex: 1,
+            }, startAdornment: React.createElement(input_1.InputAdornment, { position: "start" },
+                React.createElement(icon_1.SearchIcon, { size: "1em" })) }, InputProps))));
+});

package/dropdown-menu/dropdown-menu-search/index.d.ts

@@ -0,0 +1,3 @@
+export { DropdownMenuSearch } from './dropdown-menu-search';
+export type { IDropdownMenuSearchProps } from './dropdown-menu-search';
+export { dropdownMenuSearchClasses } from './dropdown-menu-search-classes';

package/dropdown-menu/dropdown-menu-search/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdownMenuSearchClasses = exports.DropdownMenuSearch = void 0;
+var dropdown_menu_search_1 = require("./dropdown-menu-search");
+Object.defineProperty(exports, "DropdownMenuSearch", { enumerable: true, get: function () { return dropdown_menu_search_1.DropdownMenuSearch; } });
+var dropdown_menu_search_classes_1 = require("./dropdown-menu-search-classes");
+Object.defineProperty(exports, "dropdownMenuSearchClasses", { enumerable: true, get: function () { return dropdown_menu_search_classes_1.dropdownMenuSearchClasses; } });

package/dropdown-menu/dropdown-menu-state/dropdown-menu-state.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IDropdownMenuProps as IDropdownMenuComponentProps } from '../dropdown-menu';
+export interface IDropdownMenuTriggerProps {
+    'aria-controls'?: string;
+    'aria-haspopup'?: 'menu';
+    'aria-expanded'?: boolean;
+    id?: string;
+    onClick(event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+}
+export declare type IDropdownMenuProps = Pick<IDropdownMenuComponentProps, 'open' | 'anchorEl' | 'onClose' | 'id'>;
+export interface IDropdownMenuStateValue {
+    triggerProps: IDropdownMenuTriggerProps;
+    menuProps: IDropdownMenuProps;
+}
+export interface IDropdownMenuStateProps {
+    baseId?: string;
+}
+export declare const useDropdownMenuState: ({ baseId: propBaseId }: IDropdownMenuStateProps) => IDropdownMenuStateValue;
+interface IDropdownMenuStateProviderProps extends IDropdownMenuStateProps {
+    children?: React.ReactNode | ((state: IDropdownMenuStateValue) => React.ReactNode);
+}
+export declare const DropdownMenuStateContext: React.Context<IDropdownMenuStateValue>;
+export declare const useDropdownMenuStateContext: () => IDropdownMenuStateValue;
+export declare const DropdownMenuStateProvider: ({ children, ...props }: IDropdownMenuStateProviderProps) => JSX.Element;
+export {};

package/dropdown-menu/dropdown-menu-state/dropdown-menu-state.js

@@ -0,0 +1,96 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuStateProvider = exports.useDropdownMenuStateContext = exports.DropdownMenuStateContext = exports.useDropdownMenuState = void 0;
+var React = __importStar(require("react"));
+var use_id_1 = require("../../utils/use-id");
+var useDropdownMenuState = function (_a) {
+    var propBaseId = _a.baseId;
+    var baseId = (0, use_id_1.useId)(propBaseId);
+    var triggerId = "".concat(baseId, "-trigger");
+    var menuId = "".concat(baseId, "-menu");
+    var _b = __read(React.useState(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
+    var handleTriggerClick = function (event) {
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+    };
+    var handleMenuClose = function () { return setAnchorEl(null); };
+    var isOpen = !!anchorEl;
+    return {
+        triggerProps: {
+            onClick: handleTriggerClick,
+            id: triggerId,
+            'aria-controls': menuId,
+            'aria-haspopup': 'menu',
+            'aria-expanded': isOpen,
+        },
+        menuProps: {
+            anchorEl: anchorEl,
+            open: isOpen,
+            onClose: handleMenuClose,
+            id: menuId,
+        },
+    };
+};
+exports.useDropdownMenuState = useDropdownMenuState;
+exports.DropdownMenuStateContext = React.createContext({
+    triggerProps: { onClick: function () { return undefined; } },
+    menuProps: { open: false },
+});
+var useDropdownMenuStateContext = function () { return React.useContext(exports.DropdownMenuStateContext); };
+exports.useDropdownMenuStateContext = useDropdownMenuStateContext;
+var DropdownMenuStateProvider = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var state = (0, exports.useDropdownMenuState)(props);
+    return (React.createElement(exports.DropdownMenuStateContext.Provider, { value: state }, typeof children === 'function' ? children(state) : children));
+};
+exports.DropdownMenuStateProvider = DropdownMenuStateProvider;

package/dropdown-menu/dropdown-menu-state/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenuStateContext, DropdownMenuStateProvider, useDropdownMenuState, useDropdownMenuStateContext, } from './dropdown-menu-state';
+export type { IDropdownMenuStateProps, IDropdownMenuStateValue, IDropdownMenuTriggerProps, } from './dropdown-menu-state';

package/dropdown-menu/dropdown-menu-state/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdownMenuStateContext = exports.useDropdownMenuState = exports.DropdownMenuStateProvider = exports.DropdownMenuStateContext = void 0;
+var dropdown_menu_state_1 = require("./dropdown-menu-state");
+Object.defineProperty(exports, "DropdownMenuStateContext", { enumerable: true, get: function () { return dropdown_menu_state_1.DropdownMenuStateContext; } });
+Object.defineProperty(exports, "DropdownMenuStateProvider", { enumerable: true, get: function () { return dropdown_menu_state_1.DropdownMenuStateProvider; } });
+Object.defineProperty(exports, "useDropdownMenuState", { enumerable: true, get: function () { return dropdown_menu_state_1.useDropdownMenuState; } });
+Object.defineProperty(exports, "useDropdownMenuStateContext", { enumerable: true, get: function () { return dropdown_menu_state_1.useDropdownMenuStateContext; } });

package/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IDropdownMenuListProps } from './dropdown-menu-list';
+import { IPopoverProps } from '../popover';
+import { IDropdownMenuContextValue } from './dropdown-menu-context';
+import { DropdownMenuClasses } from './dropdown-menu-classes';
+export interface IDropdownMenuProps extends Omit<IPopoverProps, 'classes'>, Partial<Pick<IDropdownMenuContextValue, 'size'>>, Pick<IDropdownMenuListProps, 'items'> {
+    children?: React.ReactNode;
+    /** @default right */
+    placement?: 'left' | 'right';
+    /** @default true */
+    closeOnSelect?: boolean;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    onClose?(event: {}, reason: 'backdropClick' | 'escapeKeyDown' | 'itemSelect'): void;
+    classes?: Partial<DropdownMenuClasses>;
+}
+export declare const DropdownMenu: React.ForwardRefExoticComponent<Pick<IDropdownMenuProps, "slot" | "style" | "title" | "color" | "action" | "hidden" | "size" | "open" | "maxHeight" | "maxWidth" | "transformOrigin" | "transitionDuration" | "translate" | "className" | "classes" | "children" | "elevation" | "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" | "components" | "componentsProps" | "anchorOrigin" | "container" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "anchorEl" | "anchorPosition" | "anchorReference" | "marginThreshold" | "PaperProps" | "TransitionComponent" | "TransitionProps" | "placement" | "items" | "closeOnSelect"> & React.RefAttributes<HTMLDivElement>>;

package/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,89 @@
+"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.DropdownMenu = void 0;
+var React = __importStar(require("react"));
+var dropdown_menu_list_1 = require("./dropdown-menu-list");
+var popover_1 = require("../popover");
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var dropdown_menu_context_1 = require("./dropdown-menu-context");
+var dropdown_menu_classes_1 = require("./dropdown-menu-classes");
+var backdrop_1 = require("../backdrop");
+var classes_1 = require("../styles/classes");
+var Root = (0, styled_1.styled)(popover_1.Popover, { name: dropdown_menu_classes_1.dropdownMenuComponentName, slot: 'Root' })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (_b = {
+            marginTop: theme.spacing(0.5)
+        },
+        _b["& .".concat(dropdown_menu_classes_1.dropdownMenuClasses.paper)] = __assign({ 
+            // taken from MUI's menu component
+            maxHeight: 'calc(100% - 96px)', minWidth: theme.typography.pxToRem(180), WebkitOverflowScrolling: 'touch', padding: theme.spacing(1), borderRadius: 8, border: "1px solid ".concat(theme.tokens.color_border_default), borderColor: theme.tokens.color_border_default, boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.07), 0px 13.7866px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 7.37098px 17.869px rgba(0, 0, 0, 0.0417275), 0px 4.13211px 10.0172px rgba(0, 0, 0, 0.035), 0px 2.19453px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.913195px 2.21381px rgba(0, 0, 0, 0.0196802)" }, (ownerState.size === 'large' && {
+            padding: theme.spacing(1.5),
+            minWidth: theme.typography.pxToRem(260),
+        })),
+        _b["& .".concat(backdrop_1.backdropClasses.invisible)] = {
+            backgroundColor: 'transparent',
+        },
+        _b);
+});
+exports.DropdownMenu = React.forwardRef(function (props, ref) {
+    var _a = props.size, size = _a === void 0 ? 'default' : _a, _b = props.placement, placement = _b === void 0 ? 'right' : _b, onClose = props.onClose, _c = props.closeOnSelect, closeOnSelect = _c === void 0 ? true : _c, items = props.items, maxHeight = props.maxHeight, maxWidth = props.maxWidth, children = props.children, className = props.className, _d = props.PaperProps, PaperProps = _d === void 0 ? {} : _d, propClasses = props.classes, rootProps = __rest(props, ["size", "placement", "onClose", "closeOnSelect", "items", "maxHeight", "maxWidth", "children", "className", "PaperProps", "classes"]);
+    var classes = (0, classes_1.useMergedClasses)(dropdown_menu_classes_1.dropdownMenuClasses, dropdown_menu_classes_1.getDropdownMenuUtilityClass, propClasses);
+    var handleItemSelect = function () {
+        if (closeOnSelect && onClose) {
+            onClose({}, 'itemSelect');
+        }
+    };
+    return (React.createElement(dropdown_menu_context_1.DropdownMenuContext.Provider, { value: { size: size, onSelectItem: handleItemSelect } },
+        React.createElement(Root, __assign({ className: (0, clsx_1.default)(classes.root, className), ownerState: { size: size }, ref: ref, transitionDuration: "auto", onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: placement }, transformOrigin: { vertical: 'top', horizontal: placement }, BackdropProps: { invisible: true }, PaperProps: maxHeight || maxWidth
+                ? __assign(__assign({}, PaperProps), { style: { maxHeight: maxHeight, maxWidth: maxWidth }, className: classes.paper }) : __assign(__assign({}, PaperProps), { className: classes.paper }) }, rootProps), items ? React.createElement(dropdown_menu_list_1.DropdownMenuList, { items: items }) : children)));
+});

package/dropdown-menu/index.d.ts

@@ -0,0 +1,12 @@
+export { DropdownMenu } from './dropdown-menu';
+export type { IDropdownMenuProps } from './dropdown-menu';
+export { DropdownMenuContext, useDropdownMenuContext } from './dropdown-menu-context';
+export type { IDropdownMenuContextValue } from './dropdown-menu-context';
+export { dropdownMenuClasses } from './dropdown-menu-classes';
+export * from './dropdown-menu-divider';
+export * from './dropdown-menu-group';
+export * from './dropdown-menu-item';
+export * from './dropdown-menu-list';
+export * from './dropdown-menu-list-item';
+export * from './dropdown-menu-search';
+export * from './dropdown-menu-state';