@refinedev/devtools 1.1.34 → 1.1.36

package/src/components/selector-box.tsx

@@ -5,103 +5,103 @@ const Y_OFFSET = 38;
 const X_OFFSET = 7;
 
 export const SelectorBox = ({
-    width,
-    height,
-    x,
-    y,
-    name,
+  width,
+  height,
+  x,
+  y,
+  name,
 }: {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    name: string;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  name: string;
 }) => {
-    const namePosition =
-        y > Y_OFFSET ? "top" : height > 3 * Y_OFFSET ? "inset" : "bottom";
+  const namePosition =
+    y > Y_OFFSET ? "top" : height > 3 * Y_OFFSET ? "inset" : "bottom";
 
-    const outlinePosition = x > X_OFFSET && y > X_OFFSET ? "outside" : "inside";
+  const outlinePosition = x > X_OFFSET && y > X_OFFSET ? "outside" : "inside";
 
-    return (
-        <div
-            id="selector-box"
-            style={{
-                pointerEvents: "none",
-                position: "fixed",
-                opacity: name ? 1 : 0,
-                transitionProperty: "width, height, transform, opacity",
-                transitionDuration: "0.15s",
-                transitionTimingFunction: "ease-out",
-                border: "1.5px solid #47EBEB",
-                borderRadius: "4px",
-                background: "rgba(37,160,160, 0.25)",
-                backdropFilter: "sepia(30%) hue-rotate(180deg)",
-                zIndex: 99998,
-                ...(outlinePosition === "outside"
-                    ? {
-                          left: -6,
-                          top: -6,
-                          width: width + 10,
-                          height: height + 10,
-                          transform: `translate(${x}px, ${y}px)`,
-                      }
-                    : {
-                          left: 0,
-                          top: 0,
-                          width: width - 10,
-                          height: height - 20,
-                          transform: `translate(${x + 4}px, ${y + 4}px)`,
-                      }),
-            }}
-        >
-            <div
-                style={{
-                    position: "absolute",
-                    left: "-1.5px",
-                    background: "#303450",
-                    border: "1px solid #474E6B",
-                    borderRadius: "4px",
-                    padding: "8px 12px",
-                    fontSize: "12px",
-                    lineHeight: "16px",
-                    fontWeight: 400,
-                    color: "#ffffff",
-                    display: name ? "block" : "none",
-                    ...(namePosition === "top" && {
-                        top: "-38px",
-                    }),
-                    ...(namePosition === "bottom" && {
-                        bottom: "-38px",
-                    }),
-                    ...(namePosition === "inset" && {
-                        top: "4px",
-                        left: "8px",
-                    }),
-                }}
-            >
-                {name}
+  return (
+    <div
+      id="selector-box"
+      style={{
+        pointerEvents: "none",
+        position: "fixed",
+        opacity: name ? 1 : 0,
+        transitionProperty: "width, height, transform, opacity",
+        transitionDuration: "0.15s",
+        transitionTimingFunction: "ease-out",
+        border: "1.5px solid #47EBEB",
+        borderRadius: "4px",
+        background: "rgba(37,160,160, 0.25)",
+        backdropFilter: "sepia(30%) hue-rotate(180deg)",
+        zIndex: 99998,
+        ...(outlinePosition === "outside"
+          ? {
+              left: -6,
+              top: -6,
+              width: width + 10,
+              height: height + 10,
+              transform: `translate(${x}px, ${y}px)`,
+            }
+          : {
+              left: 0,
+              top: 0,
+              width: width - 10,
+              height: height - 20,
+              transform: `translate(${x + 4}px, ${y + 4}px)`,
+            }),
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          left: "-1.5px",
+          background: "#303450",
+          border: "1px solid #474E6B",
+          borderRadius: "4px",
+          padding: "8px 12px",
+          fontSize: "12px",
+          lineHeight: "16px",
+          fontWeight: 400,
+          color: "#ffffff",
+          display: name ? "block" : "none",
+          ...(namePosition === "top" && {
+            top: "-38px",
+          }),
+          ...(namePosition === "bottom" && {
+            bottom: "-38px",
+          }),
+          ...(namePosition === "inset" && {
+            top: "4px",
+            left: "8px",
+          }),
+        }}
+      >
+        {name}
 
-                <ArrowUnionIcon
-                    style={{
-                        position: "absolute",
-                        left: "30%",
-                        ...(namePosition === "top" && {
-                            transform: "translateX(-50%) rotate(180deg)",
-                            bottom: "-9px",
-                        }),
-                        ...(namePosition === "bottom" && {
-                            transform: "translateX(-50%) ",
-                            top: "-9px",
-                        }),
-                        ...(namePosition === "inset" && {
-                            transform: "translateX(-50%) rotate(-90deg)",
-                            top: "8px",
-                            left: "-1px",
-                        }),
-                        display: name ? "block" : "none",
-                    }}
-                />
-            </div>
-        </div>
-    );
+        <ArrowUnionIcon
+          style={{
+            position: "absolute",
+            left: "30%",
+            ...(namePosition === "top" && {
+              transform: "translateX(-50%) rotate(180deg)",
+              bottom: "-9px",
+            }),
+            ...(namePosition === "bottom" && {
+              transform: "translateX(-50%) ",
+              top: "-9px",
+            }),
+            ...(namePosition === "inset" && {
+              transform: "translateX(-50%) rotate(-90deg)",
+              top: "8px",
+              left: "-1px",
+            }),
+            display: name ? "block" : "none",
+          }}
+        />
+      </div>
+    </div>
+  );
 };

