@inseefr/lunatic 2.4.2 → 2.4.3

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

@@ -3,31 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.ComboBoxContainer = ComboBoxContainer;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ComboBoxContainer(_ref) {
   var children = _ref.children,
     className = _ref.className,
     id = _ref.id,
-    classStyle = _ref.classStyle;
+    _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
   });
-}
-ComboBoxContainer.propTypes = {
-  id: _propTypes["default"].string.isRequired,
-  className: _propTypes["default"].string,
-  classStyle: _propTypes["default"].string
-};
-ComboBoxContainer.defaultProps = {
-  className: undefined,
-  classStyle: 'default-style'
-};
-var _default = 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 = _interopRequireDefault(require("./combo-box-container"));
+var _comboBoxContainer = 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["default"], {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer.ComboBoxContainer, {
         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["default"], {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer.ComboBoxContainer, {
         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["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer.ComboBoxContainer, {
         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["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContainer.ComboBoxContainer, {
         id: "test-id",
         className: "test-class",
         children: "Content"

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

@@ -4,11 +4,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ComboBoxContent = ComboBoxContent;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _useDocumentAddEventListener = _interopRequireDefault(require("../../use-document-add-event-listener"));
-var _keyboardKeyCodes = require("./state-management/reducer/reduce-on-keydown/keyboard-key-codes");
+var _keyboardKeyCodes = require("./state-management/reduce-on-keydown/keyboard-key-codes");
+var _index = require("../../index");
 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,22 +20,23 @@ function ComboBoxContent(_ref) {
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     onKeyDown = _ref.onKeyDown;
-  var ref = (0, _react.useRef)();
+  var ref = (0, _react.useRef)(null);
   var onClick = (0, _react.useCallback)(function (e) {
-    var current = ref.current;
-    if (!current.contains(e.target)) {
+    var _ref$current;
+    if (!((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(e.target)) && onBlur) {
       onBlur();
     }
   }, [ref, onBlur]);
-  (0, _useDocumentAddEventListener["default"])('mousedown', onClick);
+  (0, _index.useDocumentAddEventListener)('mousedown', onClick);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
+    var _ref$current2;
     var key = e.key;
     e.stopPropagation();
     switch (key) {
       case _keyboardKeyCodes.KEYBOARD_KEY_CODES.Escape:
       case _keyboardKeyCodes.KEYBOARD_KEY_CODES.Enter:
       case _keyboardKeyCodes.KEYBOARD_KEY_CODES.Tab:
-        ref.current.focus();
+        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
         break;
       default:
       // e.preventDefault();
@@ -50,7 +52,7 @@ function ComboBoxContent(_ref) {
     onClick: onFocus,
     onKeyDown: handleKeyDown,
     ref: ref,
-    tabIndex: "0",
+    tabIndex: 0,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])('lunatic-combo-box-content', {
         focused: focused

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

@@ -5,23 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _comboBoxContent = _interopRequireDefault(require("./combo-box-content"));
-var _selection = _interopRequireDefault(require("./selection"));
-var _panel = _interopRequireDefault(require("./panel"));
-var _delete = _interopRequireDefault(require("./selection/delete"));
-var _comboBoxContainer = _interopRequireDefault(require("./combo-box-container"));
-var _createCustomizableField = _interopRequireDefault(require("../../create-customizable-field"));
+var _delete = require("./selection/delete");
 var _stateManagement = require("./state-management");
-var _errors = _interopRequireDefault(require("../errors"));
-var _label = _interopRequireDefault(require("../label"));
 require("./combo-box.scss");
+var _selection = require("./selection/selection");
+var _panel = require("./panel/panel");
+var _comboBoxContainer = 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 }; }
-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 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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -34,17 +31,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var EMPTY_SEARCH = '';
-function getDefaultOptionValue() {
-  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var id = option.id,
-    value = option.value;
-  return id || value;
-}
 function ComboBox(_ref) {
   var className = _ref.className,
-    classStyle = _ref.classStyle,
-    placeholder = _ref.placeholder,
-    editable = _ref.editable,
+    _ref$classStyle = _ref.classStyle,
+    classStyle = _ref$classStyle === void 0 ? 'default-style' : _ref$classStyle,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Please, do something...' : _ref$placeholder,
+    _ref$editable = _ref.editable,
+    editable = _ref$editable === void 0 ? false : _ref$editable,
     disabled = _ref.disabled,
     id = _ref.id,
     optionRenderer = _ref.optionRenderer,
@@ -54,8 +48,10 @@ function ComboBox(_ref) {
     value = _ref.value,
     options = _ref.options,
     messageError = _ref.messageError,
-    searchProps = _ref.search,
-    getOptionValue = _ref.getOptionValue,
+    _ref$search = _ref.search,
+    searchProps = _ref$search === void 0 ? EMPTY_SEARCH : _ref$search,
+    _ref$getOptionValue = _ref.getOptionValue,
+    getOptionValue = _ref$getOptionValue === void 0 ? getDefaultOptionValue : _ref$getOptionValue,
     label = _ref.label,
     description = _ref.description,
     errors = _ref.errors;
@@ -67,10 +63,9 @@ function ComboBox(_ref) {
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
   var focused = state.focused,
-    expended = state.expended,
+    expanded = state.expanded,
     search = state.search,
-    selectedIndex = state.selectedIndex,
-    displayLabel = state.displayLabel;
+    selectedIndex = state.selectedIndex;
   (0, _react.useEffect)(function () {
     dispatch(_stateManagement.actions.onInit({
       options: options,
@@ -85,13 +80,14 @@ function ComboBox(_ref) {
     dispatch(_stateManagement.actions.onBlur());
   }, []);
   var handleSelect = (0, _react.useCallback)(function (index) {
-    var option = options[index];
-    dispatch(_stateManagement.actions.onSelect(index));
+    var indexNumber = parseInt(index, 10);
+    var option = options[indexNumber];
+    dispatch(_stateManagement.actions.onSelect(indexNumber));
     onSelect(getOptionValue(option));
   }, [options, onSelect, getOptionValue]);
   var handleChange = (0, _react.useCallback)(function (s) {
     dispatch(_stateManagement.actions.onChange(s));
-    onChange(s);
+    onChange === null || onChange === void 0 ? void 0 : onChange(s);
   }, [onChange]);
   var onKeyDown = (0, _react.useCallback)(function (key) {
     var length = options.length;
@@ -99,7 +95,7 @@ function ComboBox(_ref) {
   }, [options]);
   var onDelete = (0, _react.useCallback)(function () {
     dispatch(_stateManagement.actions.onDelete());
-    onChange(EMPTY_SEARCH);
+    onChange === null || onChange === void 0 ? void 0 : onChange(EMPTY_SEARCH);
   }, [onChange]);
   if (messageError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -107,7 +103,7 @@ function ComboBox(_ref) {
       children: messageError
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContainer["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContainer.ComboBoxContainer, {
     id: id,
     classStyle: classStyle,
     className: className,
@@ -117,16 +113,15 @@ function ComboBox(_ref) {
       description: description,
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContent["default"], {
-      id: id,
       focused: focused,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_selection["default"], {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
         labelRenderer: labelRenderer,
         placeholder: placeholder,
         search: search,
-        expended: expended,
+        expanded: expanded,
         id: id,
         labelId: labelId,
         disabled: disabled,
@@ -134,66 +129,37 @@ function ComboBox(_ref) {
         editable: editable,
         selectedIndex: selectedIndex,
         options: options,
-        onChange: handleChange,
-        displayLabel: displayLabel
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel["default"], {
+        onChange: handleChange
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.Panel, {
         optionRenderer: optionRenderer,
-        value: value,
         options: options,
         focused: focused,
         selectedIndex: selectedIndex,
-        expended: expended,
+        expanded: expanded,
         id: id,
         search: search,
         onSelect: handleSelect
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete["default"], {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.Delete, {
       className: (0, _classnames["default"])({
         focused: focused
       }),
       search: search,
       onClick: onDelete,
       editable: editable
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_errors["default"], {
+    }), errors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_errors["default"], {
       errors: errors,
       activeId: id
     })]
   });
 }
-ComboBox.propTypes = {
-  classStyle: _propTypes["default"].string,
-  placeholder: _propTypes["default"].string,
-  description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].array]),
-  search: _propTypes["default"].string,
-  editable: _propTypes["default"].bool,
-  onSelect: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  options: _propTypes["default"].array,
-  className: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  id: _propTypes["default"].string.isRequired,
-  optionRenderer: _propTypes["default"].elementType.isRequired,
-  labelRenderer: _propTypes["default"].elementType.isRequired,
-  getOptionValue: _propTypes["default"].func,
-  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
-  errors: _propTypes["default"].object
-};
-ComboBox.defaultProps = {
-  classStyle: 'default-style',
-  placeholder: 'Please, do something...',
-  editable: false,
-  search: EMPTY_SEARCH,
-  onSelect: function onSelect() {
-    return null;
-  },
-  onChange: function onChange() {
-    return null;
-  },
-  options: [],
-  getOptionValue: getDefaultOptionValue,
-  errors: undefined,
-  label: undefined,
-  description: undefined
-};
-var _default = (0, _createCustomizableField["default"])(ComboBox, 'ComboBox');
+function getDefaultOptionValue() {
+  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    value: ''
+  };
+  var id = option.id,
+    value = option.value;
+  return id || value;
+}
+var _default = (0, _index.createCustomizableLunaticField)(ComboBox, 'ComboBox');
 exports["default"] = _default;

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

@@ -90,7 +90,7 @@
 					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
 						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
-					&.expended {
+					&.expanded {
 						border: solid 1px var(--color-primary-light);
 						opacity: 1;
 						min-height: 30px;
@@ -123,14 +123,13 @@
 	.lunatic-combo-box-fab {
 		position: absolute;
 		right: 4px;
-		top: 36px;
+		top: 8px;
 		z-index: 0;
 		&.focused {
 			z-index: 1;
 		}
 
 		.lunatic-icon {
-			padding-left: 1px;
 			svg {
 				fill: white;
 				width: 16px;

package/lib/components/commons/components/combo-box/{state-management/reducer/reduce-on-focus.js → combo-box.stories.js}

@@ -3,18 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Default = void 0;
+var _comboBox = _interopRequireDefault(require("./combo-box"));
+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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(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 reduceOnFocus(state) {
-  return _objectSpread(_objectSpread({}, state), {}, {
-    expended: true,
-    focused: true
+var stories = {
+  title: 'Components/Commons/ComboBox',
+  component: _comboBox["default"]
+};
+var _default = stories;
+exports["default"] = _default;
+var LabelRenderer = function LabelRenderer(_ref) {
+  var _option$label;
+  var option = _ref.option,
+    placeholder = _ref.placeholder;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : placeholder
   });
-}
-var _default = reduceOnFocus;
-exports["default"] = _default;
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBox["default"], _objectSpread(_objectSpread({}, args), {}, {
+    labelRenderer: LabelRenderer,
+    optionRenderer: LabelRenderer
+  }));
+};
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  value: '1',
+  options: [{
+    id: '1',
+    value: 'Option 1',
+    label: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+      children: "Option 1"
+    })
+  }, {
+    id: '2',
+    value: 'Option 2',
+    label: 'Option 2'
+  }, {
+    id: '3',
+    value: 'Option 3',
+    label: 'Option 3'
+  }]
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,16 +1,13 @@
 "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.OptionContainer = OptionContainer;
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 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 getMin(rect) {
   var top = rect.top;
   return top;
@@ -30,7 +27,7 @@ function OptionContainer(_ref) {
     index = _ref.index,
     selected = _ref.selected,
     onSelect = _ref.onSelect;
-  var ref = (0, _react.useRef)();
+  var ref = (0, _react.useRef)(null);
   var onClick = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     e.preventDefault();
@@ -38,7 +35,7 @@ function OptionContainer(_ref) {
   }, [onSelect, index]);
   (0, _react.useEffect)(function () {
     var current = ref.current;
-    if (current && selected) {
+    if (current && selected && current.parentNode) {
       var oRect = current.getBoundingClientRect();
       var pRect = current.parentNode.getBoundingClientRect();
       if (!isVisible(oRect, pRect)) {
@@ -56,6 +53,4 @@ function OptionContainer(_ref) {
     ref: ref,
     children: children
   });
-}
-var _default = OptionContainer;
-exports["default"] = _default;
+}

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

@@ -1,10 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-var _optionContainer = _interopRequireDefault(require("./option-container"));
+var _optionContainer = require("./option-container");
 var _vitest = require("vitest");
 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,12 +13,12 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 (0, _vitest.describe)('option-container', function () {
   var props = {
     children: 'Option 1',
-    index: 0,
+    index: '0',
     selected: false,
     onSelect: _vitest.vi.fn()
   };
   (0, _vitest.it)('renders without crashing', function () {
-    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_optionContainer["default"], _objectSpread({}, props))),
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_optionContainer.OptionContainer, _objectSpread({}, props))),
       getByRole = _render.getByRole;
     var optionContainer = getByRole('option');
     (0, _vitest.expect)(optionContainer).toBeInTheDocument();

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

@@ -3,26 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.PanelContainer = PanelContainer;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function PanelContainer(_ref) {
   var children = _ref.children,
     focused = _ref.focused,
-    expended = _ref.expended,
+    expanded = _ref.expanded,
     id = _ref.id;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
     id: "lunatic-combo-box-panel-".concat(id),
     "aria-label": "suggestions",
     className: (0, _classnames["default"])('lunatic-combo-box-panel', {
       focused: focused,
-      expended: expended
+      expanded: expanded
     }),
     role: "listbox",
     children: children
   });
-}
-var _default = PanelContainer;
-exports["default"] = _default;
+}

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

@@ -1,59 +1,57 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
-var _panelContainer = _interopRequireDefault(require("./panel-container"));
+var _panelContainer = 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, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_panelContainer["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_panelContainer.PanelContainer, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 2"
       })]
     }));
-    var items = _react2.screen.getAllByRole('listitem');
+    var items = _react.screen.getAllByRole('listitem');
     (0, _vitest.expect)(items).toHaveLength(2);
     (0, _vitest.expect)(items[0]).toHaveTextContent('Item 1');
     (0, _vitest.expect)(items[1]).toHaveTextContent('Item 2');
   });
   (0, _vitest.it)('should set the id attribute', function () {
     var id = 'test-panel';
-    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
       id: id,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
       })
     }));
-    (0, _vitest.expect)(_react2.screen.getByRole('listbox')).toHaveAttribute('id', "lunatic-combo-box-panel-".concat(id));
+    (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, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
       })
     }));
-    (0, _vitest.expect)(_react2.screen.getByRole('listbox')).toHaveAttribute('aria-label', 'suggestions');
+    (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, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
       focused: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
       })
     }));
-    (0, _vitest.expect)(_react2.screen.getByRole('listbox')).toHaveClass('focused');
+    (0, _vitest.expect)(_react.screen.getByRole('listbox')).toHaveClass('focused');
   });
-  (0, _vitest.it)('should set the expended class when expended prop is true', function () {
-    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
-      expended: true,
+  (0, _vitest.it)('should set the expanded class when expanded prop is true', function () {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer.PanelContainer, {
+      expanded: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Item 1"
       })
     }));
-    (0, _vitest.expect)(_react2.screen.getByRole('listbox')).toHaveClass('expended');
+    (0, _vitest.expect)(_react.screen.getByRole('listbox')).toHaveClass('expanded');
   });
 });