@inseefr/lunatic 2.7.21 → 3.0.0-rc.10

package/lib/components/CheckboxBoolean/CheckboxBoolean.js

@@ -0,0 +1,65 @@
+"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 = 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 = ["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,
+    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)('CheckboxBoolean', 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/CheckboxBoolean/CheckboxBoolean.spec.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _CheckboxBoolean = require("./CheckboxBoolean");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(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 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.CheckboxBoolean, {
+        id: "checkbox",
+        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.CheckboxBoolean, {
+        id: "checkbox",
+        label: label,
+        description: description,
+        value: false,
+        handleChange: handleChange,
+        response: response
+      })),
+      getByRole = _render2.getByRole;
+    var checkbox = getByRole('checkbox');
+    (0, _vitest.expect)(checkbox).not.toBeChecked();
+    (0, _vitest.expect)(checkbox).toBeEnabled();
+  });
+  (0, _vitest.it)('renders checked checkbox', function () {
+    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxBoolean.CheckboxBoolean, {
+        id: 'checkbox',
+        label: label,
+        description: description,
+        value: true,
+        handleChange: handleChange,
+        response: response
+      })),
+      getByRole = _render3.getByRole;
+    var checkbox = getByRole('checkbox');
+    (0, _vitest.expect)(checkbox).toBeChecked();
+    (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.CheckboxBoolean, {
+        id: "checkbox",
+        label: label,
+        description: description,
+        value: false,
+        handleChange: handleChange,
+        response: response
+      })),
+      getByRole = _render4.getByRole;
+    var checkbox = getByRole('checkbox');
+    _react.fireEvent.click(checkbox);
+    (0, _vitest.expect)(handleChange).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(handleChange).toHaveBeenCalledWith(response, true);
+  });
+});

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroup = CheckboxGroup;
+var _CustomCheckboxGroup = require("./CustomCheckboxGroup");
+var _ComponentErrors = require("../shared/ComponentErrors/ComponentErrors");
+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,
+      id = _ref2.id;
+    var name = response.name;
+    return {
+      label: label,
+      name: name,
+      id: id,
+      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/CheckboxGroup/CustomCheckboxGroup.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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); }
+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) {
+      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: option.id,
+          codeModality: shortcut ? (0, _getShortcutKey.getShortcutKey)(index, options.length) : undefined
+        }))
+      }, option.id);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+      errors: errors
+    })]
+  });
+});

package/lib/components/CheckboxGroup/CustomCheckboxGroup.spec.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _vitest = require("vitest");
+var _CustomCheckboxGroup = require("./CustomCheckboxGroup");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('CheckboxGroupContent', function () {
+  var options = [{
+    id: '1',
+    label: 'Option 1',
+    checked: false,
+    name: 'option1',
+    onClick: _vitest.vi.fn()
+  }, {
+    id: '2',
+    label: 'Option 2',
+    checked: true,
+    name: 'option2',
+    onClick: _vitest.vi.fn()
+  }, {
+    id: '3',
+    label: 'Option 3',
+    checked: false,
+    name: 'option3',
+    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)(_CustomCheckboxGroup.CustomCheckboxGroup, {
+        options: options,
+        id: "test-checkbox-group"
+      })),
+      getByLabelText = _render.getByLabelText;
+    var option1 = getByLabelText('Option 1');
+    var option2 = getByLabelText('Option 2');
+    var option3 = getByLabelText('Option 3');
+    _react.fireEvent.click(option1);
+    (0, _vitest.expect)(options[0].onClick).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(options[0].onClick).toHaveBeenCalledWith(true);
+    _react.fireEvent.click(option2);
+    (0, _vitest.expect)(options[1].onClick).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(options[1].onClick).toHaveBeenCalledWith(false);
+    _react.fireEvent.click(option3);
+    (0, _vitest.expect)(options[2].onClick).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(options[2].onClick).toHaveBeenCalledWith(true);
+  });
+});

