@inseefr/lunatic 2.5.1-testRoundaboutFix → 2.5.2-rc1-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/component-set/html/component-set-components.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _commons = require("../../commons");
 var _componentSetComponentContainer = _interopRequireDefault(require("./component-set-component-container"));
+var _getComponentValue = require("../../../utils/get-component-value");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["components", "componentClassName", "className", "value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -17,45 +18,26 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-/**
- * Extract the value associated with a component
- */
-function getComponentValue(component, value) {
-  if (hasResponse(component) && component.response.name in value) {
-    var _value$component$resp;
-    return (_value$component$resp = value[component.response.name]) !== null && _value$component$resp !== void 0 ? _value$component$resp : '';
-  }
-  return undefined;
-}
-
-/**
- * Narrow the type of the component
- */
-function hasResponse(component) {
-  return 'response' in component;
-}
 function ComponentSetComponents(_ref) {
   var components = _ref.components,
     componentClassName = _ref.componentClassName,
     className = _ref.className,
-    value = _ref.value,
+    valueMap = _ref.value,
     props = _objectWithoutProperties(_ref, _excluded);
   if (!Array.isArray(components)) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: components.map(function (component) {
-      var id = component.id;
-      var componentValue = getComponentValue(component, value);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentSetComponentContainer["default"], {
         className: className,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.OrchestratedComponent, _objectSpread(_objectSpread({}, props), {}, {
           component: component,
-          id: id,
+          id: component.id,
           className: componentClassName,
-          value: componentValue
+          value: (0, _getComponentValue.getComponentValue)(component, valueMap)
         }))
-      }, id);
+      }, component.id);
     })
   });
 }

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/loop/block-for-loop/row.js

@@ -1,15 +1,16 @@
 "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 _react = _interopRequireWildcard(require("react"));
 var _commons = require("../../commons");
+var _getComponentValue = require("../../../utils/get-component-value");
 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 _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); }
 function Row(_ref) {
   var components = _ref.components,
     _ref$valueMap = _ref.valueMap,
@@ -31,16 +32,8 @@ function Row(_ref) {
   }, [handleChange, rowIndex]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: components.map(function (component) {
-      var id = component.id;
-      var idComponent = "".concat(id, "-").concat(rowIndex);
-      var value = undefined;
-      if (hasResponse(component)) {
-        var name = component.response.name;
-        var valueArray = valueMap[name];
-        if (Array.isArray(valueArray)) {
-          value = valueArray[rowIndex] || '';
-        }
-      }
+      var id = "".concat(component.id, "-").concat(rowIndex);
+      var value = (0, _getComponentValue.getComponentValue)(component, valueMap, rowIndex);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.OrchestratedComponent, {
         component: component,
         handleChange: handleChangeRow,
@@ -49,18 +42,15 @@ function Row(_ref) {
         shortcut: shortcut,
         management: management,
         value: value,
-        id: idComponent,
+        id: id,
         preferences: preferences,
         iteration: rowIndex,
         executeExpression: executeExpression,
         errors: errors,
         disabled: disabled
-      }, idComponent);
+      }, id);
     })
   });
 }
-function hasResponse(component) {
-  return !!component && _typeof(component) === 'object' && 'response' in component;
-}
 var _default = Row;
 exports["default"] = _default;

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;