@inseefr/lunatic 3.0.0-rc.1 → 3.0.0-rc.11

package/lib/components/RosterForLoop/RosterForLoop.js

@@ -6,20 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RosterForLoop = void 0;
 var _react = require("react");
-require("./RosterForLoop.scss");
-var _i18n = _interopRequireDefault(require("../../i18n"));
 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 _Declarations = require("../shared/Declarations/Declarations");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
-var _Label = require("../shared/Label/Label");
-var _Button = require("../shared/Button/Button");
+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 +33,10 @@ var DEFAULT_MAX_ROWS = 12;
 /**
  * Loop displayed as a table
  */
-var RosterForLoop = exports.RosterForLoop = (0, _customizedComponent.customizedComponent)('RosterforLoop', 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 +51,6 @@ var RosterForLoop = exports.RosterForLoop = (0, _customizedComponent.customizedC
     _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,16 +78,12 @@ var RosterForLoop = exports.RosterForLoop = (0, _customizedComponent.customizedC
     return null;
   }
   var cols = 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
-      htmlFor: id,
-      id: "label-".concat(id),
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
-      type: "AFTER_QUESTION_TEXT",
-      declarations: declarations,
-      id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.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: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.TableHeader, {
         header: header,
@@ -140,19 +130,6 @@ var RosterForLoop = exports.RosterForLoop = (0, _customizedComponent.customizedC
           }, n);
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
-      errors: props.errors,
-      componentId: id
-    }), showButtons && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-        onClick: addRow,
-        disabled: nbRows === max,
-        children: _i18n["default"].DEFAULT_BUTTON_ADD
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-        onClick: removeRow,
-        disabled: nbRows === min,
-        children: _i18n["default"].DEFAULT_BUTTON_REMOVE
-      })]
-    })]
-  });
-});
+    })
+  }));
+};

package/lib/components/Roundabout/CustomRoundabout.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomRoundabout = void 0;
 var _RoundaboutItButton = require("./RoundaboutItButton");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _extra = require("./extra");
 var _jsxRuntime = require("react/jsx-runtime");
 function RoundaboutIteration(_ref) {
@@ -29,7 +29,7 @@ function RoundaboutIteration(_ref) {
     })]
   });
 }
