@inseefr/lunatic 2.7.20 → 3.0.0-rc.5

package/lib/components/{commons/components/combo-box/selection/combo-box-label-selection.spec.js → shared/Combobox/Selection/ComboboxLabelSelection.spec.js}

@@ -1,11 +1,9 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _comboBoxLabelSelection = _interopRequireDefault(require("./combo-box-label-selection"));
+var _react = require("@testing-library/react");
+var _ComboboxLabelSelection = require("./ComboboxLabelSelection");
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('DefaultLabelRenderer', function () {
   (0, _vitest.describe)('DefaultLabelRenderer', function () {
     var option = {
@@ -14,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       label: 'Label'
     };
     (0, _vitest.it)('should render with selected option', function () {
-      var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
+      var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxLabelSelection.ComboboxLabelSelection, {
           option: option,
           placeholder: "Select an option"
         })),
@@ -23,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       (0, _vitest.expect)(getByText(expectedContent)).toBeInTheDocument();
     });
     (0, _vitest.it)('should render with placeholder', function () {
-      var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
+      var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxLabelSelection.ComboboxLabelSelection, {
           option: null,
           placeholder: "Select an option"
         })),
@@ -31,7 +29,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       (0, _vitest.expect)(getByText('Select an option')).toBeInTheDocument();
     });
     (0, _vitest.it)('should render with search value', function () {
-      var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
+      var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxLabelSelection.ComboboxLabelSelection, {
           option: null,
           search: "Search value",
           placeholder: "Select an option"

package/lib/components/shared/Combobox/Selection/ComboboxSelection.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxSelection = ComboboxSelection;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ComboboxLabelSelection = require("./ComboboxLabelSelection");
+var _ComboboxInput = require("./ComboboxInput");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/**
+ * Label displayed when a value is selected in the ComboBox
+ * This label can either be an input (when editable or expanded) or a simple span
+ */
+function ComboboxSelection(_ref) {
+  var labelRenderer = _ref.labelRenderer,
+    placeholder = _ref.placeholder,
+    search = _ref.search,
+    expanded = _ref.expanded,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    focused = _ref.focused,
+    _onChange = _ref.onChange,
+    selectedIndex = _ref.selectedIndex,
+    options = _ref.options,
+    editable = _ref.editable,
+    labelId = _ref.labelId,
+    id = _ref.id,
+    classNamePrefix = _ref.classNamePrefix,
+    invalid = _ref.invalid;
+  var showLabel = !editable || !expanded;
+  var selectedOption = selectedIndex !== undefined ? options[selectedIndex] : undefined;
+  var LabelSelectionComponent = labelRenderer !== null && labelRenderer !== void 0 ? labelRenderer : _ComboboxLabelSelection.ComboboxLabelSelection;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    id: id,
+    className: (0, _classnames["default"])("".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-selection"), {
+      focused: focused,
+      disabled: disabled
+    }),
+    role: "combobox",
+    "aria-controls": 'todo',
+    "aria-haspopup": "listbox",
+    "aria-expanded": expanded,
+    "aria-autocomplete": "list",
+    "aria-owns": id,
+    "aria-labelledby": labelId,
+    children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelSelectionComponent, {
+      option: selectedOption,
+      placeholder: placeholder,
+      search: search,
+      disabled: disabled,
+      readOnly: readOnly
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxInput.ComboboxInput, {
+      invalid: invalid,
+      id: "combobox-input-".concat(id),
+      className: "lunatic-combo-box-input",
+      onChange: function onChange(e) {
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
+      },
+      value: search,
+      placeholder: placeholder,
+      disabled: disabled,
+      readOnly: readOnly,
+      focused: focused
+    })
+  });
+}

package/lib/components/{commons/components/combo-box/selection/selection.spec.js → shared/Combobox/Selection/ComboboxSelection.spec.js}

