@inseefr/lunatic 2.5.1-testRoundaboutFix → 2.5.2-beta

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

@@ -3,19 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComboBoxContainer = ComboBoxContainer;
+exports["default"] = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
+var _createCustomizableField = _interopRequireDefault(require("../../create-customizable-field"));
+var _errors = _interopRequireDefault(require("../errors"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ComboBoxContainer(_ref) {
   var children = _ref.children,
     className = _ref.className,
+    classNamePrefix = _ref.classNamePrefix,
     id = _ref.id,
     _ref$classStyle = _ref.classStyle,
-    classStyle = _ref$classStyle === void 0 ? 'default-style' : _ref$classStyle;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    id: "lunatic-combo-box-container-".concat(id),
-    className: (0, _classnames["default"])('lunatic-combo-box-container', className, classStyle),
-    children: children
+    classStyle = _ref$classStyle === void 0 ? 'default-style' : _ref$classStyle,
+    errors = _ref.errors;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    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
+    })]
   });
-}
+}
+var _default = (0, _createCustomizableField["default"])(ComboBoxContainer, 'ComboboxContainer');
+exports["default"] = _default;

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

@@ -2,13 +2,13 @@
 
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _comboBoxContainer = require("./combo-box-container");
+var _comboBoxContainer = _interopRequireDefault(require("./combo-box-container"));
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('ComboBoxContainer', function () {
   (0, _vitest.it)('renders with default styles when no classStyle prop is provided', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer.ComboBoxContainer, {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer["default"], {
         id: "test-id",
         children: "Content"
       })),
@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(container.firstChild).toHaveClass('default-style');
   });
   (0, _vitest.it)('renders with additional styles when classStyle prop is provided', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer.ComboBoxContainer, {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer["default"], {
         id: "test-id",
         classStyle: "custom-style",
         children: "Content"
@@ -26,7 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(container.firstChild).toHaveClass('custom-style');
   });
   (0, _vitest.it)('renders children inside the component', function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer.ComboBoxContainer, {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer["default"], {
         id: "test-id",
         children: "Content"
       })),
@@ -34,7 +34,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(getByText('Content')).toBeInTheDocument();
   });
   (0, _vitest.it)('passes className prop to the component', function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer.ComboBoxContainer, {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer["default"], {
         id: "test-id",
         className: "test-class",
         children: "Content"

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboBoxContentBox = ComboBoxContentBox;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _index = require("../../index");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ComboBoxContentBox(_ref) {
+  var children = _ref.children,
+    classNamePrefix = _ref.classNamePrefix,
+    focused = _ref.focused;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])("".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box"), {
+      focused: focused
+    }),
+    children: children
+  });
+}
+var _default = (0, _index.createCustomizableLunaticField)(ComboBoxContentBox, 'ComboboxContentBox');
+exports["default"] = _default;

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _keyboardKeyCodes = require("./state-management/reduce-on-keydown/keyboard-key-codes");
 var _index = require("../../index");
+var _comboBoxContentBox = _interopRequireDefault(require("./combo-box-content-box"));
 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); }
@@ -19,7 +20,8 @@ function ComboBoxContent(_ref) {
     focused = _ref.focused,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    onKeyDown = _ref.onKeyDown;
+    onKeyDown = _ref.onKeyDown,
+    classNamePrefix = _ref.classNamePrefix;
   var ref = (0, _react.useRef)(null);
   var onClick = (0, _react.useCallback)(function (e) {
     var _ref$current;
@@ -44,19 +46,17 @@ function ComboBoxContent(_ref) {
 
     onKeyDown(key);
   }, [onKeyDown]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])('lunatic-combo-box', {
-      focused: focused
-    }),
-    onFocus: onFocus,
-    onClick: onFocus,
-    onKeyDown: handleKeyDown,
-    ref: ref,
-    tabIndex: 0,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContentBox["default"], {
+    classNamePrefix: classNamePrefix,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])('lunatic-combo-box-content', {
+      className: (0, _classnames["default"])("".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-content"), {
         focused: focused
       }),
+      ref: ref,
+      tabIndex: 0,
+      onFocus: onFocus,
+      onClick: onFocus,
+      onKeyDown: handleKeyDown,
       children: children
     })
   });

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

@@ -12,10 +12,9 @@ var _stateManagement = require("./state-management");
 require("./combo-box.scss");
 var _selection = require("./selection/selection");
 var _panel = require("./panel/panel");
