@wix/form-public 0.527.0 → 0.529.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);
     }
@@ -51731,6 +51792,7 @@ var FIELDSET_RESET_STYLE = {
 };
 var AppointmentSlotPickerContext = createContext(void 0);
 var getTimezoneNoteId = (inputId) => `${inputId}-timezone-note`;
+var getDateTitleId = (inputId) => `${inputId}-date-title`;
 var useAppointmentSlotPickerContext = () => {
   const context = useContext(AppointmentSlotPickerContext);
   if (typeof context === "undefined") {
@@ -51859,15 +51921,13 @@ Dates.NextWeek = NextWeek;
 Dates.Day = Day;
 var RADIO_INPUT_SELECTOR = 'input[type="radio"]';
 var Slots = ({ children, className, ...internal }) => {
-  const { hasTimezoneNote } = internal;
+  const { hasTimezoneNote, hasDateTitle } = internal;
   const { slots, selectedSlotKey, selectSlot, selectedDateLabel, isReloadingSlots, timezoneLabel, pendingFocusIndex, consumePendingFocusIndex } = useAppointmentSlotPickerContext();
   const { id: fieldId, disabled, readOnly, required, hasError } = useFieldPropsV2();
   const { inputId, labelId: fieldLabelId, ariaDescribedBy } = useFieldAttributes();
   const groupRef = useRef(null);
-  const slotsLabelId = `${inputId}-slots-label`;
-  const labelElement = findChildOfType(children, Slots.Label);
   const slotElement = findChildOfType(children, Slots.Slot) ?? /* @__PURE__ */ React173.createElement(Slots.Slot, null);
-  const hasSlotsLabel = !!labelElement && !!selectedDateLabel;
+  const isLabelledByDateTitle = !!hasDateTitle && !!selectedDateLabel;
   const describedBy = [
     ariaDescribedBy,
     hasTimezoneNote && timezoneLabel ? getTimezoneNoteId(inputId) : void 0
@@ -51907,29 +51967,14 @@ var Slots = ({ children, className, ...internal }) => {
     isReadOnly: readOnly,
     isRequired: required,
     isInvalid: hasError,
-    "aria-labelledby": hasSlotsLabel ? slotsLabelId : fieldLabelId,
+    "aria-labelledby": isLabelledByDateTitle ? getDateTitleId(inputId) : fieldLabelId,
     "aria-describedby": describedBy,
     "data-refetch": isReloadingSlots || void 0
-  }, applyInternalProps(labelElement, {
-    labelId: slotsLabelId
-  }), slots.map((slot) => applyInternalProps(slotElement, {
+  }, slots.map((slot) => applyInternalProps(slotElement, {
     key: slot.key,
     slot
   }))));
 };
-var SlotsLabel = ({ children, className, ...internal }) => {
-  const { selectedDateLabel } = useAppointmentSlotPickerContext();
-  const { labelId } = internal;
-  if (!selectedDateLabel) {
-    return null;
-  }
-  return /* @__PURE__ */ React173.createElement("div", {
-    id: labelId,
-    className
-  }, children ? children({
-    label: selectedDateLabel
-  }) : selectedDateLabel);
-};
 var Slot = ({ children, className, ...internal }) => {
   const { slot } = internal;
   return /* @__PURE__ */ React173.createElement(RadioField, {
@@ -51939,7 +51984,6 @@ var Slot = ({ children, className, ...internal }) => {
     className
   }, children ? children(slot) : slot.timeRange));
 };
-Slots.Label = SlotsLabel;
 Slots.Slot = Slot;
 var import_cloneDeep = __toESM(require_cloneDeep());
 var createIndicatorNode = (requiredIndicatorType, t, className) => {