Merge branch 'main' into feat/pages-updates

apps/designer/app/canvas/shared/use-track-hovered-element.ts

@@ -1,6 +1,7 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useSelectedElement } from "./nano-states";
 import { useRootInstance } from "~/shared/nano-states";
+import { useDebounce } from "react-use";
 
 const eventOptions = {
   passive: true,
@@ -11,23 +12,27 @@ export const useTrackHoveredElement = (
 ) => {
   const [rootInstance] = useRootInstance();
   const [selectedElement] = useSelectedElement();
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement>();
+
+  useDebounce(
+    () => {
+      onChange(hoveredElement);
+    },
+    50,
+    [hoveredElement]
+  );
 
   useEffect(() => {
     const handleMouseOver = (event: MouseEvent) => {
       const element = event.target;
-      if (
-        rootInstance === undefined ||
-        !(element instanceof HTMLElement) ||
-        element.dataset.outlineDisabled
-      ) {
+      if (rootInstance === undefined || !(element instanceof HTMLElement)) {
         return;
       }
-      onChange(element);
+      setHoveredElement(element);
     };
 
     const handleMouseOut = () => {
-      if (rootInstance === undefined) return;
-      onChange(undefined);
+      setHoveredElement(undefined);
     };
 
     window.addEventListener("mouseover", handleMouseOver, eventOptions);

apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import useDebounce from "react-use/lib/useDebounce";
+import { useDebounce } from "react-use";
 import { type Breakpoint } from "@webstudio-is/css-data";
 import { type Publish } from "~/shared/pubsub";
 import { Button, TextField, Flex, Text } from "@webstudio-is/design-system";