@inseefr/lunatic 2.4.2 → 2.4.3-beta

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

@@ -3,61 +3,41 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.Panel = Panel;
 var _react = _interopRequireDefault(require("react"));
-var _panelContainer = _interopRequireDefault(require("./panel-container"));
-var _optionContainer = _interopRequireDefault(require("./option-container"));
+var _panelContainer = require("./panel-container");
+var _optionContainer = require("./option-container");
+var _index = require("../../../index");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function getContent(_ref) {
-  var options = _ref.options,
-    OptionRender = _ref.optionRenderer,
+function Panel(_ref) {
+  var _ref$optionRenderer = _ref.optionRenderer,
+    OptionRender = _ref$optionRenderer === void 0 ? _index.DefaultOptionRenderer : _ref$optionRenderer,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    focused = _ref.focused,
     selectedIndex = _ref.selectedIndex,
-    expended = _ref.expended,
+    expanded = _ref.expanded,
+    id = _ref.id,
     search = _ref.search,
     onSelect = _ref.onSelect;
-  if (expended) {
-    return options.map(function (option, index) {
-      var id = option.id,
-        value = option.value;
-      var selected = selectedIndex === index;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_optionContainer["default"], {
-        index: index,
-        selected: selected,
+  var visibleOptions = expanded ? options : [];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
+    expanded: expanded,
+    focused: focused,
+    id: "".concat(id, "-list"),
+    children: visibleOptions.map(function (option, index) {
+      var _option$id;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_optionContainer.OptionContainer, {
+        index: index.toString(),
+        selected: selectedIndex === index,
         onSelect: onSelect,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionRender, {
           option: option,
-          selected: selected,
+          selected: selectedIndex === index,
           search: search
         })
-      }, id !== null && id !== void 0 ? id : value);
-    });
-  }
-  return null;
-}
-function Panel(_ref2) {
-  var optionRenderer = _ref2.optionRenderer,
-    options = _ref2.options,
-    focused = _ref2.focused,
-    selectedIndex = _ref2.selectedIndex,
-    expended = _ref2.expended,
-    id = _ref2.id,
-    search = _ref2.search,
-    onSelect = _ref2.onSelect;
-  var content = getContent({
-    options: options,
-    optionRenderer: optionRenderer,
-    selectedIndex: selectedIndex,
-    expended: expended,
-    search: search,
-    onSelect: onSelect
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
-    expended: expended,
-    focused: focused,
-    id: "".concat(id, "-list"),
-    children: content
+      }, (_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : option.value);
+    })
   });
-}
-var _default = Panel;
-exports["default"] = _default;
+}

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

@@ -1,10 +1,10 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _panel = _interopRequireDefault(require("./panel"));
 var _vitest = require("vitest");
+var _panel = require("./panel");
+var _function = require("../../../../../utils/function");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('Panel', function () {
@@ -24,26 +24,28 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       children: option.value
     });
   };
