@overmap-ai/core 1.0.38-component-fields.4 → 1.0.38-component-fields.5

package/dist/overmap-core.js

@@ -5449,7 +5449,6 @@ class UserFormService extends BaseApiService {
       ...componentType && { component_type: componentType },
       ...ownerAttrs
     };
-    console.log(retForm);
     const { payloadWithoutImage, images } = await separateImageFromFields(offlineRevisionPayload);
     const retRevision = {
       ...payloadWithoutImage,
@@ -10846,19 +10845,24 @@ const FieldBuilder = memo((props) => {
   const { parentPath, index: index2, initial, conditionalSourceFields } = props;
   const { values, setFieldValue, errors } = useFormikContext();
   const fieldTypeItems = useFieldTypeItems();
+  const containerRef = useRef(null);
   const RADIX_SM_MIN_WIDTH = 576;
-  const [isLargeScreen, setIsLargeScreen] = useState(
-    window.matchMedia(`(min-width: ${RADIX_SM_MIN_WIDTH}px)`).matches
+  const [isLargeContainer, setIsLargeContainer] = useState(
+    containerRef.current && containerRef.current.getBoundingClientRect().width >= RADIX_SM_MIN_WIDTH
   );
   useEffect(() => {
-    const mediaQuery = window.matchMedia(`(min-width: ${RADIX_SM_MIN_WIDTH}px)`);
-    const handleMediaQueryChange = (event) => {
-      setIsLargeScreen(event.matches);
-    };
-    mediaQuery.addEventListener("change", handleMediaQueryChange);
-    return () => {
-      mediaQuery.removeEventListener("change", handleMediaQueryChange);
-    };
+    const container = containerRef.current;
+    if (container) {
+      const observer = new ResizeObserver((entries) => {
+        if (entries[0]) {
+          setIsLargeContainer(entries[0].contentRect.width >= RADIX_SM_MIN_WIDTH);
+        }
+      });
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+      };
+    }
   }, []);
   const [resolvedImage, setResolvedImage] = useState(void 0);
   const [showImagePreview, setShowImagePreview] = useState(false);
@@ -10935,7 +10939,7 @@ const FieldBuilder = memo((props) => {
       const fieldObject = fieldCls.getFieldCreationSchema(
         `${parentPath}.${index2}`
       );
-      if (isLargeScreen) {
+      if (isLargeContainer) {
         directlyShownFields2 = [
           ...directlyShownFields2,
           ...fieldObject.filter((field) => field.showDirectly).map((field) => field.field)
@@ -10949,7 +10953,7 @@ const FieldBuilder = memo((props) => {
       }
     }
     return [directlyShownFields2, popoverFields2];
-  }, [fieldCls, conditionalSourceFields, parentPath, index2, isLargeScreen]);
+  }, [fieldCls, conditionalSourceFields, parentPath, index2, isLargeContainer]);
   const directlyShownInputs = useFieldInputs(directlyShownFields, {
     formId,
     disabled: false,
@@ -10969,7 +10973,7 @@ const FieldBuilder = memo((props) => {
   });
   const deserializedField = useMemo(() => deserialize(initial), [initial]);
   const previewInput2 = useFieldInput(deserializedField, { formId, disabled: true, showInputOnly: true });
-  return /* @__PURE__ */ jsxs(Flex, { align: "center", grow: "1", children: [
+  return /* @__PURE__ */ jsxs(Flex, { ref: containerRef, align: "center", grow: "1", children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", width: "100%", children: [
       fieldCls === FieldSection && /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
         directlyShownFields.length > 0 && directlyShownInputs,