@inseefr/lunatic 2.5.2-rc1-beta → 2.6.0-rc.1

package/lib/components/dropdown/html/dropdown.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _commons = require("../../commons");
 var _dropdownSimple = _interopRequireDefault(require("./dropdown-simple"));
 var _dropdownWritable = _interopRequireDefault(require("./dropdown-writable"));
@@ -21,12 +20,14 @@ function Dropdown(_ref) {
     value = _ref.value,
     description = _ref.description,
     label = _ref.label,
-    errors = _ref.errors;
+    errors = _ref.errors,
+    readOnly = _ref.readOnly;
   if (writable) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownWritable["default"], {
       id: id,
       className: className,
       disabled: disabled,
+      readOnly: readOnly,
       options: options,
       onSelect: onSelect,
       value: value,
@@ -39,6 +40,7 @@ function Dropdown(_ref) {
     id: id,
     className: className,
     disabled: disabled,
+    readOnly: readOnly,
     options: options,
     onSelect: onSelect,
     value: value,

package/lib/components/dropdown/html/dropdown.spec.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _vitest = require("vitest");
+var _dropdown = _interopRequireDefault(require("./dropdown"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('Dropdown', function () {
+  var mockOnSelect = _vitest.vi.fn();
+  (0, _vitest.beforeEach)(function () {
+    mockOnSelect.mockClear();
+  });
+  (0, _vitest.it)('renders without crashing', function () {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown["default"], {
+        value: "toto",
+        id: "dropdown",
+        "aria-labelledby": "dropdown",
+        onSelect: mockOnSelect,
+        options: [{
+          value: 'toto',
+          description: 'toto',
+          label: 'toto'
+        }]
+      })),
+      container = _render.container;
+    (0, _vitest.expect)(container).toMatchSnapshot();
+  });
+  (0, _vitest.it)('should handle readOnly', function () {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown["default"], {
+        id: "dropdown",
+        value: "toto",
+        readOnly: true,
+        onSelect: mockOnSelect,
+        options: [{
+          value: 'toto',
+          description: 'toto',
+          label: 'toto label'
+        }]
+      })),
+      container = _render2.container;
+    (0, _vitest.expect)(container).toMatchSnapshot();
+    var selection = container.querySelector('.lunatic-combo-box-content');
+    selection.focus();
+    (0, _vitest.expect)(selection).toHaveFocus();
+    var span = selection === null || selection === void 0 ? void 0 : selection.querySelector('span');
+    (0, _vitest.expect)(span).toHaveTextContent('toto label');
+  });
+});

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

@@ -4,7 +4,6 @@ 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 _useOnHandleChange = _interopRequireDefault(require("../commons/use-on-handle-change"));
 var _dropdown = _interopRequireDefault(require("./html/dropdown"));
@@ -27,7 +26,8 @@ function LunaticDropdown(_ref) {
     missing = _ref.missing,
     missingResponse = _ref.missingResponse,
     management = _ref.management,
-    description = _ref.description;
+    description = _ref.description,
+    readOnly = _ref.readOnly;
   var onChange = (0, _useOnHandleChange["default"])({
     handleChange: handleChange,
     response: response,
@@ -50,9 +50,10 @@ function LunaticDropdown(_ref) {
       options: options,
       onSelect: onChange,
       value: value,
-      className: (0, _classnames["default"])(className, "lunatic-dropdown"),
+      className: (0, _classnames["default"])(className, 'lunatic-dropdown'),
       errors: errors,
-      label: label
+      label: label,
+      readOnly: readOnly
     })
   });
 }

package/lib/components/duration/getDurationFromValue.js

@@ -56,7 +56,6 @@ var matchFromFormat = function matchFromFormat(value, format) {
     throw new Error("Invalid duration value \"".concat(value, "\" does not match the format \"").concat(format, "\""));
   }
   var _match = _toArray(match),