-var _comboBoxContainer = require("./combo-box-container");
+var _comboBoxContainer = _interopRequireDefault(require("./combo-box-container"));
 var _comboBoxContent = _interopRequireDefault(require("./combo-box-content"));
 var _label = _interopRequireDefault(require("../label"));
-var _errors = _interopRequireDefault(require("../errors"));
 var _index = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -33,6 +32,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var EMPTY_SEARCH = '';
 function ComboBox(_ref) {
   var className = _ref.className,
+    classNamePrefix = _ref.classNamePrefix,
     _ref$classStyle = _ref.classStyle,
     classStyle = _ref$classStyle === void 0 ? 'default-style' : _ref$classStyle,
     _ref$placeholder = _ref.placeholder,
@@ -73,12 +73,26 @@ function ComboBox(_ref) {
       getOptionValue: getOptionValue
     }));
   }, [options, value, getOptionValue]);
+
+  // This useEffect ensures that onSelect is called when selectedIndex changes
+  (0, _react.useEffect)(function () {
+    if (selectedIndex) {
+      var option = options[selectedIndex];
+      onSelect(getOptionValue(option));
+    }
+  }, [selectedIndex, options, getOptionValue, onSelect]);
   var onFocus = (0, _react.useCallback)(function () {
+    if (disabled) {
+      return;
+    }
     dispatch(_stateManagement.actions.onFocus());
-  }, []);
+  }, [disabled]);
   var onBlur = (0, _react.useCallback)(function () {
+    if (disabled) {
+      return;
+    }
     dispatch(_stateManagement.actions.onBlur());
-  }, []);
+  }, [disabled]);
   var handleSelect = (0, _react.useCallback)(function (index) {
     var indexNumber = parseInt(index, 10);
     var option = options[indexNumber];
@@ -97,16 +111,18 @@ function ComboBox(_ref) {
     dispatch(_stateManagement.actions.onDelete());
     onChange === null || onChange === void 0 ? void 0 : onChange(EMPTY_SEARCH);
   }, [onChange]);
+  var showClearButton = !disabled;
   if (messageError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "lunatic-combo-box-message-error",
       children: messageError
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContainer.ComboBoxContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContainer["default"], {
     id: id,
     classStyle: classStyle,
-    className: className,
+    classNamePrefix: classNamePrefix,
+    errors: errors,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_label["default"], {
       htmlFor: id,
       id: labelId,
@@ -117,6 +133,7 @@ function ComboBox(_ref) {
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
+      classNamePrefix: classNamePrefix,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
         labelRenderer: labelRenderer,
         placeholder: placeholder,
@@ -129,7 +146,8 @@ function ComboBox(_ref) {
         editable: editable,
         selectedIndex: selectedIndex,
         options: options,
-        onChange: handleChange
+        onChange: handleChange,
+        classNamePrefix: classNamePrefix
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.Panel, {
         optionRenderer: optionRenderer,
         options: options,
@@ -140,16 +158,13 @@ function ComboBox(_ref) {
         search: search,
         onSelect: handleSelect
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
+    }), showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       className: (0, _classnames["default"])({
         focused: focused
       }),
       search: search,
       onClick: onDelete,
       editable: editable
-    }), errors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_errors["default"], {
-      errors: errors,
-      activeId: id
     })]
   });
 }

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PanelContainer = PanelContainer;
+exports["default"] = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
+var _createCustomizableField = _interopRequireDefault(require("../../../create-customizable-field"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function PanelContainer(_ref) {
@@ -22,4 +23,6 @@ function PanelContainer(_ref) {
     role: "listbox",
     children: children
   });
-}
+}
+var _default = (0, _createCustomizableField["default"])(PanelContainer, 'ComboboxPanelContainer');
+exports["default"] = _default;

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

@@ -2,11 +2,12 @@
 
 var _react = require("@testing-library/react");
 var _vitest = require("vitest");
