@inkindcards/semantic-layer 2.2.2 → 2.2.4

package/dist/components.js

@@ -861,22 +861,27 @@ function Inspectable({
   const id = useId();
   const wrapperRef = useRef(null);
   const [rect, setRect] = useState(null);
+  const registryRef = useRef(registry);
+  registryRef.current = registry;
   const inferredColumns = columns ?? (data?.[0] ? Object.keys(data[0]) : []);
   const sampleValues = data?.slice(0, 3) ?? [];
+  const columnsKey = inferredColumns.join(",");
   useEffect(() => {
-    if (!registry) return;
-    registry.register({
+    const reg = registryRef.current;
+    if (!reg) return;
+    reg.register({
       id,
       label,
       currentSource,
-      columns: inferredColumns,
+      columns: columnsKey.split(",").filter(Boolean),
       sampleValues,
       element: wrapperRef.current
     });
-    return () => registry.unregister(id);
-  }, [id, label, currentSource, inferredColumns.join(","), registry]);
+    return () => reg.unregister(id);
+  }, [id, label, currentSource, columnsKey]);
+  const inspectActive = registry?.inspectActive ?? false;
   useEffect(() => {
-    if (!registry?.inspectActive || !wrapperRef.current) {
+    if (!inspectActive || !wrapperRef.current) {
       setRect(null);
       return;
     }
@@ -894,8 +899,11 @@ function Inspectable({
       window.removeEventListener("resize", measure);
       clearInterval(interval);
     };
-  }, [registry?.inspectActive]);
+  }, [inspectActive]);
   if (!registry) {
+    console.warn(
+      `[SemanticLayer] <Inspectable label="${label}"> has no <DataInspector> ancestor. Make sure <DataInspector> wraps your app content, not self-closing: <DataInspector>{children}</DataInspector>`
+    );
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   const isSelected = registry.selectedId === id;
@@ -1111,7 +1119,7 @@ function ToggleButton({
           /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
         ] }),
         active ? "Inspecting" : "Inspect Data",
-        count > 0 && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "span",
           {
             style: {