@inseefr/lunatic 2.4.7 → 2.4.8-dynamicArray

package/lib/components/duration/duration.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./duration.scss");
+var _useDurationValues2 = require("./useDurationValues");
+var _commons = require("../commons");
+var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../commons/components/lunatic-component-without-label"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 Duration(props) {
+  var value = props.value,
+    label = props.label,
+    format = props.format,
+    handleChange = props.handleChange,
+    response = props.response,
+    id = props.id,
+    preferences = props.preferences,
+    declarations = props.declarations,
+    missing = props.missing,
+    missingResponse = props.missingResponse,
+    management = props.management,
+    description = props.description;
+  var onChange = (0, _commons.useOnHandleChange)({
+    handleChange: handleChange,
+    response: response,
+    value: value
+  });
+  var _useDurationValues = (0, _useDurationValues2.useDurationValues)(value, format, onChange),
+    propsHours = _useDurationValues.propsHours,
+    propsMinutes = _useDurationValues.propsMinutes,
+    propsYears = _useDurationValues.propsYears,
+    propsMonths = _useDurationValues.propsMonths;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticComponentWithoutLabel["default"], {
+    id: id,
+    preferences: preferences,
+    declarations: declarations,
+    value: value,
+    missing: missing,
+    missingResponse: missingResponse,
+    management: management,
+    description: description,
+    handleChange: handleChange,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "container",
+      children: [label, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}), format === 'PTnHnM' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "field-group",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "input-field-group",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            htmlFor: "hoursInput",
+            className: "input-label",
+            children: "Heures:"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+            id: "hoursInput",
+            type: "number"
+          }, propsHours), {}, {
+            className: "input-field"
+          }))]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "input-field-group",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            htmlFor: "minutesInput",
+            className: "input-label",
+            children: "Minutes:"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+            id: "minutesInput",
+            type: "number"
+          }, propsMinutes), {}, {
+            min: "0",
+            className: "input-field"
+          }))]
+        })]
+      }), format === 'PnYnM' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "field-group",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "input-field-group",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            htmlFor: "yearsInput",
+            className: "input-label",
+            children: "Ann\xE9es:"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+            id: "yearsInput",
+            type: "number"
+          }, propsYears), {}, {
+            min: "0",
+            className: "input-field"
+          }))]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "input-field-group",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            htmlFor: "monthsInput",
+            className: "input-label",
+            children: "Mois:"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+            id: "monthsInput",
+            type: "number"
+          }, propsMonths), {}, {
+            min: "0",
+            className: "input-field"
+          }))]
+        })]
+      })]
+    })
+  });
+}
+var _default = Duration;
+exports["default"] = _default;

package/lib/components/duration/duration.scss

@@ -0,0 +1,16 @@
+.input-field {
+  width: 100px;
+}
+.field-group {
+  display: flex;
+}
+
+.input-field-group {
+  display: flex;
+  align-items: first baseline;
+  margin: 5px;
+}
+
+.input-label {
+  margin-right: 5px;
+}

package/lib/components/duration/duration.spec.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _duration = _interopRequireDefault(require("./duration"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('Duration component', function () {
+  var handleChange = _vitest.vi.fn();
+  (0, _vitest.it)('should render with hours and minutes inputs when format is "PTnHnM"', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_duration["default"], {
+        format: "PTnHnM",
+        handleChange: handleChange,
+        id: '',
+        value: null,
+        executeExpression: function executeExpression(expression, args) {
+          throw new Error('Function not implemented.');
+        },
+        response: {
+          name: ''
+        }
+      })),
+      getByLabelText = _render.getByLabelText;
+    var hoursInput = getByLabelText('Heures:');
+    var minutesInput = getByLabelText('Minutes:');
+    (0, _vitest.expect)(hoursInput).toBeInTheDocument();
+    (0, _vitest.expect)(minutesInput).toBeInTheDocument();
+  });
+  (0, _vitest.it)('should render with years and months inputs when format is "PnYnM"', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_duration["default"], {
+        format: "PnYnM",
+        handleChange: handleChange,
+        id: '',
+        value: null,
+        executeExpression: function executeExpression(expression, args) {
+          throw new Error('Function not implemented.');
+        },
+        response: {
+          name: ''
+        }
+      })),
+      getByLabelText = _render2.getByLabelText;
+    var yearsInput = getByLabelText('Années:');
+    var monthsInput = getByLabelText('Mois:');
+    (0, _vitest.expect)(yearsInput).toBeInTheDocument();
+    (0, _vitest.expect)(monthsInput).toBeInTheDocument();
+  });
+});

