@auth0/quantum-product 2.10.2 → 2.10.3

package/command-palette/command-palette-separator.js

@@ -0,0 +1,86 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.CommandPaletteSeparator = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var command_palette_classes_1 = require("./command-palette-classes");
+var command_palette_context_1 = require("./command-palette-context");
+var Root = (0, styled_1.styled)('div', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'Separator',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        height: 1,
+        margin: "".concat(theme.spacing(0), " ").concat(theme.spacing(1.5)),
+        backgroundColor: theme.tokens.color_border_default,
+    });
+});
+exports.CommandPaletteSeparator = React.forwardRef(function (props, ref) {
+    var _a = props.alwaysRender, alwaysRender = _a === void 0 ? false : _a, className = props.className, separatorProps = __rest(props, ["alwaysRender", "className"]);
+    var search = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.search; });
+    var isSearching = search.length > 0;
+    if (!alwaysRender && isSearching)
+        return null;
+    return (React.createElement(Root, __assign({ ref: ref, role: "separator", className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.separator, className) }, separatorProps)));
+});
+exports.CommandPaletteSeparator.displayName = 'CommandPaletteSeparator';

package/command-palette/command-palette-tabs.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { ICommandPaletteTabProps, ICommandPaletteTabsProps } from './command-palette-types';
+export declare const CommandPaletteTabs: React.ForwardRefExoticComponent<ICommandPaletteTabsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandPaletteTab: React.ForwardRefExoticComponent<ICommandPaletteTabProps & React.RefAttributes<HTMLButtonElement>>;

package/command-palette/command-palette-tabs.js

@@ -0,0 +1,146 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.CommandPaletteTab = exports.CommandPaletteTabs = void 0;
+var React = __importStar(require("react"));
+var useForkRef_1 = __importDefault(require("@mui/utils/useForkRef"));
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var command_palette_classes_1 = require("./command-palette-classes");
+var Root = (0, styled_1.styled)('div', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'Tabs',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+        padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2)),
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': {
+            display: 'none',
+        },
+    });
+});
+var TabButton = (0, styled_1.styled)('button', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'Tab',
+})(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign(__assign(__assign({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: "".concat(theme.spacing(0.5), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(1), border: 'none', cursor: 'pointer', fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.fontWeightSemibold, fontFamily: theme.typography.caption.fontFamily, lineHeight: theme.typography.caption.lineHeight, whiteSpace: 'nowrap', userSelect: 'none', transition: theme.transitions.create(['background-color', 'color'], {
+            duration: theme.transitions.duration.shortest,
+        }), color: theme.tokens.color_fg_disabled, backgroundColor: 'transparent' }, (ownerState.active && {
+        color: theme.tokens.color_fg_default,
+        backgroundColor: theme.tokens.color_bg_state_neutral_subtle,
+    })), (!ownerState.active && {
+        '&:hover': {
+            backgroundColor: theme.tokens.color_bg_interactive_hover,
+        },
+    })), { '&:focus-visible': {
+            outline: 'none',
+            backgroundColor: theme.tokens.color_bg_interactive_hover,
+        } }));
+});
+exports.CommandPaletteTabs = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, tabsProps = __rest(props, ["children", "className"]);
+    var tabsRef = React.useRef(null);
+    var handleKeyDown = React.useCallback(function (e) {
+        var tabs = tabsRef.current;
+        if (!tabs)
+            return;
+        var tabButtons = Array.from(tabs.querySelectorAll('[role="tab"]'));
+        var focused = document.activeElement;
+        var currentIndex = tabButtons.indexOf(focused);
+        if (currentIndex === -1)
+            return;
+        var nextIndex = null;
+        if (e.key === 'ArrowRight') {
+            nextIndex = currentIndex < tabButtons.length - 1 ? currentIndex + 1 : 0;
+        }
+        else if (e.key === 'ArrowLeft') {
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : tabButtons.length - 1;
+        }
+        else if (e.key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (e.key === 'End') {
+            nextIndex = tabButtons.length - 1;
+        }
+        if (nextIndex !== null) {
+            e.preventDefault();
+            tabButtons[nextIndex].focus();
+            tabButtons[nextIndex].click();
+        }
+    }, []);
+    var mergedRef = (0, useForkRef_1.default)(tabsRef, ref);
+    return (React.createElement(Root, __assign({ ref: mergedRef, role: "tablist", className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.tabs, className), onKeyDown: handleKeyDown }, tabsProps), children));
+});
+exports.CommandPaletteTabs.displayName = 'CommandPaletteTabs';
+exports.CommandPaletteTab = React.forwardRef(function (props, ref) {
+    var _a = props.active, active = _a === void 0 ? false : _a, onSelect = props.onSelect, children = props.children, className = props.className, onClick = props.onClick, tabProps = __rest(props, ["active", "onSelect", "children", "className", "onClick"]);
+    var handleClick = React.useCallback(function (e) {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [onSelect, onClick]);
+    return (React.createElement(TabButton, __assign({ ref: ref, role: "tab", type: "button", "aria-selected": active, tabIndex: active ? 0 : -1, ownerState: { active: active }, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.tab, active && command_palette_classes_1.commandPaletteClasses.tabSelected, className), onClick: handleClick }, tabProps), children));
+});
+exports.CommandPaletteTab.displayName = 'CommandPaletteTab';

