@wix/form-public 0.516.0 → 0.517.0

package/dist/index.js

@@ -16231,7 +16231,7 @@ var require_classnames = __commonJS({
   "../../node_modules/classnames/index.js"(exports, module) {
     (function() {
       var hasOwn2 = {}.hasOwnProperty;
-      function classNames16() {
+      function classNames17() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -16249,7 +16249,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames16.apply(null, arg);
+          return classNames17.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -16272,14 +16272,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames16.default = classNames16;
-        module.exports = classNames16;
+        classNames17.default = classNames17;
+        module.exports = classNames17;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames16;
+          return classNames17;
         });
       } else {
-        window.classNames = classNames16;
+        window.classNames = classNames17;
       }
     })();
   }
@@ -43162,6 +43162,203 @@ function useFormView() {
   return context;
 }
 
+// ../form-fields/dist/esm/field-layout/default-field-layout.js
+var import_classnames21 = __toESM(require_classnames());
+
+// ../form-fields/dist/esm/ui/form/components/grid/responsive-grid.module.scss
+var responsive_grid_module_default = {};
+
+// ../form-fields/dist/esm/utils/responsive-grid.js
+function placeResponsiveFields(fields, columns) {
+  const groups = groupByDesktopRow(fields);
+  const hasSmallLayout = fields.some((field) => field.layoutByBreakpoint?.small);
+  const placement = {
+    fields: /* @__PURE__ */ new Map(),
+    rowOrder: /* @__PURE__ */ new Map()
+  };
+  if (!hasSmallLayout) {
+    groups.forEach((group, index2) => {
+      stackGroup(group, columns, placement);
+      placement.rowOrder.set(group.row, index2);
+    });
+    return placement;
+  }
+  const smallLayoutOf = (field) => field.layoutByBreakpoint?.small ?? field.layout;
+  const ranks = denseRanks(fields.map((field) => smallLayoutOf(field).row));
+  const ranges = groups.map((group) => {
+    const groupRanks = group.fields.map((field) => ranks.get(smallLayoutOf(field).row));
+    return {
+      min: Math.min(...groupRanks),
+      max: Math.max(...groupRanks)
+    };
+  });
+  const clusters = clusterOverlappingRanges(ranges);
+  clusters.forEach((cluster) => {
+    if (cluster.length > 1) {
+      cluster.forEach((index3) => stackGroup(groups[index3], columns, placement));
+      return;
+    }
+    const [index2] = cluster;
+    groups[index2].fields.forEach((field) => {
+      const small = smallLayoutOf(field);
+      placement.fields.set(field.id, {
+        large: toLargePlacement(field.layout),
+        small: {
+          ...clampColumns(small, columns),
+          subRow: ranks.get(small.row) - ranges[index2].min
+        }
+      });
+    });
+  });
+  clusters.flatMap((cluster) => [
+    ...cluster
+  ].sort((one, other) => one - other)).forEach((index2, order) => placement.rowOrder.set(groups[index2].row, order));
+  return placement;
+}
+function clusterOverlappingRanges(ranges) {
+  const byMin = ranges.map((range3, index2) => ({
+    ...range3,
+    index: index2
+  })).sort((one, other) => one.min - other.min || one.index - other.index);
+  const clusters = [];
+  byMin.forEach(({ min: min4, max: max4, index: index2 }) => {
+    const last6 = clusters.at(-1);
+    if (last6 && min4 <= last6.max) {
+      last6.indices.push(index2);
+      last6.max = Math.max(last6.max, max4);
+    } else {
+      clusters.push({
+        max: max4,
+        indices: [
+          index2
+        ]
+      });
+    }
+  });
+  return clusters.map(({ indices }) => indices);
+}
+function toResponsiveGridVariables({ large, small }) {
+  const columnVariables = {
+    "--form-col-lg": toColumn(large),
+    "--form-col-sm": toColumn(small)
+  };
+  const offset = {
+    "--form-row-offset-sm": small.subRow > 0 ? "1" : "0"
+  };
+  return {
+    label: {
+      ...columnVariables,
+      ...offset,
+      "--form-row-lg": toRow(large, 0, 1),
+      "--form-row-sm": toRow(small, 0, 1)
+    },
+    input: {
+      ...columnVariables,
+      "--form-row-offset-sm": "0",
+      "--form-row-lg": toRow(large, 1, 1),
+      "--form-row-sm": toRow(small, 1, 1)
+    },
+    container: {
+      ...columnVariables,
+      ...offset,
+      "--form-row-lg": toRow(large, 0, 2),
+      "--form-row-sm": toRow(small, 0, 2)
+    }
+  };
+}
+var responsiveGridCache = /* @__PURE__ */ new WeakMap();
+function getResponsiveGrid(form) {
+  const cached = responsiveGridCache.get(form);
+  if (cached) {
+    return cached;
+  }
+  const placement = placeResponsiveFields(form.fields, form.grid.columns);
+  const grid = {
+    fields: new Map([
+      ...placement.fields
+    ].map(([fieldId, fieldPlacement]) => [
+      fieldId,
+      toResponsiveGridVariables(fieldPlacement)
+    ])),
+    rows: new Map([
+      ...placement.rowOrder
+    ].map(([row, order]) => [
+      row,
+      {
+        "--form-row-order-sm": String(order)
+      }
+    ]))
+  };
+  responsiveGridCache.set(form, grid);
+  return grid;
+}
+function groupByDesktopRow(fields) {
+  const groups = /* @__PURE__ */ new Map();
+  fields.forEach((field) => {
+    const group = groups.get(field.layout.row);
+    if (group) {
+      group.push(field);
+    } else {
+      groups.set(field.layout.row, [
+        field
+      ]);
+    }
+  });
+  return [
+    ...groups
+  ].sort(([one], [other]) => one - other).map(([row, groupFields]) => ({
+    row,
+    fields: groupFields
+  }));
+}
+function stackGroup(group, columns, placement) {
+  group.fields.forEach((field, subRow) => {
+    placement.fields.set(field.id, {
+      large: toLargePlacement(field.layout),
+      small: {
+        column: 0,
+        width: columns,
+        subRow
+      }
+    });
+  });
+}
+function denseRanks(rows) {
+  return new Map([
+    ...new Set(rows)
+  ].sort((one, other) => one - other).map((row, rank) => [
+    row,
+    rank
+  ]));
+}
+function toLargePlacement({ column, width }) {
+  return {
+    column,
+    width,
+    subRow: 0
+  };
+}
+function clampColumns({ column, width }, columns) {
+  const clampedColumn = Math.min(Math.max(column, 0), columns - 1);
+  return {
+    column: clampedColumn,
+    width: Math.min(Math.max(width, 1), columns - clampedColumn)
+  };
+}
+function toColumn({ column, width }) {
+  return `${column + 1} / span ${width}`;
+}
+function toRow({ subRow }, track, span) {
+  return `${subRow * 2 + track + 1} / span ${span}`;
+}
+
+// ../form-fields/dist/esm/ui/form/components/grid/use-responsive-grid.js
+function useResponsiveGrid() {
+  const { cssMobileLayout, isMobile: isMobile2 } = useConfig();
+  const form = useContext(FormViewContext);
+  return cssMobileLayout && !isMobile2 && form ? getResponsiveGrid(form) : void 0;
+}
+
 // ../form-fields/dist/esm/ui/form/types/form-view.js
 function isInputField2(field) {
   return Boolean(field.target);
@@ -43196,6 +43393,7 @@ function calculateGridStyles(options) {
 // ../form-fields/dist/esm/field-layout/default-field-layout.js
 var DefaultFieldLayout = ({ fieldId, ...rest }) => {
   const fieldView = useFieldView(fieldId);
+  const responsiveGrid = useResponsiveGrid();
   if (!fieldView) {
     return null;
   }
@@ -43205,30 +43403,58 @@ var DefaultFieldLayout = ({ fieldId, ...rest }) => {
     "data-hook": dataHook,
     "data-field-type": fieldType
   };
-  const gridStyles = calculateGridStyles({
-    layout
-  });
+  const cellProps = getCellProps(layout, responsiveGrid?.fields.get(fieldId));
   if ("children" in rest) {
     return /* @__PURE__ */ React172.createElement("div", {
-      style: gridStyles.container,
+      ...cellProps.container,
       ...dataAttributes
     }, rest.children);
   }
   const { renderLabel, renderInput, renderDescription } = rest;
-  return /* @__PURE__ */ React172.createElement(React172.Fragment, null, /* @__PURE__ */ React172.createElement("div", {
-    style: gridStyles.label
-  }, renderLabel()), /* @__PURE__ */ React172.createElement("div", {
-    style: gridStyles.input,
+  return /* @__PURE__ */ React172.createElement(React172.Fragment, null, /* @__PURE__ */ React172.createElement("div", cellProps.label, renderLabel()), /* @__PURE__ */ React172.createElement("div", {
+    ...cellProps.input,
     ...dataAttributes
   }, renderInput(), renderDescription()));
 };
+function getCellProps(layout, variables) {
+  if (!variables) {
+    const { label, input, container } = calculateGridStyles({
+      layout
+    });
+    return {
+      label: {
+        style: label
+      },
+      input: {
+        style: input
+      },
+      container: {
+        style: container
+      }
+    };
+  }
+  return {
+    label: {
+      style: variables.label,
+      className: (0, import_classnames21.default)(responsive_grid_module_default.cell, responsive_grid_module_default.label)
+    },
+    input: {
+      style: variables.input,
+      className: responsive_grid_module_default.cell
+    },
+    container: {
+      style: variables.container,
+      className: responsive_grid_module_default.cell
+    }
+  };
+}
 
 // ../form-fields/dist/esm/ui/form/components/grid/grid.js
-var import_classnames21 = __toESM(require_classnames());
+var import_classnames22 = __toESM(require_classnames());
 
 // ../form-fields/dist/esm/animations/grid-animations.module.scss
 var grid_animations_module_default = {};
-var Focusable = ({ children, fieldId }) => {
+var Focusable = ({ children, fieldId, className, style }) => {
   const viewRef = useRef(null);
   const { scrollTo } = useScroll();
   const { focusedFieldId } = useFocusedField();
@@ -43242,17 +43468,21 @@ var Focusable = ({ children, fieldId }) => {
     focusedFieldId
   ]);
   return /* @__PURE__ */ React172.createElement("div", {
-    ref: viewRef
+    ref: viewRef,
+    className,
+    style
   }, children);
 };
 
 // ../form-fields/dist/esm/ui/form/components/grid/grid-options.js
-var getGridStyle = ({ layout }) => {
+var getGridStyle = ({ layout, responsive = false }) => {
   return {
     display: "grid",
     width: "100%",
     gridTemplateColumns: `repeat(${layout.columns}, 1fr)`,
-    gridAutoRows: "minmax(min-content, max-content) 1fr"
+    ...responsive ? {} : {
+      gridAutoRows: "minmax(min-content, max-content) 1fr"
+    }
   };
 };
 
@@ -43262,6 +43492,7 @@ var grid_module_default = {};
 // ../form-fields/dist/esm/ui/form/components/grid/grid.js
 var Grid = ({ items, layout, isRTL }) => {
   const { isMobile: isMobile2, enableAnimations } = useConfig();
+  const responsiveGrid = useResponsiveGrid();
   const reactElementsByRow = getReactElementsByRow(items);
   return /* @__PURE__ */ React172.createElement("div", {
     className: grid_module_default.container,
@@ -43269,16 +43500,21 @@ var Grid = ({ items, layout, isRTL }) => {
   }, reactElementsByRow.map((rowData, index2) => {
     const fieldId = rowData.firstFieldId;
     const key = isMobile2 && fieldId || index2;
+    const responsive = Boolean(responsiveGrid);
     return /* @__PURE__ */ React172.createElement(Focusable, {
       key: fieldId,
-      fieldId
+      fieldId,
+      className: responsive ? responsive_grid_module_default.row : void 0,
+      style: responsiveGrid?.rows.get(rowData.row)
     }, /* @__PURE__ */ React172.createElement("div", {
       key,
       style: getGridStyle({
-        layout
+        layout,
+        responsive
       }),
-      className: (0, import_classnames21.default)(grid_module_default.grid, grid_module_default.column, {
-        [grid_animations_module_default.animations]: enableAnimations
+      className: (0, import_classnames22.default)(grid_module_default.grid, grid_module_default.column, {
+        [grid_animations_module_default.animations]: enableAnimations,
+        [responsive_grid_module_default.grid]: responsive
       })
     }, rowData.elements));
   }));
@@ -43296,7 +43532,8 @@ function getReactElementsByRow(items) {
         elements: [
           element
         ],
-        firstFieldId: item.id
+        firstFieldId: item.id,
+        row
       };
     }
     return result2;
@@ -50560,7 +50797,7 @@ var useFormBi = (form, bi2, biFormFillSessionId) => {
 };
 
 // ../form-viewer/dist/esm/components/root/form-viewer-provider.js
-var FormViewerProvider = ({ i18n, bi: bi2, biFormFillSessionId, form, isMobile: isMobile2, isEditor, isComposer, isRTL, compId, PortalContainer, language, regionalFormat, externalData, forcedState, children, panorama, experiments, translationNamespace, currency, userData, WixRicosViewer, addressTemplates, fieldInitialData, enableAnimations, baseUrl }) => {
+var FormViewerProvider = ({ i18n, bi: bi2, biFormFillSessionId, form, isMobile: isMobile2, isEditor, isComposer, isRTL, compId, PortalContainer, language, regionalFormat, externalData, forcedState, children, panorama, experiments, translationNamespace, currency, userData, WixRicosViewer, addressTemplates, fieldInitialData, enableAnimations, cssMobileLayout, baseUrl }) => {
   const translations = useMemo(() => ({
     t: i18n.getFixedT(language, translationNamespace),
     i18n
@@ -50592,7 +50829,8 @@ var FormViewerProvider = ({ i18n, bi: bi2, biFormFillSessionId, form, isMobile:
     isEditor,
     isComposer,
     isRTL,
-    enableAnimations
+    enableAnimations,
+    cssMobileLayout
   }), [
     language,
     regionalFormat,
@@ -50605,7 +50843,8 @@ var FormViewerProvider = ({ i18n, bi: bi2, biFormFillSessionId, form, isMobile:
     isEditor,
     isComposer,
     isRTL,
-    enableAnimations
+    enableAnimations,
+    cssMobileLayout
   ]);
   const forcedViewState = useMemo(() => forcedState ?? [], [
     forcedState