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

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

@@ -7,7 +7,7 @@ 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");
@@ -140,7 +140,7 @@ 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
       }),

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.js

@@ -7,12 +7,11 @@ exports.Panel = Panel;
 var _react = _interopRequireDefault(require("react"));
 var _panelContainer = 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,6 +21,7 @@ function Panel(_ref) {
     search = _ref.search,
     onSelect = _ref.onSelect;
   var visibleOptions = expanded ? options : [];
+  var ComboBoxOptionComponent = OptionRender !== null && OptionRender !== void 0 ? OptionRender : _comboBoxOption["default"];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
     expanded: expanded,
     focused: focused,
@@ -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

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 isPlaceholder(option, search) {
+  return !option && (!search || search.length === 0);
+}
+function getContent(option, search, placeholder) {
+  if (option) {
+    var id = option.id,
+      value = option.value,
+      label = option.label;
+    return label ? "".concat(id || value, " - ").concat(label) : id || value;
+  }
+  if (search && search.trim().length) {
+    return search;
+  }
+  return placeholder !== null && placeholder !== void 0 ? placeholder : '';
+}
+function ComboBoxLabelSelection(_ref) {
+  var option = _ref.option,
+    placeholder = _ref.placeholder,
+    search = _ref.search,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var isPh = isPlaceholder(option, search);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('lunatic-combo-box-selected', {
+      disabled: disabled
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames["default"])({
+        placeholder: isPh,
+        selection: !isPh
+      }),
+      children: getContent(option, search, placeholder)
+    })
+  });
+}
+var _default = (0, _createCustomizableField["default"])(ComboBoxLabelSelection, 'ComboboxLabelSelection');
+exports["default"] = _default;

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

@@ -2,7 +2,7 @@
 
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _defaultLabelRenderer = _interopRequireDefault(require("./default-label-renderer"));
+var _comboBoxLabelSelection = _interopRequireDefault(require("./combo-box-label-selection"));
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -14,7 +14,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)(_defaultLabelRenderer["default"], {
+      var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
           option: option,
           placeholder: "Select an option"
         })),
@@ -23,7 +23,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)(_defaultLabelRenderer["default"], {
+      var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
           option: null,
           placeholder: "Select an option"
         })),
@@ -31,7 +31,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)(_defaultLabelRenderer["default"], {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
           option: null,
           search: "Search value",
           placeholder: "Select an option"

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _displayLabelOrInput = require("./displayLabelOrInput");
+var _createCustomizableField = _interopRequireDefault(require("../../../create-customizable-field"));
 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); }
@@ -52,5 +52,5 @@ function Input(_ref) {
     onKeyDown: onKeydown
   });
 }
-var _default = (0, _displayLabelOrInput.displayLabelOrInput)(Input, 'Input');
+var _default = (0, _createCustomizableField["default"])(Input, 'ComboboxInput');
 exports["default"] = _default;

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

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.LabelSelection = LabelSelection;
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _displayLabelOrInput = require("./displayLabelOrInput");
+var _comboBoxLabelSelection = _interopRequireDefault(require("./combo-box-label-selection"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LabelSelection(_ref) {
@@ -18,16 +17,13 @@ function LabelSelection(_ref) {
     search = _ref.search,
     disabled = _ref.disabled;
   var option = selectedIndex !== undefined ? options[selectedIndex] : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])('lunatic-combo-box-selected', {
-      disabled: disabled
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderer, {
-      option: option,
-      placeholder: placeholder,
-      search: search
-    })
+  var LabelSelectionComponent = Renderer !== null && Renderer !== void 0 ? Renderer : _comboBoxLabelSelection["default"];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelSelectionComponent, {
+    option: option,
+    placeholder: placeholder,
+    search: search,
+    disabled: disabled
   });
 }
-var _default = (0, _displayLabelOrInput.displayLabelOrInput)(LabelSelection, 'LabelSelection');
+var _default = LabelSelection;
 exports["default"] = _default;

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

@@ -16,15 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     label: 'Option 3',
     value: 'banana'
   }];
