@auth0/quantum-product 2.7.1 → 2.8.0

package/esm/pagination/checkpoint-pagination/CheckpointPagination.js

@@ -0,0 +1,58 @@
+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 { IconButton } from '../../icon-button';
+import { ChevronLeftIcon, ChevronRightIcon } from '../../icon';
+import { StackLayout } from '../../stack-layout';
+import { styled } from '../../styled';
+import { useMergedClasses } from '../../styles/classes';
+import clsx from '../../utils/clsx';
+import { getCheckpointPaginationUtilityClass, checkpointPaginationClasses, checkpointPaginationComponentName, } from './checkpoint-pagination-classes';
+var Root = styled('div', { name: checkpointPaginationComponentName, slot: 'Root' })(function () { return ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+}); });
+export var CheckpointPagination = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, cursor = props.cursor, hasMore = props.hasMore, hasPrevious = props.hasPrevious, onNext = props.onNext, onPrevious = props.onPrevious, propClasses = props.classes, _a = props.nextButtonLabel, nextButtonLabel = _a === void 0 ? 'Next Page' : _a, _b = props.previousButtonLabel, previousButtonLabel = _b === void 0 ? 'Previous Page' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, rootProps = __rest(props, ["children", "className", "cursor", "hasMore", "hasPrevious", "onNext", "onPrevious", "classes", "nextButtonLabel", "previousButtonLabel", "size"]);
+    var classes = useMergedClasses(checkpointPaginationClasses, getCheckpointPaginationUtilityClass, propClasses);
+    var isPreviousDisabled = !hasPrevious;
+    var isNextDisabled = !hasMore;
+    var handleNext = function () {
+        if (!isNextDisabled && cursor) {
+            onNext(cursor);
+        }
+    };
+    var handlePrevious = function () {
+        if (!isPreviousDisabled && onPrevious && cursor) {
+            onPrevious(cursor);
+        }
+    };
+    return (React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className) }, rootProps),
+        React.createElement(StackLayout, { gutter: 1 },
+            React.createElement(IconButton, { variant: "outlined", size: size, className: classes.previousButton, onClick: handlePrevious, disabled: isPreviousDisabled, label: previousButtonLabel },
+                React.createElement(ChevronLeftIcon, null)),
+            React.createElement(IconButton, { variant: "outlined", size: size, className: classes.nextButton, onClick: handleNext, disabled: isNextDisabled, label: nextButtonLabel },
+                React.createElement(ChevronRightIcon, null)))));
+});
+CheckpointPagination.displayName = 'CheckpointPagination';

package/esm/pagination/checkpoint-pagination/checkpoint-pagination-classes.js

@@ -0,0 +1,10 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var checkpointPaginationComponentName = 'QuantumCheckpointPagination';
+export function getCheckpointPaginationUtilityClass(slot) {
+    return generateUtilityClass(checkpointPaginationComponentName, slot);
+}
+export var checkpointPaginationClasses = generateUtilityClasses(checkpointPaginationComponentName, [
+    'root',
+    'previousButton',
+    'nextButton',
+]);

package/esm/pagination/index.js

@@ -1,3 +1,5 @@
 export * from './pager';
 export { Pagination } from './pagination';
 export { paginationClasses } from './pagination-classes';
+export { CheckpointPagination } from './checkpoint-pagination/CheckpointPagination';
+export { checkpointPaginationClasses } from './checkpoint-pagination/checkpoint-pagination-classes';

package/esm/select-dropdown/index.js

@@ -0,0 +1 @@
+export * from './select-dropdown';

package/esm/select-dropdown/select-dropdown.js

