@inseefr/lunatic 2.7.0-rc.5 → 2.7.2

package/README.md

@@ -2,7 +2,7 @@
 
 # Lunatic
 
-[![Lunatic CI](https://github.com/InseeFr/Lunatic/actions/workflows/quality.yml/badge.svg)](https://github.com/InseeFr/Lunatic/actions/workflows/quality.yml)
+[![Lunatic CI](https://github.com/InseeFr/Lunatic/actions/workflows/ci-main.yaml/badge.svg)](https://github.com/InseeFr/Lunatic/actions/workflows/ci-main.yaml)
 [![npm version](https://badge.fury.io/js/%40inseefr%2Flunatic.svg)](https://badge.fury.io/js/%40inseefr%2Flunatic)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=coverage)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=alert_status)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
@@ -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 2.7](https://inseefr.github.io/Lunatic/storybook-2.7), branch `2.7`
+- [Storybook 2.6](https://inseefr.github.io/Lunatic/storybook-2.6), branch `2.6`
 - [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
@@ -80,7 +80,7 @@ And it returns an object that allows you to control the questionnaire:
 - `getData()`, returns the collected data in the questionnaire.
 - `loopVariables`, is an array containing the list of variables used for the current loop.
 
-For more information on the types of this return, you can refer to the available types in the [source code](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/type.ts#L64-L200). You can also find an example of using the hook in the [Storybook section](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/stories/utils/orchestrator.js#L69-L93).
+For more information on the types of this return, you can refer to the available types in the [source code](https://github.com/InseeFr/Lunatic/blob/2.7/src/use-lunatic/type.ts). You can also find an example of using the hook in the [Storybook section](https://github.com/InseeFr/Lunatic/blob/2.7/src/stories/utils/orchestrator.jsx#L121-L152).
 
 ### Components
 
@@ -107,10 +107,46 @@ function App({ source, data }) {
 }
 ```
 
-All the components offered by Lunatic are available in the [src/components](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/components/components.js) folder.
+All the components offered by Lunatic are available in the [src/components](https://github.com/InseeFr/Lunatic/tree/2.7/src/components) folder.
 
 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` at the root of your project 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.js`
+- `http://localhost:9090/static/final-workers/lunatic-label-worker-0.3.0.js`
+- `http://localhost:9090/static/final-workers/lunatic-search-worker-0.3.0.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`.
@@ -134,13 +170,13 @@ This section covers the internal working of the `useLunatic()` hook. The goal is
 
 ### General Functioning
 
-The hook is based on an [internal state](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/type.ts#L64-L200) that is updated through a [reducer](https://reactjs.org/docs/hooks-reference.html#usereducer) system. The [actions](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/actions.ts) affecting this state are limited:
+The hook is based on an [internal state](https://github.com/InseeFr/Lunatic/blob/2.7/src/use-lunatic/type.ts#L79-L187) that is updated through a [reducer](https://reactjs.org/docs/hooks-reference.html#usereducer) system. The [actions](https://github.com/InseeFr/Lunatic/blob/2.7/src/use-lunatic/actions.ts) affecting this state are limited:
 
 - An action `'use-lunatic/on-init'` allows initialization of the state from the data received as a parameter of the hook.
 - The actions `'use-lunatic/go-previous'`, `'use-lunatic/go-next'`, and `'use-lunatic/go-to-page'` are called during navigation using the methods returned by the hook.
 - The action `use-lunatic/handle-change` is the most important action and is called whenever data is changed in the questionnaire.
 
-All the [reducers corresponding to these actions are available here](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/use-lunatic/reducer/reducer.js). Generally, they are broken down into several methods depending on the part of the state they modify.
+All the [reducers corresponding to these actions are available here](https://github.com/InseeFr/Lunatic/blob/2.7/src/use-lunatic/reducer/reducer.ts). Generally, they are broken down into several methods depending on the part of the state they modify.
 
 ### Pages and Pager
 
@@ -148,7 +184,7 @@ At initialization, the questionnaire scenario is modeled as an object which is s
 
 ### VTL Execution
 
-Another important point of Lunatic is the execution of VTL expressions which allow making certain properties dynamic (labels, errors, etc.). This filling is done [when the state changes](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/use-lunatic/commons/use-components-from-state.js).
+Another important point of Lunatic is the execution of VTL expressions which allow making certain properties dynamic (labels, errors, etc.). This filling is done [when the state changes](https://github.com/InseeFr/Lunatic/blob/2.7/src/use-lunatic/commons/use-components-from-state.ts).
 
 To facilitate expression execution, an `executeExpression()` method is exposed in the Lunatic state. This method is accompanied by an `updateBindings()` method which allows updating internal values. This expression execution system uses a memoization system to not re-execute the same expression multiple times. When the `use-lunatic/handle-change` action is executed, the values ("bindings") are updated to memorize the values associated with the different VTL variables. Similarly, the values of calculated variables on which the modified variable depends are forgotten to refresh the value during the next execution.
 
@@ -158,9 +194,7 @@ To facilitate expression execution, an `executeExpression()` method is exposed i
 
 - 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
+- `2.7` branch is currently the most advanced branch
 
 ### Commits and feature branches
 

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) {
@@ -45,7 +46,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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 +53,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 || 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(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; }
+/**
+ * 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,15 +33,18 @@ 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 = exports["default"] = Errors;

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

@@ -1,11 +1,13 @@
 "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); }
 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(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; }
 (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/DatepickerField.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatepickerField = DatepickerField;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function DatepickerField(_ref) {
+  var label = _ref.label,
+    id = _ref.id,
+    description = _ref.description,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    max = _ref.max,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled;
+  var handleChange = function handleChange(e) {
+    if (!Number.isNaN(e.target.valueAsNumber) && (max && e.target.valueAsNumber > max || e.target.valueAsNumber < 1)) {
+      return;
+    }
+    onChange(e.target.valueAsNumber);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('lunaticDatepickerField', !max && 'lunaticDatepickerFieldLarge'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      htmlFor: id,
+      children: [label, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "lunaticDatepickerHint",
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      id: id,
+      type: "number",
+      min: 1,
+      max: max,
+      readOnly: readOnly,
+      disabled: disabled,
+      value: Number.isNaN(value) ? '' : value,
+      onChange: handleChange,
+      onFocus: function onFocus(e) {
+        return e.target.select();
+      }
+    })]
+  });
+}