feat: Experimental INP fix

packages/sdk-components-react-radix/package.json

@@ -59,10 +59,12 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.4",
+    "@radix-ui/react-use-controllable-state": "^1.1.0",
     "@webstudio-is/css-engine": "workspace:*",
     "@webstudio-is/icons": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
-    "@webstudio-is/sdk": "workspace:*"
+    "@webstudio-is/sdk": "workspace:*",
+    "await-interaction-response": "^0.0.2"
   },
   "devDependencies": {
     "@types/node": "^22.9.3",

packages/sdk-components-react-radix/src/dialog.tsx

@@ -7,13 +7,16 @@ import {
   useEffect,
   useRef,
   useContext,
+  useCallback,
 } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import {
   ReactSdkContext,
   getClosestInstance,
   type Hook,
 } from "@webstudio-is/react-sdk/runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import interactionResponse from "await-interaction-response";
 
 /**
  * Naive heuristic to determine if a click event will cause navigate
@@ -49,9 +52,21 @@ export const Dialog = forwardRef<
   HTMLDivElement,
   Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, "defaultOpen">
 >((props, _ref) => {
-  const { open, onOpenChange } = props;
   const { renderer } = useContext(ReactSdkContext);
 
+  const [open, onOpenChange] = useControllableState({
+    prop: props.open,
+    onChange: props.onOpenChange,
+  });
+
+  const onOpenChangeHandler = useCallback(
+    async (open: boolean) => {
+      await interactionResponse();
+      onOpenChange(open);
+    },
+    [onOpenChange]
+  );
+
   /**
    * Close the dialog when a navigable link within it is clicked.
    */
@@ -76,15 +91,21 @@ export const Dialog = forwardRef<
       }
 
       if (target.closest('[role="dialog"]')) {
-        onOpenChange?.(false);
+        onOpenChangeHandler?.(false);
       }
     };
 
     window.addEventListener("click", handleClick);
     return () => window.removeEventListener("click", handleClick);
-  }, [open, onOpenChange, renderer]);
+  }, [open, onOpenChangeHandler, renderer]);
 
-  return <DialogPrimitive.Root {...props} />;
+  return (
+    <DialogPrimitive.Root
+      {...props}
+      onOpenChange={onOpenChangeHandler}
+      open={open}
+    />
+  );
 });
 
 /**