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

package/dist/overmap-core.umd.cjs

@@ -5436,7 +5436,6 @@ var __publicField = (obj, key, value) => {
       const activeWorkspaceId = state.workspaceReducer.activeWorkspaceId;
       const offlineFormPayload = offline({});
       const offlineRevisionPayload = offline(initialRevision);
-      console.log(componentType);
       const retForm = {
         ...offlineFormPayload,
         index_workspace: activeWorkspaceId,
@@ -5446,7 +5445,6 @@ var __publicField = (obj, key, value) => {
         ...componentType && { component_type: componentType },
         ...ownerAttrs
       };
-      console.log(retForm);
       const { payloadWithoutImage, images } = await separateImageFromFields(offlineRevisionPayload);
       const retRevision = {
         ...payloadWithoutImage,
@@ -5464,7 +5462,11 @@ var __publicField = (obj, key, value) => {
         queryParams: activeWorkspaceId ? {
           workspace_id: activeWorkspaceId
         } : void 0,
-        payload: { ...offlineFormPayload, initial_revision: payloadWithoutImage },
+        payload: {
+          ...offlineFormPayload,
+          ...componentType && { component_type: componentType },
+          initial_revision: payloadWithoutImage
+        },
         blockers: [],
         blocks: [offlineFormPayload.offline_id, payloadWithoutImage.offline_id]
       });
@@ -10839,19 +10841,24 @@ var __publicField = (obj, key, value) => {
     const { parentPath, index: index2, initial, conditionalSourceFields } = props;
     const { values, setFieldValue, errors } = formik.useFormikContext();
     const fieldTypeItems = useFieldTypeItems();
+    const containerRef = React.useRef(null);
     const RADIX_SM_MIN_WIDTH = 576;
-    const [isLargeScreen, setIsLargeScreen] = React.useState(
-      window.matchMedia(`(min-width: ${RADIX_SM_MIN_WIDTH}px)`).matches
+    const [isLargeContainer, setIsLargeContainer] = React.useState(
+      containerRef.current && containerRef.current.getBoundingClientRect().width >= RADIX_SM_MIN_WIDTH
     );
     React.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] = React.useState(void 0);
     const [showImagePreview, setShowImagePreview] = React.useState(false);
@@ -10928,7 +10935,7 @@ var __publicField = (obj, key, value) => {
         const fieldObject = fieldCls.getFieldCreationSchema(
           `${parentPath}.${index2}`
         );
-        if (isLargeScreen) {
+        if (isLargeContainer) {
           directlyShownFields2 = [
             ...directlyShownFields2,
             ...fieldObject.filter((field) => field.showDirectly).map((field) => field.field)
@@ -10942,7 +10949,7 @@ var __publicField = (obj, key, value) => {
         }
       }
       return [directlyShownFields2, popoverFields2];
-    }, [fieldCls, conditionalSourceFields, parentPath, index2, isLargeScreen]);
+    }, [fieldCls, conditionalSourceFields, parentPath, index2, isLargeContainer]);
     const directlyShownInputs = useFieldInputs(directlyShownFields, {
       formId,
       disabled: false,
@@ -10962,7 +10969,7 @@ var __publicField = (obj, key, value) => {
     });
     const deserializedField = React.useMemo(() => deserialize(initial), [initial]);
     const previewInput2 = useFieldInput(deserializedField, { formId, disabled: true, showInputOnly: true });
-    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { align: "center", grow: "1", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { ref: containerRef, align: "center", grow: "1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", width: "100%", children: [
         fieldCls === FieldSection && /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "1", children: [
           directlyShownFields.length > 0 && directlyShownInputs,