@inseefr/lunatic 2.5.0-fix-last-reached-page → 2.5.1-panelContainer

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

@@ -3,8 +3,10 @@
 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) {
@@ -12,10 +14,16 @@ function ComboBoxContainer(_ref) {
     className = _ref.className,
     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(className !== null && className !== void 0 ? className : 'lunatic', "-combo-box-container-").concat(id),
+    className: (0, _classnames["default"])("".concat(className !== null && className !== void 0 ? className : 'lunatic', "-combo-box-container"), "".concat(className !== null && className !== void 0 ? className : '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,30 @@
+"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,
+    className = _ref.className,
+    onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    focused = _ref.focused;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])("".concat(className !== null && className !== void 0 ? className : 'lunatic', "-combo-box"), {
+      focused: focused
+    }),
+    onFocus: onFocus,
+    onClick: onFocus,
+    onKeyDown: onKeyDown,
+    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,
+    className = _ref.className;
   var ref = (0, _react.useRef)(null);
   var onClick = (0, _react.useCallback)(function (e) {
     var _ref$current;
@@ -44,19 +46,16 @@ function ComboBoxContent(_ref) {
 
     onKeyDown(key);
   }, [onKeyDown]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])('lunatic-combo-box', {
-      focused: focused
-    }),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContentBox["default"], {
+    className: className,
     onFocus: onFocus,
-    onClick: onFocus,
     onKeyDown: handleKeyDown,
-    ref: ref,
-    tabIndex: 0,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])('lunatic-combo-box-content', {
+      className: (0, _classnames["default"])("".concat(className !== null && className !== void 0 ? className : 'lunatic', "-combo-box-content"), {
         focused: focused
       }),
+      ref: ref,
+      tabIndex: 0,
       children: children
     })
   });

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

@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _delete = require("./selection/delete");
+var _clearButton = require("./selection/clear-button");
 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 }; }
