@inseefr/lunatic 2.5.2-rc1-beta → 2.6.0-rc.1

package/lib/stories/suggester/simple.json

@@ -46,6 +46,10 @@
 				"value": "true",
 				"type": "VTL"
 			},
+			"readOnly": {
+				"value": "true",
+				"type": "VTL"
+			},
 			"controls": [
 				{
 					"id": "age-controls",

package/lib/stories/summary/source.json

@@ -26,7 +26,7 @@
 			"conditionFilter": { "value": "true", "type": "VTL" },
 			"response": { "name": "NB_HAB" }
 		},
-    {
+		{
 			"id": "hoew",
 			"componentType": "InputNumber",
 			"mandatory": false,
@@ -216,44 +216,59 @@
 				"value": "\"## Vos réponses.\"",
 				"type": "VTL|MD"
 			},
-      "sections": [
-        {
-          "iterations": { "value": "NB_HAB", "type": "VTL" },
-          "title": {
-            "value": "\"### Le bulletin individuel de \" || PRENOMS",
-            "type": "VTL|MD"
-          },
-          "responses": [
-            {
-              "label": { "value": "\"L'age de \" || PRENOMS", "type": "VTL" },
-              "value": { "value": "cast(AGE,string) || \" ans\"", "type": "VTL" }
-            },
-            {
-              "label": { "value": "\"Le sexe de \" || PRENOMS", "type": "VTL" },
-              "value": {
-                "value": "if(SEXE = \"1\") then \"Masculin\" else \"Féminin\"",
-                "type": "VTL"
-              }
-            }
-          ]
-        },
-        {
-          "title": {
-            "value": "\"### La feuille logement\"",
-            "type": "VTL|MD"
-          },
-          "responses": [
-            {
-              "label": { "value": "\"Zéro divisé par zéro \"", "type": "VTL" },
-              "value": { "value": "cast(ZERO,string) || \", mais ça tu savais déjà !\"", "type": "VTL" }
-            },
-            {
-              "label": { "value": "\"Nombre d'habitants \"", "type": "VTL" },
-              "value": { "value": "cast(NB_HAB,string) || \" personnes\"", "type": "VTL" }
-            }
-          ]
-        }
-      ],
+			"sections": [
+				{
+					"id": "summary-section-0",
+					"iterations": { "value": "NB_HAB", "type": "VTL" },
+					"title": {
+						"value": "\"### Le bulletin individuel de \" || PRENOMS",
+						"type": "VTL|MD"
+					},
+					"responses": [
+						{
+							"id": "summary-section-0-response-0",
+							"label": { "value": "\"L'age de \" || PRENOMS", "type": "VTL" },
+							"value": {
+								"value": "cast(AGE,string) || \" ans\"",
+								"type": "VTL"
+							}
+						},
+						{
+							"id": "summary-section-0-response-1",
+							"label": { "value": "\"Le sexe de \" || PRENOMS", "type": "VTL" },
+							"value": {
+								"value": "if(SEXE = \"1\") then \"Masculin\" else \"Féminin\"",
+								"type": "VTL"
+							}
+						}
+					]
+				},
+				{
+					"id": "summary-section-1",
+					"title": {
+						"value": "\"### La feuille logement\"",
+						"type": "VTL|MD"
+					},
+					"responses": [
+						{
+							"id": "summary-section-1-response-0",
+							"label": { "value": "\"Zéro divisé par zéro \"", "type": "VTL" },
+							"value": {
+								"value": "cast(ZERO,string) || \", mais ça tu savais déjà !\"",
+								"type": "VTL"
+							}
+						},
+						{
+							"id": "summary-section-1-response-1",
+							"label": { "value": "\"Nombre d'habitants \"", "type": "VTL" },
+							"value": {
+								"value": "cast(NB_HAB,string) || \" personnes\"",
+								"type": "VTL"
+							}
+						}
+					]
+				}
+			],
 			"conditionFilter": { "value": "true", "type": "VTL" },
 			"page": "5"
 		}
@@ -270,7 +285,7 @@
 				"INPUTED": null
 			}
 		},
