@wix/form-public 0.527.0 → 0.528.0

package/dist/index.js

@@ -38261,7 +38261,9 @@ var READONLY_FIELD_TYPES = {
 // ../form-fields/dist/esm/constants/field-types.js
 var FIELD_TYPES = {
   ...INPUT_FIELD_TYPES,
-  ...READONLY_FIELD_TYPES};
+  ...READONLY_FIELD_TYPES,
+  SUBMIT_BUTTON: "SUBMIT_BUTTON"
+};
 
 // ../form-fields/dist/esm/constants/empty-values.js
 var EMPTY_VALUE = null;
@@ -47234,6 +47236,52 @@ function makeInputValidation(identifier, inputOptions) {
   };
 }
 
+// ../form-fields/dist/esm/services/grid-defaults.js
+var GRID_DEFAULTS = {
+  columns: 12,
+  rowHeight: 24,
+  margin: {
+    vertical: 24,
+    horizontal: 24
+  },
+  padding: {
+    vertical: 0,
+    horizontal: 0
+  }
+};
+
+// ../form-fields/dist/esm/services/complete-small-layout-items.js
+function completeSmallLayoutItems({ large, small, columns, submitFieldIds = [] }) {
+  const placedFieldIds = new Set(small.map(({ fieldId }) => fieldId));
+  const submitRows = small.filter(({ fieldId }) => fieldId && submitFieldIds.includes(fieldId)).map(({ row: row2 }) => row2 ?? 0);
+  const insertRow = submitRows.length ? Math.max(...submitRows) : Math.max(0, ...small.map(({ row: row2, height }) => (row2 ?? 0) + (height ?? 1)));
+  const unplaced = large.filter(({ fieldId }) => fieldId && !placedFieldIds.has(fieldId)).sort((one, other) => (one.row ?? 0) - (other.row ?? 0) || (one.column ?? 0) - (other.column ?? 0));
+  if (!unplaced.length) {
+    return small;
+  }
+  let row = insertRow;
+  const appended = unplaced.map(({ fieldId, height }) => {
+    const item = {
+      fieldId,
+      row,
+      column: 0,
+      width: columns ?? GRID_DEFAULTS.columns,
+      height: height ?? 1
+    };
+    row += item.height;
+    return item;
+  });
+  const insertedHeight = row - insertRow;
+  const shifted = small.map((item) => (item.row ?? 0) >= insertRow ? {
+    ...item,
+    row: (item.row ?? 0) + insertedHeight
+  } : item);
+  return [
+    ...shifted,
+    ...appended
+  ];
+}
+
 // ../form-fields/dist/esm/types/image.js
 var ImagePosition4 = /* @__PURE__ */ (function(ImagePosition5) {
   ImagePosition5["TOP"] = "top";
@@ -47274,19 +47322,19 @@ function toFieldLabelMediaSettings(view) {
   return Object.keys(mediaSettings).length ? mediaSettings : void 0;
 }
 
+// ../form-fields/dist/esm/services/submit-field-ids.js
+function getSubmitFieldIds(fields = []) {
+  return fields.flatMap(({ id: id6, view }) => id6 && view?.fieldType === FIELD_TYPES.SUBMIT_BUTTON ? [
+    id6
+  ] : []);
+}
+function getSubmitFieldIdsV2(fields = []) {
+  return fields.flatMap(({ id: id6, identifier }) => id6 && identifier === FIELD_TYPES.SUBMIT_BUTTON ? [
+    id6
+  ] : []);
+}
+
 // ../form-fields/dist/esm/services/form-view.js
-var GRID_DEFAULTS = {
-  columns: 12,
-  rowHeight: 24,
-  margin: {
-    vertical: 24,
-    horizontal: 24
-  },
-  padding: {
-    vertical: 0,
-    horizontal: 0
-  }
-};
 function createFormView({ form, path = "", stepId, recursive = true, includeHiddenFields = false, isMobile: isMobile2 = false, breakpoint = DEFAULT_BREAKPOINT, useFieldsV2 = false, parentId = "" }) {
   const step = stepId ? form.steps?.find(({ id: id6 }) => id6 === stepId) : form.steps?.[0];
   const layout = step?.layout ?? {};
@@ -47298,11 +47346,24 @@ function createFormView({ form, path = "", stepId, recursive = true, includeHidd
   } else if ("name" in form) {
     nameView = form.name ?? "";
   }
-  const hasSmallLayout = layout.small?.items;
+  const smallItems = layout.small?.items ?? [];
+  const hasSmallLayout = smallItems.length > 0;
   const isSmallBreakpoint = isMobile2 && hasSmallLayout;
+  const effectiveLayout = hasSmallLayout ? {
+    ...layout,
+    small: {
+      ...layout.small,
+      items: completeSmallLayoutItems({
+        large: layout.large?.items ?? [],
+        small: smallItems,
+        columns: layout.large?.columns,
+        submitFieldIds: useFieldsV2 && platformizedFields ? getSubmitFieldIdsV2(platformizedFields) : getSubmitFieldIds(fields)
+      })
+    }
+  } : layout;
   const fieldViews = (useFieldsV2 && platformizedFields ? platformizedFields : fields).filter((field) => includeHiddenFields || !field.hidden).filter((field) => layout?.large?.items?.find((item) => field.id === item.fieldId)).reduce((result2, field) => {
     const _field = useFieldsV2 && platformizedFields ? transformFieldToV1(field) : field;
-    const fieldView = createFieldView(_field, layout, path, recursive, isMobile2, isSmallBreakpoint ? Breakpoint.SMALL : breakpoint);
+    const fieldView = createFieldView(_field, effectiveLayout, path, recursive, isMobile2, isSmallBreakpoint ? Breakpoint.SMALL : breakpoint);
     if (fieldView) {
       result2.push(fieldView);
     }