@@ -103,10 +102,11 @@ function ComboBox(_ref) {
       children: messageError
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContainer.ComboBoxContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContainer["default"], {
     id: id,
     classStyle: classStyle,
     className: className,
+    errors: errors,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_label["default"], {
       htmlFor: id,
       id: labelId,
@@ -117,6 +117,7 @@ function ComboBox(_ref) {
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
+      className: className,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
         labelRenderer: labelRenderer,
         placeholder: placeholder,
@@ -129,7 +130,8 @@ function ComboBox(_ref) {
         editable: editable,
         selectedIndex: selectedIndex,
         options: options,
-        onChange: handleChange
+        onChange: handleChange,
+        className: className
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.Panel, {
         optionRenderer: optionRenderer,
         options: options,
@@ -140,16 +142,13 @@ function ComboBox(_ref) {
         search: search,
         onSelect: handleSelect
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    }), /*#__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/{default-option-renderer.js → combo-box/panel/combo-box-option.js}

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 DefaultOptionRenderer(_ref) {
+function ComboBoxOption(_ref) {
   var option = _ref.option,
     selected = _ref.selected;
   var id = option.id,
@@ -39,5 +40,5 @@ function DefaultOptionRenderer(_ref) {
     })
   });
 }
-var _default = DefaultOptionRenderer;
+var _default = (0, _createCustomizableField["default"])(ComboBoxOption, 'ComboboxOption');
 exports["default"] = _default;

package/lib/components/commons/components/{default-option-renderer.spec.js → combo-box/panel/combo-box-option.spec.js}

@@ -2,7 +2,7 @@
 
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _defaultOptionRenderer = _interopRequireDefault(require("./default-option-renderer"));
+var _comboBoxOption = _interopRequireDefault(require("./combo-box-option"));
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       id: '1',
       value: 'Value'
     };
-    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_defaultOptionRenderer["default"], {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxOption["default"], {
         option: option
       })),
       getByText = _render.getByText,
@@ -28,7 +28,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       value: 'Value',
       label: 'Label'
     };
-    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_defaultOptionRenderer["default"], {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxOption["default"], {
         option: option
       })),
       getByText = _render2.getByText;
@@ -43,7 +43,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       value: 'Value',
       label: 'Label'
     };
-    var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_defaultOptionRenderer["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxOption["default"], {
         option: option,
         selected: true
       })),
@@ -56,7 +56,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       value: 'Value',
       label: 'Label'
     };
-    var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_defaultOptionRenderer["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxOption["default"], {
         option: option
       })),
       container = _render4.container;

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,14 +5,13 @@ 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 _index = require("../../../index");
+var _comboBoxOption = _interopRequireDefault(require("./combo-box-option"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function Panel(_ref) {
-  var _ref$optionRenderer = _ref.optionRenderer,
-    OptionRender = _ref$optionRenderer === void 0 ? _index.DefaultOptionRenderer : _ref$optionRenderer,
+  var OptionRender = _ref.optionRenderer,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
     focused = _ref.focused,
@@ -22,7 +21,8 @@ function Panel(_ref) {
     search = _ref.search,
     onSelect = _ref.onSelect;
   var visibleOptions = expanded ? options : [];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
+  var ComboBoxOptionComponent = OptionRender !== null && OptionRender !== void 0 ? OptionRender : _comboBoxOption["default"];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
     expanded: expanded,
     focused: focused,
     id: "".concat(id, "-list"),
@@ -32,7 +32,7 @@ function Panel(_ref) {
         index: index.toString(),
         selected: selectedIndex === index,
         onSelect: onSelect,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionRender, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ComboBoxOptionComponent, {
           option: option,
           selected: selectedIndex === index,
           search: search

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LabelOrInput = LabelOrInput;
+var _labelSelection = _interopRequireDefault(require("./label-selection"));
+var _input = _interopRequireDefault(require("./input"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/**
+ * Display the input or the label of the selection based on the state of the Suggester.
+ *
+ * When the component is not focused, a representation of what is being searched
+ * is presented instead of the Input. This is related to what the user searched
+ * (i.e. the letters entered), not directly to the option chosen among the suggestions.
+ * Using the input directly to represent the selection causes a conflict with that which the user enters in order to search.
+ */
+function LabelOrInput(props) {
+  var editable = props.editable,
+    expanded = props.expanded;
+  var displayLabel = !editable || !expanded;
+  var labelRenderer = props.labelRenderer,
+    placeholder = props.placeholder,
+    selectedIndex = props.selectedIndex,
+    options = props.options,
+    search = props.search,
+    disabled = props.disabled,
+    id = props.id,
+    focused = props.focused,
+    onChange = props.onChange;
+  if (displayLabel) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
+      labelRenderer: labelRenderer,
+      placeholder: placeholder,
+      selectedIndex: selectedIndex,
+      options: options,
+      search: search,
+      disabled: disabled
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
+    id: "combobox-input-".concat(id),
+    className: "lunatic-combo-box-input",
+    onChange: onChange,
+    value: search,
+    placeholder: placeholder,
+    disabled: disabled,
+    focused: focused
+  });
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _LabelOrInput = require("./LabelOrInput");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('displayLabelOrInput', function () {
+  (0, _vitest.it)('Render Label when not expended', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelOrInput.LabelOrInput, {
+        editable: true,
+        expanded: false,
+        options: [{
+          label: 'hello',
+          value: '-1'
+        }],
+        selectedIndex: 0
+      })),
+      getByText = _render.getByText;
+    (0, _vitest.expect)(getByText('-1 - hello')).toBeInTheDocument();
+  });
+});

package/lib/components/commons/components/combo-box/selection/__snapshots__/selection.spec.tsx.snap

@@ -13,9 +13,11 @@ exports[`Selection component > should render correctly when it is disabled 1`] =
   <div
     class="lunatic-combo-box-selected disabled"
   >
-    <div>
-      No selection
-    </div>
+    <span
+      class="placeholder"
+    >
+      hello!
+    </span>
   </div>
 </div>
 `;
@@ -33,9 +35,9 @@ exports[`Selection component > should render correctly when it is editable 1`] =
   <div
     class="lunatic-combo-box-selected"
   >
-    <div>
-      No selection
-    </div>
+    <span
+      class="placeholder"
+    />
   </div>
 </div>
 `;
@@ -54,9 +56,9 @@ exports[`Selection component > should render correctly when it is expanded 1`] =
   <div
     class="lunatic-combo-box-selected"
   >
-    <div>
-      No selection
-    </div>
+    <span
+      class="placeholder"
+    />
   </div>
 </div>
 `;
@@ -74,9 +76,9 @@ exports[`Selection component > should render correctly with default props 1`] =
   <div
     class="lunatic-combo-box-selected"
   >
-    <div>
-      No selection
-    </div>
+    <span
+      class="placeholder"
+    />
   </div>
 </div>
 `;

package/lib/components/commons/components/combo-box/selection/{delete.js → clear-button.js}

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Delete = Delete;
+exports.ClearButton = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("../../../icons");
 var _fab = require("../../fab");
+var _createCustomizableField = _interopRequireDefault(require("../../../create-customizable-field"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function isDisabled(search) {
@@ -23,7 +24,7 @@ function createOnKeyDown(onClick) {
     }
   };
 }
-function Delete(_ref) {
+function ClearButtonComponent(_ref) {
   var className = _ref.className,
     search = _ref.search,
     onClick = _ref.onClick,
@@ -44,4 +45,6 @@ function Delete(_ref) {
       className: "lunatic-combo-box-icon"
     })
   });
-}
+}
+var ClearButton = (0, _createCustomizableField["default"])(ClearButtonComponent, 'ComboboxClearButton');
+exports.ClearButton = ClearButton;

