@inseefr/lunatic 2.7.20 → 3.0.0-rc.5

package/lib/components/{lunatic-components.js → LunaticComponents.js}

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.LunaticComponents = LunaticComponents;
 exports.hasLabel = hasLabel;
 var _react = require("react");
-var lunaticComponents = _interopRequireWildcard(require("./index"));
 var _useAutoFocus = require("../hooks/use-auto-focus");
 var _component = require("../use-lunatic/commons/component");
+var _ComponentWrapper = require("./shared/ComponentWrapper");
+var _library = require("./library");
+var _reactErrorBoundary = require("react-error-boundary");
+var _slottableComponent = require("./shared/HOC/slottableComponent");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27,6 +28,7 @@ function LunaticComponents(_ref) {
     componentProps = _ref.componentProps,
     blocklist = _ref.blocklist,
     memo = _ref.memo,
+    slots = _ref.slots,
     _ref$wrapper = _ref.wrapper,
     wrapper = _ref$wrapper === void 0 ? function (_ref2) {
       var children = _ref2.children;
@@ -41,57 +43,75 @@ function LunaticComponents(_ref) {
   (0, _useAutoFocus.useAutoFocus)(wrapperRef, hasComponents ? autoFocusKey : undefined);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
     ref: WrapperComponent === _react.Fragment ? undefined : wrapperRef,
-    children: components.map(function (component, k) {
-      if ((0, _component.hasComponentType)(component)) {
-        if (blocklist && blocklist.includes(component.componentType)) {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_slottableComponent.SlotsProvider, {
+      slots: slots,
+      children: components.map(function (component, k) {
+        if ((0, _component.hasComponentType)(component)) {
+          if (blocklist && blocklist.includes(component.componentType)) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+              children: wrapper(_objectSpread({
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  style: {
+                    color: 'red'
+                  },
+                  children: ["Component \"", component.componentType, "\" is not allowed here"]
+                }),
+                index: k
+              }, component))
+            }, computeId(component, k));
+          }
+          var _props = _objectSpread(_objectSpread({}, component), componentProps === null || componentProps === void 0 ? void 0 : componentProps(component));
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
             children: wrapper(_objectSpread({
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                style: {
-                  color: 'red'
-                },
-                children: ["Component \"", component.componentType, "\" is not allowed here"]
-              }),
+              children: memo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LunaticComponentMemo, _objectSpread({}, _props)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LunaticComponent, _objectSpread({}, _props)),
               index: k
-            }, component))
+            }, _props))
           }, computeId(component, k));
         }
-        var _props = _objectSpread(_objectSpread({}, component), componentProps === null || componentProps === void 0 ? void 0 : componentProps(component));
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-          children: wrapper(_objectSpread({
-            children: memo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LunaticComponentMemo, _objectSpread({}, _props)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LunaticComponent, _objectSpread({}, _props)),
-            index: k
-          }, _props))
-        }, computeId(component, k));
-      }
 
-      // In some case (table for instance) we have static component that only have a label (no componentType)
-      if (hasLabel(component)) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-          children: wrapper(_objectSpread(_objectSpread({}, component), {}, {
-            children: component.label,
-            index: k
-          }))
-        }, k);
-      }
+        // In some case (table for instance) we have static component that only have a label (no componentType)
+        if (hasLabel(component)) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+            children: wrapper(_objectSpread(_objectSpread({}, component), {}, {
+              children: component.label,
+              index: k
+            }))
+          }, k);
+        }
 