-    _ = _match[0],
     matches = _match.slice(1);
   return matches.map(function (v) {
     return parseInt(v, 10);

package/lib/components/filter-description/component.js

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

package/lib/components/index.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "CheckboxOne", {
 Object.defineProperty(exports, "ComponentSet", {
   enumerable: true,
   get: function get() {
-    return _componentSet["default"];
+    return _lunaticComponentSet.LunaticComponentSet;
   }
 });
 Object.defineProperty(exports, "ConfirmationModal", {
@@ -84,7 +84,7 @@ Object.defineProperty(exports, "InputNumber", {
 Object.defineProperty(exports, "Loop", {
   enumerable: true,
   get: function get() {
-    return _loop["default"];
+    return _loop.Loop;
   }
 });
 Object.defineProperty(exports, "Modal", {
@@ -126,7 +126,7 @@ Object.defineProperty(exports, "Radio", {
 Object.defineProperty(exports, "RosterForLoop", {
   enumerable: true,
   get: function get() {
-    return _loop["default"];
+    return _rosterForLoop.RosterForLoop;
   }
 });
 Object.defineProperty(exports, "Roundabout", {
@@ -193,10 +193,11 @@ var _dropdown = _interopRequireDefault(require("./dropdown"));
 var _input = _interopRequireDefault(require("./input"));
 var _inputNumber = _interopRequireDefault(require("./input-number"));
 var _filterDescription = _interopRequireDefault(require("./filter-description"));
-var _loop = _interopRequireDefault(require("./loop"));
+var _loop = require("./loop/loop");
 var _modalControls = _interopRequireDefault(require("./modal-controls"));
 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"));
 var _subsequence = _interopRequireDefault(require("./subsequence"));
 var _suggester = _interopRequireDefault(require("./suggester"));
@@ -205,7 +206,7 @@ var _textarea = _interopRequireDefault(require("./textarea"));
 var _suggesterLoaderWidget = _interopRequireDefault(require("./suggester-loader-widget"));
 var _roundabout = _interopRequireDefault(require("./roundabout"));
 var _table = _interopRequireDefault(require("./table"));
-var _componentSet = _interopRequireDefault(require("./component-set"));
+var _lunaticComponentSet = require("./component-set/lunatic-component-set");
 var _duration = _interopRequireDefault(require("./duration"));
 var _summary = require("./summary");
 var _questionInformation = _interopRequireDefault(require("./questions/question-information"));

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

@@ -0,0 +1,34 @@
+// Vitest Snapshot v1
+
+exports[`Input > renders without crashing 1`] = `
+<div>
+  <div
+    class="lunatic-input"
+  >
+    <input
+      aria-labelledby="label-input"
+      autocomplete="off"
+      id="input"
+      type="text"
+      value="input"
+    />
+  </div>
+</div>
+`;
+
+exports[`Input > should handle readOnly 1`] = `
+<div>
+  <div
+    class="lunatic-input"
+  >
+    <input
+      aria-labelledby="label-number"
+      autocomplete="off"
+      id="number"
+      readonly=""
+      type="text"
+      value="toto"
+    />
+  </div>
+</div>
+`;

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

@@ -1,17 +1,14 @@
 "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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _commons = require("../../commons");
 require("./input.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function Input(_ref) {
   var value = _ref.value,
@@ -22,7 +19,8 @@ function Input(_ref) {
     label = _ref.label,
     description = _ref.description,
     id = _ref.id,
-    errors = _ref.errors;
+    errors = _ref.errors,
+    readOnly = _ref.readOnly;
   var labelId = "label-".concat(id);
   var handleChange = (0, _react.useCallback)(function (e) {
     var value = e.target.value;
@@ -41,6 +39,7 @@ function Input(_ref) {
       autoComplete: "off",
       type: "text",
       disabled: disabled,
+      readOnly: readOnly,
       value: checkValue(value),
       onChange: handleChange,
       "aria-required": required,

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

@@ -0,0 +1,81 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _vitest = require("vitest");
+var _input = _interopRequireDefault(require("./input"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('Input', function () {
+  var mockOnChange = _vitest.vi.fn();
+  (0, _vitest.beforeEach)(function () {
+    mockOnChange.mockClear();
+  });
+  (0, _vitest.it)('renders without crashing', function () {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
+        value: 'input',
+        id: "input",
+        onChange: mockOnChange,
+        errors: undefined,
+        description: "description"
+      })),
+      container = _render.container;
+    (0, _vitest.expect)(container).toMatchSnapshot();
+  });
+  (0, _vitest.it)('renders label and input', function () {
+    var labelText = 'Enter a number';
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
+        id: "number",
+        label: labelText,
+        onChange: mockOnChange,
+        errors: undefined
+      })),
+      container = _render2.container;
+    var label = _react.screen.getByText(labelText);
+    var input = container.querySelector('input[type="text"]');
+    (0, _vitest.expect)(label).toBeInTheDocument();
+    (0, _vitest.expect)(input).toBeInTheDocument();
+  });
+  (0, _vitest.it)('calls onChange with parsed value', function () {
+    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
+        id: "number",
+        onChange: mockOnChange,
+        errors: undefined
+      })),
+      container = _render3.container;
+    var input = container.querySelector('input[type="text"]');
+    _react.fireEvent.change(input, {
+      target: {
+        value: 'Dupont'
+      }
+    });
+    (0, _vitest.expect)(mockOnChange).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(mockOnChange).toHaveBeenCalledWith('Dupont');
+  });
+  (0, _vitest.it)('disables input when disabled prop is true', function () {
+    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
+        id: "number",
+        disabled: true,
+        onChange: mockOnChange,
+        errors: undefined
+      })),
+      container = _render4.container;
+    var input = container.querySelector('input[type="text"]');
+    (0, _vitest.expect)(input).toBeDisabled();
+  });
+  (0, _vitest.it)('should handle readOnly', function () {
+    var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
+        id: "number",
+        value: "toto",
+        readOnly: true,
+        onChange: mockOnChange,
+        errors: undefined
+      })),
+      container = _render5.container;
+    (0, _vitest.expect)(container).toMatchSnapshot();
+    var input = container.querySelector('input[type="text"]');
+    (0, _vitest.expect)(input).toHaveAttribute('readonly');
+    input.focus();
+    (0, _vitest.expect)(input).toHaveFocus();
+    (0, _vitest.expect)(input).toHaveValue('toto');
+  });
+});

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

@@ -24,7 +24,8 @@ function LunaticInput(props) {
     management = props.management,
     description = props.description,
     required = props.required,
-    maxLength = props.maxLength;
+    maxLength = props.maxLength,
+    readOnly = props.readOnly;
   var onChange = (0, _useOnHandleChange["default"])({
     handleChange: handleChange,
     response: response,
@@ -48,7 +49,8 @@ function LunaticInput(props) {
       disabled: disabled,
       errors: errors,
       required: required,
-      maxLength: maxLength
+      maxLength: maxLength,
+      readOnly: readOnly
     })
   });
 }

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

@@ -1,94 +1,42 @@
 // Vitest Snapshot v1
 
 exports[`InputNumber > renders without crashing 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="lunatic-input-number"
-      >
-        <input
-          aria-labelledby="label-input"
-          class=""
-          id="input"
-          inputmode="numeric"
-          lang="en"
-          required=""
-          step="1"
-          type="text"
-          value=""
-        />
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="lunatic-input-number"
-    >
-      <input
-        aria-labelledby="label-input"
-        class=""
-        id="input"
-        inputmode="numeric"
-        lang="en"
-        required=""
-        step="1"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+<div>
+  <div
+    class="lunatic-input-number"
+  >
+    <input
+      aria-labelledby="label-input"
+      class=""
+      id="input"
+      inputmode="numeric"
+      lang="en"
+      required=""
+      step="1"
+      type="text"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`InputNumber > should handle readOnly 1`] = `
+<div>
+  <div
+    class="lunatic-input-number"
+  >
+    <input
+      aria-labelledby="label-number"
+      class=""
+      id="number"
+      inputmode="numeric"
+      lang="en"
+      readonly=""
+      required=""
+      step="1"
+      type="text"
+      value="123"
+    />
+  </div>
+</div>
 `;

package/lib/components/input-number/html/input-number-thousand.js

@@ -21,6 +21,7 @@ var InputNumberThousand = function InputNumberThousand(_ref) {
     onChange = _ref.onChange,
     value = _ref.value,
     disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
     required = _ref.required,
     labelId = _ref.labelId,
     min = _ref.min,
@@ -53,6 +54,7 @@ var InputNumberThousand = function InputNumberThousand(_ref) {
     step: step,
     "aria-labelledby": labelId,
     disabled: disabled,
+    readOnly: readOnly,
     required: required,
     lang: "en",
     isAllowed: isAllowed,

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

@@ -18,6 +18,8 @@ function InputNumber(_ref) {
     onChange = _ref$onChange === void 0 ? _function.voidFunction : _ref$onChange,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     min = _ref.min,
     max = _ref.max,
     _ref$decimals = _ref.decimals,
@@ -41,6 +43,7 @@ function InputNumber(_ref) {
       value: value,
       onChange: onChange,
       disabled: disabled,
+      readOnly: readOnly,
       required: required,
       labelId: labelId,
       min: min,

package/lib/components/input-number/html/input-number.spec.js

@@ -11,53 +11,54 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     mockOnChange.mockClear();
   });
   (0, _vitest.it)('renders without crashing', function () {
-    var container = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
-      value: 'input',
-      id: "input",
-      "aria-labelledby": "input"
-    }));
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+        value: 'input',
+        id: "input",
+        "aria-labelledby": "input"
+      })),
+      container = _render.container;
     (0, _vitest.expect)(container).toMatchSnapshot();
   });
   (0, _vitest.it)('renders label and input', function () {
     var labelText = 'Enter a number';
-    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
         id: "number",
         label: labelText,
         onChange: mockOnChange
       })),
-      container = _render.container;
+      container = _render2.container;
     var label = _react.screen.getByText(labelText);
     var input = container.querySelector('input[type="text"]');
     (0, _vitest.expect)(label).toBeInTheDocument();
     (0, _vitest.expect)(input).toBeInTheDocument();
   });
   (0, _vitest.it)('renders with value', function () {
-    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
         id: "number",
         value: 10,
         onChange: mockOnChange
       })),
-      container = _render2.container;
+      container = _render3.container;
     var input = container.querySelector('input[type="text"]');
     (0, _vitest.expect)(input).toHaveValue('10');
   });
   (0, _vitest.it)('renders with big value', function () {
-    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
         id: "number",
         value: 10000.45,
         decimals: 2,
         onChange: mockOnChange
       })),
-      container = _render3.container;
+      container = _render4.container;
     var input = container.querySelector('input[type="text"]');
     (0, _vitest.expect)(input).toHaveValue('10,000.45');
   });
   (0, _vitest.it)('calls onChange with parsed value', function () {
-    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+    var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
         id: "number",
         onChange: mockOnChange
       })),
-      container = _render4.container;
+      container = _render5.container;
     var input = container.querySelector('input[type="text"]');
     _react.fireEvent.change(input, {
       target: {
@@ -68,35 +69,50 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(mockOnChange).toHaveBeenCalledWith(10);
   });
   (0, _vitest.it)('renders unit element if provided', function () {
-    var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+    var _render6 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
         id: "input-number-test",
         value: 5,
         label: "Input Number",
         labelId: "input-number-label",
         unit: "kg"
       })),
-      getByText = _render5.getByText;
+      getByText = _render6.getByText;
     var unit = getByText('kg');
     (0, _vitest.expect)(unit).toBeInTheDocument();
   });
   (0, _vitest.it)('disables input when disabled prop is true', function () {
-    var _render6 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+    var _render7 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
         id: "number",
         disabled: true,
         onChange: mockOnChange
       })),
-      container = _render6.container;
+      container = _render7.container;
     var input = container.querySelector('input[type="text"]');
     (0, _vitest.expect)(input).toBeDisabled();
   });
+  (0, _vitest.it)('should handle readOnly', function () {
+    var _render8 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+        id: "number",
+        value: 123,
+        readOnly: true,
+        onChange: mockOnChange
+      })),
+      container = _render8.container;
+    (0, _vitest.expect)(container).toMatchSnapshot();
+    var input = container.querySelector('input[type="text"]');
+    (0, _vitest.expect)(input).toHaveAttribute('readonly');
+    input.focus();
+    (0, _vitest.expect)(input).toHaveFocus();
+    (0, _vitest.expect)(input).toHaveValue('123');
+  });
   (0, _vitest.it)('renders with unit', function () {
-    var _render7 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
+    var _render9 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputNumber["default"], {
         id: "number",
         value: 10,
         unit: "kg",
         onChange: mockOnChange
       })),
-      container = _render7.container;
+      container = _render9.container;
     var unit = container.querySelector('span');
     (0, _vitest.expect)(unit).toHaveTextContent('kg');
   });

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

@@ -49,7 +49,8 @@ function LunaticInputNumber(props) {
       id: id,
       value: value,
       label: label,
-      disabled: disabled || readOnly,
+      disabled: disabled,
+      readOnly: readOnly,
       min: min,
       max: max,
       decimals: decimals,