modern-cmdk 1.5.0 → 1.6.0

package/dist/react/index.d.mts

@@ -40,7 +40,10 @@ export declare function CommandEmpty({ ref, children, ...props }: CommandEmptyPr
 interface CommandGroupProps extends ComponentPropsWithRef<"div"> {
   /** Heading text displayed above the group */
   readonly heading?: string;
-  /** Sort priority (lower = higher in list) */
+  /**
+   * Orders the keys of `CommandState.groupedIds` (lower first). React renders the groups in the JSX order
+   * of the group elements, not by this number.
+   */
   readonly priority?: number;
   /** Force a specific ID */
   readonly forceId?: string;

package/dist/react/index.mjs

@@ -111,6 +111,14 @@ function useRegisterItem(value, options) {
 	const dataRef = useRef(options?.data);
 	dataRef.current = options?.data;
 	const keywordsDep = options?.keywords?.join("\0");
+	const registeredRef = useRef(false);
+	useLayoutEffect(() => () => {
+		registeredRef.current = false;
+		stable.machine.send({
+			type: "UNREGISTER_ITEM",
+			id
+		});
+	}, [stable.machine, id]);
 	useLayoutEffect(() => {
 		const item = {
 			id,
@@ -123,15 +131,10 @@ function useRegisterItem(value, options) {
 			data: dataRef.current
 		};
 		stable.machine.send({
-			type: "REGISTER_ITEM",
+			type: registeredRef.current ? "UPDATE_ITEM" : "REGISTER_ITEM",
 			item
 		});
-		return () => {
-			stable.machine.send({
-				type: "UNREGISTER_ITEM",
-				id
-			});
-		};
+		registeredRef.current = true;
 	}, [
 		stable.machine,
 		id,
@@ -178,13 +181,14 @@ const HIDDEN_STYLE = { display: "none" };
 /** Visual grouping container with an optional heading that hides when no items match. */
 function CommandGroup({ ref, children, heading, priority, forceId, ...props }) {
 	const stateCtx = useStateContext("Command.Group");
+	const stable = useStableContext("Command.Group");
 	const headingId = useId();
 	const groupId = useRegisterGroup(heading, {
 		...priority !== void 0 && { priority },
 		...forceId !== void 0 && { forceId }
 	});
-	const groupItems = stateCtx.state.groupedIds.get(groupId);
-	const hasVisibleItems = groupItems !== void 0 && groupItems.length > 0;
+	const registry = stable.machine.getRegistry();
+	const hasVisibleItems = stateCtx.state.groupedIds.get(groupId)?.some((id) => registry.getItem(id)?.groupId === groupId) ?? false;
 	const groupContext = useMemo(() => ({
 		groupId,
 		headingId

package/dist/react/styles.css

@@ -1,11 +1,5 @@
 /* modern-cmdk/react — tokens, item and list transitions; the dialog and overlay transitions are declared but inert until DT-19 */
-/* All animations respect prefers-reduced-motion */
-/* Spring easing via linear() approximation — perceptually smooth */
-/* Scroll-driven animations via animation-timeline: scroll() */
-/* WCAG 2.1 AA: forced-colors, prefers-contrast, prefers-reduced-motion */
-/* CSS Logical Properties: full RTL/LTR support */
-/* CSS Nesting, @layer cascade control, oklch() color space */
-/* Container queries for responsive item layout */
+/* Also: scroll-driven animations (gated by @supports), WCAG 2.1 AA forced-colors, prefers-contrast and prefers-reduced-motion, logical properties for RTL/LTR, nesting, @layer, oklch(), container queries */
 /* Secondary text (group headings, shortcuts, empty state, placeholder) is coloured with
    --command-muted-color, never faded with opacity: opacity stacks on the consumer's text
    colour and cannot be checked against it. The default is light-dark(), so it follows the
@@ -191,7 +185,6 @@
   [data-command-list] {
     overflow-y: auto;
     overscroll-behavior: contain;
-    scroll-timeline: --list-scroll block;
     will-change: height;
     transition: height var(--command-duration-list) var(--command-spring-easing);
     scrollbar-gutter: stable;
@@ -209,6 +202,7 @@
 
   [data-command-item] {
     cursor: pointer;
+    -webkit-user-select: none;
     user-select: none;
     transition: background-color var(--command-duration-item) linear(0, 0.25, 0.5, 0.75, 1);
     scroll-margin-block: 8px;
@@ -237,6 +231,7 @@
   /* ─── Group ─── */
 
   [data-command-group-heading] {
+    -webkit-user-select: none;
     user-select: none;
     font-size: 0.75em;
     text-transform: uppercase;
@@ -340,9 +335,7 @@
       overlay var(--command-duration-exit) allow-discrete;
   }
 
-  /* ─── Dialog Animations ─── */
-  /* Dialog transitions: inert until DT-19 */
-  /* Spring easing via linear() approximation */
+  /* ─── Dialog Animations (inert until DT-19) ─── */
 
   [data-command-dialog][data-state="open"] {
     @starting-style {
@@ -400,24 +393,16 @@
     &::before {
       inset-block-start: 0;
       background: linear-gradient(to bottom, currentColor, transparent);
-      opacity: 0.08;
-      animation: fade-edge-top linear both;
-      animation-timeline: --list-scroll;
-      animation-range: 0px 24px;
     }
 
     /* Bottom fade — visible when not scrolled to bottom */
     &::after {
       inset-block-end: 0;
       background: linear-gradient(to top, currentColor, transparent);
-      opacity: 0.08;
-      animation: fade-edge-bottom linear both;
-      animation-timeline: --list-scroll;
-      animation-range: calc(100% - 24px) 100%;
     }
   }
 
-  @keyframes fade-edge-top {
+  @keyframes fade-edge {
     from {
       opacity: 0;
     }
@@ -426,23 +411,12 @@
     }
   }
 
-  @keyframes fade-edge-bottom {
-    from {
-      opacity: 0.08;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
   /* ─── Scroll-Driven Progress Indicator ─── */
 
   [data-command-scroll-indicator] {
     block-size: 2px;
     transform-origin: inline-start center;
     scale: 0 1;
-    animation: scroll-progress linear both;
-    animation-timeline: --list-scroll;
     will-change: scale;
   }
 
@@ -455,6 +429,34 @@
     }
   }
 
+  /* Safari < 26 and Firefox < 159 lack animation-timeline: a time-based run would settle in its end state, so the wiring waits */
+  @supports (animation-timeline: scroll()) {
+    [data-command-list] {
+      scroll-timeline: --list-scroll;
+
+      &::before {
+        animation: fade-edge linear both;
+        animation-range: 0px 24px;
+      }
+
+      &::after {
+        animation: fade-edge linear both reverse;
+        animation-range: calc(100% - 24px) 100%;
+      }
+
+      &::before,
+      &::after {
+        opacity: 0.08;
+        animation-timeline: --list-scroll;
+      }
+    }
+
+    [data-command-scroll-indicator] {
+      animation: scroll-progress linear both;
+      animation-timeline: --list-scroll;
+    }
+  }
+
   /* ─── Focus Indicators ─── */
 
   [data-command-item]:focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modern-cmdk",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "description": "The definitive command palette engine for the modern web",
   "license": "MIT",