@inseefr/lunatic 2.6.3-rc.1 → 2.6.3

package/README.md

@@ -10,9 +10,9 @@
 
 Lunatic is a front-end library in the form of a React hook and component libraries for generating a questionnaire from the [Lunatic-Model](https://github.com/InseeFr/Lunatic-Model) data format.
 
-- [Storybook](https://inseefr.github.io/Lunatic/storybook), branch `main`
-- [Storybook v1](https://inseefr.github.io/Lunatic/storybook-v1), branch `v1-main`
-- [Storybook Beta](https://inseefr.github.io/Lunatic/storybook-beta), branch `develop`
+- [Storybook v1](https://inseefr.github.io/Lunatic/storybook-0.3.9), branch `v1-main`
+- [Storybook 2.7](https://inseefr.github.io/Lunatic/storybook), branch `2.7`
+- [Storybook 2.6](https://inseefr.github.io/Lunatic/storybook-beta), branch `2.6`
 - [Documentation](https://inseefr.github.io/Lunatic/en/)
 
 ## Table of Contents
@@ -111,6 +111,42 @@ All the components offered by Lunatic are available in the [src/components](http
 
 To activate the **autofocus**, you need to pass a key in the `autoFocusKey` property of `LunaticComponents`. As soon as this value changes, the first field is focused (a good solution is to pass the `pageTag` provided by `useLunatic`).
 
+### Workers
+
+#### General
+
+Lunatic uses webWorkers to take the load off the main execution frame (e.g. list search).
+
+Workers are normally installed when the library is installed (postinstall scripts). If this is not the case, you can always manually run the command `npx @inseefr/lunatic workers` to add Lunatic workers to your project.
+
+Lunatic workers are added to the public/workers folder of the current project when the library is installed.
+
+If a new version of Lunatic offers new workers, they will be automatically updated.
+This ensures that you always have the right version of workers for the version of Lunatic you're using.
+
+A good practice is to add the public/workers folder to your `.gitignore.`
+
+#### How it works
+
+Workers are loaded into the latest version (version `workersVersion` of package.json) of the public `workers` folder.
+
+It's up to you if you want to load them at runtime from another location.
+Simply specify the base url of the workers folder to useLunatic.
+
+For example, if your workers are hosted on the server `http://localhost:9090/static/final-workers`.
+We would then have the workers available at the addresses :
+
+- `http://localhost:9090/static/final-workers/lunatic-append-worker-0.3.0-experimental.js`
+- `http://localhost:9090/static/final-workers/lunatic-label-worker-0.3.0-experimental.js`
+- `http://localhost:9090/static/final-workers/lunatic-searching-worker-0.3.0-experimental.js`
+
+You'll need to specify the `workersBasePath` props in the useLunatic:
+
+```js
+const { getComponents } = useLunatic(source, data,
+ { features, preferences, ..., workersBasePath: 'http://localhost:9090/static/final-workers' })
+```
+
 ## Customization
 
 By default, the components offered by Lunatic are quite simple with a minimal style. You can customize the fields with your own CSS, but for more complex cases, you can also replace the basic components using the `custom` property that you can pass when calling `useLunatic`.
@@ -154,6 +190,16 @@ To facilitate expression execution, an `executeExpression()` method is exposed i
 
 ## Convention and Best Practices
 
+### Stable Branchs
+
+- Stable branches follow the glob pattern `'2.*'`, like `2.6` or `2.7`.
+- We can maintain if needs, the old stable branches
+- `main` branch corresponding to the latest release
+- `develop` branch is temporarily maintained. (actually `develop` is the `2.7` branch = the future main release)
+- `develop` branch will be deleted soon with this new convention
+
+### Commits and feature branches
+
 - Avoid "default" exports as it impairs readability during import.
 - Comments in the code should be in English.
 - Files containing JSX should use the .jsx (or .tsx) extension.

package/lib/components/checkbox/checkbox-boolean/html/checkbox-boolean.js

@@ -24,10 +24,10 @@ function CheckboxBoolean(_ref) {
       id: id,
       onClick: onClick !== null && onClick !== void 0 ? onClick : _function.voidFunction,
       label: label,
-      description: description
+      description: description,
+      invalid: !!errors
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
-      errors: errors,
-      activeId: id
+      errors: errors
     })]
   });
 }

package/lib/components/checkbox/checkbox-boolean/lunatic-checkbox-boolean.js

@@ -7,6 +7,7 @@ exports["default"] = void 0;
 var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../../commons/components/lunatic-component-without-label"));
 var _useOnHandleChange = _interopRequireDefault(require("../../commons/use-on-handle-change"));
 var _checkboxBoolean = _interopRequireDefault(require("./html/checkbox-boolean"));
+var _errors = require("../../commons/components/errors/errors");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LunaticCheckboxBoolean(_ref) {
@@ -29,6 +30,11 @@ function LunaticCheckboxBoolean(_ref) {
     response: response,
     value: value
   });
+  console.log({
+    errors: errors,
+    computed: (0, _errors.getComponentErrors)(errors, id),
+    id: id
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticComponentWithoutLabel["default"], {
     id: id,
     preferences: preferences,
@@ -45,7 +51,7 @@ function LunaticCheckboxBoolean(_ref) {
       onClick: onChange,
       disabled: disabled,
       label: label,
-      errors: errors
+      errors: (0, _errors.getComponentErrors)(errors, id)
     })
   });
 }

package/lib/components/checkbox/checkbox-group/checkbox-group-content.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _commons = require("../commons");
 require("./checkbox.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function CheckboxGroupContent(_ref) {
   var options = _ref.options,
     id = _ref.id;

package/lib/components/checkbox/checkbox-group/html/checkbox-group-content.js

@@ -10,7 +10,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function CheckboxGroupContent(_ref) {
   var options = _ref.options,
     id = _ref.id,
-    shortcut = _ref.shortcut;
+    shortcut = _ref.shortcut,
+    invalid = _ref.invalid;
   var maxIndex = options.length;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: options.map(function (option, index) {
@@ -30,7 +31,8 @@ function CheckboxGroupContent(_ref) {
           label: label,
           description: description,
           shortcut: shortcut,
-          codeModality: shortcut ? codeModality : undefined
+          codeModality: shortcut ? codeModality : undefined,
+          invalid: invalid
         })
       }, checkboxId);
     })

package/lib/components/checkbox/checkbox-group/html/checkbox-group.js

@@ -23,10 +23,10 @@ function CheckboxGroup(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxGroupContent["default"], {
       id: id,
       options: options,
-      shortcut: shortcut
+      shortcut: shortcut,
+      invalid: !!errors
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
-      errors: errors,
-      activeId: id
+      errors: errors
     })]
   });
 }