-var _panelContainer = require("./panel-container");
+var _panelContainer = _interopRequireDefault(require("./panel-container"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('PanelContainer', function () {
   (0, _vitest.it)('should render children', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_panelContainer.PanelContainer, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_panelContainer["default"], {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
@@ -20,7 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
   });
   (0, _vitest.it)('should set the id attribute', function () {
     var id = 'test-panel';
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
       id: id,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
@@ -29,7 +30,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     (0, _vitest.expect)(_react.screen.getByRole('listbox')).toHaveAttribute('id', "lunatic-combo-box-panel-".concat(id));
   });
   (0, _vitest.it)('should set the aria-label attribute', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
       })
@@ -37,7 +38,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     (0, _vitest.expect)(_react.screen.getByRole('listbox')).toHaveAttribute('aria-label', 'suggestions');
   });
   (0, _vitest.it)('should set the focused class when focused prop is true', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
       focused: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
@@ -46,7 +47,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     (0, _vitest.expect)(_react.screen.getByRole('listbox')).toHaveClass('focused');
   });
   (0, _vitest.it)('should set the expanded class when expanded prop is true', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
       expanded: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Panel = Panel;
 var _react = _interopRequireDefault(require("react"));
-var _panelContainer = require("./panel-container");
+var _panelContainer = _interopRequireDefault(require("./panel-container"));
 var _optionContainer = require("./option-container");
 var _comboBoxOption = _interopRequireDefault(require("./combo-box-option"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,7 +22,7 @@ function Panel(_ref) {
     onSelect = _ref.onSelect;
   var visibleOptions = expanded ? options : [];
   var ComboBoxOptionComponent = OptionRender !== null && OptionRender !== void 0 ? OptionRender : _comboBoxOption["default"];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
     expanded: expanded,
     focused: focused,
     id: "".concat(id, "-list"),

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

@@ -14,11 +14,12 @@ function SelectionContainer(_ref) {
     expanded = _ref.expanded,
     focused = _ref.focused,
     disabled = _ref.disabled,
-    labelId = _ref.labelId;
+    labelId = _ref.labelId,
+    classNamePrefix = _ref.classNamePrefix;
   var comboBoxId = "".concat(id);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     id: comboBoxId,
-    className: (0, _classnames["default"])('lunatic-combo-box-selection', {
+    className: (0, _classnames["default"])("".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-selection"), {
       focused: focused,
       disabled: disabled
     }),

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

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

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

@@ -8,6 +8,7 @@ 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"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LunaticDropdown(_ref) {
@@ -16,6 +17,7 @@ function LunaticDropdown(_ref) {
     options = _ref.options,
     writable = _ref.writable,
     disabled = _ref.disabled,
+    className = _ref.className,
     value = _ref.value,
     response = _ref.response,
     errors = _ref.errors,
@@ -48,7 +50,7 @@ function LunaticDropdown(_ref) {
       options: options,
       onSelect: onChange,
       value: value,
-      className: "lunatic-dropdown",
+      className: (0, _classnames["default"])(className, "lunatic-dropdown"),
       errors: errors,
       label: label
     })

package/lib/components/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ComponentSet", {
     return _componentSet["default"];
   }
 });
+Object.defineProperty(exports, "ConfirmationModal", {
+  enumerable: true,
+  get: function get() {
+    return _modal["default"];
+  }
+});
 Object.defineProperty(exports, "Datepicker", {
   enumerable: true,
   get: function get() {
@@ -205,4 +211,5 @@ var _summary = require("./summary");
 var _questionInformation = _interopRequireDefault(require("./questions/question-information"));
 var _questionContext = _interopRequireDefault(require("./questions/question-context"));
 var _questionExplication = _interopRequireDefault(require("./question-explication"));
+var _modal = _interopRequireDefault(require("./modal"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/components/modal/html/modal.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _commons = require("../../commons");
+var _reactDom = require("react-dom");
+require("./modal.scss");
+var _button = _interopRequireDefault(require("../../button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function Modal(props) {
+  var id = props.id,
+    label = props.label,
+    description = props.description,
+    goNextPage = props.goNextPage,
+    goPreviousPage = props.goPreviousPage;
+  var first = (0, _react.useRef)(null);
+  var last = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _first$current;
+    var focusOnInit = first === null || first === void 0 || (_first$current = first.current) === null || _first$current === void 0 ? void 0 : _first$current.lastElementChild;
+    focusOnInit.focus();
+  }, [first]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var _first$current2, _last$current;
+    var firstButtonToFocus = first === null || first === void 0 || (_first$current2 = first.current) === null || _first$current2 === void 0 ? void 0 : _first$current2.lastElementChild;
+    var lastButtonToFocus = last === null || last === void 0 || (_last$current = last.current) === null || _last$current === void 0 ? void 0 : _last$current.lastElementChild;
+    if (e.key === 'Tab') {
+      if (e.shiftKey) {
+        if (document.activeElement === firstButtonToFocus) {
+          lastButtonToFocus.focus();
+          e.nativeEvent.preventDefault();
+        }
+      } else if (document.activeElement === lastButtonToFocus) {
+        firstButtonToFocus.focus();
+        e.nativeEvent.preventDefault();
+      }
+    }
+  }, [first, last]);
+  var handleNextClick = (0, _react.useCallback)(function () {
+    goNextPage();
+  }, [goNextPage]);
+  var handlePreviousClick = (0, _react.useCallback)(function () {
+    goPreviousPage();
+  }, [goPreviousPage]);
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("dialog", {
+    className: "lunatic-modal",
+    open: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "modal-content",
+      onKeyDown: onKeyDown,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        id: id,
+        className: "lunatic-modal-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "close-button",
+          ref: first,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+            onClick: handlePreviousClick,
+            children: "fermer x"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "modal-message",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: description
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "cancel-confirm-buttons",
+          ref: last,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+            onClick: handlePreviousClick,
+            children: "Annuler"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+            onClick: handleNextClick,
+            children: "Je confirme"
+          })]
+        })]
+      })
+    })
+  }), document.body);
+}
+var _default = (0, _commons.createCustomizableLunaticField)(Modal, 'Modal');
+exports["default"] = _default;