-  (0, _vitest.it)('renders null when expended is false', function () {
-    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel["default"], {
-      expended: false
+  (0, _vitest.it)('renders null when expanded is false', function () {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.Panel, {
+      options: options,
+      expanded: false,
+      optionRenderer: optionRenderer,
+      onSelect: _function.voidFunction
     }));
-    (0, _vitest.expect)(_react2.screen.queryByRole('option')).not.toBeInTheDocument();
+    (0, _vitest.expect)(_react.screen.queryByRole('option')).not.toBeInTheDocument();
   });
-  (0, _vitest.it)('renders the options when expended is true', function () {
-    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel["default"], {
+  (0, _vitest.it)('renders the options when expanded is true', function () {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.Panel, {
       optionRenderer: optionRenderer,
       options: options,
       focused: false,
-      selectedIndex: null,
-      expended: true,
+      expanded: true,
       id: "test",
       search: "",
-      onSelect: function onSelect() {}
+      onSelect: _function.voidFunction
     }));
-    (0, _vitest.expect)(_react2.screen.getByRole('listbox')).toBeInTheDocument();
+    (0, _vitest.expect)(_react.screen.getByRole('listbox')).toBeInTheDocument();
     options.forEach(function (option) {
-      (0, _vitest.expect)(_react2.screen.getByText(option.value)).toBeInTheDocument();
+      (0, _vitest.expect)(_react.screen.getByText(option.value)).toBeInTheDocument();
     });
   });
 
@@ -54,7 +56,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
   // 			options={options}
   // 			focused={false}
   // 			selectedIndex={1}
-  // 			expended={true}
+  // 			expanded={true}
   // 			id="test"
   // 			search=""
   // 			onSelect={() => {}}
@@ -75,19 +77,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
   (0, _vitest.it)('calls onSelect when an option is clicked', function () {
     var handleSelect = _vitest.vi.fn();
-    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.Panel, {
       optionRenderer: optionRenderer,
       options: options,
       focused: false,
       selectedIndex: null,
-      expended: true,
+      expanded: true,
       id: "test",
       search: "",
       onSelect: handleSelect
     }));
-    (0, _vitest.expect)(_react2.screen.getByRole('listbox')).toBeInTheDocument();
-    var option = _react2.screen.getByText('Option 2');
+    (0, _vitest.expect)(_react.screen.getByRole('listbox')).toBeInTheDocument();
+    var option = _react.screen.getByText('Option 2');
     _userEvent["default"].click(option);
-    (0, _vitest.expect)(handleSelect).toHaveBeenCalledWith(1);
+    (0, _vitest.expect)(handleSelect).toHaveBeenCalledWith('1');
   });
 });

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