-      // Component is a ReactNode
-      if ( /*#__PURE__*/(0, _react.isValidElement)(component)) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-          children: wrapper({
-            children: component,
-            index: k
-          })
-        }, k);
-      }
-      return null;
+        // Component is a ReactNode
+        if ( /*#__PURE__*/(0, _react.isValidElement)(component)) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+            children: wrapper({
+              children: component,
+              index: k
+            })
+          }, k);
+        }
+        return null;
+      })
     })
   });
 }
 function LunaticComponent(props) {
   // Component is too dynamic to be typed
-  var Component = lunaticComponents[props.componentType];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, props));
+  var Component = _library.library[props.componentType];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+    FallbackComponent: LunaticError,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentWrapper.ComponentWrapper, _objectSpread(_objectSpread({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, props))
+    }))
+  });
+}
+function LunaticError(_ref3) {
+  var error = _ref3.error;
+  console.error(error);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+    style: {
+      color: 'red'
+    },
+    children: ["Cannot render this component : ", error.toString()]
+  });
 }
 var LunaticComponentMemo = /*#__PURE__*/(0, _react.memo)(LunaticComponent);
 function computeId(component, fallback) {

package/lib/components/{pairwise-links/pairwise-links.js → PairwiseLinks/PairwiseLinks.js}

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PairwiseLinks = void 0;
-var _declarations = require("../declarations");
-var _nothingToDisplay = _interopRequireDefault(require("../commons/components/nothing-to-display"));
 var _array = require("../../utils/array");
-var _react = require("react");
-var _lunaticComponents = require("../lunatic-components");
+var _react = _interopRequireWildcard(require("react"));
+var _LunaticComponents = require("../LunaticComponents");
+var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -25,20 +25,20 @@ var PairwiseLinks = exports.PairwiseLinks = function PairwiseLinks(_ref) {
     getComponents = _ref.getComponents;
   var nbRows = xAxisIterations * yAxisIterations;
   if (nbRows <= 1) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_nothingToDisplay["default"], {});
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: "Nothing to display!"
+    });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsBeforeText, {
-      declarations: declarations,
-      id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsAfterText, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+      type: "AFTER_QUESTION_TEXT",
       declarations: declarations,
       id: id
     }), (0, _array.times)(xAxisIterations, function (x) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
         children: (0, _array.times)(yAxisIterations, function (y) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticComponents.LunaticComponents, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LunaticComponents.LunaticComponents, {
               components: getComponents(x, y),
               componentProps: function componentProps(props) {
                 return _objectSpread(_objectSpread({}, props), {}, {
@@ -49,9 +49,6 @@ var PairwiseLinks = exports.PairwiseLinks = function PairwiseLinks(_ref) {
           }, "".concat(x, "-").concat(y));
         })
       }, x);
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsDetachable, {
-      declarations: declarations,
-      id: id
     })]
   });
 };

package/lib/components/{component-set/lunatic-component-set.js → Question/Question.js}

@@ -4,14 +4,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LunaticComponentSet = LunaticComponentSet;
-var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../commons/components/lunatic-component-without-label"));
-var _lunaticComponents = require("../lunatic-components");
-var _componentSet = require("./html/component-set");
-var _componentSetWrapper = require("./html/component-set-wrapper");
+exports.Question = exports.CustomQuestion = void 0;
+var _LunaticComponents = require("../LunaticComponents");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
+var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "label", "declarations", "description", "response", "components"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _excluded = ["components"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -19,38 +17,38 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function LunaticComponentSet(_ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    declarations = _ref.declarations,
-    description = _ref.description,
-    response = _ref.response,
-    components = _ref.components,
+/**
+ * Surround a question giving additional context with label / description / declarations
+ */
+var Question = exports.Question = function Question(_ref) {
+  var components = _ref.components,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticComponentWithoutLabel["default"], {
-    id: id,
-    declarations: declarations,
-    description: description,
-    preferences: props.preferences,
-    value: props.value,
-    missing: props.missing,
-    management: props.management,
-    handleChange: props.handleChange,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentSet.ComponentSet, {
-      id: id,
-      legendText: label,
-      errors: props.errors,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticComponents.LunaticComponents, {
-        components: components
-        // Component props take precedence (we don't want to override value for instance)
-        ,
-        componentProps: function componentProps(c) {
-          return _objectSpread(_objectSpread({}, props), c);
-        },
-        wrapper: function wrapper(p) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentSetWrapper.ComponentSetWrapper, _objectSpread({}, p));
-        }
-      })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomQuestion, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LunaticComponents.LunaticComponents, {
+      components: components
     })
+  }));
+};
+var CustomQuestion = exports.CustomQuestion = (0, _slottableComponent.slottableComponent)('Question', function (props) {
+  var id = props.id,
+    description = props.description,
+    declarations = props.declarations,
+    label = props.label,
+    children = props.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("legend", {
+      id: "question-legend-".concat(id),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "description-lunatic",
+        id: "question-description-".concat(id),
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+      type: "AFTER_QUESTION_TEXT",
+      declarations: declarations,
+      id: id
+    }), children]
   });
-}
+});

package/lib/components/Radio/Radio.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = void 0;
+var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
+var _RadioGroup = require("../shared/Radio/RadioGroup");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
+var _jsxRuntime = require("react/jsx-runtime");
+function LunaticRadio(props) {
+  var id = props.id,
+    options = props.options,
+    value = props.value,
+    checkboxStyle = props.checkboxStyle,
+    errors = props.errors,
+    handleChange = props.handleChange,
+    response = props.response,
+    label = props.label,
+    shortcut = props.shortcut,
+    _props$className = props.className,
+    className = _props$className === void 0 ? 'lunatic-radio-group' : _props$className,
+    disabled = props.disabled,
+    readOnly = props.readOnly;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
+    id: id,
+    options: options,
+    value: value,
+    onSelect: function onSelect(v) {
+      return handleChange(response, v);
+    },
+    checkboxStyle: checkboxStyle,
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, id),
+    label: label,
+    className: className,
+    shortcut: shortcut,
+    disabled: disabled,
+    readOnly: readOnly
+  });
+}
+var Radio = exports.Radio = (0, _slottableComponent.slottableComponent)('Radio', LunaticRadio);