-var CustomRoundabout = exports.CustomRoundabout = (0, _customizedComponent.customizedComponent)('Roundabout', function (_ref2) {
+var CustomRoundabout = exports.CustomRoundabout = (0, _slottableComponent.slottableComponent)('Roundabout', function (_ref2) {
   var iterations = _ref2.iterations,
     expressions = _ref2.expressions,
     goToIteration = _ref2.goToIteration,

package/lib/components/Roundabout/Roundabout.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Roundabout = Roundabout;
-require("./Roundabout.scss");
 var _react = require("react");
 var _CustomRoundabout = require("./CustomRoundabout");
 var _jsxRuntime = require("react/jsx-runtime");

package/lib/components/Roundabout/RoundaboutItButton.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.RoundaboutItButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _Button = require("../shared/Button/Button");
 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; }
-var RoundaboutItButton = exports.RoundaboutItButton = (0, _customizedComponent.customizedComponent)('RoundaboutItButton', function (_ref) {
+var RoundaboutItButton = exports.RoundaboutItButton = (0, _slottableComponent.slottableComponent)('RoundaboutItButton', function (_ref) {
   var complete = _ref.complete,
     partial = _ref.partial,
     iteration = _ref.iteration,

package/lib/components/Roundabout/extra.js

@@ -4,39 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RoundaboutPending = exports.RoundaboutLabel = exports.RoundaboutItTitle = exports.RoundaboutItContainer = exports.RoundaboutContainer = void 0;
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var RoundaboutContainer = exports.RoundaboutContainer = (0, _customizedComponent.customizedComponent)('RoundaboutContainer', function (_ref) {
+var RoundaboutContainer = exports.RoundaboutContainer = (0, _slottableComponent.slottableComponent)('RoundaboutContainer', function (_ref) {
   var children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "lunatic-roundabout",
     children: children
   });
 });
-var RoundaboutLabel = exports.RoundaboutLabel = (0, _customizedComponent.customizedComponent)('RoundaboutLabel', function (_ref2) {
+var RoundaboutLabel = exports.RoundaboutLabel = (0, _slottableComponent.slottableComponent)('RoundaboutLabel', function (_ref2) {
   var value = _ref2.value;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "roundabout-label",
     children: value
   });
 });
-var RoundaboutItTitle = exports.RoundaboutItTitle = (0, _customizedComponent.customizedComponent)('RoundaboutItTitle', function (_ref3) {
+var RoundaboutItTitle = exports.RoundaboutItTitle = (0, _slottableComponent.slottableComponent)('RoundaboutItTitle', function (_ref3) {
   var label = _ref3.label;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "roundabout-it-title",
     children: label
   });
 });
-var RoundaboutItContainer = exports.RoundaboutItContainer = (0, _customizedComponent.customizedComponent)('RoundaboutItContainer', function (_ref4) {
+var RoundaboutItContainer = exports.RoundaboutItContainer = (0, _slottableComponent.slottableComponent)('RoundaboutItContainer', function (_ref4) {
   var children = _ref4.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "roundabout-iteration-title",
     children: children
   });
 });
-var RoundaboutPending = exports.RoundaboutPending = (0, _customizedComponent.customizedComponent)('RoundaboutPending', function () {
+var RoundaboutPending = exports.RoundaboutPending = (0, _slottableComponent.slottableComponent)('RoundaboutPending', function () {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "roundabout-pending",
     children: "Pending..."

package/lib/components/Sequence/Sequence.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Sequence = void 0;
-require("./Sequence.scss");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _LabelDescription = require("../shared/LabelDescription");
 var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,4 +29,4 @@ function LunaticSequence(_ref) {
     })]
   });
 }
-var Sequence = exports.Sequence = (0, _customizedComponent.customizedComponent)('Sequence', LunaticSequence);
+var Sequence = exports.Sequence = (0, _slottableComponent.slottableComponent)('Sequence', LunaticSequence);

package/lib/components/Subsequence/Subsequence.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Subsequence = void 0;
 var _Declarations = require("../shared/Declarations/Declarations");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _jsxRuntime = require("react/jsx-runtime");
 function LunaticSubsequence(_ref) {
   var id = _ref.id,
@@ -24,4 +24,4 @@ function LunaticSubsequence(_ref) {
     })]
   });
 }
-var Subsequence = exports.Subsequence = (0, _customizedComponent.customizedComponent)('Subsequence', LunaticSubsequence);
+var Subsequence = exports.Subsequence = (0, _slottableComponent.slottableComponent)('Subsequence', LunaticSubsequence);

package/lib/components/Subsequence/Subsequence.spec.js

@@ -14,7 +14,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
   var mockDeclarations = [{
     id: '1',
     label: 'Declaration 1',
-    declarationType: 'TYPE_1',
+    declarationType: 'COMMENT',
     position: 'AFTER_QUESTION_TEXT'
   }];
   var mockProps = {

package/lib/components/Suggester/CustomSuggester.js

@@ -8,7 +8,7 @@ exports.CustomSuggester = void 0;
 var _react = require("react");
 var _function = require("../../utils/function");
 var _i18n = _interopRequireDefault(require("../../i18n"));
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _Combobox = require("../shared/Combobox/Combobox");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -21,7 +21,7 @@ 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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var CustomSuggester = exports.CustomSuggester = (0, _customizedComponent.customizedComponent)('Suggester', function (_ref) {
+var CustomSuggester = exports.CustomSuggester = (0, _slottableComponent.slottableComponent)('Suggester', function (_ref) {
   var className = _ref.className,
     _ref$classNamePrefix = _ref.classNamePrefix,
     classNamePrefix = _ref$classNamePrefix === void 0 ? 'lunatic' : _ref$classNamePrefix,
@@ -38,18 +38,21 @@ var CustomSuggester = exports.CustomSuggester = (0, _customizedComponent.customi
     searching = _ref.searching,
     label = _ref.label,
     description = _ref.description,
-    errors = _ref.errors;
+    errors = _ref.errors,
+    defaultOptions = _ref.defaultOptions;
   var _useState = (0, _react.useState)(''),
     _useState2 = _slicedToArray(_useState, 2),
     search = _useState2[0],
     setSearch = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)(defaultOptions !== null && defaultOptions !== void 0 ? defaultOptions : []),
     _useState4 = _slicedToArray(_useState3, 2),
     options = _useState4[0],
     setOptions = _useState4[1];
   var lastSearch = (0, _react.useRef)('');
   var handleSelect = (0, _react.useCallback)(function (id) {
-    onSelect(id ? id : null);
+    onSelect(id ? options.find(function (o) {
+      return o.id === id;
+    }) : null);
   }, [onSelect]);
   var handleChange = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(search) {
@@ -77,7 +80,7 @@ var CustomSuggester = exports.CustomSuggester = (0, _customizedComponent.customi
             _context.next = 13;
             break;
           case 10:
-            setOptions([]);
+            setOptions(defaultOptions !== null && defaultOptions !== void 0 ? defaultOptions : []);
             onSelect(null);
             setSearch('');
           case 13:

package/lib/components/Suggester/Suggester.js

@@ -10,8 +10,11 @@ var _helpers = require("./helpers");
 var _SuggesterStatus = require("./SuggesterStatus");
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
 var _useSuggesterInfo2 = require("../../hooks/useSuggesterInfo");
-require("./Suggester.scss");
 var _jsxRuntime = require("react/jsx-runtime");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+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 _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 Suggester(_ref) {
   var storeName = _ref.storeName,
     _ref$idbVersion = _ref.idbVersion,
@@ -29,13 +32,39 @@ function Suggester(_ref) {
     errors = _ref.errors,
     readOnly = _ref.readOnly,
     workersBasePath = _ref.workersBasePath,
-    response = _ref.response;
+    response = _ref.response,
+    _ref$optionResponses = _ref.optionResponses,
+    optionResponses = _ref$optionResponses === void 0 ? [] : _ref$optionResponses,
+    executeExpression = _ref.executeExpression,
+    iteration = _ref.iteration;
   var _useSuggesterInfo = (0, _useSuggesterInfo2.useSuggesterInfo)(storeName, idbVersion),
     state = _useSuggesterInfo.state,
     fetchInfos = _useSuggesterInfo.fetchInfos,
     infos = _useSuggesterInfo.infos;
   var onChange = function onChange(v) {
-    handleChange(response, v);
+    if (v && _typeof(v) === 'object' && optionResponses) {
+      if (v.id) {
+        handleChange(response, v.id);
+      }
+      var _iterator = _createForOfIteratorHelper(optionResponses),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var optionResponse = _step.value;
+          if (optionResponse.attribute in v) {
+            handleChange({
+              name: optionResponse.name
+            }, v[optionResponse.attribute]);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    } else {
+      handleChange(response, v);
+    }
   };
 
   // Fetch suggester info when the suggester is mounted
@@ -48,6 +77,39 @@ function Suggester(_ref) {
     }
     return undefined;
   }, [infos, storeName, idbVersion, workersBasePath]);
+
+  // Default options should not change between render
+  // so we can break the rule of hooks here
+  var defaultOptions = (0, _react.useMemo)(function () {
+    if (!value) {
+      return [];
+    }
+    var labelResponse = optionResponses === null || optionResponses === void 0 ? void 0 : optionResponses.find(function (o) {
+      return o.attribute === 'label';
+    });
+    if (!labelResponse) {
+      return [{
+        id: value,
+        label: value,
+        value: value
+      }];
+    }
+    var label = executeExpression(labelResponse.name, {
+      iteration: iteration
+    });
+    if (typeof label !== 'string') {
+      return [{
+        id: value,
+        label: value,
+        value: value
+      }];
+    }
+    return [{
+      id: value,
+      label: label,
+      value: value
+    }];
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SuggesterStatus.SuggesterStatus, {
     storeName: storeName,
     getSuggesterStatus: getSuggesterStatus,
@@ -59,11 +121,12 @@ function Suggester(_ref) {
     }), state === 'Error' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "lunatic-suggester-unvailable",
       children: "La suggestion sur liste n'est pas possible sur votre navigateur, vous pouvez passer la question en appuyant sur Enregistrer et Continuer"
-    }), state === 'Ready' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSuggester.CustomSuggester, {
+    }), state === 'Ready' && searching && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSuggester.CustomSuggester, {
       id: id,
       className: className,
       optionRenderer: optionRenderer,
       labelRenderer: labelRenderer,
+      defaultOptions: defaultOptions,
       onSelect: onChange,
       searching: searching,
       disabled: disabled,

package/lib/components/Suggester/SuggesterNotification.js

@@ -7,7 +7,7 @@ exports.SuggesterNotification = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _SuggesterStatus = require("./SuggesterStatus");
 var _Notification = require("../shared/Notification");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _Label = require("../shared/Label/Label");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -57,4 +57,4 @@ function LunaticSuggesterNotification(_ref) {
     children: children
   });
 }
-var SuggesterNotification = exports.SuggesterNotification = (0, _customizedComponent.customizedComponent)('SuggesterNotification', LunaticSuggesterNotification);
+var SuggesterNotification = exports.SuggesterNotification = (0, _slottableComponent.slottableComponent)('SuggesterNotification', LunaticSuggesterNotification);

package/lib/components/Summary/Summary.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Summary = Summary;
 exports.SummaryTitle = exports.SummaryResponses = void 0;
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _jsxRuntime = require("react/jsx-runtime");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -61,14 +61,14 @@ function Summary(props) {
 /**
  * Title displayed on top of the Summary
  */
-var SummaryTitle = exports.SummaryTitle = (0, _customizedComponent.customizedComponent)('SummaryTitle', function (_ref) {
+var SummaryTitle = exports.SummaryTitle = (0, _slottableComponent.slottableComponent)('SummaryTitle', function (_ref) {
   var label = _ref.label;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "lunatic-summary-label",
     children: label
   });
 });
-var SummaryResponses = exports.SummaryResponses = (0, _customizedComponent.customizedComponent)('SummaryResponses', function (_ref2) {
+var SummaryResponses = exports.SummaryResponses = (0, _slottableComponent.slottableComponent)('SummaryResponses', function (_ref2) {
   var sections = _ref2.sections;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: sections.map(function (section, index) {

package/lib/components/Switch/Switch.js

@@ -1,45 +1,66 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Switch = void 0;
+exports.Switch = exports.CustomSwitch = void 0;
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _Label = require("../shared/Label/Label");
 var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["handleChange", "response", "errors", "value", "statusLabel"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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; }
 var defaultLabel = {
   "true": 'True',
   "false": 'False'
 };
 function LunaticSwitch(_ref) {
-  var id = _ref.id,
-    value = _ref.value,
-    _ref$statusLabel = _ref.statusLabel,
-    statusLabel = _ref$statusLabel === void 0 ? defaultLabel : _ref$statusLabel,
-    handleChange = _ref.handleChange,
+  var handleChange = _ref.handleChange,
     response = _ref.response,
-    label = _ref.label,
     errors = _ref.errors,
-    disabled = _ref.disabled,
-    declarations = _ref.declarations;
+    value = _ref.value,
+    statusLabel = _ref.statusLabel,
+    props = _objectWithoutProperties(_ref, _excluded);
   var checked = value !== null && value !== void 0 ? value : false;
-  var handleClick = function handleClick() {
-    handleChange(response, !checked);
-  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSwitch, _objectSpread(_objectSpread({}, props), {}, {
+    statusLabel: statusLabel !== null && statusLabel !== void 0 ? statusLabel : defaultLabel,
+    checked: value !== null && value !== void 0 ? value : false,
+    onChange: function onChange() {
+      return handleChange(response, !checked);
+    },
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, props.id)
+  }));
+}
+var CustomSwitch = exports.CustomSwitch = (0, _slottableComponent.slottableComponent)('Switch', function (props) {
+  var id = props.id,
+    onChange = props.onChange,
+    checked = props.checked,
+    _props$statusLabel = props.statusLabel,
+    statusLabel = _props$statusLabel === void 0 ? defaultLabel : _props$statusLabel,
+    label = props.label,
+    errors = props.errors,
+    disabled = props.disabled,
+    declarations = props.declarations;
+  var labelTrue = statusLabel["true"],
+    labelFalse = statusLabel["false"];
+  var labelId = "lunatic-switch-label-".concat(id);
   var handleKeyDown = function handleKeyDown(e) {
     var code = e.code;
     if (code === 'Space') {
-      handleChange(response, !checked);
+      onChange();
     }
   };
-  var labelTrue = statusLabel["true"],
-    labelFalse = statusLabel["false"];
-  var labelId = "lunatic-switch-label-".concat(id);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
       htmlFor: id,
@@ -66,7 +87,7 @@ function LunaticSwitch(_ref) {
           disabled: disabled,
           checked: checked
         }),
-        onClick: handleClick,
+        onClick: onChange,
         onKeyDown: handleKeyDown,
         "aria-labelledby": labelId,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -79,9 +100,8 @@ function LunaticSwitch(_ref) {
         children: labelTrue
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
-      errors: errors,
-      componentId: id
+      errors: errors
     })]
   });
-}
-var Switch = exports.Switch = (0, _customizedComponent.customizedComponent)('Switch', LunaticSwitch);
+});
+var Switch = exports.Switch = (0, _slottableComponent.slottableComponent)('Switch', LunaticSwitch);

package/lib/components/Textarea/Textarea.js

@@ -1,34 +1,52 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Textarea = void 0;
-require("./Textarea.scss");
+exports.CustomTextarea = void 0;
+exports.Textarea = Textarea;
 var _Label = require("../shared/Label/Label");
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
-function LunaticTextarea(_ref) {
-  var id = _ref.id,
-    rows = _ref.rows,
-    maxLength = _ref.maxLength,
-    cols = _ref.cols,
-    value = _ref.value,
-    label = _ref.label,
-    handleChange = _ref.handleChange,
+var _excluded = ["handleChange", "response", "errors"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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 Textarea(_ref) {
+  var handleChange = _ref.handleChange,
     response = _ref.response,
-    description = _ref.description,
     errors = _ref.errors,
-    placeHolder = _ref.placeHolder,
-    readOnly = _ref.readOnly,
-    required = _ref.required,
-    declarations = _ref.declarations;
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTextarea, _objectSpread(_objectSpread({}, props), {}, {
+    onChange: function onChange(v) {
+      return handleChange(response, v);
+    },
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, props.id)
+  }));
+}
+var CustomTextarea = exports.CustomTextarea = (0, _slottableComponent.slottableComponent)('Textarea', function (props) {
+  var value = props.value,
+    _onChange = props.onChange,
+    disabled = props.disabled,
+    required = props.required,
+    maxLength = props.maxLength,
+    label = props.label,
+    description = props.description,
+    id = props.id,
+    errors = props.errors,
+    readOnly = props.readOnly,
+    declarations = props.declarations,
+    rows = props.rows,
+    cols = props.cols,
+    placeHolder = props.placeHolder;
   var labelId = "label-".concat(id);
-  var onChange = function onChange(e) {
-    handleChange(response, e.target.value);
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "lunatic-textarea",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
@@ -42,19 +60,20 @@ function LunaticTextarea(_ref) {
       id: id
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
       required: required,
+      disabled: disabled,
       id: id,
       rows: rows,
       maxLength: maxLength,
       cols: cols,
-      onChange: onChange,
+      onChange: function onChange(e) {
+        return _onChange(e.target.value);
+      },
       value: value !== null && value !== void 0 ? value : '',
       placeholder: placeHolder,
       readOnly: readOnly,
       "aria-invalid": !!errors
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
-      errors: errors,
-      componentId: id
+      errors: errors
     })]
   });
-}
-var Textarea = exports.Textarea = (0, _customizedComponent.customizedComponent)('Textarea', LunaticTextarea);
+});