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

package/lib/components/CheckboxBoolean/CheckboxBoolean.js

@@ -1,33 +1,55 @@
 "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.CheckboxBoolean = void 0;
+exports.CheckboxBoolean = CheckboxBoolean;
+exports.CustomCheckboxBoolean = void 0;
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
 var _CheckboxOption = require("../shared/Checkbox/CheckboxOption");
-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 LunaticCheckboxBoolean(_ref) {
-  var value = _ref.value,
-    id = _ref.id,
-    disabled = _ref.disabled,
-    errors = _ref.errors,
-    label = _ref.label,
+var _excluded = ["handleChange", "response", "errors", "value"];
+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 CheckboxBoolean(_ref) {
+  var handleChange = _ref.handleChange,
     response = _ref.response,
-    handleChange = _ref.handleChange,
-    declarations = _ref.declarations,
-    description = _ref.description;
+    errors = _ref.errors,
+    value = _ref.value,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var checked = !!value;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomCheckboxBoolean, _objectSpread(_objectSpread({}, props), {}, {
+    checked: checked,
+    onChange: function onChange() {
+      return handleChange(response, !checked);
+    },
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, props.id)
+  }));
+}
+var CustomCheckboxBoolean = exports.CustomCheckboxBoolean = (0, _slottableComponent.slottableComponent)('Input', function (props) {
+  var disabled = props.disabled,
+    checked = props.checked,
+    id = props.id,
+    onChange = props.onChange,
+    label = props.label,
+    declarations = props.declarations,
+    description = props.description,
+    errors = props.errors;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "lunatic-checkbox-boolean",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxOption.CheckboxOption, {
       disabled: disabled,
-      checked: value !== null && value !== void 0 ? value : false,
+      checked: checked,
       id: id,
-      onClick: function onClick(v) {
-        return handleChange(response, v);
-      },
+      onClick: onChange,
       label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
           type: "AFTER_QUESTION_TEXT",
@@ -37,9 +59,7 @@ function LunaticCheckboxBoolean(_ref) {
       description: description,
       invalid: !!errors
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
-      errors: errors,
-      componentId: id
+      errors: errors
     })]
   });
-}
-var CheckboxBoolean = exports.CheckboxBoolean = (0, _customizedComponent.customizedComponent)('CheckboxBoolean', LunaticCheckboxBoolean);
+});

package/lib/components/CheckboxGroup/CustomCheckboxGroup.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CustomCheckboxGroup = void 0;
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
 var _Fieldset = require("../shared/Fieldset/Fieldset");
 var _CheckboxOption = require("../shared/Checkbox/CheckboxOption");