package/lib/components/checkbox/checkbox-group/lunatic-checkbox-group.js

@@ -7,6 +7,7 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../../commons/components/lunatic-component-without-label"));
 var _checkboxGroup = _interopRequireDefault(require("./html/checkbox-group"));
+var _errors = require("../../commons/components/errors/errors");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LunaticCheckboxGroup(_ref) {
@@ -53,7 +54,7 @@ function LunaticCheckboxGroup(_ref) {
       id: id,
       options: options,
       label: label,
-      errors: errors,
+      errors: (0, _errors.getComponentErrors)(errors, id),
       shortcut: shortcut
     })
   });

package/lib/components/checkbox/checkbox-one/lunatic-checkbox-one.js

@@ -7,6 +7,7 @@ exports["default"] = void 0;
 var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../../commons/components/lunatic-component-without-label"));
 var _useOnHandleChange = _interopRequireDefault(require("../../commons/use-on-handle-change"));
 var _checkboxOne = _interopRequireDefault(require("./html/checkbox-one"));
+var _errors = require("../../commons/components/errors/errors");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LunaticCheckboxOne(_ref) {
@@ -45,7 +46,7 @@ function LunaticCheckboxOne(_ref) {
       className: "lunatic-checkbox-one",
       options: options,
       value: value,
-      errors: errors,
+      errors: (0, _errors.getComponentErrors)(errors, id),
       onSelect: onSelect,
       label: label,
       shortcut: shortcut

package/lib/components/checkbox/commons/checkbox-option.js

@@ -20,7 +20,8 @@ function CheckboxOption(_ref) {
     label = _ref.label,
     description = _ref.description,
     codeModality = _ref.codeModality,
-    shortcut = _ref.shortcut;
+    shortcut = _ref.shortcut,
+    invalid = _ref.invalid;
   var onClickOption = (0, _react.useCallback)(function () {
     onClick(!checked);
   }, [checked, onClick]);
@@ -41,6 +42,7 @@ function CheckboxOption(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         id: id,
         role: "checkbox",
+        "aria-invalid": invalid,
         className: "lunatic-input-checkbox",
         "aria-checked": checked,
         tabIndex: 0,

package/lib/components/commons/components/combo-box/combo-box-container.js

@@ -21,8 +21,7 @@ function ComboBoxContainer(_ref) {
     id: "".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-container-").concat(id),
     className: (0, _classnames["default"])(className, "".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-container"), "".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-suggester-").concat(classStyle), "lunatic-suggester-default-style", classStyle),
     children: [children, errors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_errors["default"], {
-      errors: errors,
-      activeId: id
+      errors: errors
     })]
   });
 }

