@wix/form-public 0.526.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);
     }
@@ -52075,9 +52136,10 @@ var CheckboxContainer = ({ children, className }) => {
   }, /* @__PURE__ */ React173.createElement(CheckboxButton, {
     ref,
     className
-  }, ({ isSelected, isHovered }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, applyInternalProps(inputElement, {
+  }, ({ isSelected, isHovered, isFocused }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, applyInternalProps(inputElement, {
     isSelected,
-    isHovered
+    isHovered,
+    isFocused
   }), labelElement)));
 };
 CheckboxContainer.RichTextLabel = RichTextLabel;
@@ -52265,9 +52327,10 @@ var Checkbox2 = ({ children, className, ...internal }) => {
     ref: checkboxRef,
     className,
     "data-hook": `checkbox-${label}`
-  }, ({ isSelected, isHovered }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, applyInternalProps(inputElement, {
+  }, ({ isSelected, isHovered, isFocused }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, applyInternalProps(inputElement, {
     isSelected,
-    isHovered
+    isHovered,
+    isFocused
   }), applyInternalProps(labelElement, {
     label
   }))));
@@ -55944,9 +56007,10 @@ var GuestToggle = ({ children, className, ...internal }) => {
     onFocus
   }, /* @__PURE__ */ React173.createElement(CheckboxButton, {
     className
-  }, ({ isSelected, isHovered }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, applyInternalProps(inputElement, {
+  }, ({ isSelected, isHovered, isFocused }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, applyInternalProps(inputElement, {
     isSelected,
-    isHovered
+    isHovered,
+    isFocused
   }), applyInternalProps(labelElement, {
     label
   }))));
@@ -56103,9 +56167,10 @@ var Option4 = ({ children, className, ...internal }) => {
   }, /* @__PURE__ */ React173.createElement(RadioButton, {
     ref: radioRef,
     className: radioClassName
-  }, ({ isSelected, isHovered }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, applyInternalProps(controlElement, {
+  }, ({ isSelected, isHovered, isFocused }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, applyInternalProps(controlElement, {
     isSelected,
-    isHovered
+    isHovered,
+    isFocused
   }), applyInternalProps(labelElement, {
     label
   })))), isOther && isThisOptionSelected && otherInputElement);
@@ -56446,7 +56511,7 @@ var DropZoneSubtitle = ({ className, children }) => {
     limitReached
   }));
 };
-var DropZoneButton = ({ className, children, "aria-roledescription": roleDescription, onHoverStart, onHoverEnd }) => {
+var DropZoneButton = ({ className, children, "aria-roledescription": roleDescription, onHoverStart, onHoverEnd, onFocusChange }) => {
   const { ariaDescribedBy, inputId, labelId, errorId } = useFieldAttributes();
   const { disabled, required, onFocus, hasError, errorMessage } = useFieldPropsV2();
   const { handleFileChange, accept, multiple, buttonRef, handleBlur, limitError, files } = useFileUploadContext();
@@ -56482,7 +56547,8 @@ var DropZoneButton = ({ className, children, "aria-roledescription": roleDescrip
     onFocus,
     onBlur: handleBlur,
     onHoverStart,
-    onHoverEnd
+    onHoverEnd,
+    onFocusChange
   }, children));
 };
 var DropZoneButtonText = ({ className }) => {
@@ -60062,9 +60128,10 @@ var Control7 = ({ children, className }) => {
   const phoneNumberElement = findChildOfType(children, PhoneInput.PhoneNumber);
   const hasCountryOptions2 = countries.length > 1;
   const isForcedOpen = useIsForcedOpenDropdown(id6) && !!popoverElement && hasCountryOptions2;
-  const controlClassName = typeof className === "function" ? ({ isHovered }) => className({
+  const controlClassName = typeof className === "function" ? ({ isHovered, isFocusWithin }) => className({
     hasCountryOptions: hasCountryOptions2,
-    isHovered
+    isHovered,
+    isFocusWithin
   }) : className;
   const pickerProps = {
     triggerRef: controlRef,
@@ -60288,7 +60355,7 @@ var ProductOption = ({ children, className, ...internal }) => {
     ref: checkboxRef,
     className,
     "data-hook": "product"
-  }, ({ isHovered }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, imageElement ? applyInternalProps(imageElement, {
+  }, ({ isHovered, isFocused }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, imageElement ? applyInternalProps(imageElement, {
     option: option2,
     imageResize
   }) : null, labelElement ? applyInternalProps(labelElement, {
@@ -60297,7 +60364,8 @@ var ProductOption = ({ children, className, ...internal }) => {
     price
   }) : null, applyInternalProps(inputElement, {
     isSelected,
-    isHovered
+    isHovered,
+    isFocused
   }))));
 };
 var OptionImage2 = ({ className, ...internal }) => {
@@ -60460,15 +60528,17 @@ var Rating = ({ className, children, ...internal }) => {
   return /* @__PURE__ */ React173.createElement(RadioField, {
     value
   }, /* @__PURE__ */ React173.createElement(RadioButton, {
-    className: ({ isHovered }) => typeof className === "function" ? className({
+    className: ({ isHovered, isFocused }) => typeof className === "function" ? className({
       isSelected,
-      isHovered
+      isHovered,
+      isFocused
     }) : className ?? "",
     "data-active": isSelected || void 0,
     onHoverChange
-  }, ({ isHovered }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, typeof children === "function" ? children({
+  }, ({ isHovered, isFocused }) => /* @__PURE__ */ React173.createElement(React173.Fragment, null, typeof children === "function" ? children({
     isSelected,
-    isHovered
+    isHovered,
+    isFocused
   }) : children, label ? /* @__PURE__ */ React173.createElement("span", {
     style: visuallyHiddenStyle
   }, label) : null)));
@@ -62214,7 +62284,7 @@ var UploadPreview = ({ className, imageAlt, ...internal }) => {
     "data-hook": "signature-image"
   }, value.displayName || imageAlt));
 };
-var UploadButton = ({ children, className, onHoverStart, onHoverEnd, ...internal }) => {
+var UploadButton = ({ children, className, onHoverStart, onHoverEnd, onFocusChange, ...internal }) => {
   const { onSelectFiles, disabled, readOnly, onBlur, onFocus } = internal;
   const { inputId, ariaDescribedBy, labelId } = useFieldAttributes();
   const textId = useId2();
@@ -62241,7 +62311,8 @@ var UploadButton = ({ children, className, onHoverStart, onHoverEnd, ...internal
     "data-hook": "signature-upload",
     className,
     onHoverStart,
-    onHoverEnd
+    onHoverEnd,
+    onFocusChange
   }, content));
 };
 var UploadButtonText = ({ children, className, ...internal }) => {