-    {
+		{
 			"variableType": "COLLECTED",
 			"name": "ZERO",
 			"values": {

package/lib/stories/utils/orchestrator.js

@@ -13,8 +13,7 @@ var _logger = require("../../utils/logger");
 var _overview = require("./overview");
 var _waiting = _interopRequireDefault(require("./waiting"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["source", "data", "management", "shortcut", "activeControls", "features", "initialPage", "getStoreInfo", "missing", "missingStrategy", "missingShortcut", "autoSuggesterLoading", "addExternal", "preferences", "custom", "showOverview", "filterDescription", "getReferentiel", "dontKnowButton", "refusedButton", "readOnly"],
-  _excluded2 = ["id", "componentType", "response", "storeName", "conditionFilter"];
+var _excluded = ["source", "data", "management", "shortcut", "activeControls", "features", "initialPage", "getStoreInfo", "missing", "missingStrategy", "missingShortcut", "autoSuggesterLoading", "addExternal", "preferences", "custom", "showOverview", "filterDescription", "getReferentiel", "dontKnowButton", "refusedButton", "readOnly"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -51,7 +50,7 @@ function DevOptions(_ref) {
       className: "title",
       children: "Options d\xE9veloppeur"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "contenur",
+      className: "conteneur",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(lunatic.Button, {
         onClick: function onClick() {
           return _logger.Logger.log(getData(true));
@@ -77,7 +76,7 @@ function DevOptions(_ref) {
         handleChange: handleChange,
         min: 1,
         label: 'Page',
-        description: 'the page wher you want to jump'
+        description: 'the page where you want to jump'
       })]
     })]
   });
@@ -225,27 +224,17 @@ function OrchestratorForStories(_ref3) {
       className: "container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "components",
-        children: components.map(function (component) {
-          var id = component.id,
-            componentType = component.componentType,
-            response = component.response,
-            storeName = component.storeName,
-            conditionFilter = component.conditionFilter,
-            other = _objectWithoutProperties(component, _excluded2);
-          var Component = lunatic[componentType];
-          var storeInfo = storeName ? getStoreInfo(storeName) : {};
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "lunatic lunatic-component",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-              id: id,
-              response: response
-            }, other), rest), component), storeInfo), {}, {
-              // fill error when needed
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(lunatic.LunaticComponents, {
+          autoFocusKey: pageTag,
+          components: components,
+          componentProps: function componentProps(_ref4) {
+            var storeName = _ref4.storeName;
+            return _objectSpread({
               errors: errorActive[pageTag],
               filterDescription: filterDescription,
               disabled: readOnly
-            }))
-          }, "component-".concat(id));
+            }, storeName ? getStoreInfo(storeName) : {});
+          }
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Pager, {
         goPrevious: goPreviousPage,

package/lib/tests/utils/lunatic.d.ts

@@ -1,6 +1,6 @@
-import { LunaticSource } from '../../src/use-lunatic/type-source';
+import type { LunaticSource } from '../../src/use-lunatic/type-source';
 import type { LunaticData, LunaticState } from '../../src/use-lunatic/type';
-import { ActionInit } from '../../src/use-lunatic/actions';
+import { type ActionInit } from '../../src/use-lunatic/actions';
 /**
  * Generate a base state from a source / data for unit testing reducer
  */
@@ -9,3 +9,17 @@ export declare function generateState(source: LunaticSource, data?: Record<strin
  * Generate LunaticData from a record of values
  */
 export declare function generateData<T extends Record<string, unknown>>(data: T): LunaticData;
+export declare function generateVariable({ type, name }: {
+    type?: string | undefined;
+    name?: string | undefined;
+}): {
+    variableType: string;
+    name: string;
+    values: {
+        PREVIOUS: null;
+        COLLECTED: null;
+        FORCED: null;
+        EDITED: null;
+        INPUTED: null;
+    };
+};

package/lib/use-lunatic/commons/execute-expression/create-execute-expression.js

@@ -101,41 +101,6 @@ function createExecuteExpression(variables, features) {
     pushToLazy(name);
   }
 
-  /**
-   * Update the binding for a loop
-   */
-  function setLoopBindings(variables, iteration) {
-    Object.entries(bindings).forEach(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        k = _ref4[0],
-        v = _ref4[1];
-      var _variables$k = variables[k],
-        type = _variables$k.type,
-        value = _variables$k.value;
-      if (!Array.isArray(v) && type === _constants.COLLECTED && Array.isArray(value)) {
-        bindings[k] = value[iteration];
-        pushToLazy(k);
-      }
-    });
-  }
-
-  /**
-   * Reset the values in a loop
-   */
-  function resetLoopBindings(variables) {
-    Object.entries(bindings).forEach(function (_ref5) {
-      var _ref6 = _slicedToArray(_ref5, 2),
-        k = _ref6[0],
-        v = _ref6[1];
-      var _variables$k2 = variables[k],
-        type = _variables$k2.type,
-        value = _variables$k2.value;
-      if (type === _constants.COLLECTED && Array.isArray(value) && !Array.isArray(v)) {
-        bindings[k] = value;
-      }
-    });
-  }
-
   /**
    * Extract variables from an expression
    */
@@ -177,9 +142,9 @@ function createExecuteExpression(variables, features) {
     }
     return {};
   }