package/lib/components/commons/components/combo-box/combo-box.js

@@ -131,7 +131,6 @@ function ComboBox(_ref) {
       children: messageError
     });
   }
-  console.log(readOnly);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContainer["default"], {
     id: id,
     className: className,
@@ -163,7 +162,8 @@ function ComboBox(_ref) {
         selectedIndex: selectedIndex,
         options: options,
         onChange: handleChange,
-        classNamePrefix: classNamePrefix
+        classNamePrefix: classNamePrefix,
+        invalid: !!errors
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.Panel, {
         optionRenderer: optionRenderer,
         options: options,

package/lib/components/commons/components/combo-box/selection/LabelOrInput.js

@@ -29,7 +29,8 @@ function LabelOrInput(props) {
     readOnly = props.readOnly,
     id = props.id,
     focused = props.focused,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    invalid = props.invalid;
   if (displayLabel) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
       labelRenderer: labelRenderer,
@@ -42,6 +43,7 @@ function LabelOrInput(props) {
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
+    invalid: invalid,
     id: "combobox-input-".concat(id),
     className: "lunatic-combo-box-input",
     onChange: onChange,

package/lib/components/commons/components/combo-box/selection/input.js

@@ -20,7 +20,8 @@ function Input(_ref) {
     id = _ref.id,
     labelledBy = _ref.labelledBy,
     focused = _ref.focused,
-    className = _ref.className;
+    className = _ref.className,
+    invalid = _ref.invalid;
   var inputEl = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (inputEl.current && focused) {
@@ -41,6 +42,7 @@ function Input(_ref) {
     onChange: onChange,
     value: value,
     "aria-label": "lunatic-combo-box",
+    "aria-invalid": invalid,
     title: "combo-box",
     autoComplete: "off",
     autoCapitalize: "off",

package/lib/components/commons/components/combo-box/selection/selection.js

@@ -23,7 +23,8 @@ function Selection(_ref) {
     editable = _ref.editable,
     labelId = _ref.labelId,
     id = _ref.id,
-    classNamePrefix = _ref.classNamePrefix;
+    classNamePrefix = _ref.classNamePrefix,
+    invalid = _ref.invalid;
   var onChangeEx = (0, _react.useCallback)(function (e) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
   }, [onChange]);
@@ -34,6 +35,7 @@ function Selection(_ref) {
     "aria-owns": "".concat(id, "-list"),
     classNamePrefix: classNamePrefix,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelOrInput.LabelOrInput, {
+      invalid: invalid,
       labelRenderer: labelRenderer,
       placeholder: placeholder,
       selectedIndex: selectedIndex,

package/lib/components/commons/components/errors/errors.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+exports.getComponentErrors = getComponentErrors;
 require("./errors.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -12,19 +13,17 @@ 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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * Display a list of error as simple red text
+ */
 function Errors(_ref) {
-  var errors = _ref.errors,
-    activeId = _ref.activeId;
+  var errors = _ref.errors;
   if (!errors) {
     return null;
   }
-  var activeErrors = getActiveErrors(errors, activeId);
-  if (!activeErrors) {
-    return null;
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "lunatic-errors",
-    children: activeErrors.map(function (_ref2) {
+    children: errors.map(function (_ref2) {
       var id = _ref2.id,
         errorMessage = _ref2.errorMessage;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -34,16 +33,19 @@ function Errors(_ref) {
     })
   });
 }
-function getActiveErrors(errors, activeId) {
+function getComponentErrors(errors, componentId) {
+  if (!componentId || !errors) {
+    return undefined;
+  }
   var activeErrors = Object.entries(errors).find(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 1),
       k = _ref4[0];
-    return activeId === null || activeId === void 0 ? void 0 : activeId.trim().endsWith(k);
+    return componentId === null || componentId === void 0 ? void 0 : componentId.trim().endsWith(k);
   });
   if (Array.isArray(activeErrors) && Array.isArray(activeErrors[1])) {
     return activeErrors[1];
   }
-  return null;
+  return undefined;
 }
 var _default = Errors;
 exports["default"] = _default;

package/lib/components/commons/components/errors/errors.spec.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _react = require("@testing-library/react");
 var _vitest = require("vitest");
-var _errors = _interopRequireDefault(require("./errors"));
+var _errors = _interopRequireWildcard(require("./errors"));
 var _typeSource = require("../../../../use-lunatic/type-source");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 (0, _vitest.describe)('Errors component', function () {
   var errors = {
     id1: [{
@@ -28,16 +30,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
   };
   (0, _vitest.it)('renders null when no active errors', function () {
     var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_errors["default"], {
-        errors: errors,
-        activeId: "id3"
+        errors: (0, _errors.getComponentErrors)(errors, 'id3')
       })),
       container = _render.container;
     (0, _vitest.expect)(container.firstChild).toBeNull();
   });
   (0, _vitest.it)('renders active errors', function () {
     var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_errors["default"], {
-        errors: errors,
-        activeId: "id2"
+        errors: (0, _errors.getComponentErrors)(errors, 'id2')
       })),
       getByText = _render2.getByText;
     (0, _vitest.expect)(getByText('Error 2 message')).toBeInTheDocument();

package/lib/components/component-set/html/__snapshots__/component-set.spec.tsx.snap

@@ -47,6 +47,7 @@ exports[`ComponentSet > renders without crashing 1`] = `
               </span>
             </label>
             <input
+              aria-invalid="false"
               aria-labelledby="label-toto1"
               autocomplete="off"
               id="toto1"
@@ -108,6 +109,7 @@ exports[`ComponentSet > should handle readOnly in sub-components 1`] = `
               </span>
             </label>
             <input
+              aria-invalid="false"
               aria-labelledby="label-toto1"
               autocomplete="off"
               id="toto1"

package/lib/components/component-set/html/component-set.js

@@ -7,6 +7,7 @@ exports.ComponentSet = void 0;
 exports.ComponentSetBase = ComponentSetBase;
 var _commons = require("../../commons");
 var _componentSetLegend = require("./component-set-legend");
+var _errors = require("../../commons/components/errors/errors");
 var _jsxRuntime = require("react/jsx-runtime");
 function ComponentSetBase(_ref) {
   var id = _ref.id,
@@ -20,8 +21,7 @@ function ComponentSetBase(_ref) {
       id: labelId,
       children: legendText
     }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
-      errors: errors,
-      activeId: id
+      errors: (0, _errors.getComponentErrors)(errors, id)
     })]
   });
 }

package/lib/components/datepicker/html/__snapshots__/datepicker.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`Datepicker > renders without crashing 1`] = `
     class="lunatic-input"
   >
     <input
+      aria-invalid="false"
       aria-labelledby="lunatic-datepicker-datepicker"
       class="lunatic-datepicker"
       id="datepicker"
@@ -22,6 +23,7 @@ exports[`Datepicker > should handle readOnly 1`] = `
     class="lunatic-input"
   >
     <input
+      aria-invalid="false"
       aria-labelledby="lunatic-datepicker-Datepicker"
       class="lunatic-datepicker readOnly"
       id="Datepicker"

package/lib/components/datepicker/html/datepicker-input.js

@@ -15,7 +15,8 @@ function DatepickerInput(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     min = _ref.min,
-    max = _ref.max;
+    max = _ref.max,
+    invalid = _ref.invalid;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
     id: id,
     className: (0, _classnames["default"])('lunatic-datepicker', {
@@ -29,7 +30,8 @@ function DatepickerInput(_ref) {
     value: value,
     onChange: onChange,
     min: min,
-    max: max
+    max: max,
+    "aria-invalid": invalid
   });
 }
 var _default = DatepickerInput;

package/lib/components/datepicker/html/datepicker.js

@@ -42,10 +42,10 @@ function Datepicker(_ref) {
       value: value,
       onChange: handleChange,
       min: min,
-      max: max
+      max: max,
+      invalid: !!errors
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
-      errors: errors,
-      activeId: id
+      errors: errors
     })]
   });
 }

package/lib/components/datepicker/lunatic-datepicker.js

@@ -8,6 +8,7 @@ var _datepicker = _interopRequireDefault(require("./html/datepicker"));
 var _commons = require("../commons");
 var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../commons/components/lunatic-component-without-label"));
 var _useOnHandleChange = _interopRequireDefault(require("../commons/use-on-handle-change"));
+var _errors = require("../commons/components/errors/errors");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var LunaticDatepicker = function LunaticDatepicker(props) {
@@ -52,7 +53,7 @@ var LunaticDatepicker = function LunaticDatepicker(props) {
       max: max,
       label: label,
       description: description,
-      errors: errors
+      errors: (0, _errors.getComponentErrors)(errors, id)
     })
   });
 };

package/lib/components/dropdown/lunatic-dropdown.js

@@ -8,6 +8,7 @@ var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../commons/c
 var _useOnHandleChange = _interopRequireDefault(require("../commons/use-on-handle-change"));
 var _dropdown = _interopRequireDefault(require("./html/dropdown"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _errors = require("../commons/components/errors/errors");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LunaticDropdown(_ref) {
@@ -51,7 +52,7 @@ function LunaticDropdown(_ref) {
       onSelect: onChange,
       value: value,
       className: (0, _classnames["default"])(className, 'lunatic-dropdown'),
-      errors: errors,
+      errors: (0, _errors.getComponentErrors)(errors, id),
       label: label,
       readOnly: readOnly
     })

package/lib/components/index.js

@@ -96,7 +96,7 @@ Object.defineProperty(exports, "Modal", {
 Object.defineProperty(exports, "PairwiseLinks", {
   enumerable: true,
   get: function get() {
-    return _pairwiseLinks.PairwiseLinks;
+    return _pairwiseLinks["default"];
   }
 });
 Object.defineProperty(exports, "QuestionContext", {
@@ -174,7 +174,7 @@ Object.defineProperty(exports, "Switch", {
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
-    return _lunaticTable.LunaticTable;
+    return _table["default"];
   }
 });
 Object.defineProperty(exports, "Textarea", {
@@ -195,7 +195,7 @@ var _inputNumber = _interopRequireDefault(require("./input-number"));
 var _filterDescription = _interopRequireDefault(require("./filter-description"));
 var _loop = require("./loop/loop");
 var _modalControls = _interopRequireDefault(require("./modal-controls"));
-var _pairwiseLinks = require("./pairwise-links/pairwise-links");
+var _pairwiseLinks = _interopRequireDefault(require("./pairwise-links"));
 var _radio = _interopRequireDefault(require("./radio"));
 var _rosterForLoop = require("./loop/roster-for-loop/roster-for-loop");
 var _sequence = _interopRequireDefault(require("./sequence"));
@@ -205,7 +205,7 @@ var _switch = _interopRequireDefault(require("./switch"));
 var _textarea = _interopRequireDefault(require("./textarea"));
 var _suggesterLoaderWidget = _interopRequireDefault(require("./suggester-loader-widget"));
 var _roundabout = _interopRequireDefault(require("./roundabout"));
-var _lunaticTable = require("./table/lunatic-table");
+var _table = _interopRequireDefault(require("./table"));
 var _lunaticComponentSet = require("./component-set/lunatic-component-set");
 var _duration = _interopRequireDefault(require("./duration"));
 var _summary = require("./summary");

package/lib/components/input/html/__snapshots__/input.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`Input > renders without crashing 1`] = `
     class="lunatic-input"
   >
     <input
+      aria-invalid="false"
       aria-labelledby="label-input"
       autocomplete="off"
       id="input"
@@ -22,6 +23,7 @@ exports[`Input > should handle readOnly 1`] = `
     class="lunatic-input"
   >
     <input
+      aria-invalid="false"
       aria-labelledby="label-number"
       autocomplete="off"
       id="number"

package/lib/components/input/html/input.js

@@ -44,10 +44,10 @@ function Input(_ref) {
       onChange: handleChange,
       "aria-required": required,
       required: required,
-      maxLength: maxLength
+      maxLength: maxLength,
+      "aria-invalid": !!errors
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.Errors, {
-      errors: errors,
-      activeId: id
+      errors: errors
     })]
   });
 }

package/lib/components/input/lunatic-input.js

@@ -7,6 +7,7 @@ exports["default"] = void 0;
 var _input = _interopRequireDefault(require("./html/input"));
 var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../commons/components/lunatic-component-without-label"));
 var _useOnHandleChange = _interopRequireDefault(require("../commons/use-on-handle-change"));
+var _errors = require("../commons/components/errors/errors");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LunaticInput(props) {
@@ -47,7 +48,7 @@ function LunaticInput(props) {
       onChange: onChange,
       label: label,
       disabled: disabled,
-      errors: errors,
+      errors: (0, _errors.getComponentErrors)(errors, id),
       required: required,
       maxLength: maxLength,
       readOnly: readOnly

package/lib/components/input-number/html/__snapshots__/input-number.spec.tsx.snap

@@ -6,13 +6,13 @@ exports[`InputNumber > renders without crashing 1`] = `
     class="lunatic-input-number"
   >
     <input
+      aria-invalid="false"
       aria-labelledby="label-input"
       class=""
       id="input"
       inputmode="numeric"
       lang="en"
       required=""
-      step="1"
       type="text"
       value=""
     />
@@ -26,6 +26,7 @@ exports[`InputNumber > should handle readOnly 1`] = `
     class="lunatic-input-number"
   >
     <input
+      aria-invalid="false"
       aria-labelledby="label-number"
       class=""
       id="number"
@@ -33,7 +34,6 @@ exports[`InputNumber > should handle readOnly 1`] = `
       lang="en"
       readonly=""
       required=""
-      step="1"
       type="text"
       value="123"
     />