@@ -0,0 +1,130 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { useCallback, useMemo, useState, useRef } from 'react';
+import { Box } from '@mui/material';
+import { Button } from '../button';
+import { Select } from '../select';
+import { Text } from '../text';
+import { DropdownMenu } from '../dropdown-menu';
+import { ChevronDownIcon } from '../icon';
+export var SelectDropdown = React.forwardRef(function (props, ref) {
+    var _a;
+    var propSelectedValue = props.selectedValue, onValueChange = props.onValueChange, triggerLabel = props.triggerLabel, _b = props.clearButtonLabel, clearButtonLabel = _b === void 0 ? 'Clear' : _b, className = props.className, options = props.options, rootProps = __rest(props, ["selectedValue", "onValueChange", "triggerLabel", "clearButtonLabel", "className", "options"]);
+    var _c = __read(useState(null), 2), internalSelectedValue = _c[0], setInternalSelectedValue = _c[1];
+    var _d = __read(useState(false), 2), isOpen = _d[0], setIsOpen = _d[1];
+    var selectRef = useRef(null);
+    // Use internal state if external props are not provided
+    var selectedValue = propSelectedValue !== undefined ? propSelectedValue : internalSelectedValue;
+    var handleItemSelect = useCallback(function (value) {
+        if (propSelectedValue === undefined) {
+            setInternalSelectedValue(value);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
+        setIsOpen(false);
+    }, [propSelectedValue, onValueChange]);
+    var handleClear = useCallback(function () {
+        if (propSelectedValue === undefined) {
+            setInternalSelectedValue(null);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(null);
+        setIsOpen(false);
+    }, [propSelectedValue, onValueChange]);
+    var handleTriggerClick = function () {
+        setIsOpen(!isOpen);
+    };
+    // Create dropdown items using the quantum DropdownMenu pattern
+    var dropdownItems = useMemo(function () { return __spreadArray(__spreadArray([], __read(options.map(function (option) {
+        var isSelected = selectedValue === option.key;
+        return {
+            title: option.label,
+            onClick: option.disabled ? undefined : function () { return handleItemSelect(option.key); },
+            selected: isSelected,
+            disabled: option.disabled,
+            startIcon: option.icon,
+            color: option.color ? 'danger' : 'default',
+        };
+    })), false), [
+        {
+            type: 'divider',
+        },
+        {
+            title: (React.createElement(Button, { variant: "link", size: "small", onClick: handleClear, style: {
+                    justifyContent: 'flex-end',
+                    width: '100%',
+                    display: 'flex',
+                } }, clearButtonLabel)),
+        },
+    ], false); }, [options, handleItemSelect, selectedValue, clearButtonLabel, handleClear]);
+    return (React.createElement(Box, __assign({ ref: ref, className: className }, rootProps),
+        React.createElement(Select, { ref: selectRef, key: selectedValue, label: triggerLabel, value: selectedValue, onChange: function () {
+                // Disable native select onChange completely
+            }, onClick: handleTriggerClick, onMouseDown: function (e) {
+                e.preventDefault();
+                handleTriggerClick();
+            }, tabIndex: 0, options: options.map(function (option) { return ({
+                text: option.label,
+                value: option.key,
+                disabled: option.disabled,
+            }); }), useCustomMenu: true, IconComponent: ChevronDownIcon, prefix: React.createElement(Text, { fontWeight: "medium" }, selectedValue
+                ? "".concat(triggerLabel, ": ").concat(((_a = options.find(function (option) { return option.key === selectedValue; })) === null || _a === void 0 ? void 0 : _a.label) || selectedValue)
+                : triggerLabel), size: "small" }),
+        React.createElement(DropdownMenu, { items: dropdownItems, open: isOpen, anchorEl: selectRef.current, onClose: function () { return setIsOpen(false); }, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left',
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'left',
+            }, sx: {
+                '& .base-QuantumDropdownMenu-paper': {
+                    minWidth: '240px',
+                    maxHeight: '480px',
+                },
+            } })));
+});
+SelectDropdown.displayName = 'SelectDropdown';

package/package.json

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

package/pagination/checkpoint-pagination/CheckpointPagination.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../../styled';
+import { CheckpointPaginationClasses } from './checkpoint-pagination-classes';
+export type ICheckpointPaginationProps = IStyledComponentProps<{
+    props: {
+        cursor: string | null;
+        hasMore: boolean;
+        hasPrevious: boolean;
+        onNext: (newCursor: string) => void;
+        onPrevious?: (previousCursor: string) => void;
+        classes?: Partial<CheckpointPaginationClasses>;
+        nextButtonLabel?: string;
+        previousButtonLabel?: string;
+        size?: 'small' | 'medium' | 'large';
+    };
+    defaultComponent: 'div';
+}>;
+export declare const CheckpointPagination: React.ForwardRefExoticComponent<{
+    cursor: string | null;
+    hasMore: boolean;
+    hasPrevious: boolean;
+    onNext: (newCursor: string) => void;
+    onPrevious?: ((previousCursor: string) => void) | undefined;
+    classes?: Partial<Record<"root" | "previousButton" | "nextButton", string>> | undefined;
+    nextButtonLabel?: string | undefined;
+    previousButtonLabel?: string | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "size" | "cursor" | "classes" | "previousButtonLabel" | "nextButtonLabel" | "hasMore" | "hasPrevious" | "onNext" | "onPrevious"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/pagination/checkpoint-pagination/CheckpointPagination.js

@@ -0,0 +1,87 @@
+"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.CheckpointPagination = void 0;
+var React = __importStar(require("react"));
+var icon_button_1 = require("../../icon-button");
+var icon_1 = require("../../icon");
+var stack_layout_1 = require("../../stack-layout");
+var styled_1 = require("../../styled");
+var classes_1 = require("../../styles/classes");
+var clsx_1 = __importDefault(require("../../utils/clsx"));
+var checkpoint_pagination_classes_1 = require("./checkpoint-pagination-classes");
+var Root = (0, styled_1.styled)('div', { name: checkpoint_pagination_classes_1.checkpointPaginationComponentName, slot: 'Root' })(function () { return ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+}); });
+exports.CheckpointPagination = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, cursor = props.cursor, hasMore = props.hasMore, hasPrevious = props.hasPrevious, onNext = props.onNext, onPrevious = props.onPrevious, propClasses = props.classes, _a = props.nextButtonLabel, nextButtonLabel = _a === void 0 ? 'Next Page' : _a, _b = props.previousButtonLabel, previousButtonLabel = _b === void 0 ? 'Previous Page' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, rootProps = __rest(props, ["children", "className", "cursor", "hasMore", "hasPrevious", "onNext", "onPrevious", "classes", "nextButtonLabel", "previousButtonLabel", "size"]);
+    var classes = (0, classes_1.useMergedClasses)(checkpoint_pagination_classes_1.checkpointPaginationClasses, checkpoint_pagination_classes_1.getCheckpointPaginationUtilityClass, propClasses);
+    var isPreviousDisabled = !hasPrevious;
+    var isNextDisabled = !hasMore;
+    var handleNext = function () {
+        if (!isNextDisabled && cursor) {
+            onNext(cursor);
+        }
+    };
+    var handlePrevious = function () {
+        if (!isPreviousDisabled && onPrevious && cursor) {
+            onPrevious(cursor);
+        }
+    };
+    return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
+        React.createElement(stack_layout_1.StackLayout, { gutter: 1 },
+            React.createElement(icon_button_1.IconButton, { variant: "outlined", size: size, className: classes.previousButton, onClick: handlePrevious, disabled: isPreviousDisabled, label: previousButtonLabel },
+                React.createElement(icon_1.ChevronLeftIcon, null)),
+            React.createElement(icon_button_1.IconButton, { variant: "outlined", size: size, className: classes.nextButton, onClick: handleNext, disabled: isNextDisabled, label: nextButtonLabel },
+                React.createElement(icon_1.ChevronRightIcon, null)))));
+});
+exports.CheckpointPagination.displayName = 'CheckpointPagination';

