@auth0/quantum-product 2.10.2 → 2.10.4

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

@@ -0,0 +1,438 @@
+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 { useId } from '../utils/use-id';
+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;
+    var _b = props.label, label = _b === void 0 ? 'Command palette' : _b, searchProp = props.search, _onSearchChange = props.onSearchChange, valueProp = props.value, _onValueChange = props.onValueChange, filterProp = props.filter, _c = props.shouldFilter, shouldFilter = _c === void 0 ? true : _c, _d = props.loop, loop = _d === void 0 ? false : _d, _onSelect = props.onSelect, children = props.children, className = props.className, rootProps = __rest(props, ["label", "search", "onSearchChange", "value", "onValueChange", "filter", "shouldFilter", "loop", "onSelect", "children", "className"]);
+    var generatedId = useId();
+    var id = (_a = rootProps.id) !== null && _a !== void 0 ? _a : generatedId;
+    var listId = id ? "".concat(id, "-list") : undefined;
+    var inputId = id ? "".concat(id, "-input") : undefined;
+    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 !== null && label !== void 0 ? label : '',
+        listId: listId !== null && listId !== void 0 ? listId : '',
+        inputId: inputId !== null && inputId !== void 0 ? 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 };

package/esm/command-palette/index.js

@@ -0,0 +1,14 @@
+export { CommandPalette } from './command-palette';
+export { CommandPaletteInput } from './command-palette-input';
+export { CommandPaletteList } from './command-palette-list';
+export { CommandPaletteGroup } from './command-palette-group';
+export { CommandPaletteItem } from './command-palette-item';
+export { CommandPaletteTab, CommandPaletteTabs } from './command-palette-tabs';
+export { CommandPaletteSeparator } from './command-palette-separator';
+export { CommandPaletteEmpty } from './command-palette-empty';
+export { CommandPaletteLoading } from './command-palette-loading';
+export { CommandPaletteDialog } from './command-palette-dialog';
+export { CommandPaletteFooter, CommandPaletteShortcutKey } from './command-palette-footer';
+export { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+export { useCommandPaletteShortcut } from './use-command-palette-shortcut';
+export { CommandPaletteContext, useCommandPaletteContext, useCommandPaletteState } from './command-palette-context';

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export 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/index.js

@@ -18,6 +18,7 @@ export * from './chip';
 export * from './code';
 export * from './collapse';
 export * from './color-text-field';
+export * from './command-palette';
 export * from './column-layout';
 export * from './config-block';
 export * from './content';

package/index.d.ts

@@ -18,6 +18,7 @@ export * from './chip';
 export * from './code';
 export * from './collapse';
 export * from './color-text-field';
+export * from './command-palette';
 export * from './column-layout';
 export * from './config-block';
 export * from './content';

package/index.js

@@ -34,6 +34,7 @@ __exportStar(require("./chip"), exports);
 __exportStar(require("./code"), exports);
 __exportStar(require("./collapse"), exports);
 __exportStar(require("./color-text-field"), exports);
+__exportStar(require("./command-palette"), exports);
 __exportStar(require("./column-layout"), exports);
 __exportStar(require("./config-block"), exports);
 __exportStar(require("./content"), exports);

package/package.json

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