@auth0/quantum-product 2.10.2 → 2.10.3

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

@@ -0,0 +1,50 @@
+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 { Spinner } from '../spinner';
+import { styled } from '../styled';
+import clsx from '../utils/clsx';
+import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+var Root = styled('div', {
+    name: commandPaletteComponentName,
+    slot: 'Loading',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        gap: theme.spacing(1.5),
+        padding: theme.spacing(2),
+        color: theme.tokens.color_fg_disabled,
+        fontSize: theme.typography.caption.fontSize,
+    });
+});
+export var CommandPaletteLoading = React.forwardRef(function (props, ref) {
+    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.children, children = _b === void 0 ? 'Loading...' : _b, className = props.className, loadingProps = __rest(props, ["progress", "children", "className"]);
+    return (React.createElement(Root, __assign({ ref: ref, role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Loading results", className: clsx(commandPaletteClasses.loading, className) }, loadingProps),
+        React.createElement(Spinner, null),
+        children));
+});
+CommandPaletteLoading.displayName = 'CommandPaletteLoading';

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

@@ -0,0 +1,44 @@
+export function commandScore(value, search) {
+    if (search.length === 0)
+        return 1;
+    if (value.length === 0)
+        return 0;
+    var lowerValue = value.toLowerCase();
+    var lowerSearch = search.toLowerCase();
+    if (lowerValue === lowerSearch)
+        return 1;
+    if (lowerValue.includes(lowerSearch)) {
+        if (lowerValue.startsWith(lowerSearch)) {
+            return 0.9;
+        }
+        return 0.7;
+    }
+    var searchIdx = 0;
+    var score = 0;
+    var consecutive = 0;
+    var prevMatchIdx = -2;
+    for (var i = 0; i < lowerValue.length && searchIdx < lowerSearch.length; i++) {
+        if (lowerValue[i] === lowerSearch[searchIdx]) {
+            if (i === prevMatchIdx + 1) {
+                consecutive++;
+                score += consecutive * 2;
+            }
+            else {
+                consecutive = 1;
+                score += 1;
+            }
+            if (i === 0 || /[\s\-_./]/.test(value[i - 1])) {
+                score += 3;
+            }
+            if (i > 0 && value[i] === value[i].toUpperCase() && value[i - 1] === value[i - 1].toLowerCase()) {
+                score += 2;
+            }
+            prevMatchIdx = i;
+            searchIdx++;
+        }
+    }
+    if (searchIdx < lowerSearch.length)
+        return 0;
+    var maxPossibleScore = lowerSearch.length * 6;
+    return Math.min(score / maxPossibleScore, 0.6);
+}

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

@@ -0,0 +1,47 @@
+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 { styled } from '../styled';
+import clsx from '../utils/clsx';
+import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { useCommandPaletteState } from './command-palette-context';
+var Root = styled('div', {
+    name: 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,
+    });
+});
+export var 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 = 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: clsx(commandPaletteClasses.separator, className) }, separatorProps)));
+});
+CommandPaletteSeparator.displayName = 'CommandPaletteSeparator';

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

@@ -0,0 +1,107 @@
+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 useForkRef from '@mui/utils/useForkRef';
+import { styled } from '../styled';
+import clsx from '../utils/clsx';
+import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+var Root = styled('div', {
+    name: 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 = styled('button', {
+    name: 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,
+        } }));
+});
+export var 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 = useForkRef(tabsRef, ref);
+    return (React.createElement(Root, __assign({ ref: mergedRef, role: "tablist", className: clsx(commandPaletteClasses.tabs, className), onKeyDown: handleKeyDown }, tabsProps), children));
+});
+CommandPaletteTabs.displayName = 'CommandPaletteTabs';
+export var 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: clsx(commandPaletteClasses.tab, active && commandPaletteClasses.tabSelected, className), onClick: handleClick }, tabProps), children));
+});
+CommandPaletteTab.displayName = 'CommandPaletteTab';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,435 @@
+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;
+};
+import * as React from 'react';
+import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
+import clsx from '../utils/clsx';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
+import { CommandPaletteContext, CommandPaletteStoreContext } from './command-palette-context';
+import { commandScore } from './command-palette-score';
+var VALUE_ATTR = 'data-value';
+var ITEM_SELECTOR = ".".concat(commandPaletteClasses.item);
+var GROUP_ITEMS_SELECTOR = ".".concat(commandPaletteClasses.groupItems);
+var VALID_ITEM_SELECTOR = "".concat(ITEM_SELECTOR, ":not([aria-disabled=\"true\"])");
+var Root = styled('div', {
+    name: 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 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(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(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; });
+    }, []);
+}
+export var 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 = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, undefined);
+    return (React.createElement(CommandPaletteStoreContext.Provider, { value: store.current },
+        React.createElement(CommandPaletteContext.Provider, { value: context },
+            React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className), tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": label }, rootProps), children))));
+});
+CommandPalette.displayName = 'CommandPalette';
+export { VALUE_ATTR };