@auth0/quantum-product 2.10.2 → 2.10.3

package/command-palette/command-palette.js

@@ -0,0 +1,474 @@
+"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 __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.VALUE_ATTR = exports.CommandPalette = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
+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 command_palette_score_1 = require("./command-palette-score");
+var VALUE_ATTR = 'data-value';
+exports.VALUE_ATTR = VALUE_ATTR;
+var ITEM_SELECTOR = ".".concat(command_palette_classes_1.commandPaletteClasses.item);
+var GROUP_ITEMS_SELECTOR = ".".concat(command_palette_classes_1.commandPaletteClasses.groupItems);
+var VALID_ITEM_SELECTOR = "".concat(ITEM_SELECTOR, ":not([aria-disabled=\"true\"])");
+var Root = (0, styled_1.styled)('div', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        fontFamily: theme.typography.fontFamily,
+        overflow: 'hidden',
+        borderRadius: theme.typography.pxToRem(12),
+        backgroundColor: theme.tokens.color_bg_layer_elevated,
+        '&:focus-visible': {
+            outline: "none",
+        },
+    });
+});
+function defaultFilter(value, search, keywords) {
+    var allText = (keywords === null || keywords === void 0 ? void 0 : keywords.length) ? "".concat(value, " ").concat(keywords.join(' ')) : value;
+    return (0, command_palette_score_1.commandScore)(allText, search);
+}
+function useAsRef(value) {
+    var ref = React.useRef(value);
+    ref.current = value;
+    return ref;
+}
+function useLazyRef(fn) {
+    var ref = React.useRef(undefined);
+    if (ref.current === undefined) {
+        ref.current = fn();
+    }
+    return ref;
+}
+function findNextItem(el, loop) {
+    var _a, _b, _c;
+    var next = el.nextElementSibling;
+    while (next) {
+        if (next.matches(VALID_ITEM_SELECTOR))
+            return next;
+        next = next.nextElementSibling;
+    }
+    var group = el.closest(GROUP_ITEMS_SELECTOR);
+    while (group) {
+        var nextGroup = (_a = group.parentElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+        if (nextGroup) {
+            var items = nextGroup.querySelector(GROUP_ITEMS_SELECTOR);
+            if (items) {
+                var firstItem = items.querySelector(VALID_ITEM_SELECTOR);
+                if (firstItem)
+                    return firstItem;
+            }
+            group = nextGroup.querySelector(GROUP_ITEMS_SELECTOR);
+        }
+        else {
+            group = null;
+        }
+    }
+    if (!el.closest(GROUP_ITEMS_SELECTOR)) {
+        var sibling = (_b = el.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling;
+        while (sibling) {
+            var item = ((_c = sibling.matches) === null || _c === void 0 ? void 0 : _c.call(sibling, VALID_ITEM_SELECTOR)) ? sibling : sibling.querySelector(VALID_ITEM_SELECTOR);
+            if (item)
+                return item;
+            sibling = sibling.nextElementSibling;
+        }
+    }
+    if (loop) {
+        var list = el.closest(".".concat(command_palette_classes_1.commandPaletteClasses.list));
+        if (list) {
+            return list.querySelector(VALID_ITEM_SELECTOR) || undefined;
+        }
+    }
+    return undefined;
+}
+function findPrevItem(el, loop) {
+    var _a;
+    var prev = el.previousElementSibling;
+    while (prev) {
+        if (prev.matches(VALID_ITEM_SELECTOR))
+            return prev;
+        prev = prev.previousElementSibling;
+    }
+    var group = el.closest(GROUP_ITEMS_SELECTOR);
+    while (group) {
+        var prevGroup = (_a = group.parentElement) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+        if (prevGroup) {
+            var items = prevGroup.querySelector(GROUP_ITEMS_SELECTOR);
+            if (items) {
+                var allItems = items.querySelectorAll(VALID_ITEM_SELECTOR);
+                if (allItems.length)
+                    return allItems[allItems.length - 1];
+            }
+            group = prevGroup.querySelector(GROUP_ITEMS_SELECTOR);
+        }
+        else {
+            group = null;
+        }
+    }
+    if (loop) {
+        var list = el.closest(".".concat(command_palette_classes_1.commandPaletteClasses.list));
+        if (list) {
+            var allItems = list.querySelectorAll(VALID_ITEM_SELECTOR);
+            return allItems.length ? allItems[allItems.length - 1] : undefined;
+        }
+    }
+    return undefined;
+}
+function getSelectedItem(listInnerRef, value) {
+    var _a;
+    return ((_a = listInnerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("".concat(ITEM_SELECTOR, "[").concat(VALUE_ATTR, "=\"").concat(encodeURIComponent(value), "\"]"))) || null;
+}
+function getValidItems(listInnerRef) {
+    var _a;
+    return Array.from(((_a = listInnerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(VALID_ITEM_SELECTOR)) || []);
+}
+function useScheduleLayoutEffect() {
+    var _a = __read(React.useState(0), 2), count = _a[0], setCount = _a[1];
+    var callbackRef = React.useRef(null);
+    React.useLayoutEffect(function () {
+        if (callbackRef.current) {
+            callbackRef.current();
+            callbackRef.current = null;
+        }
+    }, [count]);
+    return React.useCallback(function (callback) {
+        callbackRef.current = callback;
+        setCount(function (c) { return c + 1; });
+    }, []);
+}
+exports.CommandPalette = React.forwardRef(function (props, ref) {
+    var _a = props.label, label = _a === void 0 ? 'Command palette' : _a, searchProp = props.search, _onSearchChange = props.onSearchChange, valueProp = props.value, _onValueChange = props.onValueChange, filterProp = props.filter, _b = props.shouldFilter, shouldFilter = _b === void 0 ? true : _b, _c = props.loop, loop = _c === void 0 ? false : _c, _onSelect = props.onSelect, children = props.children, className = props.className, rootProps = __rest(props, ["label", "search", "onSearchChange", "value", "onValueChange", "filter", "shouldFilter", "loop", "onSelect", "children", "className"]);
+    var id = React.useId();
+    var listId = "".concat(id, "-list");
+    var inputId = "".concat(id, "-input");
+    var listInnerRef = React.useRef(null);
+    var allItems = React.useRef(new Map());
+    var allGroups = React.useRef(new Map());
+    var filter = shouldFilter ? filterProp !== null && filterProp !== void 0 ? filterProp : defaultFilter : false;
+    var propsRef = useAsRef(props);
+    var schedule = useScheduleLayoutEffect();
+    var store = useLazyRef(function () {
+        var listeners = new Set();
+        var state = {
+            search: searchProp || '',
+            selectedValue: valueProp || '',
+            filtered: { count: 0, items: new Map(), groups: new Map() },
+        };
+        return {
+            subscribe: function (callback) {
+                listeners.add(callback);
+                return function () { return listeners.delete(callback); };
+            },
+            snapshot: function () {
+                return state;
+            },
+            setState: function (key, value, shouldEmit) {
+                var _a;
+                var _b, _c;
+                if (Object.is(state[key], value))
+                    return;
+                state = __assign(__assign({}, state), (_a = {}, _a[key] = value, _a));
+                if (key === 'search') {
+                    filterItems();
+                    schedule(function () { return selectFirstItem(); });
+                    (_c = (_b = propsRef.current).onSearchChange) === null || _c === void 0 ? void 0 : _c.call(_b, value);
+                }
+                if (shouldEmit !== false) {
+                    this.emit();
+                }
+            },
+            emit: function () {
+                listeners.forEach(function (l) { return l(); });
+            },
+        };
+    });
+    var filterItems = React.useCallback(function () {
+        if (!filter) {
+            store.current.setState('filtered', {
+                count: allItems.current.size,
+                items: new Map(),
+                groups: new Map(),
+            });
+            return;
+        }
+        var search = store.current.snapshot().search;
+        var items = new Map();
+        var groups = new Map();
+        var count = 0;
+        allItems.current.forEach(function (itemMeta, id) {
+            var score = filter(itemMeta.value, search, itemMeta.keywords);
+            items.set(id, score);
+            if (score > 0)
+                count++;
+        });
+        allGroups.current.forEach(function (groupItems, groupId) {
+            var groupCount = 0;
+            groupItems.forEach(function (itemId) {
+                var score = items.get(itemId) || 0;
+                if (score > 0)
+                    groupCount++;
+            });
+            groups.set(groupId, groupCount);
+        });
+        store.current.setState('filtered', { count: count, items: items, groups: groups }, false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var selectFirstItem = React.useCallback(function () {
+        var _a, _b;
+        var items = getValidItems(listInnerRef);
+        var item = items.find(function (el) { return el.getAttribute('aria-disabled') !== 'true'; });
+        if (item) {
+            var value = item.getAttribute(VALUE_ATTR);
+            if (value) {
+                var decoded = decodeURIComponent(value);
+                store.current.setState('selectedValue', decoded);
+                (_b = (_a = propsRef.current).onValueChange) === null || _b === void 0 ? void 0 : _b.call(_a, decoded);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useEffect(function () {
+        if (searchProp !== undefined) {
+            store.current.setState('search', searchProp);
+        }
+    }, [searchProp, store]);
+    React.useEffect(function () {
+        if (valueProp !== undefined) {
+            store.current.setState('selectedValue', valueProp);
+        }
+    }, [valueProp, store]);
+    var context = React.useMemo(function () { return ({
+        value: function (id, value, keywords) {
+            var existing = allItems.current.get(id);
+            if (existing && existing.value === value && existing.keywords === keywords)
+                return;
+            allItems.current.set(id, { value: value, keywords: keywords });
+            filterItems();
+            schedule(function () {
+                var state = store.current.snapshot();
+                var validItems = getValidItems(listInnerRef);
+                var selectedEl = getSelectedItem(listInnerRef, state.selectedValue);
+                if (!selectedEl && validItems.length > 0) {
+                    selectFirstItem();
+                }
+                store.current.emit();
+            });
+        },
+        item: function (id, groupId) {
+            if (groupId) {
+                if (!allGroups.current.has(groupId)) {
+                    allGroups.current.set(groupId, new Set());
+                }
+                allGroups.current.get(groupId).add(id);
+            }
+            filterItems();
+            store.current.emit();
+            return function () {
+                var _a;
+                allItems.current.delete(id);
+                if (groupId) {
+                    (_a = allGroups.current.get(groupId)) === null || _a === void 0 ? void 0 : _a.delete(id);
+                }
+                filterItems();
+                schedule(function () {
+                    selectFirstItem();
+                    store.current.emit();
+                });
+            };
+        },
+        group: function (id) {
+            if (!allGroups.current.has(id)) {
+                allGroups.current.set(id, new Set());
+            }
+            return function () {
+                allGroups.current.delete(id);
+                store.current.emit();
+            };
+        },
+        filter: filter,
+        label: label,
+        listId: listId,
+        inputId: inputId,
+        listInnerRef: listInnerRef,
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [label, listId, inputId]);
+    var handleKeyDown = React.useCallback(function (e) {
+        var _a, _b, _c, _d, _e, _f;
+        var state = store.current.snapshot();
+        var updateSelectedByChange = function (change) {
+            var _a, _b;
+            var selected = getSelectedItem(listInnerRef, state.selectedValue);
+            var nextItem;
+            if (selected) {
+                nextItem = change === 1 ? findNextItem(selected, loop) : findPrevItem(selected, loop);
+            }
+            else {
+                var items = getValidItems(listInnerRef);
+                nextItem = change === 1 ? items[0] : items[items.length - 1];
+            }
+            if (nextItem) {
+                var value = nextItem.getAttribute(VALUE_ATTR);
+                if (value) {
+                    var decoded = decodeURIComponent(value);
+                    store.current.setState('selectedValue', decoded);
+                    (_b = (_a = propsRef.current).onValueChange) === null || _b === void 0 ? void 0 : _b.call(_a, decoded);
+                    nextItem.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        };
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                updateSelectedByChange(1);
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                updateSelectedByChange(-1);
+                break;
+            }
+            case 'Home': {
+                e.preventDefault();
+                var items = getValidItems(listInnerRef);
+                var first = items[0];
+                if (first) {
+                    var value = first.getAttribute(VALUE_ATTR);
+                    if (value) {
+                        var decoded = decodeURIComponent(value);
+                        store.current.setState('selectedValue', decoded);
+                        (_b = (_a = propsRef.current).onValueChange) === null || _b === void 0 ? void 0 : _b.call(_a, decoded);
+                        first.scrollIntoView({ block: 'nearest' });
+                    }
+                }
+                break;
+            }
+            case 'End': {
+                e.preventDefault();
+                var items = getValidItems(listInnerRef);
+                var last = items[items.length - 1];
+                if (last) {
+                    var value = last.getAttribute(VALUE_ATTR);
+                    if (value) {
+                        var decoded = decodeURIComponent(value);
+                        store.current.setState('selectedValue', decoded);
+                        (_d = (_c = propsRef.current).onValueChange) === null || _d === void 0 ? void 0 : _d.call(_c, decoded);
+                        last.scrollIntoView({ block: 'nearest' });
+                    }
+                }
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                var selected = getSelectedItem(listInnerRef, state.selectedValue);
+                if (selected) {
+                    selected.click();
+                    (_f = (_e = propsRef.current).onSelect) === null || _f === void 0 ? void 0 : _f.call(_e, state.selectedValue);
+                }
+                break;
+            }
+            case 'n':
+            case 'j': {
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    updateSelectedByChange(1);
+                }
+                break;
+            }
+            case 'p':
+            case 'k': {
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    updateSelectedByChange(-1);
+                }
+                break;
+            }
+        }
+    }, [loop, store, propsRef]);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, undefined);
+    return (React.createElement(command_palette_context_1.CommandPaletteStoreContext.Provider, { value: store.current },
+        React.createElement(command_palette_context_1.CommandPaletteContext.Provider, { value: context },
+            React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root, className), tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": label }, rootProps), children))));
+});
+exports.CommandPalette.displayName = 'CommandPalette';

package/command-palette/index.d.ts

@@ -0,0 +1,27 @@
+export { CommandPalette } from './command-palette';
+export type { ICommandPaletteProps } from './command-palette-types';
+export { CommandPaletteInput } from './command-palette-input';
+export type { ICommandPaletteInputProps } from './command-palette-types';
+export { CommandPaletteList } from './command-palette-list';
+export type { ICommandPaletteListProps } from './command-palette-types';
+export { CommandPaletteGroup } from './command-palette-group';
+export type { ICommandPaletteGroupProps } from './command-palette-types';
+export { CommandPaletteItem } from './command-palette-item';
+export type { ICommandPaletteItemProps } from './command-palette-types';
+export { CommandPaletteTab, CommandPaletteTabs } from './command-palette-tabs';
+export type { ICommandPaletteTabProps, ICommandPaletteTabsProps } from './command-palette-types';
+export { CommandPaletteSeparator } from './command-palette-separator';
+export type { ICommandPaletteSeparatorProps } from './command-palette-types';
+export { CommandPaletteEmpty } from './command-palette-empty';
+export type { ICommandPaletteEmptyProps } from './command-palette-types';
+export { CommandPaletteLoading } from './command-palette-loading';
+export type { ICommandPaletteLoadingProps } from './command-palette-types';
+export { CommandPaletteDialog } from './command-palette-dialog';
+export type { ICommandPaletteDialogProps } from './command-palette-types';
+export { CommandPaletteFooter, CommandPaletteShortcutKey } from './command-palette-footer';
+export type { ICommandPaletteFooterProps, ICommandPaletteShortcutKeyProps } from './command-palette-types';
+export { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+export type { CommandPaletteClassKey, CommandPaletteClasses } from './command-palette-classes';
+export { useCommandPaletteShortcut } from './use-command-palette-shortcut';
+export { CommandPaletteContext, useCommandPaletteContext, useCommandPaletteState } from './command-palette-context';
+export type { CommandPaletteFilterFn, ICommandPaletteContextValue, ICommandPaletteState, } from './command-palette-types';

package/command-palette/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCommandPaletteState = exports.useCommandPaletteContext = exports.CommandPaletteContext = exports.useCommandPaletteShortcut = exports.commandPaletteComponentName = exports.commandPaletteClasses = exports.CommandPaletteShortcutKey = exports.CommandPaletteFooter = exports.CommandPaletteDialog = exports.CommandPaletteLoading = exports.CommandPaletteEmpty = exports.CommandPaletteSeparator = exports.CommandPaletteTabs = exports.CommandPaletteTab = exports.CommandPaletteItem = exports.CommandPaletteGroup = exports.CommandPaletteList = exports.CommandPaletteInput = exports.CommandPalette = void 0;
+var command_palette_1 = require("./command-palette");
+Object.defineProperty(exports, "CommandPalette", { enumerable: true, get: function () { return command_palette_1.CommandPalette; } });
+var command_palette_input_1 = require("./command-palette-input");
+Object.defineProperty(exports, "CommandPaletteInput", { enumerable: true, get: function () { return command_palette_input_1.CommandPaletteInput; } });
+var command_palette_list_1 = require("./command-palette-list");
+Object.defineProperty(exports, "CommandPaletteList", { enumerable: true, get: function () { return command_palette_list_1.CommandPaletteList; } });
+var command_palette_group_1 = require("./command-palette-group");
+Object.defineProperty(exports, "CommandPaletteGroup", { enumerable: true, get: function () { return command_palette_group_1.CommandPaletteGroup; } });
+var command_palette_item_1 = require("./command-palette-item");
+Object.defineProperty(exports, "CommandPaletteItem", { enumerable: true, get: function () { return command_palette_item_1.CommandPaletteItem; } });
+var command_palette_tabs_1 = require("./command-palette-tabs");
+Object.defineProperty(exports, "CommandPaletteTab", { enumerable: true, get: function () { return command_palette_tabs_1.CommandPaletteTab; } });
+Object.defineProperty(exports, "CommandPaletteTabs", { enumerable: true, get: function () { return command_palette_tabs_1.CommandPaletteTabs; } });
+var command_palette_separator_1 = require("./command-palette-separator");
+Object.defineProperty(exports, "CommandPaletteSeparator", { enumerable: true, get: function () { return command_palette_separator_1.CommandPaletteSeparator; } });
+var command_palette_empty_1 = require("./command-palette-empty");
+Object.defineProperty(exports, "CommandPaletteEmpty", { enumerable: true, get: function () { return command_palette_empty_1.CommandPaletteEmpty; } });
+var command_palette_loading_1 = require("./command-palette-loading");
+Object.defineProperty(exports, "CommandPaletteLoading", { enumerable: true, get: function () { return command_palette_loading_1.CommandPaletteLoading; } });
+var command_palette_dialog_1 = require("./command-palette-dialog");
+Object.defineProperty(exports, "CommandPaletteDialog", { enumerable: true, get: function () { return command_palette_dialog_1.CommandPaletteDialog; } });
+var command_palette_footer_1 = require("./command-palette-footer");
+Object.defineProperty(exports, "CommandPaletteFooter", { enumerable: true, get: function () { return command_palette_footer_1.CommandPaletteFooter; } });
+Object.defineProperty(exports, "CommandPaletteShortcutKey", { enumerable: true, get: function () { return command_palette_footer_1.CommandPaletteShortcutKey; } });
+var command_palette_classes_1 = require("./command-palette-classes");
+Object.defineProperty(exports, "commandPaletteClasses", { enumerable: true, get: function () { return command_palette_classes_1.commandPaletteClasses; } });
+Object.defineProperty(exports, "commandPaletteComponentName", { enumerable: true, get: function () { return command_palette_classes_1.commandPaletteComponentName; } });
+var use_command_palette_shortcut_1 = require("./use-command-palette-shortcut");
+Object.defineProperty(exports, "useCommandPaletteShortcut", { enumerable: true, get: function () { return use_command_palette_shortcut_1.useCommandPaletteShortcut; } });
+var command_palette_context_1 = require("./command-palette-context");
+Object.defineProperty(exports, "CommandPaletteContext", { enumerable: true, get: function () { return command_palette_context_1.CommandPaletteContext; } });
+Object.defineProperty(exports, "useCommandPaletteContext", { enumerable: true, get: function () { return command_palette_context_1.useCommandPaletteContext; } });
+Object.defineProperty(exports, "useCommandPaletteState", { enumerable: true, get: function () { return command_palette_context_1.useCommandPaletteState; } });

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare function useCommandPaletteShortcut(setOpen: React.Dispatch<React.SetStateAction<boolean>>, shortcut?: {
+    key: string;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}): void;

package/command-palette/use-command-palette-shortcut.js

@@ -0,0 +1,65 @@
+"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 () {
+    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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCommandPaletteShortcut = useCommandPaletteShortcut;
+var React = __importStar(require("react"));
+function useCommandPaletteShortcut(setOpen, shortcut) {
+    if (shortcut === void 0) { shortcut = { key: 'k', metaKey: true }; }
+    var setOpenRef = React.useRef(setOpen);
+    setOpenRef.current = setOpen;
+    var shortcutRef = React.useRef(shortcut);
+    shortcutRef.current = shortcut;
+    React.useEffect(function () {
+        var handleKeyDown = function (e) {
+            var target = e.target;
+            if (target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.tagName === 'SELECT' ||
+                target.isContentEditable) {
+                return;
+            }
+            var s = shortcutRef.current;
+            var matchesMeta = e.metaKey === !!s.metaKey;
+            var matchesCtrl = e.ctrlKey === !!s.ctrlKey;
+            var matchesKey = e.key.toLowerCase() === s.key.toLowerCase();
+            if (matchesMeta && matchesCtrl && matchesKey) {
+                e.preventDefault();
+                setOpenRef.current(function (prev) { return !prev; });
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return function () { return document.removeEventListener('keydown', handleKeyDown); };
+    }, []);
+}

package/esm/command-palette/command-palette-classes.js

@@ -0,0 +1,30 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var commandPaletteComponentName = 'QuantumCommandPalette';
+export function getCommandPaletteUtilityClass(slot) {
+    return generateUtilityClass(commandPaletteComponentName, slot);
+}
+export var commandPaletteClasses = generateUtilityClasses(commandPaletteComponentName, [
+    'root',
+    'input',
+    'inputWrapper',
+    'inputIcon',
+    'list',
+    'group',
+    'groupHeading',
+    'groupItems',
+    'item',
+    'itemSelected',
+    'itemIcon',
+    'itemLabel',
+    'itemShortcut',
+    'tabs',
+    'tab',
+    'tabSelected',
+    'separator',
+    'empty',
+    'loading',
+    'dialog',
+    'dialogPaper',
+    'footer',
+    'kbd',
+]);

package/esm/command-palette/command-palette-context.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export var CommandPaletteContext = React.createContext(undefined);
+export var CommandPaletteStoreContext = React.createContext(undefined);
+export var CommandPaletteGroupContext = React.createContext(undefined);
+export function useCommandPaletteContext() {
+    var context = React.useContext(CommandPaletteContext);
+    if (!context) {
+        throw new Error('useCommandPaletteContext must be used within a CommandPalette');
+    }
+    return context;
+}
+export function useCommandPaletteStore() {
+    var store = React.useContext(CommandPaletteStoreContext);
+    if (!store) {
+        throw new Error('useCommandPaletteStore must be used within a CommandPalette');
+    }
+    return store;
+}
+export function useCommandPaletteState(selector) {
+    var store = useCommandPaletteStore();
+    return React.useSyncExternalStore(store.subscribe, function () { return selector(store.snapshot()); }, function () { return selector(store.snapshot()); });
+}