@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-var CustomCheckboxGroup = exports.CustomCheckboxGroup = (0, _customizedComponent.customizedComponent)('CheckboxGroup', function (_ref) {
+var CustomCheckboxGroup = exports.CustomCheckboxGroup = (0, _slottableComponent.slottableComponent)('CheckboxGroup', function (_ref) {
   var options = _ref.options,
     id = _ref.id,
     label = _ref.label,

package/lib/components/CheckboxOne/CheckboxOne.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CheckboxOne = void 0;
+exports.CheckboxOne = CheckboxOne;
 var _RadioGroup = require("../shared/Radio/RadioGroup");
 require("./CheckboxOne.scss");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Checkbox acting as a radio (only one option can be checked at a time)
- */function LunaticCheckboxOne(_ref) {
+ */
+function CheckboxOne(_ref) {
   var options = _ref.options,
     value = _ref.value,
     id = _ref.id,
@@ -33,7 +33,7 @@ var _jsxRuntime = require("react/jsx-runtime");
       return handleChange(response, value);
     },
     checkboxStyle: true,
-    shortcut: shortcut
+    shortcut: shortcut,
+    clearable: true
   });
-}
-var CheckboxOne = exports.CheckboxOne = (0, _customizedComponent.customizedComponent)('CheckboxOne', LunaticCheckboxOne);
+}

package/lib/components/Datepicker/Datepicker.js

@@ -4,21 +4,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Datepicker = void 0;
-exports.LunaticDatepicker = LunaticDatepicker;
+exports.CustomDatepicker = void 0;
+exports.Datepicker = Datepicker;
 var _react = require("react");
 var _DatepickerField = require("./DatepickerField");
 require("./Datepicker.scss");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _Label = require("../shared/Label/Label");
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
 var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
+var _excluded = ["dateFormat", "response", "handleChange", "errors"];
 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."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -29,20 +25,41 @@ 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; }
-function LunaticDatepicker(_ref) {
-  var disabled = _ref.disabled,
-    readOnly = _ref.readOnly,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    _ref$dateFormat = _ref.dateFormat,
+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 Datepicker(_ref) {
+  var _ref$dateFormat = _ref.dateFormat,
     dateFormat = _ref$dateFormat === void 0 ? 'YYYY-MM-DD' : _ref$dateFormat,
     response = _ref.response,
-    id = _ref.id,
     handleChange = _ref.handleChange,
-    label = _ref.label,
     errors = _ref.errors,
-    description = _ref.description,
-    declarations = _ref.declarations;
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomDatepicker, _objectSpread(_objectSpread({}, props), {}, {
+    dateFormat: dateFormat !== null && dateFormat !== void 0 ? dateFormat : 'YYYY-MM-DD',
+    onChange: function onChange(v) {
+      return handleChange(response, v);
+    },
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, props.id)
+  }));
+}
+var CustomDatepicker = exports.CustomDatepicker = (0, _slottableComponent.slottableComponent)('Datepicker', function (props) {
+  var disabled = props.disabled,
+    readOnly = props.readOnly,
+    _props$value = props.value,
+    value = _props$value === void 0 ? '' : _props$value,
+    _props$dateFormat = props.dateFormat,
+    dateFormat = _props$dateFormat === void 0 ? 'YYYY-MM-DD' : _props$dateFormat,
+    id = props.id,
+    label = props.label,
+    errors = props.errors,
+    description = props.description,
+    declarations = props.declarations,
+    onChange = props.onChange;
   var labelId = "lunatic-datepicker-".concat(id);
   var showDay = dateFormat.includes('DD');
   var showMonth = dateFormat.includes('MM');
@@ -59,10 +76,10 @@ function LunaticDatepicker(_ref) {
       var newNumbers = _toConsumableArray(numbers);
       newNumbers[index] = value;
       setNumbers(newNumbers);
-      onChange(newNumbers);
+      onNumbersChange(newNumbers);
     };
   };
-  var onChange = function onChange(numbers) {
+  var onNumbersChange = function onNumbersChange(numbers) {
     var formatParts = dateFormat.split('-');
     var hasNaNIndex = numbers.findIndex(function (v) {
       return Number.isNaN(v);
@@ -70,19 +87,19 @@ function LunaticDatepicker(_ref) {
 
     // Date has a missing part
     if (hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1) {
-      handleChange(response, null);
+      onChange(null);
       return;
     }
 
     // Date is not valid
     if (dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) {
-      handleChange(response, null);
+      onChange(null);
       return;
     }
     var result = formatParts.map(function (v, k) {
       return numbers[k].toString().padStart(v.length, '0');
     }).join('-');
-    handleChange(response, result);
+    onChange(result);
   };
   var extraProps = {
     readOnly: readOnly,
@@ -124,11 +141,10 @@ function LunaticDatepicker(_ref) {
         onChange: setNumber(0)
       }, extraProps))]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
-      errors: errors,
-      componentId: id
+      errors: errors
     })]
   });