package/src/components/selector-hint.tsx

@@ -1,57 +1,57 @@
 import React from "react";
 
 export const SelectorHint = ({ active }: { active: boolean }) => {
-    return (
-        <div
-            style={{
-                color: "white",
-                pointerEvents: "none",
-                position: "absolute",
-                left: "calc(-50% - 144px - 14px)",
-                top: "-36px",
-                width: "max-content",
-                borderRadius: "8px",
-                backgroundColor: "#40414A",
-                opacity: active ? 1 : 0,
-                transitionDuration: "0.2s",
-                transitionProperty: "transform,opacity",
-                transitionTimingFunction: "ease-in-out",
-                padding: "8px",
-                fontSize: "12px",
-                lineHeight: "12px",
-                fontWeight: 400,
-                textShadow:
-                    "0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30",
-            }}
-        >
-            <kbd
-                style={{
-                    marginLeft: "4px",
-                    padding: "2px 4px",
-                    borderRadius: "2px",
-                    background: "#1D1E30",
-                    color: "#CFD7E2",
-                    border: "none",
-                    textShadow: "none",
-                }}
-            >
-                shift
-            </kbd>{" "}
-            to move to parent.
-            <kbd
-                style={{
-                    marginLeft: "4px",
-                    padding: "2px 4px",
-                    borderRadius: "2px",
-                    background: "#1D1E30",
-                    color: "#CFD7E2",
-                    border: "none",
-                    textShadow: "none",
-                }}
-            >
-                space
-            </kbd>{" "}
-            to highlight in monitor.
-        </div>
-    );
+  return (
+    <div
+      style={{
+        color: "white",
+        pointerEvents: "none",
+        position: "absolute",
+        left: "calc(-50% - 144px - 14px)",
+        top: "-36px",
+        width: "max-content",
+        borderRadius: "8px",
+        backgroundColor: "#40414A",
+        opacity: active ? 1 : 0,
+        transitionDuration: "0.2s",
+        transitionProperty: "transform,opacity",
+        transitionTimingFunction: "ease-in-out",
+        padding: "8px",
+        fontSize: "12px",
+        lineHeight: "12px",
+        fontWeight: 400,
+        textShadow:
+          "0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30",
+      }}
+    >
+      <kbd
+        style={{
+          marginLeft: "4px",
+          padding: "2px 4px",
+          borderRadius: "2px",
+          background: "#1D1E30",
+          color: "#CFD7E2",
+          border: "none",
+          textShadow: "none",
+        }}
+      >
+        shift
+      </kbd>{" "}
+      to move to parent.
+      <kbd
+        style={{
+          marginLeft: "4px",
+          padding: "2px 4px",
+          borderRadius: "2px",
+          background: "#1D1E30",
+          color: "#CFD7E2",
+          border: "none",
+          textShadow: "none",
+        }}
+      >
+        space
+      </kbd>{" "}
+      to highlight in monitor.
+    </div>
+  );
 };

package/src/panel.tsx

@@ -3,114 +3,110 @@ import { DevtoolsPin } from "./components/devtools-pin";
 import { ResizablePane } from "./components/resizable-pane";
 
 import {
-    DevToolsContext,
-    DevtoolsEvent,
-    send,
+  DevToolsContext,
+  DevtoolsEvent,
+  send,
 } from "@refinedev/devtools-shared";
 
 import { Placement } from "./interfaces/placement";
 
 export const DevtoolsPanel =