@@ -1,7 +1,7 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-var _selection = require("./selection");
+var _ComboboxSelection = require("./ComboboxSelection");
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
 var options = [{
@@ -16,14 +16,14 @@ var options = [{
 }];
 (0, _vitest.describe)('Selection component', function () {
   (0, _vitest.it)('should render correctly with default props', function () {
-    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxSelection.ComboboxSelection, {
         options: options
       })),
       container = _render.container;
     (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
   });
   (0, _vitest.it)('should render correctly when it is editable', function () {
-    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxSelection.ComboboxSelection, {
         options: options,
         editable: true
       })),
@@ -31,7 +31,7 @@ var options = [{
     (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
   });
   (0, _vitest.it)('should render correctly when it is expanded', function () {
-    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
+    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxSelection.ComboboxSelection, {
         options: options,
         expanded: true
       })),
@@ -39,7 +39,7 @@ var options = [{
     (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
   });
   (0, _vitest.it)('should render correctly when it is disabled', function () {
-    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
+    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxSelection.ComboboxSelection, {
         options: options,
         disabled: true,
         placeholder: "hello!"
@@ -48,7 +48,7 @@ var options = [{
     (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
   });
   (0, _vitest.it)('should render the selected option when there is a selection', function () {
-    var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
+    var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxSelection.ComboboxSelection, {
         options: options,
         selectedIndex: 0,
         expanded: false
@@ -57,7 +57,7 @@ var options = [{
     (0, _vitest.expect)(getByText('apple - Apple')).toBeInTheDocument();
   });
   (0, _vitest.it)('should not render the input when it is not editable', function () {
-    var _render6 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
+    var _render6 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxSelection.ComboboxSelection, {
         options: options,
         placeholder: "Search fruits",
         editable: false

package/lib/components/{commons/components/combo-box/selection/__snapshots__/selection.spec.tsx.snap → shared/Combobox/Selection/__snapshots__/ComboboxSelection.spec.tsx.snap}

@@ -5,9 +5,7 @@ exports[`Selection component > should render correctly when it is disabled 1`] =
   aria-autocomplete="list"
   aria-controls="todo"
   aria-haspopup="listbox"
-  aria-owns="idUndefined"
-  class="lunatic-combo-box-selection"
-  id="idUndefined"
+  class="lunatic-combo-box-selection disabled"
   role="combobox"
 >
   <div
@@ -27,9 +25,7 @@ exports[`Selection component > should render correctly when it is editable 1`] =
   aria-autocomplete="list"
   aria-controls="todo"
   aria-haspopup="listbox"
-  aria-owns="idUndefined"
   class="lunatic-combo-box-selection"
-  id="idUndefined"
   role="combobox"
 >
   <div
@@ -48,9 +44,7 @@ exports[`Selection component > should render correctly when it is expanded 1`] =
   aria-controls="todo"
   aria-expanded="true"
   aria-haspopup="listbox"
-  aria-owns="idUndefined"
   class="lunatic-combo-box-selection"
-  id="idUndefined"
   role="combobox"
 >
   <div
@@ -68,9 +62,7 @@ exports[`Selection component > should render correctly with default props 1`] =
   aria-autocomplete="list"
   aria-controls="todo"
   aria-haspopup="listbox"
-  aria-owns="idUndefined"
   class="lunatic-combo-box-selection"
-  id="idUndefined"
   role="combobox"
 >
   <div

package/lib/components/shared/Combobox/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/components/{commons/components/errors/errors.js → shared/ComponentErrors/ComponentErrors.js}

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.ComponentErrors = ComponentErrors;
 exports.getComponentErrors = getComponentErrors;
-require("./errors.scss");
+require("./ComponentErrors.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,14 +16,16 @@ 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;
-  if (!errors) {
+function ComponentErrors(_ref) {
+  var errors = _ref.errors,
+    componentId = _ref.componentId;
+  var componentErrors = Array.isArray(errors) ? errors : getComponentErrors(errors, componentId);
+  if (!componentErrors) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "lunatic-errors",
-    children: errors.map(function (_ref2) {
+    children: componentErrors.map(function (_ref2) {
       var id = _ref2.id,
         errorMessage = _ref2.errorMessage;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -46,5 +48,4 @@ function getComponentErrors(errors, componentId) {
     return activeErrors[1];
   }
   return undefined;
-}
-var _default = exports["default"] = Errors;
+}

package/lib/components/shared/ComponentErrors/ComponentErrors.spec.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _vitest = require("vitest");
+var _ComponentErrors = require("./ComponentErrors");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('Errors component', function () {
+  var errors = {
+    id1: [{
+      id: 'error1',
+      errorMessage: 'Error 1 message',
+      criticality: 'ERROR',
+      typeOfControl: 'CONSISTENCY'
+    }],
+    id2: [{
+      id: 'error2',
+      errorMessage: 'Error 2 message',
+      criticality: 'ERROR',
+      typeOfControl: 'CONSISTENCY'
+    }, {
+      id: 'error3',
+      errorMessage: 'Error 3 message',
+      criticality: 'ERROR',
+      typeOfControl: 'CONSISTENCY'
+    }]
+  };
+  (0, _vitest.it)('renders null when no active errors', function () {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+        errors: errors,
+        componentId: "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)(_ComponentErrors.ComponentErrors, {
+        errors: errors,
+        componentId: "id2"
+      })),
+      getByText = _render2.getByText;
+    (0, _vitest.expect)(getByText('Error 2 message')).toBeInTheDocument();
+    (0, _vitest.expect)(getByText('Error 3 message')).toBeInTheDocument();
+  });
+});

package/lib/components/{commons/components/lunatic-component-without-label.js → shared/ComponentWrapper.js}

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _declarations = require("../../declarations");
-var _fieldContainer = _interopRequireDefault(require("./field-container"));
-var _missing = _interopRequireDefault(require("./missing"));
-var _react = _interopRequireDefault(require("react"));
-var _variableStatus = _interopRequireDefault(require("./variable-status"));
+exports.ComponentWrapper = ComponentWrapper;
+var _Missing = require("./Missing/Missing");
+var _VariableStatus = require("./VariableStatus/VariableStatus");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Declarations = require("./Declarations/Declarations");
+var _function = require("../../utils/function");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
@@ -17,43 +17,52 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function LunaticComponent(props) {
+/**
+ * Wrapper around Lunatic components, handle Declarations and missing buttons
+ *
+ * ## The structure :
+ *
+ * |--------------------------|
+ * |    DeclarationBefore     |
+ * |__________________________|
+ * |--------------------------|
+ * |        Component         |
+ * |__________________________|
+ * |--------------------------|
+ * |     Missing Buttons      |
+ * |__________________________|
+ */
+function ComponentWrapper(props) {
   var id = props.id,
     declarations = props.declarations,
     children = props.children,
     management = props.management,
-    description = props.description,
     handleChange = props.handleChange;
   var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsBeforeText, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+      type: "BEFORE_QUESTION_TEXT",
       declarations: declarations,
       id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fieldContainer["default"], {
-      children: /*#__PURE__*/_react["default"].cloneElement(children, {
-        description: getDescription({
-          declarations: declarations,
-          description: description
-        })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations.DeclarationsDetachable, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "field-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])({
+          'field-with-tooltip': management,
+          field: !management
+        }),
+        children: children
+      }), management && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "tooltip"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+      type: "DETACHABLE",
       declarations: declarations,
       id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_missing["default"], _objectSpread(_objectSpread({}, props), {}, {
-      handleChange: handleChange
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Missing.Missing, _objectSpread(_objectSpread({}, props), {}, {
+      handleChange: handleChange !== null && handleChange !== void 0 ? handleChange : _function.voidFunction
     }))]
   });
-  return management ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_variableStatus["default"], {
+  return management ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VariableStatus.VariableStatus, {
     children: content
   }) : content;
-}
-function getDescription(_ref) {
-  var declarations = _ref.declarations,
-    description = _ref.description;
-  if (Array.isArray(declarations)) {
-    return declarations.filter(function (declaration) {
-      return declaration.position === _declarations.DECLARATION_POSITIONS.after;
-    });
-  }
-  return description;
-}
-var _default = exports["default"] = LunaticComponent;
+}

package/lib/components/shared/Declarations/Declarations.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Declarations = exports.Declaration = void 0;
+var _slottableComponent = require("../HOC/slottableComponent");
+require("./Declarations.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Declaration = exports.Declaration = (0, _slottableComponent.slottableComponent)('Declaration', function (_ref) {
+  var children = _ref.children,
+    type = _ref.type;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-testid": "declaration",
+    className: (0, _classnames["default"])('declaration-lunatic', "declaration-".concat(type.toLowerCase())),
+    children: children
+  });
+});
+function LunaticDeclarations(_ref2) {
+  var _declarations$filter;
+  var id = _ref2.id,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'AFTER_QUESTION_TEXT' : _ref2$type,
+    declarations = _ref2.declarations;
+  var filtered = (_declarations$filter = declarations === null || declarations === void 0 ? void 0 : declarations.filter(function (d) {
+    return d.position === type;
+  })) !== null && _declarations$filter !== void 0 ? _declarations$filter : [];
+  if (filtered.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    id: "declarations-".concat(id, "-").concat(type),
+    className: "declarations-lunatic",
+    children: filtered.map(function (_ref3) {
+      var id = _ref3.id,
+        label = _ref3.label,
+        declarationType = _ref3.declarationType;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Declaration, {
+        type: declarationType,
+        children: label
+      }, id);
+    })
+  });
+}
+var Declarations = exports.Declarations = (0, _slottableComponent.slottableComponent)('Declarations', LunaticDeclarations);

package/lib/components/{declarations/declarations.spec.js → shared/Declarations/Declarations.spec.js}

@@ -1,10 +1,9 @@
 "use strict";
 
-var _declarations = _interopRequireDefault(require("./declarations"));
+var _Declarations = require("./Declarations");
 var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var declarations = [{
   id: '1',
   label: 'Declaration 1',
@@ -22,11 +21,11 @@ var declarations = [{
   position: 'DETACHABLE'
 }];
 (0, _vitest.describe)('Declarations component', function () {
-  (0, _vitest.it)('renders correctly with filtered declarations', function () {
+  (0, _vitest.it)('renders correctly with filtered Declarations', function () {
     var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           "data-testid": "declarations-1-AFTER_QUESTION_TEXT"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations["default"], {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
           id: "1",
           type: "AFTER_QUESTION_TEXT",
           declarations: declarations
@@ -41,7 +40,7 @@ var declarations = [{
     (0, _vitest.expect)(declarationElement).toHaveClass('declaration-lunatic');
     (0, _vitest.expect)(declarationElement).toHaveClass('declaration-after');
   });
-  (0, _vitest.it)('renders nothing with unfiltered declarations', function () {
+  (0, _vitest.it)('renders nothing with unfiltered Declarations', function () {
     var declarationstest = [{
       id: '3',
       label: 'Declaration 3',
@@ -51,7 +50,7 @@ var declarations = [{
     var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           "data-testid": "declarations-1-BEFORE_QUESTION_TEXT"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations["default"], {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
           id: "1",
           type: "BEFORE_QUESTION_TEXT",
           declarations: declarationstest
@@ -61,11 +60,11 @@ var declarations = [{
     var declarationsElement = queryByTestId('declarations-1-BEFORE_QUESTION_TEXT');
     (0, _vitest.expect)(declarationsElement.nextElementSibling).toBeNull();
   });
-  (0, _vitest.it)('renders nothing with empty declarations array', function () {
+  (0, _vitest.it)('renders nothing with empty Declarations array', function () {
     var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           "data-testid": "declarations-1-DETACHABLE"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations["default"], {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
           id: "1",
           type: "DETACHABLE",
           declarations: []

package/lib/components/shared/Fieldset/Fieldset.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Fieldset = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _slottableComponent = require("../HOC/slottableComponent");
+var _LabelDescription = require("../LabelDescription");
+require("./Fieldset.scss");
+var _isElement = require("../../../utils/is-element");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
+function LunaticFieldset(_ref) {
+  var children = _ref.children,
+    legend = _ref.legend,
+    description = _ref.description,
+    className = _ref.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
+    className: (0, _classnames["default"])(className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("legend", {
+      children: [labelToReactNode(legend), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelDescription.LabelDescription, {
+        value: description
+      })]
+    }), children]
+  });
+}
+function labelToReactNode(label) {
+  if (!label) {
+    return '';
+  }
+  if (typeof label === 'string' || typeof label === 'boolean' || typeof label === 'number') {
+    return label;
+  }
+  if (_typeof(label) === 'object') {
+    if ((0, _isElement.isElement)(label)) return label;
+    if ('value' in label && typeof label.value === 'string') {
+      return label.value;
+    }
+  }
+  return "";
+}
+var Fieldset = exports.Fieldset = (0, _slottableComponent.slottableComponent)('Fieldset', LunaticFieldset);

package/lib/components/shared/Fieldset/Fieldset.spec.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _Fieldset = require("./Fieldset");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('Fieldset', function () {
+  (0, _vitest.it)('renders the legend text', function () {
+    var legendText = 'Example Legend';
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
+        legend: legendText
+      })),
+      getByText = _render.getByText;
+    var legendElement = getByText(legendText);
+    (0, _vitest.expect)(legendElement).toBeInTheDocument();
+  });
+  (0, _vitest.it)('renders the children', function () {
+    var childText = 'Example child text';
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: childText
+        })
+      })),
+      getByText = _render2.getByText;
+    var childElement = getByText(childText);
+    (0, _vitest.expect)(childElement).toBeInTheDocument();
+  });
+  (0, _vitest.it)('applies the className', function () {
+    var className = 'custom-class';
+    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
+        className: className
+      })),
+      container = _render3.container;
+    var fieldsetElement = container.querySelector('fieldset');
+    (0, _vitest.expect)(fieldsetElement).toHaveClass(className);
+  });
+});

package/lib/components/{commons/create-customizable-field.js → shared/HOC/slottableComponent.js}

@@ -3,26 +3,49 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.SlotsProvider = void 0;
+exports.slottableComponent = slottableComponent;
 var _react = require("react");
-var _lunaticContext = require("../../use-lunatic/lunatic-context");
 var _jsxRuntime = require("react/jsx-runtime");
+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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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); }
-function createCustomizableLunaticField(LunaticField, name) {
-  var Memoized = /*#__PURE__*/(0, _react.memo)(LunaticField);
-  Memoized.displayName = name;
-  return function OverlayField(props) {
-    var custom = (0, _lunaticContext.useLunaticCustom)();
-    if (_typeof(custom) === 'object' && name in custom) {
-      var CustomComponent = custom[name];
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomComponent, _objectSpread({}, props));
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * Contains the type of every customizable component
+ */
+var empty = {};
+var SlotsContext = /*#__PURE__*/(0, _react.createContext)(empty);
+var SlotsProvider = exports.SlotsProvider = function SlotsProvider(_ref) {
+  var slots = _ref.slots,
+    children = _ref.children;
+  if (!slots) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SlotsContext.Provider, {
+    value: slots !== null && slots !== void 0 ? slots : empty,
+    children: children
+  });
+};
+
+/**
+ * Create a replaceable version of a component
+ *
+ * The component can be replaced using the "slots" props on <LunaticComponents>
+ */
+function slottableComponent(name, OriginalComponent) {
+  var DecoratedComponent = function DecoratedComponent(props) {
+    var _useContext;
+    var custom = (_useContext = (0, _react.useContext)(SlotsContext)) !== null && _useContext !== void 0 ? _useContext : empty;
+    if (custom && name in custom) {
+      var SlotComponent = custom[name];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SlotComponent, _objectSpread({}, props));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Memoized, _objectSpread({}, props));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OriginalComponent, _objectSpread({}, props));
   };
-}
-var _default = exports["default"] = createCustomizableLunaticField;
+  DecoratedComponent.displayName = name;
+  return DecoratedComponent;
+}