@inseefr/lunatic 2.5.0-fast-forward → 2.5.1-beta

package/README.md

@@ -2,7 +2,7 @@
 
 # Lunatic
 
-[![Lunatic CI](https://github.com/InseeFr/Lunatic/actions/workflows/ci.yml/badge.svg)](https://github.com/InseeFr/Lunatic/actions/workflows/ci.yml)
+[![Lunatic CI](https://github.com/InseeFr/Lunatic/actions/workflows/quality.yml/badge.svg)](https://github.com/InseeFr/Lunatic/actions/workflows/quality.yml)
 [![npm version](https://badge.fury.io/js/%40inseefr%2Flunatic.svg)](https://badge.fury.io/js/%40inseefr%2Flunatic)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=coverage)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=alert_status)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
@@ -10,37 +10,36 @@
 
 Lunatic est une librairie front-end sous forme de hook react et de librairies de composants pour générer un questionnaire à partir du format de données [Lunatic-Model](https://github.com/InseeFr/Lunatic-Model).
 
-- [Storybook v2](https://inseefr.github.io/Lunatic/storybook-v2)
-- [Storybook v1](https://inseefr.github.io/Lunatic/storybook-v1)
-- [Storybook Beta](https://inseefr.github.io/Lunatic/storybook-beta)
-- [Editeur Lunatic](https://inseefr.github.io/Lunatic/editor/)
+- [Storybook](https://inseefr.github.io/Lunatic/storybook), branche `main`
+- [Storybook v1](https://inseefr.github.io/Lunatic/storybook-v1), branche `v1-main`
+- [Storybook Beta](https://inseefr.github.io/Lunatic/storybook-beta), branche `develop`
 - [Documentation](https://inseefr.github.io/Lunatic/fr/)
 
 ## Sommaire
 
 - [Lunatic](#lunatic)
-	- [Sommaire](#sommaire)
-	- [Utilisation](#utilisation)
-		- [Le hook useLunatic](#le-hook-uselunatic)
-		- [Les composants](#les-composants)
-	- [Personnalisation](#personnalisation)
-	- [Fonctionnement interne](#fonctionnement-interne)
-		- [Fonctionnement général](#fonctionnement-général)
-		- [pages et pager](#pages-et-pager)
-		- [Exécution du VTL](#exécution-du-vtl)
-	- [Convention et bonnes pratiques](#convention-et-bonnes-pratiques)
+  - [Sommaire](#sommaire)
+  - [Utilisation](#utilisation)
+    - [Le hook useLunatic](#le-hook-uselunatic)
+    - [Les composants](#les-composants)
+  - [Personnalisation](#personnalisation)
+  - [Fonctionnement interne](#fonctionnement-interne)
+    - [Fonctionnement général](#fonctionnement-général)
+    - [pages et pager](#pages-et-pager)
+    - [Exécution du VTL](#exécution-du-vtl)
+  - [Convention et bonnes pratiques](#convention-et-bonnes-pratiques)
 
 ## Utilisation
 
 Pour commencer il faut installer lunatic
 
 ```bash
-yarn add @inseefr/lunatic@2.0.7-v2
+yarn add @inseefr/lunatic@2.5.0
 ```
 
 ### Le hook useLunatic
 
-Ensuite, à l'endroit où vous souhaitez afficher le formulaire il faudra utiliser le hook `useLunatic`. 
+Ensuite, à l'endroit où vous souhaitez afficher le formulaire il faudra utiliser le hook `useLunatic`.
 
 ```js
 import { useLunatic } from '@inseefr/lunatic';
@@ -56,8 +55,9 @@ Ce hook prend 3 paramètres :
   - **features** (défaut `['VTL', 'MD']`), permet de définir les fonctionnalité supportées
   - **preferences** (défaut `['COLLECTED']`)
   - **onChange** (défaut `() => {}`), permet d'ajouter une logique à appliquer lorsqu'une réponse est modifiée (doit être mémoïsé car est utilisé comme dépendance d'un useCallback en interne)
-  - **management** (défaut `false`)
+  - **management** (défaut `false`) : Non implémenté encore, permettra de gérer plusieurs état d'une même variable (utilisation par des postes de reprise)
   - **initialPage** (défaut `'1'`), permet de définir la page de départ
+  - **lastReachedPage** (défaut `undefined`) permet de définir quelle est la page la plus lointaine déjà atteinte
   - **autoSuggesterLoading** (défaut `false`)
   - **suggesters**
   - **suggesterFetcher** (défaut `fetch`), méthode utilisée pour récupérer les données du suggester
@@ -68,7 +68,7 @@ Et retourne un objet permettant de piloter le questionnaire :
 - `getComponents()`, renvoie les composants à afficher pour la page courante
 - `goPreviousPage()`, permet d'aller à la page précédente
 - `goNextPage()`, permet d'aller à la page suivante
-- `goToPage(page: string)`, permet d'aller à une page arbitraire
+- `goToPage({ page: string })`, permet d'aller à une page arbitraire
 - `getErrors()`, renvoie les erreurs
 - `getModalErrors()`, renvoie les erreurs dans les modales
 - `getCurrentErrors()`, renvoie les erreurs de la page courante
@@ -120,14 +120,14 @@ Par défaut les composants offerts par Lunatic sont plutôt simples avec un styl
 
 ```jsx
 const custom = {
-  Input: MyCustomInput,
-  InputNumber: MyCustomInputNumber
-}
+	Input: MyCustomInput,
+	InputNumber: MyCustomInputNumber,
+};
+
+function App({ source, data }) {
+	const {} = useLunatic(source, data, { custom });
 
-function App ({source, data}) {
-  const {} = useLunatic(source, data, {custom})
-  
-  // ...
+	// ...
 }
 ```
 

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');
   });
 });