@inseefr/lunatic 2.7.20 → 3.0.0-rc.5

package/lib/components/{commons/components/orchestrated-component.js → CheckboxBoolean/CheckboxBoolean.js}

@@ -4,13 +4,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var lunatic = _interopRequireWildcard(require("../../../components"));
-var _commons = require("../../../use-lunatic/commons");
+exports.CheckboxBoolean = CheckboxBoolean;
+exports.CustomCheckboxBoolean = void 0;
+var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
+var _CheckboxOption = require("../shared/Checkbox/CheckboxOption");
+var _slottableComponent = require("../shared/HOC/slottableComponent");
+var _Declarations = require("../shared/Declarations/Declarations");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["component"];
-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 _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; }
@@ -18,23 +19,47 @@ 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 OrchestratedComponent(_ref) {
-  var component = _ref.component,
+function CheckboxBoolean(_ref) {
+  var handleChange = _ref.handleChange,
+    response = _ref.response,
+    errors = _ref.errors,
+    value = _ref.value,
     props = _objectWithoutProperties(_ref, _excluded);
-  var componentType = component.componentType;
-  var componentFilled = (0, _commons.fillComponentExpressions)(component, {
-    executeExpression: props.executeExpression,
-    pager: {
-      iteration: props.iteration,
-      linksIterations: props.linksIterations
-    }
-  });
-  var conditionFilter = componentFilled.conditionFilter;
-  var hasToBeDisplay = conditionFilter !== null && conditionFilter !== void 0 ? conditionFilter : true;
-  if (componentType in lunatic && hasToBeDisplay) {
-    var Component = lunatic[componentType]; // This is too dynamic, orchestration has no way to check props
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({}, componentFilled), props));
-  }
-  return null;
+  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 _default = exports["default"] = OrchestratedComponent;
+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: checked,
+      id: id,
+      onClick: onChange,
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+          type: "AFTER_QUESTION_TEXT",
+          declarations: declarations
+        })]
+      }),
+      description: description,
+      invalid: !!errors
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+      errors: errors
+    })]
+  });
+});

package/lib/components/{checkbox/checkbox-boolean/html/checkbox-boolean.spec.js → CheckboxBoolean/CheckboxBoolean.spec.js}