-  var LabelRenderer = function LabelRenderer(props) {
-    var _props$option$label, _props$option;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: (_props$option$label = (_props$option = props.option) === null || _props$option === void 0 ? void 0 : _props$option.label) !== null && _props$option$label !== void 0 ? _props$option$label : 'Unknown'
-    });
-  };
   (0, _vitest.it)('should render the labelRenderer when expanded is true and editable is false', function () {
     var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
-        labelRenderer: LabelRenderer,
         selectedIndex: 0,
         options: options,
         placeholder: "Select an option...",
@@ -32,18 +25,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
         disabled: false
       })),
       getByText = _render.getByText;
-    (0, _vitest.expect)(getByText('Option 1')).toBeInTheDocument();
+    (0, _vitest.expect)(getByText('apple - Option 1')).toBeInTheDocument();
   });
   (0, _vitest.it)('should add the disabled class when disabled is true', function () {
     var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
-        labelRenderer: LabelRenderer,
         selectedIndex: 0,
         options: options,
         placeholder: "Select an option...",
         search: "search term",
         disabled: true
       })),
-      container = _render2.container;
-    (0, _vitest.expect)(container.firstChild).toHaveClass('disabled');
+      getByText = _render2.getByText;
+    (0, _vitest.expect)(getByText('apple - Option 1').parentElement).toHaveClass('disabled');
   });
 });

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Selection = Selection;
 var _react = require("react");
-var _labelSelection = require("./label-selection");
-var _input = _interopRequireDefault(require("./input"));
 var _selectionContainer = _interopRequireDefault(require("./selection-container"));
+var _LabelOrInput = require("./LabelOrInput");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function Selection(_ref) {
@@ -26,28 +25,23 @@ function Selection(_ref) {
   var onChangeEx = (0, _react.useCallback)(function (e) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
   }, [onChange]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_selectionContainer["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectionContainer["default"], {
     id: id,
     labelId: labelId,
     expanded: expanded,
     "aria-owns": "".concat(id, "-list"),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection.LabelSelection, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelOrInput.LabelOrInput, {
       labelRenderer: labelRenderer,
       placeholder: placeholder,
       selectedIndex: selectedIndex,
       options: options,
       search: search,
-      disabled: disabled
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
-      id: "combobox-input-".concat(id),
-      className: "lunatic-combo-box-input",
+      disabled: disabled,
       onChange: onChangeEx,
       value: search,
-      placeholder: placeholder,
-      disabled: disabled,
       focused: focused,
       editable: editable,
       expanded: expanded
-    })]
+    })
   });
 }

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

@@ -15,15 +15,8 @@ var options = [{
   value: 'banana'
 }];
 (0, _vitest.describe)('Selection component', function () {
-  var LabelRenderer = function LabelRenderer(_ref) {
-    var option = _ref.option;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: option ? option.label : 'No selection'
-    });
-  };
   (0, _vitest.it)('should render correctly with default props', function () {
     var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: LabelRenderer,
         options: options
       })),
       container = _render.container;
@@ -31,7 +24,6 @@ var options = [{
   });
   (0, _vitest.it)('should render correctly when it is editable', function () {
     var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: LabelRenderer,
         options: options,
         editable: true
       })),
@@ -40,7 +32,6 @@ var options = [{
   });
   (0, _vitest.it)('should render correctly when it is expanded', function () {
     var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: LabelRenderer,
         options: options,
         expanded: true
       })),
@@ -49,40 +40,24 @@ var options = [{
   });
   (0, _vitest.it)('should render correctly when it is disabled', function () {
     var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: function labelRenderer(_ref2) {
-          var option = _ref2.option;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: option ? option.label : 'No selection'
-          });
-        },
         options: options,
-        disabled: true
+        disabled: true,
+        placeholder: "hello!"
       })),
       container = _render4.container;
     (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, {
-        labelRenderer: function labelRenderer(_ref3) {
-          var option = _ref3.option;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: option ? option.label : 'No selection'
-          });
-        },
         options: options,
-        selectedIndex: 0
+        selectedIndex: 0,
+        expanded: false
       })),
       getByText = _render5.getByText;
-    (0, _vitest.expect)(getByText('Apple')).toBeInTheDocument();
+    (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, {
-        labelRenderer: function labelRenderer(_ref4) {
-          var option = _ref4.option;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: option ? option.label : 'No selection'
-          });
-        },
         options: options,
         placeholder: "Search fruits",
         editable: false