package/lib/components/CheckboxOne/CheckboxOne.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxOne = CheckboxOne;
+var _RadioGroup = require("../shared/Radio/RadioGroup");
+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/CheckboxOne/CheckboxOne.spec.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _CheckboxOne = require("./CheckboxOne");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('CheckboxOne component', function () {
+  var options = [{
+    label: 'Option 1',
+    value: 'option-1'
+  }, {
+    label: 'Option 2',
+    value: 'option-2'
+  }, {
+    label: 'Option 3',
+    value: 'option-3'
+  }];
+  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.CheckboxOne, {
+        response: {
+          name: 'demo'
+        },
+        options: options,
+        value: "option-1",
+        id: "checkbox-one",
+        handleChange: onSelect
+      })),
+      getByText = _render.getByText;
+    (0, _vitest.expect)(getByText('Option 1')).toBeInTheDocument();
+    (0, _vitest.expect)(getByText('Option 2')).toBeInTheDocument();
+    (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.CheckboxOne, {
+        response: {
+          name: 'demo'
+        },
+        options: options,
+        value: "option-1",
+        id: "checkbox-one",
+        label: "Checkbox One",
+        description: "Choose one option",
+        handleChange: onSelect
+      })),
+      getByText = _render2.getByText;
+    _react.fireEvent.click(getByText('Option 2'));
+    (0, _vitest.expect)(onSelect).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onSelect).toHaveBeenCalledWith({
+      name: 'demo'
+    }, 'option-2');
+  });
+});

package/lib/components/Datepicker/Datepicker.js

@@ -0,0 +1,161 @@
+"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.CustomDatepicker = void 0;
+exports.Datepicker = Datepicker;
+var _react = require("react");
+var _DatepickerField = require("./DatepickerField");
+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");
+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); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 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,
+    handleChange = _ref.handleChange,
+    errors = _ref.errors,
+    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 !== null && value !== void 0 ? value : undefined);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    numbers = _useState2[0],
+    setNumbers = _useState2[1];
+  var setNumber = function setNumber(index) {
+    return function (value) {
+      var newNumbers = _toConsumableArray(numbers);
+      newNumbers[index] = value;
+      setNumbers(newNumbers);
+      onNumbersChange(newNumbers);
+    };
+  };
+  var onNumbersChange = function onNumbersChange(numbers) {
+    var formatParts = dateFormat.split('-');
+    var hasNaNIndex = numbers.findIndex(function (v) {
+      return Number.isNaN(v);
+    });
+
+    // Date has a missing part
+    if (hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1) {
+      onChange(null);
+      return;
+    }
+
+    // Date is not valid
+    if (dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) {
+      onChange(null);
+      return;
+    }
+    var result = formatParts.map(function (v, k) {
+      return numbers[k].toString().padStart(v.length, '0');
+    }).join('-');
+    onChange(result);
+  };
+  var extraProps = {
+    readOnly: readOnly,
+    disabled: disabled
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "lunatic-input",
+    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({
+        id: id + 'day',
+        label: "Jour",
+        description: "Exemple: 14",
+        max: 31,
+        value: numbers[2],
+        onChange: setNumber(2)
+      }, extraProps)), showMonth && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatepickerField.DatepickerField, _objectSpread({
+        id: id + 'month',
+        label: "Mois",
+        description: "Exemple: 07",
+        max: 12,
+        value: numbers[1],
+        onChange: setNumber(1)
+      }, extraProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatepickerField.DatepickerField, _objectSpread({
+        id: id + 'year',
+        label: "Ann\xE9e",
+        description: "Exemple: 2023",
+        value: numbers[0],
+        max: 9999,
+        onChange: setNumber(0)
+      }, extraProps))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+      errors: errors
+    })]
+  });
+});
+function numbersFromDateString(s) {
+  if (!s) {
+    return [NaN, NaN, NaN];
+  }
+  var parts = s.split('-');
+  return [parseInt(parts[0], 10), parseInt(parts[1], 10), parseInt(parts[2], 10)];
+}
+function isDateValid(dateArray) {
+  var _dateArray = _slicedToArray(dateArray, 3),
+    year = _dateArray[0],
+    month = _dateArray[1],
+    day = _dateArray[2];
+  var date = new Date(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+}

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');
+  });
+});