package/pagination/checkpoint-pagination/checkpoint-pagination-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const checkpointPaginationComponentName: "QuantumCheckpointPagination";
+export declare function getCheckpointPaginationUtilityClass(slot: string): string;
+export declare const checkpointPaginationClasses: Record<"root" | "previousButton" | "nextButton", string>;
+export type CheckpointPaginationClasses = typeof checkpointPaginationClasses;
+export type CheckpointPaginationClassKey = keyof CheckpointPaginationClasses;

package/pagination/checkpoint-pagination/checkpoint-pagination-classes.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkpointPaginationClasses = exports.getCheckpointPaginationUtilityClass = exports.checkpointPaginationComponentName = void 0;
+var classes_1 = require("../../styles/classes");
+exports.checkpointPaginationComponentName = 'QuantumCheckpointPagination';
+function getCheckpointPaginationUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.checkpointPaginationComponentName, slot);
+}
+exports.getCheckpointPaginationUtilityClass = getCheckpointPaginationUtilityClass;
+exports.checkpointPaginationClasses = (0, classes_1.generateUtilityClasses)(exports.checkpointPaginationComponentName, [
+    'root',
+    'previousButton',
+    'nextButton',
+]);

package/pagination/index.d.ts

@@ -2,3 +2,6 @@ export * from './pager';
 export { Pagination } from './pagination';
 export type { IPaginationProps } from './pagination';
 export { paginationClasses } from './pagination-classes';
