@refinedev/devtools 1.1.36 → 1.2.0

package/src/components/devtools-selector.tsx

@@ -1,109 +1,67 @@
 import React from "react";
-import { createPortal } from "react-dom";
 import { useSelector } from "src/utilities/use-selector";
-import { SelectorBox } from "./selector-box";
-import { SelectorHint } from "./selector-hint";
+import { ApplyStyles } from "./apply-styles";
+import { SelectableElements } from "./selectable-elements";
 
 type Props = {
-  onSelectorOpen: () => void;
+  active: boolean;
+  setActive: React.Dispatch<React.SetStateAction<boolean>>;
   onHighlight: (name: string) => void;
   icon?: React.ReactNode;
   style?: React.CSSProperties;
 };
 
 export const DevtoolsSelector = ({
-  onSelectorOpen,
+  active,
+  setActive,
   onHighlight,
   icon,
   style,
 }: Props) => {
-  const [hover, setHover] = React.useState(false);
-  const [active, setActive] = React.useState(false);
-  const { rect, name } = useSelector(active);
+  const { selectableElements } = useSelector(active);
 
-  const [selectorBoxRoot, setSelectorBoxRoot] =
-    React.useState<HTMLElement | null>(null);
-
-  React.useEffect(() => {
-    if (!selectorBoxRoot) {
-      const element = document.createElement("div");
-      element.id = "selector-box-root";
-
-      document.body.appendChild(element);
-
-      setSelectorBoxRoot(element);
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (active) {
-      document.body.style.cursor = "crosshair";
-    } else {
-      document.body.style.cursor = "default";
-    }
-  }, [active]);
-
-  React.useEffect(() => {
-    const onMouseClick = (e: MouseEvent) => {
-      if (!active) return;
-      if (!name) return;
-
-      e?.preventDefault();
-      e?.stopPropagation();
-      e.stopImmediatePropagation();
-      onHighlight(name);
-      setActive(false);
-    };
-
-    if (active) {
-      document.addEventListener("click", onMouseClick, {
-        capture: true,
-      });
-
-      return () => {
-        document.removeEventListener("click", onMouseClick, {
-          capture: true,
-        });
-      };
-    }
-
-    return () => 0;
-  }, [name, onHighlight, active]);
-
-  React.useEffect(() => {
-    if (active) {
-      onSelectorOpen();
-    }
-  }, [active, onSelectorOpen]);
+  const onSelect = (name: string) => {
+    onHighlight(name);
+    setActive(false);
+  };
 
   return (
     <div style={style}>
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
       <div
         role="button"
         title="Element Selector"
-        onMouseOver={() => setHover(true)}
-        onMouseOut={() => setHover(false)}
+        className="refine-devtools-selector-button"
         onClick={(event) => {
           event.preventDefault();
           event.stopPropagation();
           (document?.activeElement as HTMLElement)?.blur();
           setActive((active) => !active);
         }}
-        style={{
-          padding: 0,
-          margin: 0,
-          height: "100%",
-          width: "100%",
-          transform: hover ? "rotate(180deg)" : "rotate(0deg)",
-          transition: "transform 0.2s ease-in-out",
-        }}
       >
         {icon}
       </div>
-      <SelectorHint active={active} />
-      {active &&
-        selectorBoxRoot &&
-        createPortal(<SelectorBox {...rect} name={name} />, selectorBoxRoot)}
+      {active && (
+        <SelectableElements elements={selectableElements} onSelect={onSelect} />
+      )}
+      <ApplyStyles>
+        {
+          /* css */ `
+        .refine-devtools-selector-button {
+          padding: 0;
+          margin: 0;
+          height: 100%;
+          width: 100%;
+          transform: rotate(0deg);
+          transition: transform 0.2s ease-in-out;
+        }
+
+        .refine-devtools-selector-button:hover {
+          transform: rotate(180deg);
+        }
+    `
+        }
+      </ApplyStyles>
     </div>
   );
 };

package/src/components/icons/selector-button.tsx

@@ -17,3 +17,21 @@ export const SelectorButtonIcon = (props: React.SVGProps<SVGSVGElement>) => (
     />
   </svg>
 );
+
+export const SelectorIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#14141F"
+      fillRule="evenodd"
+      d="M9 1a1 1 0 0 0-2 0v2.1A5.006 5.006 0 0 0 3.1 7H1a1 1 0 0 0 0 2h2.1A5.006 5.006 0 0 0 7 12.9V15a1 1 0 1 0 2 0v-2.1A5.006 5.006 0 0 0 12.9 9H15a1 1 0 1 0 0-2h-2.1A5.006 5.006 0 0 0 9 3.1V1Zm2 7a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/components/selectable-elements.tsx

@@ -0,0 +1,255 @@
+import React from "react";
+import debounce from "lodash/debounce";
+import { createPortal } from "react-dom";
+import { ApplyStyles } from "./apply-styles";
+import { SelectorIcon } from "./icons/selector-button";
+
+const SelectableElement = ({
+  element,
+  name,
+  onSelect,
+}: {
+  element: HTMLElement;
+  name: string;
+  onSelect: (name: string) => void;
+}) => {
+  const [position] = React.useState(() => {
+    const { top, left, width, height } = element.getBoundingClientRect();
+    const { scrollLeft, scrollTop } = document.documentElement;
+    const positionLeft = left + scrollLeft;
+    const positionTop = top + scrollTop;
+
+    return { left: positionLeft, top: positionTop, width, height };
+  });
+
+  const elementRef = React.useRef<HTMLButtonElement | null>(null);
+
+  React.useEffect(() => {
+    // use scroll event listener
+    const onScroll = debounce(
+      () => {
+        const { top, left, width, height } = element.getBoundingClientRect();
+        const { scrollLeft, scrollTop } = document.documentElement;
+        const positionLeft = left + scrollLeft;
+        const positionTop = top + scrollTop;
+
+        elementRef.current?.style.setProperty("left", `${positionLeft}px`);
+        elementRef.current?.style.setProperty("top", `${positionTop}px`);
+        elementRef.current?.style.setProperty("width", `${width}px`);
+        elementRef.current?.style.setProperty("height", `${height}px`);
+        elementRef.current?.style.setProperty("opacity", "1");
+      },
+      200,
+      {
+        leading: false,
+        trailing: true,
+      },
+    );
+
+    const opacityOnScroll = debounce(
+      () => {
+        elementRef.current?.style.setProperty("opacity", "0");
+      },
+      200,
+      {
+        leading: true,
+        trailing: false,
+      },
+    );
+
+    document.addEventListener("scroll", onScroll);
+    document.addEventListener("scroll", opacityOnScroll);
+
+    return () => {
+      document.removeEventListener("scroll", onScroll);
+      document.removeEventListener("scroll", opacityOnScroll);
+    };
+  }, [element]);
+
+  const placement = React.useMemo(() => {
+    const tooltipBaseSize = { width: 22, height: 22 };
+    const nameWidth = name.length * 7.5;
+    const tooltipSize = {
+      width: tooltipBaseSize.width + nameWidth,
+      height: tooltipBaseSize.height,
+    };
+    const gap = 4;
+
+    // outside top start
+    if (
+      position.top - tooltipSize.height > 0 &&
+      position.left + tooltipSize.width < window.innerWidth &&
+      position.width > tooltipSize.width
+    ) {
+      return { left: gap / 2, top: tooltipSize.height * -1 - gap };
+    }
+    // inside top start
+    if (
+      position.height >= tooltipSize.height * 1.5 &&
+      position.width >= tooltipSize.width * 1.5
+    ) {
+      return { left: 0 + gap, top: 0 + gap };
+    }
+    // outside left start
+    if (position.left - tooltipSize.width > 0) {
+      return { right: position.width + gap, top: 0 - 1 };
+    }
+    // outside right start
+    if (
+      position.left + position.width + tooltipSize.width <
+      window.innerWidth
+    ) {
+      return { left: position.width + gap, top: 0 - 1 };
+    }
+    // outside bottom start
+    if (
+      position.top + position.height + tooltipSize.height <
+      document.documentElement.scrollHeight
+    ) {
+      return { left: 0 - 1, top: position.height + gap };
+    }
+
+    return { left: 0, top: 0 };
+  }, [position, name.length]);
+
+  return (
+    <button
+      type="button"
+      className="selector-xray-box"
+      onClick={(event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        onSelect(name);
+      }}
+      ref={elementRef}
+      style={{
+        position: "absolute",
+        ...position,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          ...placement,
+        }}
+        className="selector-xray-info"
+      >
+        <span className="selector-xray-info-icon">
+          <SelectorIcon
+            width={12}
+            height={12}
+            style={{ pointerEvents: "none" }}
+          />
+        </span>
+        <span className="selector-xray-info-title">{` ${name}`}</span>
+      </div>
+    </button>
+  );
+};
+
+export const SelectableElements = ({
+  elements,
+  onSelect,
+}: {
+  elements: Array<{ element: HTMLElement; name: string }>;
+  onSelect: (name: string) => void;
+}) => {
+  const [selectorBoxRoot, setSelectorBoxRoot] =
+    React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    if (!selectorBoxRoot) {
+      const element = document.createElement("div");
+      element.id = "selector-box-root";
+
+      document.body.appendChild(element);
+
+      setSelectorBoxRoot(element);
+
+      return () => {
+        document.body.removeChild(element);
+        setSelectorBoxRoot(null);
+      };
+    }
+
+    return () => 0;
+  }, []);
+
+  if (!selectorBoxRoot) return null;
+
+  return (
+    <>
+      {createPortal(
+        elements.map((element, idx) => (
+          <SelectableElement
+            key={`selector-element-${idx}-${element.name}`}
+            {...element}
+            onSelect={onSelect}
+          />
+        )),
+        selectorBoxRoot,
+      )}
+      <ApplyStyles>
+        {
+          /* css */ `
+          .selector-xray-box {
+            display: flex;
+            margin: 0;
+            padding: 0;
+            appearance: none;
+            z-index: 9999;
+            border: 2px dashed #47EBEB;
+            border-radius: 6px;
+            background: rgba(71, 235, 235, 0.01);
+            transition: opacity 0.2s ease-in-out;
+            cursor: crosshair;
+          }
+        
+          .selector-xray-info {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+      
+            z-index: 10;
+      
+            padding: 3px 0;
+            min-width: 22px;
+            height: 22px;
+      
+            color: #14141F;
+            background: #47EBEB;
+      
+            font-size: 12px;
+            line-height: 16px;
+            font-family: monospace;
+            border-radius: 11px;
+          }
+      
+          .selector-xray-info-icon {
+            display: flex;
+            min-width: 22px;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+          }
+      
+          .selector-xray-info-title {
+            display: block;
+            max-width: 0;
+            overflow: hidden;
+            transition-property: max-width, padding-right;
+            transition-duration: 0.2s;
+            transition-timing-function: ease-in-out;
+            transition-delay: 0.1s;
+          }
+      
+          .selector-xray-box:hover .selector-xray-info-title {
+            max-width: 200px;
+            padding-right: 8px;
+          }
+        `
+        }
+      </ApplyStyles>
+    </>
+  );
+};