package/lib/components/commons/components/combo-box/selection/{delete.spec.js → clear-button.spec.js}

@@ -3,7 +3,7 @@
 var _react = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _vitest = require("vitest");
-var _delete = require("./delete");
+var _clearButton = require("./clear-button");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('Delete', function () {
@@ -14,13 +14,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     onClickMock.mockClear();
   });
   (0, _vitest.it)('should not render when editable is false', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       editable: false
     }));
     (0, _vitest.expect)(_react.screen.queryByRole('button')).not.toBeInTheDocument();
   });
   (0, _vitest.it)('should call onClick when clicked and search is not empty', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       editable: true,
       search: search,
       onClick: onClickMock
@@ -29,7 +29,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(onClickMock).toHaveBeenCalledTimes(1);
   });
   (0, _vitest.it)('should not call onClick when clicked and search is empty', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       editable: true,
       search: "",
       onClick: onClickMock
@@ -40,7 +40,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
   (0, _vitest.it)('should call onClick when the Enter key is pressed and search is not empty', function () {
     var search = 'test';
     var onClick = _vitest.vi.fn();
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       search: search,
       onClick: onClick,
       editable: true
@@ -52,7 +52,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(onClick).toHaveBeenCalledTimes(1);
   });
   (0, _vitest.it)('should not call onClick when the Enter key is pressed and search is empty', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       editable: true,
       search: "",
       onClick: onClickMock
@@ -61,7 +61,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(onClickMock).toHaveBeenCalledTimes(0);
   });
   (0, _vitest.it)('should apply the className prop', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       className: className,
       editable: true,
       search: search,
@@ -70,7 +70,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(_react.screen.getByRole('button')).toHaveClass(className);
   });
   (0, _vitest.it)('should be disabled when search is empty', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       editable: true,
       search: "",
       onClick: onClickMock
@@ -78,7 +78,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(_react.screen.getByRole('button')).toBeDisabled();
   });
   (0, _vitest.it)('should not be disabled when search is not empty', function () {
-    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
       editable: true,
       search: search,
       onClick: onClickMock