+export { CheckpointPagination } from './checkpoint-pagination/CheckpointPagination';
+export type { ICheckpointPaginationProps } from './checkpoint-pagination/CheckpointPagination';
+export { checkpointPaginationClasses } from './checkpoint-pagination/checkpoint-pagination-classes';

package/pagination/index.js

@@ -14,9 +14,13 @@ 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.paginationClasses = exports.Pagination = void 0;
+exports.checkpointPaginationClasses = exports.CheckpointPagination = exports.paginationClasses = exports.Pagination = void 0;
 __exportStar(require("./pager"), exports);
 var pagination_1 = require("./pagination");
 Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return pagination_1.Pagination; } });
 var pagination_classes_1 = require("./pagination-classes");
 Object.defineProperty(exports, "paginationClasses", { enumerable: true, get: function () { return pagination_classes_1.paginationClasses; } });
+var CheckpointPagination_1 = require("./checkpoint-pagination/CheckpointPagination");
+Object.defineProperty(exports, "CheckpointPagination", { enumerable: true, get: function () { return CheckpointPagination_1.CheckpointPagination; } });
+var checkpoint_pagination_classes_1 = require("./checkpoint-pagination/checkpoint-pagination-classes");
+Object.defineProperty(exports, "checkpointPaginationClasses", { enumerable: true, get: function () { return checkpoint_pagination_classes_1.checkpointPaginationClasses; } });

package/select-dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './select-dropdown';

package/select-dropdown/index.js

@@ -0,0 +1,17 @@
+"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 });
+__exportStar(require("./select-dropdown"), exports);

package/select-dropdown/select-dropdown.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface ISelectOption {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    color?: string;
+}
+export interface ISelectDropdownProps {
+    selectedValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    triggerLabel: string;
+    clearButtonLabel?: string;
+    className?: string;
+    options: ISelectOption[];
+}
+export declare const SelectDropdown: React.ForwardRefExoticComponent<ISelectDropdownProps & React.RefAttributes<HTMLDivElement>>;

package/select-dropdown/select-dropdown.js