-}
+});
 function numbersFromDateString(s) {
   if (!s) {
     return [NaN, NaN, NaN];
@@ -143,5 +159,4 @@ function isDateValid(dateArray) {
     day = _dateArray[2];
   var date = new Date(year, month - 1, day);
   return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
-}
-var Datepicker = exports.Datepicker = (0, _customizedComponent.customizedComponent)('Datepicker', LunaticDatepicker);
+}

package/lib/components/Dropdown/Dropdown.js

@@ -1,35 +1,53 @@
 "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.Dropdown = void 0;
+exports.CustomDropdown = void 0;
+exports.Dropdown = Dropdown;
 require("./Dropdown.scss");
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _SimpleOptionRenderer = require("./renderer/SimpleOptionRenderer");
 var _SimpleLabelRenderer = require("./renderer/SimpleLabelRenderer");
 var _DropdownWritable = require("./DropdownWritable");
 var _Combobox = require("../shared/Combobox/Combobox");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["handleChange", "response", "errors"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function LunaticDropdown(_ref) {
-  var id = _ref.id,
-    disabled = _ref.disabled,
-    options = _ref.options,
-    writable = _ref.writable,
-    className = _ref.className,
-    value = _ref.value,
-    description = _ref.description,
-    label = _ref.label,
-    errors = _ref.errors,
-    readOnly = _ref.readOnly,
+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 Dropdown(_ref) {
+  var handleChange = _ref.handleChange,
     response = _ref.response,
-    handleChange = _ref.handleChange;
-  var onSelect = function onSelect(v) {
-    return handleChange(response, v);
-  };
+    errors = _ref.errors,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomDropdown, _objectSpread(_objectSpread({}, props), {}, {
+    onChange: function onChange(v) {
+      return handleChange(response, v);
+    },
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, props.id)
+  }));
+}
+var CustomDropdown = exports.CustomDropdown = (0, _slottableComponent.slottableComponent)('Dropdown', function (props) {
+  var id = props.id,
+    disabled = props.disabled,
+    options = props.options,
+    writable = props.writable,
+    className = props.className,
+    value = props.value,
+    description = props.description,
+    label = props.label,
+    errors = props.errors,
+    onChange = props.onChange,
+    readOnly = props.readOnly;
   if (writable) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownWritable.DropdownWritable, {
       id: id,
@@ -37,10 +55,10 @@ function LunaticDropdown(_ref) {
       disabled: disabled,
       readOnly: readOnly,
       options: options,
-      onSelect: onSelect,
+      onSelect: onChange,
       value: value,
       label: label,
-      errors: (0, _ComponentErrors.getComponentErrors)(errors, id),
+      errors: errors,
       description: description
     });
   }
@@ -51,13 +69,12 @@ function LunaticDropdown(_ref) {
     readOnly: readOnly,
     options: options,
     editable: false,
-    onSelect: onSelect,
+    onSelect: onChange,
     optionRenderer: _SimpleOptionRenderer.SimpleOptionRenderer,
     labelRenderer: _SimpleLabelRenderer.SimpleLabelRenderer,
     value: value,
     label: label,
-    errors: (0, _ComponentErrors.getComponentErrors)(errors, id),
+    errors: errors,
     description: description
   });
-}
-var Dropdown = exports.Dropdown = (0, _customizedComponent.customizedComponent)('Dropdown', LunaticDropdown);
+});

package/lib/components/Duration/Duration.js

@@ -4,7 +4,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Duration = void 0;
+exports.CustomDuration = void 0;
+exports.Duration = Duration;
 require("./Duration.scss");
 var _react = require("react");
 var _getDurationFromValue = require("./getDurationFromValue");
@@ -12,26 +13,45 @@ var _durationUtils = require("./durationUtils");
 var _formatDuration = require("./formatDuration");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _object = require("../../utils/object");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
+var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
+var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["handleChange", "response", "errors"];
 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 _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(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; }