package/lib/components/{loop/roster-for-loop/roster-for-loop.js → RosterForLoop/RosterForLoop.js}

@@ -6,20 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RosterForLoop = void 0;
 var _react = require("react");
-require("./roster.scss");
-var _declarations = require("../../declarations");
-var _commons = require("../../commons");
-var _loopButton = require("../loop-button");
-var _i18n = _interopRequireDefault(require("../../../i18n"));
-var _htmlTable = require("../../commons/components/html-table");
-var _tableHeader = require("../../table/table-header");
-var _array = require("../../../utils/array");
-var _lunaticComponents = require("../../lunatic-components");
-var _constant = require("../constant");
-var _errors = require("../../commons/components/errors/errors");
+require("./RosterForLoop.scss");
+var _Table = require("../shared/Table");
+var _array = require("../../utils/array");
+var _LunaticComponents = require("../LunaticComponents");
+var _constant = require("../Loop/constant");
+var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
+var _Loop = require("../Loop/Loop");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["value", "lines", "handleChange", "declarations", "header", "iterations", "id", "getComponents", "label"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _excluded = ["value", "lines", "errors", "handleChange", "declarations", "header", "iterations", "id", "getComponents", "label"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -39,9 +34,10 @@ var DEFAULT_MAX_ROWS = 12;
 /**
  * Loop displayed as a table
  */
-var RosterForLoop = exports.RosterForLoop = (0, _commons.createCustomizableLunaticField)(function (props) {
+var RosterForLoop = exports.RosterForLoop = function RosterForLoop(props) {
   var valueMap = props.value,
     lines = props.lines,
+    errors = props.errors,
     handleChange = props.handleChange,
     declarations = props.declarations,
     header = props.header,
@@ -56,7 +52,6 @@ var RosterForLoop = exports.RosterForLoop = (0, _commons.createCustomizableLunat
     _useState2 = _slicedToArray(_useState, 2),
     nbRows = _useState2[0],
     setNbRows = _useState2[1];
-  var showButtons = min && max && min !== max;
   var addRow = (0, _react.useCallback)(function () {
     if (nbRows < max) {
       setNbRows(nbRows + 1);
@@ -84,35 +79,29 @@ var RosterForLoop = exports.RosterForLoop = (0, _commons.createCustomizableLunat
     return null;
   }
   var cols = 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Label, {
-      htmlFor: id,
-      id: "label-".concat(id),
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsBeforeText, {
-      declarations: declarations,
-      id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsAfterText, {
-      declarations: declarations,
-      id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_htmlTable.Table, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loop.CustomLoop, _objectSpread(_objectSpread({}, props), {}, {
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, props.id),
+    addRow: nbRows === max ? undefined : addRow,
+    removeRow: nbRows === 1 ? undefined : removeRow,
+    canControlRows: !!(min && max && min !== max),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.Table, {
       id: id,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tableHeader.TableHeader, {
+      children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.TableHeader, {
         header: header,
         id: id
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_htmlTable.Tbody, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Tbody, {
         id: id,
         children: (0, _array.times)(nbRows, function (n) {
           var components = getComponents(n);
-          var lineErrors = (0, _errors.getComponentErrors)(props.errors, "".concat(id, "-").concat(n));
+          var lineErrors = (0, _ComponentErrors.getComponentErrors)(props.errors, "".concat(id, "-").concat(n));
           var hasLineErrors = !!(lineErrors !== null && lineErrors !== void 0 && lineErrors.length);
           cols = components.length;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_htmlTable.Tr, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Tr, {
               id: props.id,
               row: n,
               className: hasLineErrors ? 'lunatic-row-has-error' : undefined,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticComponents.LunaticComponents, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LunaticComponents.LunaticComponents, {
                 blocklist: _constant.blockedInLoopComponents,
                 components: components,
                 memo: true,
@@ -124,7 +113,7 @@ var RosterForLoop = exports.RosterForLoop = (0, _commons.createCustomizableLunat
                 wrapper: function wrapper(_ref3) {
                   var id = _ref3.id,
                     children = _ref3.children;
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_htmlTable.Td, {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Td, {
                     id: "".concat(id, "-").concat(n),
                     children: children
                   });
@@ -134,29 +123,14 @@ var RosterForLoop = exports.RosterForLoop = (0, _commons.createCustomizableLunat
               className: "lunatic-errors",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
                 colSpan: cols,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
                   errors: lineErrors
                 })
               })
             })]
-          });
+          }, n);
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
-      errors: (0, _errors.getComponentErrors)(props.errors, id)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsDetachable, {
-      declarations: declarations,
-      id: id
-    }), showButtons && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_loopButton.LoopButton, {
-        onClick: addRow,
-        disabled: nbRows === max,
-        children: _i18n["default"].DEFAULT_BUTTON_ADD
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_loopButton.LoopButton, {
-        onClick: removeRow,
-        disabled: nbRows === min,
-        children: _i18n["default"].DEFAULT_BUTTON_REMOVE
-      })]
-    })]
-  });
-}, 'RosterforLoop');
+    })
+  }));
+};