@@ -0,0 +1,156 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectDropdown = void 0;
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var material_1 = require("@mui/material");
+var button_1 = require("../button");
+var select_1 = require("../select");
+var text_1 = require("../text");
+var dropdown_menu_1 = require("../dropdown-menu");
+var icon_1 = require("../icon");
+exports.SelectDropdown = React.forwardRef(function (props, ref) {
+    var _a;
+    var propSelectedValue = props.selectedValue, onValueChange = props.onValueChange, triggerLabel = props.triggerLabel, _b = props.clearButtonLabel, clearButtonLabel = _b === void 0 ? 'Clear' : _b, className = props.className, options = props.options, rootProps = __rest(props, ["selectedValue", "onValueChange", "triggerLabel", "clearButtonLabel", "className", "options"]);
+    var _c = __read((0, react_1.useState)(null), 2), internalSelectedValue = _c[0], setInternalSelectedValue = _c[1];
+    var _d = __read((0, react_1.useState)(false), 2), isOpen = _d[0], setIsOpen = _d[1];
+    var selectRef = (0, react_1.useRef)(null);
+    // Use internal state if external props are not provided
+    var selectedValue = propSelectedValue !== undefined ? propSelectedValue : internalSelectedValue;
+    var handleItemSelect = (0, react_1.useCallback)(function (value) {
+        if (propSelectedValue === undefined) {
+            setInternalSelectedValue(value);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
+        setIsOpen(false);
+    }, [propSelectedValue, onValueChange]);
+    var handleClear = (0, react_1.useCallback)(function () {
+        if (propSelectedValue === undefined) {
+            setInternalSelectedValue(null);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(null);
+        setIsOpen(false);
+    }, [propSelectedValue, onValueChange]);
+    var handleTriggerClick = function () {
+        setIsOpen(!isOpen);
+    };
+    // Create dropdown items using the quantum DropdownMenu pattern
+    var dropdownItems = (0, react_1.useMemo)(function () { return __spreadArray(__spreadArray([], __read(options.map(function (option) {
+        var isSelected = selectedValue === option.key;
+        return {
+            title: option.label,
+            onClick: option.disabled ? undefined : function () { return handleItemSelect(option.key); },
+            selected: isSelected,
+            disabled: option.disabled,
+            startIcon: option.icon,
+            color: option.color ? 'danger' : 'default',
+        };
+    })), false), [
+        {
+            type: 'divider',
+        },
+        {
+            title: (React.createElement(button_1.Button, { variant: "link", size: "small", onClick: handleClear, style: {
+                    justifyContent: 'flex-end',
+                    width: '100%',
+                    display: 'flex',
+                } }, clearButtonLabel)),
+        },
+    ], false); }, [options, handleItemSelect, selectedValue, clearButtonLabel, handleClear]);
+    return (React.createElement(material_1.Box, __assign({ ref: ref, className: className }, rootProps),
+        React.createElement(select_1.Select, { ref: selectRef, key: selectedValue, label: triggerLabel, value: selectedValue, onChange: function () {
+                // Disable native select onChange completely
+            }, onClick: handleTriggerClick, onMouseDown: function (e) {
+                e.preventDefault();
+                handleTriggerClick();
+            }, tabIndex: 0, options: options.map(function (option) { return ({
+                text: option.label,
+                value: option.key,
+                disabled: option.disabled,
+            }); }), useCustomMenu: true, IconComponent: icon_1.ChevronDownIcon, prefix: React.createElement(text_1.Text, { fontWeight: "medium" }, selectedValue
+                ? "".concat(triggerLabel, ": ").concat(((_a = options.find(function (option) { return option.key === selectedValue; })) === null || _a === void 0 ? void 0 : _a.label) || selectedValue)
+                : triggerLabel), size: "small" }),
+        React.createElement(dropdown_menu_1.DropdownMenu, { items: dropdownItems, open: isOpen, anchorEl: selectRef.current, onClose: function () { return setIsOpen(false); }, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left',
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'left',
+            }, sx: {
+                '& .base-QuantumDropdownMenu-paper': {
+                    minWidth: '240px',
+                    maxHeight: '480px',
+                },
+            } })));
+});
+exports.SelectDropdown.displayName = 'SelectDropdown';