-function LunaticDuration(_ref) {
-  var value = _ref.value,
-    label = _ref.label,
-    format = _ref.format,
-    handleChange = _ref.handleChange,
-    response = _ref.response;
+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 Duration(_ref) {
+  var handleChange = _ref.handleChange,
+    response = _ref.response,
+    errors = _ref.errors,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomDuration, _objectSpread(_objectSpread({}, props), {}, {
+    onChange: function onChange(v) {
+      return handleChange(response, v);
+    },
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, props.id)
+  }));
+}
+var CustomDuration = exports.CustomDuration = (0, _slottableComponent.slottableComponent)('Duration', function (props) {
+  var errors = props.errors,
+    value = props.value,
+    label = props.label,
+    format = props.format,
+    onChange = props.onChange,
+    declarations = props.declarations,
+    id = props.id;
   // We need to keep an internal state since one field can be empty (null value in duration)
   // but we still send "0" and we don't want the field to display "0"
   var _useState = (0, _react.useState)((0, _getDurationFromValue.getDurationFromValue)(value, format)),
@@ -47,7 +67,7 @@ function LunaticDuration(_ref) {
       }
       var fieldValue = (0, _durationUtils.clampDuration)(Number.isNaN(e.target.valueAsNumber) ? null : e.target.valueAsNumber, unit);
       var newDuration = _objectSpread(_objectSpread({}, duration), {}, _defineProperty({}, unit, fieldValue));
-      handleChange(response, (0, _formatDuration.formatDuration)(newDuration));
+      onChange((0, _formatDuration.formatDuration)(newDuration));
       setDuration(newDuration);
     };
   };
@@ -55,6 +75,10 @@ function LunaticDuration(_ref) {
     className: (0, _classnames["default"])('lunatic-input'),
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
       children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+      type: "AFTER_QUESTION_TEXT",
+      declarations: declarations,
+      id: id
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "duration-fields",
       children: (0, _object.objectKeys)(duration).map(function (unit) {
@@ -74,7 +98,8 @@ function LunaticDuration(_ref) {
           }, _durationUtils.propsByUnit[unit]))]
         }, unit);
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+      errors: errors
     })]
   });
-}
-var Duration = exports.Duration = (0, _customizedComponent.customizedComponent)('Duration', LunaticDuration);
+});

package/lib/components/FilterDescription/FilterDescription.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FilterDescription = void 0;
-var _customizedComponent = require("../shared/HOC/customizedComponent");
 var _jsxRuntime = require("react/jsx-runtime");
-var FilterDescription = exports.FilterDescription = (0, _customizedComponent.customizedComponent)('FilterDescription', function (_ref) {
+var FilterDescription = exports.FilterDescription = function FilterDescription(_ref) {
   var id = _ref.id,
     label = _ref.label;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -15,4 +14,4 @@ var FilterDescription = exports.FilterDescription = (0, _customizedComponent.cus
     className: "filter-description-lunatic",
     children: label
   });
-});
+};

package/lib/components/Input/Input.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.Input = void 0;
+exports.CustomInput = void 0;
+exports.Input = Input;
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./Input.scss");
 var _Label = require("../shared/Label/Label");
-var _customizedComponent = require("../shared/HOC/customizedComponent");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
 var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
 var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["handleChange", "response", "errors"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function LunaticInput(_ref) {
-  var value = _ref.value,
-    handleChange = _ref.handleChange,
+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 Input(_ref) {
+  var handleChange = _ref.handleChange,
     response = _ref.response,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    maxLength = _ref.maxLength,
-    label = _ref.label,
-    description = _ref.description,
-    id = _ref.id,
     errors = _ref.errors,
-    readOnly = _ref.readOnly,
-    declarations = _ref.declarations;
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomInput, _objectSpread(_objectSpread({}, props), {}, {
+    onChange: function onChange(v) {
+      return handleChange(response, v);
+    },
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, props.id)
+  }));
+}
+var CustomInput = exports.CustomInput = (0, _slottableComponent.slottableComponent)('Input', 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;
   var labelId = "label-".concat(id);
-  var onChange = function onChange(e) {
-    handleChange(response, e.target.value);
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('lunatic-input'),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
@@ -48,15 +66,15 @@ function LunaticInput(_ref) {
       disabled: disabled,
       readOnly: readOnly,
       value: (value !== null && value !== void 0 ? value : '').toString(),
-      onChange: onChange,
+      onChange: function onChange(e) {
+        return _onChange(e.target.value);
+      },
       "aria-required": required,
       required: required,
       maxLength: maxLength,
       "aria-invalid": !!errors
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
-      errors: errors,
-      componentId: id
+      errors: errors
     })]
   });
-}
-var Input = exports.Input = (0, _customizedComponent.customizedComponent)('Input', LunaticInput);
+});