package/lib/components/modal/html/modal.scss

@@ -0,0 +1,43 @@
+.lunatic-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(50, 50, 50, 0.5);
+    z-index: 101;
+  
+    .modal-content {
+      background-color: snow;
+      height: fit-content;
+      width: 50%;
+      margin: auto;
+      padding: 0.5rem;
+      margin-top: 38vh;
+      display: flex;
+      flex-direction: column;
+      border-radius: 8px;
+      overflow-wrap: break-word;
+      .lunatic-modal-container {
+        .close-button {
+          color: blue;
+          display: flex;
+          justify-content: right;
+        }
+      }
+      .body {
+        color: black;
+        font-size: 16px;
+        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+      }
+  
+      .modal-buttons {
+        align-self: end;
+        margin: 0 0.2em 0.2em 0;
+        :first-child {
+          margin-right: 0.5em;
+        }
+      }
+    }
+  }
+  

package/lib/components/modal/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _lunaticModal["default"];
+  }
+});
+var _lunaticModal = _interopRequireDefault(require("./lunatic-modal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _modal = _interopRequireDefault(require("./html/modal"));
+var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../commons/components/lunatic-component-without-label"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function empty() {}
+function LunaticModal(props) {
+  var id = props.id,
+    label = props.label,
+    description = props.description,
+    goToPage = props.goToPage,
+    page = props.page,
+    goNextPage = props.goNextPage,
+    goPreviousPage = props.goPreviousPage;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticComponentWithoutLabel["default"], {
+    id: id,
+    label: label,
+    handleChange: empty,
+    value: undefined,
+    description: description,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal["default"], {
+      id: id,
+      label: label,
+      page: page,
+      description: description,
+      goToPage: goToPage,
+      goNextPage: goNextPage,
+      goPreviousPage: goPreviousPage
+    })
+  });
+}
+var _default = LunaticModal;
+exports["default"] = _default;

package/lib/components/pairwise-links/orchestrator.js

@@ -25,6 +25,7 @@ function LinksOrchestrator(props) {
     handleChange = props.handleChange,
     features = props.features,
     missing = props.missing,
+    className = props.className,
     shortcut = props.shortcut,
     preferences = props.preferences,
     executeExpression = props.executeExpression,
@@ -60,6 +61,7 @@ function LinksOrchestrator(props) {
         /** */,
         features: features,
         shortcut: shortcut,
+        className: className,
         preferences: preferences,
         missing: missing,
         errors: errors,

package/lib/components/pairwise-links/pairwise-links.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _orchestrator = _interopRequireDefault(require("./orchestrator"));
 var _declarations = require("../declarations");
 var _nothingToDisplay = _interopRequireDefault(require("../commons/components/nothing-to-display"));
@@ -42,6 +41,7 @@ var PairwiseLinks = function PairwiseLinks(_ref) {
       handleChange: handleChange,
       nbRows: nbRows,
       value: value,
+      className: "pairwise-link",
       management: management,
       missing: missing,
       shortcut: shortcut,

package/lib/components/pairwise-links/row.js

@@ -26,6 +26,7 @@ function Row(_ref) {
     missing = _ref.missing,
     shortcut = _ref.shortcut,
     management = _ref.management,
+    className = _ref.className,
     preferences = _ref.preferences,
     executeExpression = _ref.executeExpression,
     linksIterations = _ref.linksIterations,
@@ -61,6 +62,7 @@ function Row(_ref) {
         features: features,
         missing: missing,
         shortcut: shortcut,
+        className: className,
         management: management,
         value: value,
         id: idComponent,