@@ -1,30 +1,38 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-var _checkboxBoolean = _interopRequireDefault(require("./checkbox-boolean"));
+var _CheckboxBoolean = require("./CheckboxBoolean");
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('CheckboxBoolean', function () {
   var label = 'I accept the terms and conditions';
   var description = 'You must accept the terms and conditions to continue.';
-  var onClick = _vitest.vi.fn();
+  var handleChange = _vitest.vi.fn();
+  var response = {
+    name: 'demo'
+  };
   (0, _vitest.afterEach)(function () {
     _vitest.vi.resetAllMocks();
   });
   (0, _vitest.it)('renders label ', function () {
-    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxBoolean["default"], {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxBoolean.CheckboxBoolean, {
         id: "checkbox",
-        label: label
+        label: label,
+        value: true,
+        handleChange: handleChange,
+        response: response
       })),
       getByText = _render.getByText;
     (0, _vitest.expect)(getByText(label)).toBeInTheDocument();
   });
   (0, _vitest.it)('renders unchecked checkbox', function () {
-    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxBoolean["default"], {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxBoolean.CheckboxBoolean, {
         id: "checkbox",
         label: label,
-        description: description
+        description: description,
+        value: false,
+        handleChange: handleChange,
+        response: response
       })),
       getByRole = _render2.getByRole;
     var checkbox = getByRole('checkbox');
@@ -32,12 +40,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(checkbox).toBeEnabled();
   });
   (0, _vitest.it)('renders checked checkbox', function () {
-    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxBoolean["default"], {
+    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxBoolean.CheckboxBoolean, {
         id: 'checkbox',
         label: label,
         description: description,
-        checked: true,
-        onClick: onClick
+        value: true,
+        handleChange: handleChange,
+        response: response
       })),
       getByRole = _render3.getByRole;
     var checkbox = getByRole('checkbox');
@@ -45,16 +54,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(checkbox).toBeEnabled();
   });
   (0, _vitest.it)('calls onClick when checkbox is clicked', function () {
-    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxBoolean["default"], {
+    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxBoolean.CheckboxBoolean, {
         id: "checkbox",
         label: label,
         description: description,
-        onClick: onClick
+        value: false,
+        handleChange: handleChange,
+        response: response
       })),
       getByRole = _render4.getByRole;
     var checkbox = getByRole('checkbox');
     _react.fireEvent.click(checkbox);
-    (0, _vitest.expect)(onClick).toHaveBeenCalledTimes(1);
-    (0, _vitest.expect)(onClick).toHaveBeenCalledWith(true);
+    (0, _vitest.expect)(handleChange).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(handleChange).toHaveBeenCalledWith(response, true);
   });
 });

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroup = CheckboxGroup;
+var _CustomCheckboxGroup = require("./CustomCheckboxGroup");
+var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
+require("./CheckboxGroup.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+function CheckboxGroup(_ref) {
+  var id = _ref.id,
+    value = _ref.value,
+    responses = _ref.responses,
+    shortcut = _ref.shortcut,
+    handleChange = _ref.handleChange,
+    errors = _ref.errors,
+    label = _ref.label,
+    description = _ref.description;
+  var options = responses.map(function (_ref2) {
+    var label = _ref2.label,
+      response = _ref2.response,
+      description = _ref2.description;
+    var name = response.name;
+    return {
+      label: label,
+      name: name,
+      checked: castValueToBoolean(value, name),
+      description: description,
+      onClick: function onClick(checked) {
+        handleChange(response, checked);
+      }
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomCheckboxGroup.CustomCheckboxGroup, {
+    id: id,
+    description: description,
+    options: options,
+    label: label,
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, id),
+    shortcut: shortcut
+  });
+}
+function castValueToBoolean(value, name) {
+  if (value && name in value) {
+    var _value$name;
+    return (_value$name = value[name]) !== null && _value$name !== void 0 ? _value$name : false;
+  }
+  return false;
+}

package/lib/components/CheckboxGroup/CheckboxGroup.scss

@@ -0,0 +1,13 @@
+
+.lunatic-checkbox-group {
+  legend {
+    .label-description {
+      font-weight: lighter;
+      display: block;
+    }
+  }
+  .lunatic-checkbox-group-option {
+    display: flex;
+    font-size: 13px;
+  }
+}

package/lib/components/{declarations/declarations-after-text.js → CheckboxGroup/CustomCheckboxGroup.js}

@@ -3,21 +3,43 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _commons = require("../commons");
-var _declarations = _interopRequireWildcard(require("./declarations"));
+exports.CustomCheckboxGroup = void 0;
+var _slottableComponent = require("../shared/HOC/slottableComponent");
+var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
+var _Fieldset = require("../shared/Fieldset/Fieldset");
+var _CheckboxOption = require("../shared/Checkbox/CheckboxOption");
+var _getShortcutKey = require("../shared/Checkbox/getShortcutKey");
 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; }
 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 DeclarationsAfterText(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations["default"], _objectSpread({
-    type: _declarations.DECLARATION_POSITIONS.after
-  }, props));
-}
-var _default = exports["default"] = (0, _commons.createCustomizableLunaticField)(DeclarationsAfterText, 'DeclarationsAfterText');
+var CustomCheckboxGroup = exports.CustomCheckboxGroup = (0, _slottableComponent.slottableComponent)('CheckboxGroup', function (_ref) {
+  var options = _ref.options,
+    id = _ref.id,
+    label = _ref.label,
+    description = _ref.description,
+    errors = _ref.errors,
+    shortcut = _ref.shortcut;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Fieldset.Fieldset, {
+    className: "lunatic-checkbox-group",
+    legend: label,
+    description: description,
+    children: [options.map(function (option, index) {
+      var checkboxId = "lunatic-checkbox-".concat(id, "-").concat(option.name);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "lunatic-checkbox-group-option",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxOption.CheckboxOption, _objectSpread(_objectSpread({}, option), {}, {
+          shortcut: shortcut,
+          invalid: !!errors,
+          id: checkboxId,
+          codeModality: shortcut ? (0, _getShortcutKey.getShortcutKey)(index, options.length) : undefined
+        }))
+      }, checkboxId);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+      errors: errors
+    })]
+  });
+});

package/lib/components/{checkbox/checkbox-group/html/checkbox-group-content.spec.js → CheckboxGroup/CustomCheckboxGroup.spec.js}

@@ -1,10 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-var _checkboxGroupContent = _interopRequireDefault(require("./checkbox-group-content"));
 var _vitest = require("vitest");
