@firecms/ui 3.0.0-tw4.17 → 3.0.0-tw4.18

package/dist/index.es.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
-import React__default, { useEffect, useState, createContext, useContext, useRef, Children, forwardRef, useLayoutEffect, useDeferredValue } from "react";
+import React__default, { createContext, useContext, useEffect, useState, useRef, Children, forwardRef, useLayoutEffect, useDeferredValue } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -247,31 +247,69 @@ function keyToIconComponent(key) {
   }).join("") + "Icon";
   return componentName;
 }
+const PortalContainerContext = createContext(void 0);
+function PortalContainerProvider(t0) {
+  const $ = c(5);
+  const {
+    container,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== container) {
+    t1 = {
+      container
+    };
+    $[0] = container;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== children || $[3] !== t1) {
+    t2 = /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: t1, children });
+    $[2] = children;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+function usePortalContainer() {
+  const context = useContext(PortalContainerContext);
+  return context?.container ?? null;
+}
 function useInjectStyles(key, styles2) {
-  const $ = c(4);
+  const $ = c(5);
+  const portalContainer = usePortalContainer();
   let t0;
-  if ($[0] !== key || $[1] !== styles2) {
+  if ($[0] !== key || $[1] !== portalContainer || $[2] !== styles2) {
     t0 = () => {
-      const styleElement = document.getElementById(key);
-      if (!styleElement) {
+      if (typeof document === "undefined") {
+        return;
+      }
+      const targetContainer = portalContainer ?? document.head;
+      const existingStyle = targetContainer.querySelector?.(`#${key}`);
+      if (!existingStyle) {
         const style = document.createElement("style");
         style.id = key;
         style.innerHTML = styles2;
-        document.head.appendChild(style);
+        (targetContainer || document.head).appendChild(style);
       }
     };
     $[0] = key;
-    $[1] = styles2;
-    $[2] = t0;
+    $[1] = portalContainer;
+    $[2] = styles2;
+    $[3] = t0;
   } else {
-    t0 = $[2];
+    t0 = $[3];
   }
   let t1;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = [];
-    $[3] = t1;
+    $[4] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[4];
   }
   useEffect(t0, t1);
 }
@@ -360,38 +398,6 @@ function useIconStyles(t0) {
   font-variation-settings: 'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grad}, 'opsz' ${opticalSize};
 }`);
 }
-const PortalContainerContext = createContext(void 0);
-function PortalContainerProvider(t0) {
-  const $ = c(5);
-  const {
-    container,
-    children
-  } = t0;
-  let t1;
-  if ($[0] !== container) {
-    t1 = {
-      container
-    };
-    $[0] = container;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  let t2;
-  if ($[2] !== children || $[3] !== t1) {
-    t2 = /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: t1, children });
-    $[2] = children;
-    $[3] = t1;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-function usePortalContainer() {
-  const context = useContext(PortalContainerContext);
-  return context?.container ?? null;
-}
 const Collapse = React__default.memo((t0) => {
   const $ = c(9);
   const {