package/command-palette/command-palette-types.d.ts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+export type CommandPaletteFilterFn = (value: string, search: string, keywords?: string[]) => number;
+export interface ICommandPaletteState {
+    search: string;
+    selectedValue: string;
+    filtered: {
+        count: number;
+        items: Map<string, number>;
+        groups: Map<string, number>;
+    };
+}
+export interface ICommandPaletteStore {
+    subscribe(callback: () => void): () => void;
+    snapshot(): ICommandPaletteState;
+    setState<K extends keyof ICommandPaletteState>(key: K, value: ICommandPaletteState[K], opts?: boolean): void;
+    emit(): void;
+}
+export interface ICommandPaletteContextValue {
+    value(id: string, value: string, keywords?: string[]): void;
+    item(id: string, groupId?: string): () => void;
+    group(id: string): () => void;
+    filter: false | CommandPaletteFilterFn;
+    label: string;
+    listId: string;
+    inputId: string;
+    listInnerRef: React.RefObject<HTMLDivElement | null>;
+}
+export interface ICommandPaletteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Accessible label for the command palette */
+    label?: string;
+    /** Controlled search value */
+    search?: string;
+    /** Callback when search value changes */
+    onSearchChange?(search: string): void;
+    /** Controlled selected value */
+    value?: string;
+    /** Callback when selected item changes via keyboard navigation */
+    onValueChange?(value: string): void;
+    /** Custom filter function. Return score 0 to hide, >0 to show. Set to false to disable filtering. */
+    filter?: false | CommandPaletteFilterFn;
+    /** Whether built-in filtering is enabled */
+    shouldFilter?: boolean;
+    /** Whether to loop keyboard navigation */
+    loop?: boolean;
+    /** Callback when an item is selected via keyboard (Enter) */
+    onSelect?(value: string): void;
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'type'> {
+    /** Icon to show before the input */
+    icon?: React.ReactNode;
+    /** Callback when value changes */
+    onValueChange?(search: string): void;
+}
+export interface ICommandPaletteListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Heading text for the group */
+    heading?: React.ReactNode;
+    /** Force render even when all items are filtered out */
+    forceMount?: boolean;
+    /** Unique value for the group used for filtering */
+    value?: string;
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Unique value for the item (auto-derived from textContent if not provided) */
+    value?: string;
+    /** Additional keywords for filtering */
+    keywords?: string[];
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Callback when the item is selected */
+    onSelect?(value: string): void;
+    /** Force render even when filtered out */
+    forceMount?: boolean;
+    /** Icon to display before the label */
+    icon?: React.ReactNode;
+    /** Keyboard shortcut to display */
+    shortcut?: string | string[];
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteTabProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** Whether this tab is currently active */
+    active?: boolean;
+    /** Callback when tab is clicked */
+    onSelect?(): void;
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render even when search is active */
+    alwaysRender?: boolean;
+}
+export interface ICommandPaletteEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Progress percentage (0-100) */
+    progress?: number;
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteDialogProps extends ICommandPaletteProps {
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Callback when the dialog should close */
+    onOpenChange?(open: boolean): void;
+    /** Props to pass to the dialog overlay */
+    overlayProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** Props to pass to the dialog content wrapper */
+    contentProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+export interface ICommandPaletteFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export interface ICommandPaletteShortcutKeyProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}

package/command-palette/command-palette-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/command-palette/command-palette.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ICommandPaletteProps } from './command-palette-types';
+declare const VALUE_ATTR = "data-value";
+export declare const CommandPalette: React.ForwardRefExoticComponent<ICommandPaletteProps & React.RefAttributes<HTMLDivElement>>;
+export { VALUE_ATTR };