+var _CustomCheckboxGroup = require("./CustomCheckboxGroup");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('CheckboxGroupContent', function () {
   var options = [{
     label: 'Option 1',
@@ -23,7 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     onClick: _vitest.vi.fn()
   }];
   (0, _vitest.it)('calls onClick callback when an option is clicked', function () {
-    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxGroupContent["default"], {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomCheckboxGroup.CustomCheckboxGroup, {
         options: options,
         id: "test-checkbox-group"
       })),

package/lib/components/CheckboxOne/CheckboxOne.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxOne = CheckboxOne;
+var _RadioGroup = require("../shared/Radio/RadioGroup");
+require("./CheckboxOne.scss");
+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 CheckboxOne(_ref) {
+  var options = _ref.options,
+    value = _ref.value,
+    id = _ref.id,
+    label = _ref.label,
+    description = _ref.description,
+    handleChange = _ref.handleChange,
+    errors = _ref.errors,
+    shortcut = _ref.shortcut,
+    response = _ref.response;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
+    id: id,
+    className: "lunatic-checkbox-one",
+    options: options,
+    value: value,
+    errors: (0, _ComponentErrors.getComponentErrors)(errors, id),
+    label: label,
+    description: description,
+    onSelect: function onSelect(value) {
+      return handleChange(response, value);
+    },
+    checkboxStyle: true,
+    shortcut: shortcut,
+    clearable: true
+  });
+}

package/lib/components/{checkbox/checkbox-one/html/checkbox-one.spec.js → CheckboxOne/CheckboxOne.spec.js}

@@ -1,10 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-var _checkboxOne = _interopRequireDefault(require("./checkbox-one"));
+var _CheckboxOne = require("./CheckboxOne");
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('CheckboxOne component', function () {
   var options = [{
     label: 'Option 1',
@@ -18,11 +17,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
   }];
   var onSelect = _vitest.vi.fn();
   (0, _vitest.it)('renders the component with correct props', function () {
-    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxOne["default"], {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxOne.CheckboxOne, {
+        response: {
+          name: 'demo'
+        },
         options: options,
         value: "option-1",
         id: "checkbox-one",
-        onSelect: onSelect
+        handleChange: onSelect
       })),
       getByText = _render.getByText;
     (0, _vitest.expect)(getByText('Option 1')).toBeInTheDocument();
@@ -30,17 +32,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(getByText('Option 3')).toBeInTheDocument();
   });
   (0, _vitest.it)('calls onSelect when an option is selected', function () {
-    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxOne["default"], {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxOne.CheckboxOne, {
+        response: {
+          name: 'demo'
+        },
         options: options,
         value: "option-1",
         id: "checkbox-one",
         label: "Checkbox One",
         description: "Choose one option",
-        onSelect: onSelect
+        handleChange: onSelect
       })),
       getByText = _render2.getByText;
     _react.fireEvent.click(getByText('Option 2'));
     (0, _vitest.expect)(onSelect).toHaveBeenCalledTimes(1);
-    (0, _vitest.expect)(onSelect).toHaveBeenCalledWith('option-2');
+    (0, _vitest.expect)(onSelect).toHaveBeenCalledWith({
+      name: 'demo'
+    }, 'option-2');
   });
 });

package/lib/components/{datepicker/html/datepicker.js → Datepicker/Datepicker.js}

@@ -4,17 +4,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.CustomDatepicker = void 0;
+exports.Datepicker = Datepicker;
 var _react = require("react");
-var _commons = require("../../commons");
 var _DatepickerField = require("./DatepickerField");
-require("./datepicker.scss");
+require("./Datepicker.scss");
+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); }
@@ -25,25 +25,48 @@ 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 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 disabled = _ref.disabled,
-    readOnly = _ref.readOnly,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    _ref$dateFormat = _ref.dateFormat,
+  var _ref$dateFormat = _ref.dateFormat,
     dateFormat = _ref$dateFormat === void 0 ? 'YYYY-MM-DD' : _ref$dateFormat,
-    onChange = _ref.onChange,
-    id = _ref.id,
-    label = _ref.label,
+    response = _ref.response,
+    handleChange = _ref.handleChange,
     errors = _ref.errors,
-    description = _ref.description;
+    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');
 
   // Raw state, we allow invalid dates to be typed
   var _useState = (0, _react.useState)(function () {
-      return numbersFromDateString(value);
+      return numbersFromDateString(value !== null && value !== void 0 ? value : undefined);
     }),
     _useState2 = _slicedToArray(_useState, 2),
     numbers = _useState2[0],
@@ -53,10 +76,10 @@ function Datepicker(_ref) {
       var newNumbers = _toConsumableArray(numbers);
       newNumbers[index] = value;
       setNumbers(newNumbers);
-      handleChange(newNumbers);
+      onNumbersChange(newNumbers);
     };
   };
