@auth0/quantum-product 2.10.2 → 2.10.4

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

@@ -0,0 +1,62 @@
+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 { useCommandPaletteContext } from './command-palette-context';
+var Root = styled('div', {
+    name: commandPaletteComponentName,
+    slot: 'List',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        height: theme.typography.pxToRem(300),
+        overflow: 'auto',
+        outline: 'none',
+        overscrollBehavior: 'contain',
+        scrollbarWidth: 'thin',
+        scrollbarColor: "".concat(theme.tokens.color_border_default, " transparent"),
+        '&::-webkit-scrollbar': {
+            width: 6,
+        },
+        '&::-webkit-scrollbar-track': {
+            background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: theme.tokens.color_border_default,
+            borderRadius: 3,
+        },
+    });
+});
+var Inner = styled('div', {
+    name: commandPaletteComponentName,
+    slot: 'ListInner',
+})(function () { return ({}); });
+export var CommandPaletteList = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, style = props.style, listProps = __rest(props, ["children", "className", "style"]);
+    var context = useCommandPaletteContext();
+    return (React.createElement(Root, __assign({ ref: ref, id: context.listId, role: "listbox", "aria-label": "Suggestions", className: clsx(commandPaletteClasses.list, className), style: style }, listProps),
+        React.createElement(Inner, { ref: context.listInnerRef }, children)));
+});
+CommandPaletteList.displayName = 'CommandPaletteList';

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 {};