@tensor_1/react 2.45.1 → 2.46.0

package/README.md

@@ -256,6 +256,24 @@ Radial mode still shortens long labels to fit its ring, but every node carries i
 
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.
 
+### Motion: reduced motion, instant dialogs
+
+The motion contract lives on the docs Foundations → Motion page and is checked by `check-motion.mjs`. Under
+`prefers-reduced-motion: reduce` the stylesheets drop movement and keep fades, and the loading indicators pulse
+instead of freezing. Motion that your JavaScript drives (a swipe, a scripted scroll, a pan or zoom) reads the same
+preference with `useReducedMotion()` (or `prefersReducedMotion()` in an event handler) and lands on the end state.
+
+`Modal instant` opens and closes with no animation, for a keyboard-initiated or many-times-a-day dialog.
+`CommandPalette` marks the dialog or popover it sits in itself, so a palette in a plain `Modal` is instant without
+`data-uix-cmdk-dialog`. `Meter` and `Progress` move on `transform` (they set `--val`, 0–1).
+
+```tsx
+const reduce = useReducedMotion();
+graph.fitView({ animate: !reduce });
+
+<Modal open={open} onClose={close} aria-label="Command palette"><CommandPalette>…</CommandPalette></Modal>
+```
+
 ### Drawer closes on a backdrop click
 
 `Drawer` closes on a click on the dimmed backdrop, as well as on Escape and its close button, and calls the same

package/dist/components/CommandPalette.d.ts

@@ -18,6 +18,10 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
  * Modal/Popover and wire search + keyboard selection in the consumer. The input is
  * a combobox over the listbox of `CommandItem`s; spreads override every default, so
  * consumers already passing their own roles/labels keep working.
+ *
+ * ⌘K is keyboard-initiated and used many times a day, so the palette marks the dialog or
+ * popover it sits in `[data-uix-instant]`: it opens and closes with no animation, without the
+ * consumer knowing the attribute (or the older `data-uix-cmdk-dialog`).
  */
 declare function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, resultsLabel, className, ...props }: CommandPaletteProps): react.JSX.Element;
 interface CommandGroupProps {

package/dist/components/CommandPalette.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { fillLabel } from "../fill-label.js";
 import { useUixLabels } from "../labels-context.js";
 const CmdkContext = createContext(null);
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, resultsLabel, className, ...props }) {
   const uixLabels = useUixLabels();
   const inputLabel = inputLabelProp ?? uixLabels.commandPalette?.input ?? "Command palette";
@@ -14,6 +15,13 @@ function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, resu
   const resultsTextRef = useRef(resultsText);
   resultsTextRef.current = resultsText;
   const listId = useId();
+  const rootRef = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const overlay = rootRef.current?.closest("dialog, [popover]");
+    if (!overlay || overlay.hasAttribute("data-uix-instant")) return;
+    overlay.setAttribute("data-uix-instant", "");
+    return () => overlay.removeAttribute("data-uix-instant");
+  }, []);
   const [activeId, setActiveId] = useState(null);
   const [count, setCount] = useState(0);
   const [announced, setAnnounced] = useState("");
@@ -29,7 +37,7 @@ function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, resu
     return () => clearTimeout(t);
   }, [count]);
   const ctx = useMemo(() => ({ listId, setActive, registerItem }), [listId, setActive, registerItem]);
-  return /* @__PURE__ */ jsx(CmdkContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk", className), ...props, children: [
+  return /* @__PURE__ */ jsx(CmdkContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cx("uix-cmdk", className), ...props, children: [
     /* @__PURE__ */ jsx(
       "input",
       {

package/dist/components/Meter.js

@@ -25,7 +25,7 @@ function Meter({ value = 0, tone, label, toneLabels, className, ...props }) {
         "div",
         {
           className: "uix-meter__fill",
-          style: { width: `${pct}%` },
+          style: { "--val": pct / 100 },
           ...tone && tone !== "success" ? { "data-tone": tone } : {}
         }
       )

package/dist/components/Modal.d.ts

@@ -28,7 +28,12 @@ interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     /** Accessible name for the close button (default "Close dialog"). */
     closeLabel?: string;
     role?: 'dialog' | 'alertdialog';
+    /**
+     * Open and close with no animation (`[data-uix-instant]`). For a keyboard-initiated or
+     * many-times-a-day dialog. A `CommandPalette` inside sets this on its own.
+     */
+    instant?: boolean;
 }
-declare function Modal({ open, onClose, dirty, pending, discardLabels, title, children, footer, className, closeLabel: closeLabelProp, role, onKeyDown, ...rest }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, dirty, pending, discardLabels, title, children, footer, className, closeLabel: closeLabelProp, role, instant, onKeyDown, ...rest }: ModalProps): react.JSX.Element;
 
 export { Modal, type ModalProps };

package/dist/components/Modal.js

@@ -17,6 +17,7 @@ function Modal({
   className,
   closeLabel: closeLabelProp,
   role = "dialog",
+  instant = false,
   onKeyDown,
   ...rest
 }) {
@@ -32,6 +33,7 @@ function Modal({
       className: cx("uix-dialog", className),
       role,
       "aria-labelledby": title != null ? titleId : void 0,
+      "data-uix-instant": instant ? "" : void 0,
       ...rest,
       onKeyDown: (event) => {
         onKeyDown?.(event);

package/dist/components/Progress.js

@@ -13,7 +13,7 @@ function Progress({ value = 0, max = 100, indeterminate, label, className, ...pr
       "aria-label": label,
       className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
       ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
+      children: /* @__PURE__ */ jsx("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { "--val": pct / 100 } })
     }
   );
 }

package/dist/hooks/useReducedMotion.d.ts

@@ -0,0 +1,6 @@
+/** Non-hook read for event handlers and effects. `false` where there is no `matchMedia` (SSR, tests). */
+declare function prefersReducedMotion(): boolean;
+/** True while the user asks for reduced motion; re-renders when the setting changes. `false` on the server. */
+declare function useReducedMotion(): boolean;
+
+export { prefersReducedMotion, useReducedMotion };

package/dist/hooks/useReducedMotion.js

@@ -0,0 +1,20 @@
+"use client";
+import { useSyncExternalStore } from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+  if (typeof matchMedia === "undefined") return () => {
+  };
+  const mql = matchMedia(QUERY);
+  mql.addEventListener("change", onChange);
+  return () => mql.removeEventListener("change", onChange);
+}
+function prefersReducedMotion() {
+  return typeof matchMedia !== "undefined" && matchMedia(QUERY).matches;
+}
+function useReducedMotion() {
+  return useSyncExternalStore(subscribe, prefersReducedMotion, () => false);
+}
+export {
+  prefersReducedMotion,
+  useReducedMotion
+};