package/src/index.ts

@@ -1,2 +1,2 @@
-export { DevtoolsPanel } from "./panel";
-export { DevtoolsProvider } from "./provider";
+export { DevtoolsPanel } from "./panel.tsx";
+export { DevtoolsProvider } from "./provider.tsx";

package/src/panel.tsx

@@ -19,6 +19,7 @@ export const DevtoolsPanel =
         const [placement] = React.useState<Placement>("bottom");
         const { devtoolsUrl, ws } = React.useContext(DevToolsContext);
         const [width, setWidth] = React.useState<number>(0);
+        const [selectorActive, setSelectorActive] = React.useState(false);
 
         const onSelectorHighlight = React.useCallback(
           (name: string) => {
@@ -36,6 +37,12 @@ export const DevtoolsPanel =
           setVisible(false);
         }, []);
 
+        React.useEffect(() => {
+          if (selectorActive) {
+            setVisible(false);
+          }
+        }, [selectorActive]);
+
         React.useEffect(() => {
           if (typeof window !== "undefined") {
             setBrowser(true);
@@ -76,9 +83,13 @@ export const DevtoolsPanel =
             }}
           >
             <DevtoolsPin
-              onClick={() => setVisible((v) => !v)}
+              onClick={() => {
+                setVisible((v) => !v);
+                setSelectorActive(false);
+              }}
               onSelectorHighlight={onSelectorHighlight}
-              onSelectorOpen={onSelectorOpen}
+              selectorActive={selectorActive}
+              setSelectorActive={setSelectorActive}
             />
             <ResizablePane visible={visible} placement={placement}>
               {({ resizing }) => (