package/lib/components/{loop/roster-for-loop/roster-for-loop.spec.js → RosterForLoop/RosterForLoop.spec.js}

@@ -2,7 +2,7 @@
 
 var _vitest = require("vitest");
 var _react = require("@testing-library/react");
-var _rosterForLoop = require("./roster-for-loop");
+var _RosterForLoop = require("./RosterForLoop");
 var _jsxRuntime = require("react/jsx-runtime");
 (0, _vitest.describe)('RosterForLoop', function () {
   var mockOnChange = _vitest.vi.fn();
@@ -22,7 +22,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     }];
   };
   (0, _vitest.it)('renders the right number of columns', function () {
-    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_rosterForLoop.RosterForLoop, {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RosterForLoop.RosterForLoop, {
         value: {
           name: ['John Doe', 'Jane Doe']
         },

package/lib/components/{roundabout/roundabout.js → Roundabout/CustomRoundabout.js}

@@ -3,16 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _commons = require("../commons");
-var _roundaboutLabel = _interopRequireDefault(require("./components/roundabout-label"));
-var _roundaboutPending = _interopRequireDefault(require("./components/roundabout-pending"));
-var _roundaboutContainer = _interopRequireDefault(require("./components/roundabout-container"));
-var _roundaboutItContainer = _interopRequireDefault(require("./components/roundabout-it-container"));
-var _roundaboutItButton = _interopRequireDefault(require("./components/roundabout-it-button"));
-var _roundaboutItTitle = _interopRequireDefault(require("./components/roundabout-it-title"));
+exports.CustomRoundabout = void 0;
+var _RoundaboutItButton = require("./RoundaboutItButton");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
+var _extra = require("./extra");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function RoundaboutIteration(_ref) {
   var label = _ref.label,
     index = _ref.index,
@@ -21,10 +16,10 @@ function RoundaboutIteration(_ref) {
     unnecessary = _ref.unnecessary,
     goToIteration = _ref.goToIteration,
     locked = _ref.locked;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_roundaboutItContainer["default"], {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_roundaboutItTitle["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_extra.RoundaboutItContainer, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_extra.RoundaboutItTitle, {
       label: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_roundaboutItButton["default"], {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RoundaboutItButton.RoundaboutItButton, {
       partial: partial,
       complete: complete,
       unnecessary: unnecessary,
@@ -34,7 +29,7 @@ function RoundaboutIteration(_ref) {
     })]
   });
 }
-function Roundabout(_ref2) {
+var CustomRoundabout = exports.CustomRoundabout = (0, _slottableComponent.slottableComponent)('Roundabout', function (_ref2) {
   var iterations = _ref2.iterations,
     expressions = _ref2.expressions,
     goToIteration = _ref2.goToIteration,
@@ -62,12 +57,11 @@ function Roundabout(_ref2) {
         locked: locked
       }, i);
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_roundaboutContainer["default"], {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_roundaboutLabel["default"], {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_extra.RoundaboutContainer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_extra.RoundaboutLabel, {
         value: label
       }), subElements]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_roundaboutPending["default"], {});
-}
-var _default = exports["default"] = (0, _commons.createCustomizableLunaticField)(Roundabout, 'Roundabout');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_extra.RoundaboutPending, {});
+});

package/lib/components/{roundabout/lunatic-roundabout.js → Roundabout/Roundabout.js}

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.Roundabout = Roundabout;
+require("./Roundabout.scss");
 var _react = require("react");
-var _roundabout = _interopRequireDefault(require("./roundabout"));
+var _CustomRoundabout = require("./CustomRoundabout");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /**
- *  Logique fonctionnelle et immuable du composant
+ * Roundabout is a special loop component where the user can select the iteration to go to
  */
-function LunaticRoundabout(_ref) {
+function Roundabout(_ref) {
   var iterations = _ref.iterations,
     expressions = _ref.expressions,
     goToPage = _ref.goToPage,
@@ -26,12 +26,11 @@ function LunaticRoundabout(_ref) {
       nbIterations: iterations
     });
   }, [goToPage, page, iterations]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_roundabout["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomRoundabout.CustomRoundabout, {
     label: label,
     expressions: expressions,
     iterations: iterations,
     goToIteration: goToIteration,
     locked: locked
   });
-}
-var _default = exports["default"] = LunaticRoundabout;
+}