-  function resolveUseContext(name, _ref7) {
-    var iteration = _ref7.iteration,
-      linksIterations = _ref7.linksIterations;
+  function resolveUseContext(name, _ref3) {
+    var iteration = _ref3.iteration,
+      linksIterations = _ref3.linksIterations;
     var value = bindings[name];
     if ([_constants.X_AXIS, _constants.Y_AXIS].includes(name) && linksIterations !== undefined) {
       pushToLazy(name);
@@ -212,13 +177,13 @@ function createExecuteExpression(variables, features) {
     }
     return (0, _vtl["default"])(value);
   }
-  function fillVariablesValues(map, _ref8) {
-    var iteration = _ref8.iteration,
-      linksIterations = _ref8.linksIterations;
-    return Object.entries(map).reduce(function (sub, _ref9) {
-      var _ref10 = _slicedToArray(_ref9, 2),
-        name = _ref10[0],
-        _ = _ref10[1];
+  function fillVariablesValues(map, _ref4) {
+    var iteration = _ref4.iteration,
+      linksIterations = _ref4.linksIterations;
+    return Object.entries(map).reduce(function (sub, _ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        name = _ref6[0],
+        _ = _ref6[1];
       return _objectSpread(_objectSpread({}, sub), {}, _defineProperty({}, name, resolveUseContext(name, {
         iteration: iteration,
         linksIterations: linksIterations
@@ -226,6 +191,7 @@ function createExecuteExpression(variables, features) {
     }, {});
   }
   function execute(expObject) {
+    var _args$iteration;
     var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var _validateExpression = validateExpression((0, _getSafetyExpression["default"])(expObject)),
       expression = _validateExpression.value,
@@ -250,6 +216,8 @@ function createExecuteExpression(variables, features) {
       iteration: iteration,
       linksIterations: linksIterations
     });
+    // Add index has a specific variable
+    vtlBindings['GLOBAL_ITERATION_INDEX'] = (((_args$iteration = args === null || args === void 0 ? void 0 : args.iteration) !== null && _args$iteration !== void 0 ? _args$iteration : 0) + 1).toString();
     var memoized = getMemoizedValue(expression, vtlBindings);
     if (memoized === undefined) {
       var result = (0, _executeExpression["default"])(vtlBindings, expression, type, features, logging || loggingDefault);

package/lib/use-lunatic/commons/execute-expression/execute-expression.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 exports.executeVtlExpression = executeVtlExpression;
-var _react = _interopRequireDefault(require("react"));
 var _trevas = require("@inseefr/trevas");
 var _mdLabel = _interopRequireDefault(require("../../../components/commons/components/md-label"));
 var _vtl = _interopRequireDefault(require("../../../utils/vtl"));

package/lib/use-lunatic/commons/fill-components/fill-component-expressions.js

@@ -24,7 +24,7 @@ var VTL_ATTRIBUTES = ['label', 'options.label', 'responses.label', 'hierarchy.la
 // Disable controls compilation
 // 'controls.control',
 // 'controls.errorMessage',
-'controls.iterations', 'lines.min', 'lines.max', 'iterations', 'xAxisIterations', 'yAxisIterations', 'conditionFilter', 'headers.label', 'header.label'];
+'controls.iterations', 'lines.min', 'lines.max', 'iterations', 'xAxisIterations', 'yAxisIterations', 'conditionFilter', 'headers.label', 'header.label', 'disabled', 'readOnly'];
 
 // Utility type to replace all expression from an object into a translated version
 
@@ -99,6 +99,10 @@ function fillAttributes(component, _ref2) {
     return _objectSpread(_objectSpread({}, step), crawl(path, step));
   }, _objectSpread({}, component));
 }
+
+/**
+ * Fill props interpreting VTL expression
+ */
 function fillComponentExpressions(component, state) {
   var pager = state.pager,
     executeExpression = state.executeExpression;

package/lib/use-lunatic/commons/fill-components/fill-components.js

@@ -35,11 +35,19 @@ function compose() {
  *
  * Force typing for this function since it's doo dynamic
  */
-var fillComponent = compose(_fillFromState["default"], _fillComponentExpressions["default"], _fillSpecificExpression["default"], _fillPagination["default"], _fillComponentValue["default"], _fillMissingResponse["default"], _fillManagement["default"]);
+var fillComponent = compose(_fillFromState["default"], _fillComponentExpressions["default"], _fillPagination["default"], _fillComponentValue["default"], _fillMissingResponse["default"], _fillManagement["default"], _fillSpecificExpression["default"]);
+
+/**
+ * Fill components with values coming from the state, and interpret VTL expression
+ */
 function fillComponents(components, state) {
   return components.map(function (component) {
     return fillComponent(component, state);
-  });
+  }).filter(matchConditionFilter);
+}
+function matchConditionFilter(_ref) {
+  var conditionFilter = _ref.conditionFilter;
+  return conditionFilter !== undefined ? conditionFilter : true;
 }
 var _default = fillComponents;
 exports["default"] = _default;

package/lib/use-lunatic/commons/fill-components/fill-from-state.js

@@ -10,6 +10,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/**
+ * Add state data as component props
+ */
 function fillFromState(component, state) {
   var handleChange = state.handleChange,
     executeExpression = state.executeExpression,

package/lib/use-lunatic/commons/fill-components/fill-specific-expression.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _fillComponents = _interopRequireDefault(require("./fill-components"));
+var _array = require("../../../utils/array");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -16,31 +19,73 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function resolveRoundabout(component, state) {
-  var executeExpression = state.executeExpression;
-  var componentType = component.componentType;
-  if (componentType === 'Roundabout') {
-    var iterations = component.iterations,
-      expressions = component.expressions;
-    var compiled = Object.entries(expressions).reduce(function (result, _ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-        name = _ref2[0],
-        expression = _ref2[1];
-      var values = new Array(iterations).fill(null).map(function (_, iteration) {
-        return executeExpression(expression, {
-          iteration: iteration
-        });
+/**
+ * Fill props for roundabout
+ * - expressions, VTL that states the level of completion for each iteration
+ */
+function fillRoundaboutProps(component, state) {
+  var iterations = component.iterations,
+    expressions = component.expressions;
+  var compiled = Object.entries(expressions).reduce(function (result, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      name = _ref2[0],
+      expression = _ref2[1];
+    var values = new Array(iterations).fill(null).map(function (_, iteration) {
+      return state.executeExpression(expression, {
+        iteration: iteration
       });
-      return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, name, values));
-    }, {});
-    return _objectSpread(_objectSpread({}, component), {}, {
-      expressions: compiled
     });
-  }
-  return component;
+    return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, name, values));
+  }, {});
+  return _objectSpread(_objectSpread({}, component), {}, {
+    expressions: compiled
+  });
+}
+
+/**
+ * Fill child components for nested component type
+ */
+function fillChildComponents(component, state) {
+  return _objectSpread(_objectSpread({}, component), {}, {
+    components: (0, _fillComponents["default"])(component.components, state)
+  });
 }
+
+/**
+ * For loops, inject a method to retrieve component at a specific iteration
+ */
+function fillChildComponentsWithIteration(component, state) {
+  return _objectSpread(_objectSpread({}, component), {}, {
+    getComponents: function getComponents(iteration) {
+      return (0, _fillComponents["default"])(component.components, _objectSpread(_objectSpread({}, state), {}, {
+        handleChange: function handleChange(response, value) {
+          var _component$value$resp, _component$value;
+          state.handleChange(response, (0, _array.setAtIndex)((_component$value$resp = (_component$value = component.value) === null || _component$value === void 0 ? void 0 : _component$value[response.name]) !== null && _component$value$resp !== void 0 ? _component$value$resp : [], iteration, value));
+        },
+        pager: _objectSpread(_objectSpread({}, state.pager), {}, {
+          iteration: iteration,
+          subPage: 0 // Fake a subpage to simulate an iteration
+        })
+      }));
+    }
+  });
+}
+
+/**
+ * Fill component specific props (RoundAbout for instance)
+ */
 function fillSpecificExpressions(component, state) {
-  return resolveRoundabout(component, state);
+  switch (component.componentType) {
+    case 'Roundabout':
+      return fillRoundaboutProps(component, state);
+    case 'ComponentSet':
+      return fillChildComponents(component, state);
+    case 'Loop':
+    case 'RosterForLoop':
+      return fillChildComponentsWithIteration(component, state);
+    default:
+      return component;
+  }
 }
 var _default = fillSpecificExpressions;
 exports["default"] = _default;

package/lib/use-lunatic/commons/get-component-value/get-component-value.js

@@ -19,9 +19,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function isInSubPage(state) {
-  var pager = state.pager;
-  var subPage = pager.subPage;
-  return subPage !== undefined;
+  return state.pager.subPage !== undefined;
 }
 
 /**

package/lib/use-lunatic/commons/page.js

@@ -30,6 +30,7 @@ function pageStringToNumbers(page) {
  * if no components can be displayed on this page (using filter)
  */
 function isPageEmpty(state) {
+  var isMovingBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var executeExpression = state.executeExpression,
     pager = state.pager;
   var iteration = pager.iteration;
@@ -42,6 +43,11 @@ function isPageEmpty(state) {
     return true;
   });
 
+  // When moving backward, modal only pages should be skipped
+  if (isMovingBackward && visibleComponents.length === 1 && visibleComponents[0].componentType === 'ConfirmationModal') {
+    return true;
+  }
+
   // No components are displayable on this page
   if (visibleComponents.length === 0) {
     return true;

package/lib/use-lunatic/hooks/use-loop-variables.js

@@ -22,5 +22,5 @@ function useLoopVariables(pager, pages) {
       return c.componentType === 'Loop';
     });
     return (_loop$loopDependencie = loop === null || loop === void 0 ? void 0 : loop.loopDependencies) !== null && _loop$loopDependencie !== void 0 ? _loop$loopDependencie : [];
-  }, [page, inIteration]);
+  }, [page, pages, inIteration]);
 }

package/lib/use-lunatic/reducer/reduce-go-next-page.js

@@ -3,21 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.reduceGoNextPage = void 0;
 var _commons = require("../commons");
-var _compose = _interopRequireDefault(require("../commons/compose"));
-var _overviewOnChange = require("./overview/overview-on-change");
-var _pageNavigation = require("../commons/page-navigation");
 var _page = require("../commons/page");
+var _pageNavigation = require("../commons/page-navigation");
 var _autoExploreLoop = require("./commons/auto-explore-loop");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _overviewOnChange = require("./overview/overview-on-change");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function reduceGoNextPage(state) {
+function reduceGoNext(state) {
   var _pages$pager$page;
   var pages = state.pages,
     pager = state.pager;
@@ -33,7 +31,7 @@ function reduceGoNextPage(state) {
 
   // We reached an empty page, move forward
   if ((0, _page.isPageEmpty)(newState)) {
-    return reduceGoNextPage(newState);
+    return reduceGoNext(newState);
   }
 
   // If we reached a loop, go inside
@@ -41,7 +39,7 @@ function reduceGoNextPage(state) {
 
   // We explored a loop, check if we reached an empty page, move forward
   if (newState.pager !== nextPager && (0, _page.isPageEmpty)(newState)) {
-    return reduceGoNextPage(newState);
+    return reduceGoNext(newState);
   }
   return _objectSpread(_objectSpread({}, newState), {}, {
     isInLoop: newState.pager.iteration !== undefined,
@@ -50,5 +48,7 @@ function reduceGoNextPage(state) {
     })
   });
 }
-var _default = (0, _compose["default"])(reduceGoNextPage, _overviewOnChange.overviewOnChange);
-exports["default"] = _default;
+var reduceGoNextPage = function reduceGoNextPage(state) {
+  return (0, _overviewOnChange.overviewOnChange)(reduceGoNext(state));
+};
+exports.reduceGoNextPage = reduceGoNextPage;

package/lib/use-lunatic/reducer/reduce-go-next-page.spec.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _lunatic = require("../../../tests/utils/lunatic");
+var _source = _interopRequireDefault(require("../../stories/modal/source.json"));
+var _reduceGoNextPage = require("./reduce-go-next-page");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('reduceGoPreviousPage', function () {
+  (0, _vitest.it)('should move forward for modal', function () {
+    var state = (0, _lunatic.generateState)(_source["default"]);
+    (0, _vitest.expect)((0, _reduceGoNextPage.reduceGoNextPage)(state).pager.page).toBe('2');
+  });
+});

package/lib/use-lunatic/reducer/reduce-go-previous-page.js

@@ -29,15 +29,15 @@ function reduceGoPreviousPage(state) {
   });
 
   // We reached an empty page, keep going backward
-  if ((0, _page.isPageEmpty)(newState)) {
+  if ((0, _page.isPageEmpty)(newState, true)) {
     return reduceGoPreviousPage(newState);
   }
 
   // If we reached a loop, go to the last iteration / sequence
   newState = (0, _autoExploreLoop.autoExploreLoop)(newState, 'backward');
 
-  // We explored a loop, check if we reached an empty page, move forward
-  if (newState.pager !== prevPager && (0, _page.isPageEmpty)(newState)) {
+  // We explored a loop, check if we reached an empty page, move backward
+  if (newState.pager !== prevPager && (0, _page.isPageEmpty)(newState, true)) {
     return reduceGoPreviousPage(newState);
   }
   return _objectSpread(_objectSpread({}, newState), {}, {

package/lib/use-lunatic/reducer/reduce-go-previous-page.spec.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _lunatic = require("../../../tests/utils/lunatic");
+var _source = _interopRequireDefault(require("../../stories/modal/source.json"));
+var _reduceGoPreviousPage = _interopRequireDefault(require("./reduce-go-previous-page"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('reduceGoPreviousPage', function () {
+  (0, _vitest.it)('should skip modal when going backward', function () {
+    var state = (0, _lunatic.generateState)(_source["default"]);
+    state.pager.page = '3';
+    (0, _vitest.expect)((0, _reduceGoPreviousPage["default"])(state).pager.page).toBe('1');
+  });
+});