package/lib/components/duration/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _duration["default"];
+  }
+});
+var _duration = _interopRequireDefault(require("./duration"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/components/duration/useDurationValues.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDurationValues = void 0;
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 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); }
+var useDurationValues = function useDurationValues(value, format, handleChange) {
+  var duration = parseISO8601Duration(value);
+  // Gestionnaire de changement pour les champs individuels (heures, minutes, mois, années)
+  var onChangeHandler = function onChangeHandler(key) {
+    return function (e) {
+      // Mise à jour de la valeur de la durée avec la clé dynamique
+      handleChange(formatISO8601Duration(format, _objectSpread(_objectSpread({}, duration), {}, _defineProperty({}, key, e.target.value))));
+    };
+  };
+  var propsHours = {
+    value: duration.hours,
+    onChange: onChangeHandler("hours"),
+    min: "0",
+    max: "23"
+  };
+  var propsMinutes = {
+    value: duration.minutes,
+    onChange: onChangeHandler("minutes"),
+    min: "0",
+    max: "59"
+  };
+  var propsMonths = {
+    value: duration.months,
+    onChange: onChangeHandler("months"),
+    min: "0",
+    max: "11"
+  };
+  var propsYears = {
+    value: duration.years,
+    onChange: onChangeHandler("years"),
+    min: "0"
+  };
+  // Retourne les propriétés pour chaque champ de durée
+  return {
+    propsHours: propsHours,
+    propsMonths: propsMonths,
+    propsYears: propsYears,
+    propsMinutes: propsMinutes
+  };
+};
+exports.useDurationValues = useDurationValues;
+// Fonction pour parser une durée au format ISO8601 en objets individuels
+var parseISO8601Duration = function parseISO8601Duration(duration) {
+  // Si la durée est vide, retourne des valeurs vides pour chaque champ
+  if (!duration) {
+    return {
+      hours: '',
+      minutes: '',
+      years: '',
+      months: ''
+    };
+  }
+  // Expression régulière pour le format heures:minutes (PTnHnM)
+  var regexHourMinute = /PT(\d+H)?(\d+M)?/i;
+  var matchHourMinute = duration.match(regexHourMinute);
+  // Si la durée correspond au format heures:minutes (PTnHnM)
+  if (matchHourMinute) {
+    var _matchHourMinute = _slicedToArray(matchHourMinute, 3),
+      hours = _matchHourMinute[1],
+      minutes = _matchHourMinute[2];
+    return {
+      hours: hours ? hours.replace('H', '') : '',
+      minutes: minutes ? minutes.replace('M', '') : '',
+      years: '',
+      months: ''
+    };
+  }
+  // Expression régulière pour le format années:mois (PnYnM)
+  var regexYearMonth = /P(\d+Y)?(\d+M)?/i;
+  var matchYearMonth = duration.match(regexYearMonth);
+  // Si la durée correspond au format années:mois (PnYnM)
+  if (matchYearMonth) {
+    var _matchYearMonth = _slicedToArray(matchYearMonth, 3),
+      years = _matchYearMonth[1],
+      months = _matchYearMonth[2];
+    return {
+      years: years ? years.replace('Y', '') : '',
+      months: months ? months.replace('M', '') : '',
+      hours: '',
+      minutes: ''
+    };
+  }
+  // Si la durée ne correspond à aucun des formats connus, retourne des valeurs vides pour chaque champ
+  return {
+    hours: '',
+    minutes: '',
+    years: '',
+    months: ''
+  };
+};
+// Fonction pour formatter les objets individuels en durée au format souhaité
+var formatISO8601Duration = function formatISO8601Duration(format, duration) {
+  // Si tous les champs de durée sont vides, retourne null
+  if (!duration.hours && !duration.minutes && !duration.years && !duration.months) {
+    return null;
+  }
+  // Formatage de la durée en fonction du format spécifié
+  if (format === 'PTnHnM') {
+    return "PT".concat(duration.hours ? "".concat(duration.hours, "H") : '0H').concat(duration.minutes ? "".concat(duration.minutes, "M") : '0M');
+  }
+  if (format === 'PnYnM') {
+    return "P".concat(duration.years ? "".concat(duration.years, "Y") : '0Y').concat(duration.months ? "".concat(duration.months, "M") : '0M');
+  }
+  // Si le format spécifié n'est pas valide, retourne null
+  return null;
+};

package/lib/components/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "Dropdown", {
     return _dropdown["default"];
   }
 });