-  var handleChange = function handleChange(numbers) {
+  var onNumbersChange = function onNumbersChange(numbers) {
     var formatParts = dateFormat.split('-');
     var hasNaNIndex = numbers.findIndex(function (v) {
       return Number.isNaN(v);
@@ -84,11 +107,15 @@ function Datepicker(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "lunatic-input",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Label, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
       htmlFor: id,
       id: labelId,
       description: description,
       children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+      type: "AFTER_QUESTION_TEXT",
+      declarations: declarations,
+      id: id
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "lunaticDatepickerFields",
       children: [showDay && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatepickerField.DatepickerField, _objectSpread({
@@ -113,11 +140,11 @@ function Datepicker(_ref) {
         max: 9999,
         onChange: setNumber(0)
       }, extraProps))]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
       errors: errors
     })]
   });
-}
+});
 function numbersFromDateString(s) {
   if (!s) {
     return [NaN, NaN, NaN];
@@ -132,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 _default = exports["default"] = (0, _commons.createCustomizableLunaticField)(Datepicker, 'Datepicker');
+}

package/lib/components/Datepicker/Datepicker.spec.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _vitest = require("vitest");
+var _Datepicker = require("./Datepicker");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+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); }
+(0, _vitest.describe)('Datepicker', function () {
+  var mockOnChange = _vitest.vi.fn();
+  var baseProps = {
+    value: '1999-01-01',
+    executeExpression: _vitest.vi.fn,
+    response: {
+      name: 'demo'
+    },
+    'aria-labelledby': 'datepicker',
+    id: 'datepicker'
+  };
+  (0, _vitest.beforeEach)(function () {
+    mockOnChange.mockClear();
+  });
+  ['YYYY-MM-DD', 'YYYY-MM', 'YYYY'].forEach(function (format) {
+    (0, _vitest.it)('should render properly with format ' + format, function () {
+      var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker.Datepicker, _objectSpread(_objectSpread({}, baseProps), {}, {
+          handleChange: mockOnChange,
+          dateFormat: format
+        }))),
+        container = _render.container;
+      (0, _vitest.expect)(container).toMatchSnapshot();
+    });
+  });
+  (0, _vitest.it)('handle change correctly for format YYYY-MM-DD', function () {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker.Datepicker, _objectSpread(_objectSpread({}, baseProps), {}, {
+      dateFormat: "YYYY-MM-DD",
+      handleChange: mockOnChange
+    })));
+    _react.fireEvent.change(_react.screen.getByLabelText(/Année/), {
+      target: {
+        valueAsNumber: 2023
+      }
+    });
+    (0, _vitest.expect)(mockOnChange).toHaveBeenLastCalledWith(baseProps.response, '2023-01-01');
+    _react.fireEvent.change(_react.screen.getByLabelText(/Mois/), {
+      target: {
+        valueAsNumber: 2
+      }
+    });
+    _react.fireEvent.change(_react.screen.getByLabelText(/Jour/), {
+      target: {
+        valueAsNumber: 30
+      }
+    });
+    (0, _vitest.expect)(mockOnChange).toHaveBeenLastCalledWith(baseProps.response, null);
+  });
+  (0, _vitest.it)('handle change correctly for format YYYY-MM', function () {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker.Datepicker, _objectSpread(_objectSpread({}, baseProps), {}, {
+      dateFormat: "YYYY-MM",
+      value: "1999-01",
+      handleChange: mockOnChange
+    })));
+    _react.fireEvent.change(_react.screen.getByLabelText(/Année/), {
+      target: {
+        valueAsNumber: 2023
+      }
+    });
+    (0, _vitest.expect)(mockOnChange).toHaveBeenLastCalledWith(baseProps.response, '2023-01');
+    _react.fireEvent.change(_react.screen.getByLabelText(/Mois/), {
+      target: {
+        valueAsNumber: 10
+      }
+    });
+    (0, _vitest.expect)(mockOnChange).toHaveBeenLastCalledWith(baseProps.response, '2023-10');
+  });
+  (0, _vitest.it)('handle change correctly for year YYYY', function () {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker.Datepicker, _objectSpread(_objectSpread({}, baseProps), {}, {
+      dateFormat: "YYYY",
+      value: "1999",
+      handleChange: mockOnChange
+    })));
+    _react.fireEvent.change(_react.screen.getByLabelText(/Année/), {
+      target: {
+        valueAsNumber: 2023
+      }
+    });
+    (0, _vitest.expect)(mockOnChange).toHaveBeenLastCalledWith(baseProps.response, '2023');
+  });
+});