@auth0/quantum-product 2.10.3 → 2.10.4

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

@@ -32,6 +32,22 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandPaletteGroupContext = exports.CommandPaletteStoreContext = exports.CommandPaletteContext = void 0;
 exports.useCommandPaletteContext = useCommandPaletteContext;
@@ -57,5 +73,21 @@ function useCommandPaletteStore() {
 }
 function useCommandPaletteState(selector) {
     var store = useCommandPaletteStore();
-    return React.useSyncExternalStore(store.subscribe, function () { return selector(store.snapshot()); }, function () { return selector(store.snapshot()); });
+    var selectorRef = React.useRef(selector);
+    var _a = __read(React.useState(function () { return selector(store.snapshot()); }), 2), state = _a[0], setState = _a[1];
+    React.useEffect(function () {
+        selectorRef.current = selector;
+        setState(selector(store.snapshot()));
+    }, [selector, store]);
+    React.useLayoutEffect(function () {
+        var unsubscribe = store.subscribe(function () {
+            setState(function (prevSelected) {
+                var nextSelected = selectorRef.current(store.snapshot());
+                return Object.is(prevSelected, nextSelected) ? prevSelected : nextSelected;
+            });
+        });
+        return unsubscribe;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [store]);
+    return state;
 }

package/command-palette/command-palette-group.js

@@ -62,6 +62,7 @@ exports.CommandPaletteGroup = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../styled");
 var clsx_1 = __importDefault(require("../utils/clsx"));
+var use_id_1 = require("../utils/use-id");
 var command_palette_classes_1 = require("./command-palette-classes");
 var command_palette_context_1 = require("./command-palette-context");
 var Root = (0, styled_1.styled)('div', {
@@ -97,7 +98,7 @@ var Items = (0, styled_1.styled)('div', {
 }); });
 exports.CommandPaletteGroup = React.forwardRef(function (props, ref) {
     var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, children = props.children, className = props.className, groupProps = __rest(props, ["heading", "forceMount", "children", "className"]);
-    var id = React.useId();
+    var id = (0, use_id_1.useId)() || '';
     var headingId = "".concat(id, "-heading");
     var context = (0, command_palette_context_1.useCommandPaletteContext)();
     React.useLayoutEffect(function () {

package/command-palette/command-palette-item.js

@@ -88,6 +88,7 @@ var React = __importStar(require("react"));
 var useForkRef_1 = __importDefault(require("@mui/utils/useForkRef"));
 var styled_1 = require("../styled");
 var clsx_1 = __importDefault(require("../utils/clsx"));
+var use_id_1 = require("../utils/use-id");
 var command_palette_1 = require("./command-palette");
 var command_palette_classes_1 = require("./command-palette-classes");
 var command_palette_context_1 = require("./command-palette-context");
@@ -197,8 +198,15 @@ function useValue(id, ref, deps) {
 }
 exports.CommandPaletteItem = React.forwardRef(function (props, ref) {
     var _a;
-    var valueProp = props.value, keywords = props.keywords, _b = props.disabled, disabled = _b === void 0 ? false : _b, onSelect = props.onSelect, _c = props.forceMount, forceMount = _c === void 0 ? false : _c, icon = props.icon, shortcut = props.shortcut, children = props.children, className = props.className, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "children", "className"]);
-    var id = React.useId();
+    var _b, _c;
+    var valueProp = props.value, keywords = props.keywords, _d = props.disabled, disabled = _d === void 0 ? false : _d, onSelect = props.onSelect, _e = props.forceMount, forceMount = _e === void 0 ? false : _e, icon = props.icon, shortcut = props.shortcut, children = props.children, className = props.className, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "children", "className"]);
+    var generatedId = (0, use_id_1.useId)();
+    var idRef = React.useRef();
+    if (!idRef.current) {
+        idRef.current =
+            (_c = (_b = itemProps.id) !== null && _b !== void 0 ? _b : generatedId) !== null && _c !== void 0 ? _c : "command-palette-item-".concat(Math.random().toString(36).slice(2));
+    }
+    var id = idRef.current;
     var itemRef = React.useRef(null);
     var context = (0, command_palette_context_1.useCommandPaletteContext)();
     var store = (0, command_palette_context_1.useCommandPaletteStore)();

package/command-palette/command-palette.js

@@ -79,6 +79,7 @@ var React = __importStar(require("react"));
 var styled_1 = require("../styled");
 var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
+var use_id_1 = require("../utils/use-id");
 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");
@@ -218,10 +219,12 @@ function useScheduleLayoutEffect() {
     }, []);
 }
 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 _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 = (0, use_id_1.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());
@@ -367,9 +370,9 @@ exports.CommandPalette = React.forwardRef(function (props, ref) {
             };
         },
         filter: filter,
-        label: label,
-        listId: listId,
-        inputId: inputId,
+        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

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

@@ -1,3 +1,19 @@
+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';
 export var CommandPaletteContext = React.createContext(undefined);
 export var CommandPaletteStoreContext = React.createContext(undefined);
@@ -18,5 +34,21 @@ export function useCommandPaletteStore() {
 }
 export function useCommandPaletteState(selector) {
     var store = useCommandPaletteStore();
-    return React.useSyncExternalStore(store.subscribe, function () { return selector(store.snapshot()); }, function () { return selector(store.snapshot()); });
+    var selectorRef = React.useRef(selector);
+    var _a = __read(React.useState(function () { return selector(store.snapshot()); }), 2), state = _a[0], setState = _a[1];
+    React.useEffect(function () {
+        selectorRef.current = selector;
+        setState(selector(store.snapshot()));
+    }, [selector, store]);
+    React.useLayoutEffect(function () {
+        var unsubscribe = store.subscribe(function () {
+            setState(function (prevSelected) {
+                var nextSelected = selectorRef.current(store.snapshot());
+                return Object.is(prevSelected, nextSelected) ? prevSelected : nextSelected;
+            });
+        });
+        return unsubscribe;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [store]);
+    return state;
 }

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

@@ -23,6 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { styled } from '../styled';
 import clsx from '../utils/clsx';
+import { useId } from '../utils/use-id';
 import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
 import { CommandPaletteGroupContext, useCommandPaletteContext, useCommandPaletteState, } from './command-palette-context';
 var Root = styled('div', {
@@ -58,7 +59,7 @@ var Items = styled('div', {
 }); });
 export var CommandPaletteGroup = React.forwardRef(function (props, ref) {
     var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, children = props.children, className = props.className, groupProps = __rest(props, ["heading", "forceMount", "children", "className"]);
-    var id = React.useId();
+    var id = useId() || '';
     var headingId = "".concat(id, "-heading");
     var context = useCommandPaletteContext();
     React.useLayoutEffect(function () {

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

@@ -49,6 +49,7 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '../styled';
 import clsx from '../utils/clsx';
+import { useId } from '../utils/use-id';
 import { VALUE_ATTR } from './command-palette';
 import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
 import { CommandPaletteGroupContext, useCommandPaletteContext, useCommandPaletteState, useCommandPaletteStore, } from './command-palette-context';
@@ -158,8 +159,15 @@ function useValue(id, ref, deps) {
 }
 export var CommandPaletteItem = React.forwardRef(function (props, ref) {
     var _a;
-    var valueProp = props.value, keywords = props.keywords, _b = props.disabled, disabled = _b === void 0 ? false : _b, onSelect = props.onSelect, _c = props.forceMount, forceMount = _c === void 0 ? false : _c, icon = props.icon, shortcut = props.shortcut, children = props.children, className = props.className, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "children", "className"]);
-    var id = React.useId();
+    var _b, _c;
+    var valueProp = props.value, keywords = props.keywords, _d = props.disabled, disabled = _d === void 0 ? false : _d, onSelect = props.onSelect, _e = props.forceMount, forceMount = _e === void 0 ? false : _e, icon = props.icon, shortcut = props.shortcut, children = props.children, className = props.className, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "children", "className"]);
+    var generatedId = useId();
+    var idRef = React.useRef();
+    if (!idRef.current) {
+        idRef.current =
+            (_c = (_b = itemProps.id) !== null && _b !== void 0 ? _b : generatedId) !== null && _c !== void 0 ? _c : "command-palette-item-".concat(Math.random().toString(36).slice(2));
+    }
+    var id = idRef.current;
     var itemRef = React.useRef(null);
     var context = useCommandPaletteContext();
     var store = useCommandPaletteStore();

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

@@ -40,6 +40,7 @@ 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';
@@ -178,10 +179,12 @@ function useScheduleLayoutEffect() {
     }, []);
 }
 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 _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());
@@ -327,9 +330,9 @@ export var CommandPalette = React.forwardRef(function (props, ref) {
             };
         },
         filter: filter,
-        label: label,
-        listId: listId,
-        inputId: inputId,
+        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

package/package.json

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