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

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,
@@ -6240,19 +6239,19 @@ const OvermapProvider = (props) => {
   }
   return /* @__PURE__ */ jsx(OvermapContext.Provider, { value: null, children: ret });
 };
-const description$2 = "_description_p31lm_1";
-const floatingButtonContainer$2 = "_floatingButtonContainer_p31lm_5";
-const FullScreenImageContainer$2 = "_FullScreenImageContainer_p31lm_12";
-const TopBarContainer$2 = "_TopBarContainer_p31lm_22";
-const fileName$2 = "_fileName_p31lm_30";
-const longIconButton$2 = "_longIconButton_p31lm_35";
-const previewImage$3 = "_previewImage_p31lm_41";
-const FullScreenImage$2 = "_FullScreenImage_p31lm_12";
-const tabsList = "_tabsList_p31lm_60";
-const tabTrigger = "_tabTrigger_p31lm_68";
-const patchfieldBorder = "_patchfieldBorder_p31lm_72";
-const title = "_title_p31lm_72";
-const error = "_error_p31lm_88";
+const description$2 = "_description_1w0fq_1";
+const floatingButtonContainer$2 = "_floatingButtonContainer_1w0fq_5";
+const FullScreenImageContainer$2 = "_FullScreenImageContainer_1w0fq_12";
+const TopBarContainer$2 = "_TopBarContainer_1w0fq_22";
+const fileName$2 = "_fileName_1w0fq_31";
+const longIconButton$2 = "_longIconButton_1w0fq_36";
+const previewImage$3 = "_previewImage_1w0fq_42";
+const FullScreenImage$2 = "_FullScreenImage_1w0fq_12";
+const tabsList = "_tabsList_1w0fq_61";
+const tabTrigger = "_tabTrigger_1w0fq_69";
+const patchfieldBorder = "_patchfieldBorder_1w0fq_73";
+const title = "_title_1w0fq_73";
+const error = "_error_1w0fq_89";
 const styles$7 = {
   description: description$2,
   floatingButtonContainer: floatingButtonContainer$2,
@@ -6366,14 +6365,14 @@ class BaseField extends BaseFormElement {
 }
 __publicField(BaseField, "fieldTypeName");
 __publicField(BaseField, "fieldTypeDescription");
-const description$1 = "_description_1kceu_1";
-const floatingButtonContainer$1 = "_floatingButtonContainer_1kceu_5";
-const FullScreenImageContainer$1 = "_FullScreenImageContainer_1kceu_12";
-const TopBarContainer$1 = "_TopBarContainer_1kceu_22";
-const fileName$1 = "_fileName_1kceu_30";
-const longIconButton$1 = "_longIconButton_1kceu_35";
-const previewImage$2 = "_previewImage_1kceu_41";
-const FullScreenImage$1 = "_FullScreenImage_1kceu_12";
+const description$1 = "_description_10o76_1";
+const floatingButtonContainer$1 = "_floatingButtonContainer_10o76_5";
+const FullScreenImageContainer$1 = "_FullScreenImageContainer_10o76_12";
+const TopBarContainer$1 = "_TopBarContainer_10o76_22";
+const fileName$1 = "_fileName_10o76_31";
+const longIconButton$1 = "_longIconButton_10o76_36";
+const previewImage$2 = "_previewImage_10o76_42";
+const FullScreenImage$1 = "_FullScreenImage_10o76_12";
 const styles$6 = {
   description: description$1,
   floatingButtonContainer: floatingButtonContainer$1,
@@ -10750,21 +10749,21 @@ const FieldActions = memo((props) => {
   ] });
 });
 FieldActions.displayName = "FieldActions";
-const description = "_description_o5qyx_1";
-const floatingButtonContainer = "_floatingButtonContainer_o5qyx_5";
-const FullScreenImageContainer = "_FullScreenImageContainer_o5qyx_12";
-const TopBarContainer = "_TopBarContainer_o5qyx_22";
-const fileName = "_fileName_o5qyx_30";
-const longIconButton = "_longIconButton_o5qyx_35";
-const previewImage = "_previewImage_o5qyx_41";
-const FullScreenImage = "_FullScreenImage_o5qyx_12";
-const popoverInputsContainer = "_popoverInputsContainer_o5qyx_60";
-const imageContainer = "_imageContainer_o5qyx_64";
-const deleteImageButton = "_deleteImageButton_o5qyx_69";
-const typeBadge = "_typeBadge_o5qyx_80";
-const previewInput = "_previewInput_o5qyx_85";
-const directInput = "_directInput_o5qyx_89";
-const grow = "_grow_o5qyx_94";
+const description = "_description_6795p_1";
+const floatingButtonContainer = "_floatingButtonContainer_6795p_5";
+const FullScreenImageContainer = "_FullScreenImageContainer_6795p_12";
+const TopBarContainer = "_TopBarContainer_6795p_22";
+const fileName = "_fileName_6795p_31";
+const longIconButton = "_longIconButton_6795p_36";
+const previewImage = "_previewImage_6795p_42";
+const FullScreenImage = "_FullScreenImage_6795p_12";
+const popoverInputsContainer = "_popoverInputsContainer_6795p_61";
+const imageContainer = "_imageContainer_6795p_65";
+const deleteImageButton = "_deleteImageButton_6795p_70";
+const typeBadge = "_typeBadge_6795p_81";
+const previewInput = "_previewInput_6795p_86";
+const directInput = "_directInput_6795p_90";
+const grow = "_grow_6795p_95";
 const styles = {
   description,
   floatingButtonContainer,
@@ -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,