+Object.defineProperty(exports, "Duration", {
+  enumerable: true,
+  get: function get() {
+    return _duration["default"];
+  }
+});
 Object.defineProperty(exports, "FilterDescription", {
   enumerable: true,
   get: function get() {
@@ -182,6 +188,7 @@ var _suggesterLoaderWidget = _interopRequireDefault(require("./suggester-loader-
 var _roundabout = _interopRequireDefault(require("./roundabout"));
 var _table = _interopRequireDefault(require("./table"));
 var _componentSet = _interopRequireDefault(require("./component-set"));
+var _duration = _interopRequireDefault(require("./duration"));
 var _questionInformation = _interopRequireDefault(require("./questions/question-information"));
 var _questionContext = _interopRequireDefault(require("./questions/question-context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/components/loop/loop.js

@@ -24,7 +24,7 @@ function Loop(props) {
     value = props.value,
     executeExpression = props.executeExpression,
     componentType = props.componentType,
-    headers = props.headers,
+    header = props.header,
     shortcut = props.shortcut,
     management = props.management,
     missing = props.missing,
@@ -68,7 +68,7 @@ function Loop(props) {
         shortcut: shortcut,
         features: features,
         preferences: preferences,
-        headers: headers,
+        header: header,
         errors: errors
       });
     default:

package/lib/components/loop/roster-for-loop/roster-for-loop.js

@@ -1,21 +1,19 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _declarations = require("../../declarations");
-var _rosterTable = _interopRequireDefault(require("./roster-table"));
+var _react = require("react");
 var _commons = require("../../commons");
+var _lunaticComponentWithLabel = _interopRequireDefault(require("../../commons/components/lunatic-component-with-label"));
+var _rosterTable = _interopRequireDefault(require("./roster-table"));
 var _handleRowButton = _interopRequireDefault(require("../commons/handle-row-button"));
 var _i18n = _interopRequireDefault(require("../../../i18n"));
 var _getInitLength = _interopRequireDefault(require("../commons/get-init-length"));
+var _useRefSync = require("../../../hooks/use-ref-sync");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -32,12 +30,13 @@ function RosterforLoop(_ref) {
     label = _ref.label,
     components = _ref.components,
     executeExpression = _ref.executeExpression,
-    headers = _ref.headers,
+    header = _ref.header,
     missing = _ref.missing,
-    shortcut = _ref.shortcut,
     id = _ref.id,
     management = _ref.management,
-    errors = _ref.errors;
+    errors = _ref.errors,
+    missingResponse = _ref.missingResponse,
+    description = _ref.description;
   var min = (lines === null || lines === void 0 ? void 0 : lines.min) || DEFAULT_MIN_ROWS;
   var max = (lines === null || lines === void 0 ? void 0 : lines.max) || DEFAULT_MAX_ROWS;
   var _useState = (0, _react.useState)(function () {
@@ -47,19 +46,21 @@ function RosterforLoop(_ref) {
     nbRows = _useState2[0],
     setNbRows = _useState2[1];
   var showButtons = min && max && min !== max;
+  var valueMapRef = (0, _useRefSync.useRefSync)(valueMap);
+  var nbRowsRef = (0, _useRefSync.useRefSync)(nbRows);
   var addRow = (0, _react.useCallback)(function () {
     if (nbRows < max) {
       setNbRows(nbRows + 1);
     }
   }, [max, nbRows]);
   var handleChangeLoop = (0, _react.useCallback)(function (response, value, args) {
-    var v = valueMap[response.name];
+    var v = valueMapRef.current[response.name];
     v[args.index] = value;
     handleChange(response, v, {
       loop: true,
-      length: nbRows
+      length: nbRowsRef.current
     }); // TODO: a retaper pour déplacer cette compléxité
-  }, [handleChange, nbRows, valueMap]);
+  }, [handleChange, nbRowsRef, valueMapRef]);
   var removeRow = (0, _react.useCallback)(function () {
     if (nbRows > 1) {
       var newNbRows = nbRows - 1;
@@ -79,32 +80,34 @@ function RosterforLoop(_ref) {
   }, [nbRows, handleChange, valueMap]);
   if (nbRows > 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsBeforeText, {
-        declarations: declarations,
-        id: id
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsAfterText, {
-        declarations: declarations,
-        id: id
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_rosterTable["default"], {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_lunaticComponentWithLabel["default"], {
         id: id,
-        components: components,
-        nbRows: nbRows,
-        executeExpression: executeExpression,
-        headers: headers,
-        handleChange: handleChangeLoop,
-        value: valueMap,
-        management: management,
-        missing: missing,
-        shortcut: shortcut,
-        errors: errors
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsDetachable, {
+        label: label,
         declarations: declarations,
-        id: id
+        missing: missing,
+        missingResponse: missingResponse,
+        management: management,
+        description: description,
+        handleChange: handleChange,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_rosterTable["default"], {
+          id: id,
+          components: components,
+          nbRows: nbRows,
+          executeExpression: executeExpression,
+          header: header,
+          handleChange: handleChangeLoop,
+          value: valueMap,
+          missing: missing,
+          errors: errors
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
+          errors: errors,
+          activeId: id
+        })]
       }), showButtons && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_handleRowButton["default"], {
           onClick: addRow,
           disabled: nbRows === max,
-          children: label || _i18n["default"].DEFAULT_BUTTON_ADD
+          children: _i18n["default"].DEFAULT_BUTTON_ADD
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_handleRowButton["default"], {
           onClick: removeRow,
           disabled: nbRows === min,

package/lib/components/loop/roster-for-loop/roster-table.js

@@ -4,43 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _htmlTable = require("../../commons/components/html-table");
-var _header = _interopRequireDefault(require("./header"));
-var _body = _interopRequireDefault(require("./body"));
+var _header = _interopRequireDefault(require("../../table/header"));
 require("./roster.scss");
 var _commons = require("../../commons");
+var _rosterForLoopOrchestrator = _interopRequireDefault(require("./roster-for-loop-orchestrator"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var preferences = ['COLLECTED'];
 function RosterTable(_ref) {
   var components = _ref.components,
     nbRows = _ref.nbRows,
     executeExpression = _ref.executeExpression,
     id = _ref.id,
-    headers = _ref.headers,
+    header = _ref.header,
     valueMap = _ref.value,
-    shortcut = _ref.shortcut,
     missing = _ref.missing,
-    management = _ref.management,
     handleChange = _ref.handleChange;
   if (nbRows <= 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.NothingToDisplay, {});
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_htmlTable.Table, {
     id: id,
+    className: "rosterTable",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header["default"], {
-      header: headers,
+      header: header,
       id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_body["default"], {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_htmlTable.Tbody, {
       id: id,
-      components: components,
-      handleChange: handleChange,
-      nbRows: nbRows,
-      value: valueMap,
-      management: management,
-      missing: missing,
-      shortcut: shortcut,
-      executeExpression: executeExpression
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rosterForLoopOrchestrator["default"], {
+        id: "roster-".concat(id),
+        components: components,
+        nbRows: nbRows,
+        handleChange: handleChange,
+        executeExpression: executeExpression,
+        valueMap: valueMap,
+        missing: missing,
+        preferences: preferences
+      })
     })]
   });
 }

package/lib/components/loop/roster-for-loop/roster.scss

@@ -1,39 +1,37 @@
-// .lunatic-component {
-// 	.table-lunatic {
-// 		table-layout: fixed;
-// 		border-collapse: collapse;
-// 		margin-top: 0.3em;
-// 		margin-bottom: 0.3em;
-// 		& td,
-// 		th {
-// 			border: 0.15em solid var(--color-primary-dark);
-// 			padding: 0.2em;
-// 		}
-// 		& td {
-// 			.field,
-// 			.field-with-tooltip {
-// 				display: flex;
-// 				justify-content: center;
-// 				align-items: center;
-// 			}
-// 		}
-// 	}
+.lunatic-component {
+	.rosterTable {
+		border-collapse: separate;
+		border-spacing: 0;
+		thead {
+			position: sticky;
+			background-color: var(--color-primary-contrast-text);
+			z-index: 1;
+			top: 0;
+			th {
+				border-top: 2px solid;
+				border-bottom: 2px solid;
+				border-right: 2px solid;
+			}
+			th:first-child {
+				border-left: 2px solid;
+			}
+		}
+		tbody {
+			th {
+				border-top: 1px solid;
+				border-bottom: 1px solid;
+				border-right: 1px solid;
+			}
 
-// 	.table-lunatic .tooltip-lunatic img {
-// 		height: 20px;
-// 		width: 20px;
-// 	}
-// }
+			td {
+				border-bottom: 1px solid;
+				border-right: 1px solid;
+			}
 
-.lunatic-table {
-	table-layout: fixed;
-	border-collapse: collapse;
-	margin-top: 0.3em;
-	margin-bottom: 0.3em;
-	.lunatic-table-thead {
-		.lunatic-table-th {
-			border: 0.15em solid var(--color-primary-dark);
-			padding: 0.2em;
+			th:first-child,
+			td:first-child {
+				border-left: 1px solid;
+			}
 		}
 	}
 }