-    __DEV_CONDITION__ !== "development"
-        ? () => null
-        : () => {
-              const [browser, setBrowser] = React.useState<boolean>(false);
-              const [visible, setVisible] = React.useState(false);
-              const [placement] = React.useState<Placement>("bottom");
-              const { devtoolsUrl, ws } = React.useContext(DevToolsContext);
-              const [width, setWidth] = React.useState<number>(0);
+  __DEV_CONDITION__ !== "development"
+    ? () => null
+    : () => {
+        const [browser, setBrowser] = React.useState<boolean>(false);
+        const [visible, setVisible] = React.useState(false);
+        const [placement] = React.useState<Placement>("bottom");
+        const { devtoolsUrl, ws } = React.useContext(DevToolsContext);
+        const [width, setWidth] = React.useState<number>(0);
 
-              const onSelectorHighlight = React.useCallback(
-                  (name: string) => {
-                      if (ws) {
-                          send(
-                              ws,
-                              DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR,
-                              {
-                                  name,
-                              },
-                          );
-                      }
-                      setVisible(true);
-                  },
-                  [ws],
-              );
+        const onSelectorHighlight = React.useCallback(
+          (name: string) => {
+            if (ws) {
+              send(ws, DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR, {
+                name,
+              });
+            }
+            setVisible(true);
+          },
+          [ws],
+        );
 
-              const onSelectorOpen = React.useCallback(() => {
-                  setVisible(false);
-              }, []);
+        const onSelectorOpen = React.useCallback(() => {
+          setVisible(false);
+        }, []);
 
-              React.useEffect(() => {
-                  if (typeof window !== "undefined") {
-                      setBrowser(true);
-                  }
-              }, []);
+        React.useEffect(() => {
+          if (typeof window !== "undefined") {
+            setBrowser(true);
+          }
+        }, []);
 
-              React.useEffect(() => {
-                  if (browser) {
-                      // set width by window size dynamically
-                      setWidth(window.innerWidth);
+        React.useEffect(() => {
+          if (browser) {
+            // set width by window size dynamically
+            setWidth(window.innerWidth);
 
-                      const onResize = () => {
-                          setWidth(window.innerWidth);
-                      };
+            const onResize = () => {
+              setWidth(window.innerWidth);
+            };
 
-                      window.addEventListener("resize", onResize);
+            window.addEventListener("resize", onResize);
 
-                      return () => {
-                          window.removeEventListener("resize", onResize);
-                      };
-                  }
+            return () => {
+              window.removeEventListener("resize", onResize);
+            };
+          }
 
-                  return () => undefined;
-              }, [browser]);
+          return () => undefined;
+        }, [browser]);
 
-              if (!browser) {
-                  return null;
-              }
+        if (!browser) {
+          return null;
+        }
 
-              return (
-                  <div
-                      style={{
-                          position: "fixed",
-                          left: `${Math.round(width / 2)}px`,
-                          transform: "translateX(-50%)",
-                          bottom: 0,
-                          zIndex: 99999,
-                      }}
-                  >
-                      <DevtoolsPin
-                          onClick={() => setVisible((v) => !v)}
-                          onSelectorHighlight={onSelectorHighlight}
-                          onSelectorOpen={onSelectorOpen}
-                      />
-                      <ResizablePane visible={visible} placement={placement}>
-                          {({ resizing }) => (
-                              <iframe
-                                  allow="clipboard-write;"
-                                  src={devtoolsUrl}
-                                  srcDoc={
-                                      devtoolsUrl
-                                          ? undefined
-                                          : `
+        return (
+          <div
+            style={{
+              position: "fixed",
+              left: `${Math.round(width / 2)}px`,
+              transform: "translateX(-50%)",
+              bottom: 0,
+              zIndex: 99999,
+            }}
+          >
+            <DevtoolsPin
+              onClick={() => setVisible((v) => !v)}
+              onSelectorHighlight={onSelectorHighlight}
+              onSelectorOpen={onSelectorOpen}
+            />
+            <ResizablePane visible={visible} placement={placement}>
+              {({ resizing }) => (
+                <iframe
+                  allow="clipboard-write;"
+                  src={devtoolsUrl}
+                  srcDoc={
+                    devtoolsUrl
+                      ? undefined
+                      : `
                             <html style="height:100%;padding:0;margin:0;">
                                 <body style="display:flex;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;">
                                     <h1 style="font-family:ui-monospace,monospace;color:#CFD7E2;text-align:center;">Could not connect to the devtools server</h1>
                                 </body>
                             </html>
                         `
-                                  }
-                                  style={{
-                                      width: "100%",
-                                      height: "100%",
-                                      border: "none",
-                                      borderRadius: "7px",
-                                      pointerEvents: resizing ? "none" : "auto",
-                                      background: "#14141F",
-                                  }}
-                              />
-                          )}
-                      </ResizablePane>
-                  </div>
-              );
-          };
+                  }
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    border: "none",
+                    borderRadius: "7px",
+                    pointerEvents: resizing ? "none" : "auto",
+                    background: "#14141F",
+                  }}
+                />
+              )}
+            </ResizablePane>
+          </div>
+        );
+      };

package/src/provider.tsx

@@ -2,10 +2,8 @@ import React from "react";
 import { DevToolsContextProvider } from "@refinedev/devtools-shared";
 
 export const DevtoolsProvider =
-    __DEV_CONDITION__ !== "development"
-        ? ({ children }: React.PropsWithChildren) => children as any
-        : ({ children }: React.PropsWithChildren) => {
-              return (
-                  <DevToolsContextProvider>{children}</DevToolsContextProvider>
-              );
-          };
+  __DEV_CONDITION__ !== "development"
+    ? ({ children }: React.PropsWithChildren) => children as any
+    : ({ children }: React.PropsWithChildren) => {
+        return <DevToolsContextProvider>{children}</DevToolsContextProvider>;
+      };