@@ -40,7 +40,7 @@ exports[`Selection component > should render correctly when it is editable 1`] =
 </div>
 `;
 
-exports[`Selection component > should render correctly when it is expended 1`] = `
+exports[`Selection component > should render correctly when it is expanded 1`] = `
 <div
   aria-autocomplete="list"
   aria-controls="todo"

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

@@ -0,0 +1,82 @@
+// Vitest Snapshot v1
+
+exports[`Selection component > should render correctly when it is disabled 1`] = `
+<div
+  aria-autocomplete="list"
+  aria-controls="todo"
+  aria-haspopup="listbox"
+  aria-owns="idUndefined"
+  class="lunatic-combo-box-selection"
+  id="idUndefined"
+  role="combobox"
+>
+  <div
+    class="lunatic-combo-box-selected disabled"
+  >
+    <div>
+      No selection
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Selection component > should render correctly when it is editable 1`] = `
+<div
+  aria-autocomplete="list"
+  aria-controls="todo"
+  aria-haspopup="listbox"
+  aria-owns="idUndefined"
+  class="lunatic-combo-box-selection"
+  id="idUndefined"
+  role="combobox"
+>
+  <div
+    class="lunatic-combo-box-selected"
+  >
+    <div>
+      No selection
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Selection component > should render correctly when it is expanded 1`] = `
+<div
+  aria-autocomplete="list"
+  aria-controls="todo"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-owns="idUndefined"
+  class="lunatic-combo-box-selection"
+  id="idUndefined"
+  role="combobox"
+>
+  <div
+    class="lunatic-combo-box-selected"
+  >
+    <div>
+      No selection
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Selection component > should render correctly with default props 1`] = `
+<div
+  aria-autocomplete="list"
+  aria-controls="todo"
+  aria-haspopup="listbox"
+  aria-owns="idUndefined"
+  class="lunatic-combo-box-selection"
+  id="idUndefined"
+  role="combobox"
+>
+  <div
+    class="lunatic-combo-box-selected"
+  >
+    <div>
+      No selection
+    </div>
+  </div>
+</div>
+`;

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

@@ -1,32 +1,26 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports.Delete = Delete;
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _fab = require("../../fab");
 var _icons = require("../../../icons");
+var _fab = require("../../fab");
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function isDisabled(search) {
   return !search || search.trim().length === 0;
 }
 function createOnKeyDown(onClick) {
-  if (typeof onClick === 'function') {
-    return function onKeyDown(e) {
-      var key = e.key;
-      if (key === 'Enter') {
-        onClick();
-      }
-    };
+  if (typeof onClick !== 'function') {
+    return undefined;
   }
-  return function () {
-    return null;
+  return function (e) {
+    if (e.key === 'Enter') {
+      onClick();
+    }
   };
 }
 function Delete(_ref) {
@@ -37,19 +31,17 @@ function Delete(_ref) {
   var onKeyDown = (0, _react.useMemo)(function () {
     return createOnKeyDown(onClick);
   }, [onClick]);
-  if (editable) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_fab.Fab, {
-      className: (0, _classnames["default"])('mini', 'lunatic-combo-box-fab', className),
-      title: "delete",
-      onClick: onClick,
-      disabled: isDisabled(search),
-      onKeyDown: onKeyDown,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CrossIcon, {
-        className: "lunatic-combo-box-icon"
-      })
-    });
+  if (!editable) {
+    return null;
   }
-  return null;
-}
-var _default = Delete;
-exports["default"] = _default;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_fab.Fab, {
+    className: (0, _classnames["default"])('mini', 'lunatic-combo-box-fab', className),
+    title: "delete",
+    onClick: onClick,
+    disabled: isDisabled(search),
+    onKeyDown: onKeyDown,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CrossIcon, {
+      className: "lunatic-combo-box-icon"
+    })
+  });
+}

package/lib/components/commons/components/combo-box/selection/delete.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 = _interopRequireDefault(require("./delete"));
+var _delete = require("./delete");
 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["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       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["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       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["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       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["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       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["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       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["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       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["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       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["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       editable: true,
       search: search,
       onClick: onClickMock

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.displayLabelOrInput = displayLabelOrInput;
+var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -14,16 +13,14 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function displayLabelOrInput(Field, name) {
-  var Memoized = /*#__PURE__*/_react["default"].memo(Field);
+  var Memoized = /*#__PURE__*/(0, _react.memo)(Field);
   return function LabelOrInput(props) {
     var editable = props.editable,
-      expended = props.expended;
-    var displayLabel = !editable || !expended;
+      expanded = props.expanded;
+    var displayLabel = !editable || !expanded;
     if (name === 'Input' && !displayLabel || name === 'LabelSelection' && displayLabel) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Memoized, _objectSpread({}, props));
     }
     return null;
   };
-}
-var _default = displayLabelOrInput;
-exports["default"] = _default;
+}

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

@@ -2,7 +2,7 @@
 
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _displayLabelOrInput = _interopRequireDefault(require("./displayLabelOrInput"));
+var _displayLabelOrInput = require("./displayLabelOrInput");
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -13,43 +13,42 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       children: value
     });
   };
-  var WrappedComponent = (0, _displayLabelOrInput["default"])(MockComponent, 'Input');
   (0, _vitest.it)('should render Memoized component when name is Input and displayLabel is false', function () {
-    var WrappedComponent = (0, _displayLabelOrInput["default"])(MockComponent, 'Input');
+    var WrappedComponent = (0, _displayLabelOrInput.displayLabelOrInput)(MockComponent, 'Input');
     var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
         editable: true,
         value: "hello",
-        expended: true
+        expanded: true
       })),
       getByText = _render.getByText;
     (0, _vitest.expect)(getByText('hello')).toBeInTheDocument();
   });
   (0, _vitest.it)('should render nothing when name is Input and displayLabel is true', function () {
-    var WrappedComponent = (0, _displayLabelOrInput["default"])(MockComponent, 'Input');
+    var WrappedComponent = (0, _displayLabelOrInput.displayLabelOrInput)(MockComponent, 'Input');
     var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
         editable: false,
         value: "hello",
-        expended: true
+        expanded: true
       })),
       container = _render2.container;
     (0, _vitest.expect)(container.firstChild).toBeNull();
   });
   (0, _vitest.it)('should render Memoized component when name is LabelSelection and displayLabel is true', function () {
-    var WrappedComponent = (0, _displayLabelOrInput["default"])(MockComponent, 'LabelSelection');
+    var WrappedComponent = (0, _displayLabelOrInput.displayLabelOrInput)(MockComponent, 'LabelSelection');
     var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
         editable: false,
         value: "hello",
-        expended: true
+        expanded: true
       })),
       getByText = _render3.getByText;
     (0, _vitest.expect)(getByText('hello')).toBeInTheDocument();
   });
   (0, _vitest.it)('should render nothing when name is LabelSelection and displayLabel is false', function () {
-    var WrappedComponent = (0, _displayLabelOrInput["default"])(MockComponent, 'LabelSelection');
+    var WrappedComponent = (0, _displayLabelOrInput.displayLabelOrInput)(MockComponent, 'LabelSelection');
     var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
         editable: true,
         value: "hello",
-        expended: true
+        expanded: true
       })),
       container = _render4.container;
     (0, _vitest.expect)(container.firstChild).toBeNull();

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 = _interopRequireDefault(require("./displayLabelOrInput"));
+var _displayLabelOrInput = require("./displayLabelOrInput");
 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); }
@@ -21,18 +21,18 @@ function Input(_ref) {
     labelledBy = _ref.labelledBy,
     focused = _ref.focused,
     className = _ref.className;
-  var inputEl = (0, _react.useRef)();
+  var inputEl = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (inputEl.current && focused) {
       inputEl.current.focus();
     }
   }, [inputEl, focused]);
-  function onKeydown(e) {
+  var onKeydown = function onKeydown(e) {
     var key = e.key;
     if (key === 'ArrowUp' || key === 'ArrowDown') {
       e.preventDefault();
     }
-  }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
     ref: inputEl,
     id: id,
@@ -52,5 +52,5 @@ function Input(_ref) {
     onKeyDown: onKeydown
   });
 }
-var _default = (0, _displayLabelOrInput["default"])(Input, 'Input');
+var _default = (0, _displayLabelOrInput.displayLabelOrInput)(Input, 'Input');
 exports["default"] = _default;

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

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.LabelSelection = LabelSelection;
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _displayLabelOrInput = _interopRequireDefault(require("./displayLabelOrInput"));
+var _displayLabelOrInput = require("./displayLabelOrInput");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LabelSelection(_ref) {
@@ -28,5 +29,5 @@ function LabelSelection(_ref) {
     })
   });
 }
-var _default = (0, _displayLabelOrInput["default"])(LabelSelection, 'LabelSelection');
+var _default = (0, _displayLabelOrInput.displayLabelOrInput)(LabelSelection, 'LabelSelection');
 exports["default"] = _default;

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

@@ -1,21 +1,30 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _labelSelection = _interopRequireDefault(require("./label-selection"));
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 (0, _vitest.describe)('LabelSelection', function () {
-  var options = ['Option 1', 'Option 2', 'Option 3'];
-  (0, _vitest.it)('should render the labelRenderer when expended is true and editable is false', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
-        labelRenderer: function labelRenderer(_ref) {
-          var option = _ref.option;
-          return option;
-        },
-        expended: true,
-        editable: false,
+  var options = [{
+    label: 'Option 1',
+    value: 'apple'
+  }, {
+    label: 'Option 2',
+    value: 'orange'
+  }, {
+    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...",
@@ -26,13 +35,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     (0, _vitest.expect)(getByText('Option 1')).toBeInTheDocument();
   });
   (0, _vitest.it)('should add the disabled class when disabled is true', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
-        labelRenderer: function labelRenderer(_ref2) {
-          var option = _ref2.option;
-          return option;
-        },
-        expended: true,
-        editable: false,
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
+        labelRenderer: LabelRenderer,
         selectedIndex: 0,
         options: options,
         placeholder: "Select an option...",