@inseefr/lunatic 2.3.1 → 2.4.0

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

@@ -0,0 +1,55 @@
+"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"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _fab = require("../../fab");
+var _icons = require("../../../icons");
+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();
+      }
+    };
+  }
+  return function () {
+    return null;
+  };
+}
+function Delete(_ref) {
+  var className = _ref.className,
+    search = _ref.search,
+    onClick = _ref.onClick,
+    editable = _ref.editable;
+  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"
+      })
+    });
+  }
+  return null;
+}
+var _default = Delete;
+exports["default"] = _default;

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _vitest = require("vitest");
+var _delete = _interopRequireDefault(require("./delete"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('Delete', function () {
+  var onClickMock = _vitest.vi.fn();
+  var search = 'test';
+  var className = 'test-class';
+  (0, _vitest.afterEach)(function () {
+    onClickMock.mockClear();
+  });
+  (0, _vitest.it)('should not render when editable is false', function () {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete["default"], {
+      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"], {
+      editable: true,
+      search: search,
+      onClick: onClickMock
+    }));
+    _userEvent["default"].click(_react.screen.getByRole('button'));
+    (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"], {
+      editable: true,
+      search: "",
+      onClick: onClickMock
+    }));
+    _userEvent["default"].click(_react.screen.getByRole('button'));
+    (0, _vitest.expect)(onClickMock).toHaveBeenCalledTimes(0);
+  });
+  (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"], {
+      search: search,
+      onClick: onClick,
+      editable: true
+    }));
+    var deleteButton = _react.screen.getByTitle('delete');
+    _react.fireEvent.keyDown(deleteButton, {
+      key: 'Enter'
+    });
+    (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"], {
+      editable: true,
+      search: "",
+      onClick: onClickMock
+    }));
+    _userEvent["default"].type(_react.screen.getByRole('button'), '{Enter}');
+    (0, _vitest.expect)(onClickMock).toHaveBeenCalledTimes(0);
+  });
+  (0, _vitest.it)('should apply the className prop', function () {
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete["default"], {
+      className: className,
+      editable: true,
+      search: search,
+      onClick: onClickMock
+    }));
+    (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"], {
+      editable: true,
+      search: "",
+      onClick: onClickMock
+    }));
+    (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"], {
+      editable: true,
+      search: search,
+      onClick: onClickMock
+    }));
+    (0, _vitest.expect)(_react.screen.getByRole('button')).not.toBeDisabled();
+  });
+});

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(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; }
+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 displayLabelOrInput(Field, name) {
+  var Memoized = /*#__PURE__*/_react["default"].memo(Field);
+  return function LabelOrInput(props) {
+    var editable = props.editable,
+      expended = props.expended;
+    var displayLabel = !editable || !expended;
+    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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _displayLabelOrInput = _interopRequireDefault(require("./displayLabelOrInput"));
+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 () {
+  var MockComponent = function MockComponent(_ref) {
+    var value = _ref.value;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      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 _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+        editable: true,
+        value: "hello",
+        expended: 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 _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+        editable: false,
+        value: "hello",
+        expended: 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 _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+        editable: false,
+        value: "hello",
+        expended: 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 _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+        editable: true,
+        value: "hello",
+        expended: true
+      })),
+      container = _render4.container;
+    (0, _vitest.expect)(container.firstChild).toBeNull();
+  });
+});

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _selection["default"];
+  }
+});
+var _selection = _interopRequireDefault(require("./selection"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

@@ -0,0 +1,56 @@
+"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"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _displayLabelOrInput = _interopRequireDefault(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); }
+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 Input(_ref) {
+  var placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    id = _ref.id,
+    labelledBy = _ref.labelledBy,
+    focused = _ref.focused,
+    className = _ref.className;
+  var inputEl = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (inputEl.current && focused) {
+      inputEl.current.focus();
+    }
+  }, [inputEl, focused]);
+  function onKeydown(e) {
+    var key = e.key;
+    if (key === 'ArrowUp' || key === 'ArrowDown') {
+      e.preventDefault();
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    ref: inputEl,
+    id: id,
+    className: (0, _classnames["default"])('lunatic-combo-box-input', className),
+    type: "text",
+    onChange: onChange,
+    value: value,
+    "aria-label": "lunatic-combo-box",
+    title: "combo-box",
+    autoComplete: "off",
+    autoCapitalize: "off",
+    autoCorrect: "off",
+    spellCheck: "false",
+    placeholder: placeholder,
+    disabled: disabled,
+    "aria-labelledby": labelledBy,
+    onKeyDown: onKeydown
+  });
+}
+var _default = (0, _displayLabelOrInput["default"])(Input, 'Input');
+exports["default"] = _default;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _displayLabelOrInput = _interopRequireDefault(require("./displayLabelOrInput"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function LabelSelection(_ref) {
+  var Renderer = _ref.labelRenderer,
+    placeholder = _ref.placeholder,
+    selectedIndex = _ref.selectedIndex,
+    options = _ref.options,
+    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 _default = (0, _displayLabelOrInput["default"])(LabelSelection, 'LabelSelection');
+exports["default"] = _default;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = 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,
+        selectedIndex: 0,
+        options: options,
+        placeholder: "Select an option...",
+        search: "search term",
+        disabled: false
+      })),
+      getByText = _render.getByText;
+    (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,
+        selectedIndex: 0,
+        options: options,
+        placeholder: "Select an option...",
+        search: "search term",
+        disabled: true
+      })),
+      container = _render2.container;
+    (0, _vitest.expect)(container.firstChild).toHaveClass('disabled');
+  });
+});

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function SelectionContainer(_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    expended = _ref.expended,
+    focused = _ref.focused,
+    disabled = _ref.disabled,
+    labelId = _ref.labelId;
+  var comboBoxId = "".concat(id);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    id: comboBoxId,
+    className: (0, _classnames["default"])('lunatic-combo-box-selection', {
+      focused: focused,
+      disabled: disabled
+    }),
+    role: "combobox",
+    "aria-controls": 'todo',
+    "aria-haspopup": "listbox",
+    "aria-expanded": expended,
+    "aria-autocomplete": "list",
+    "aria-owns": comboBoxId,
+    "aria-labelledby": labelId,
+    children: children
+  });
+}
+var _default = SelectionContainer;
+exports["default"] = _default;
+SelectionContainer.defaultProps = {
+  id: 'idUndefined'
+};

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _selectionContainer = _interopRequireDefault(require("./selection-container"));
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('SelectionContainer', function () {
+  (0, _vitest.it)('renders with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectionContainer["default"], {
+        children: "Content"
+      })),
+      container = _render.container;
+    var divElement = container.querySelector('div');
+    (0, _vitest.expect)(divElement).toBeInTheDocument();
+    (0, _vitest.expect)(divElement).toHaveClass('lunatic-combo-box-selection');
+    (0, _vitest.expect)(divElement).not.toHaveClass('focused');
+    (0, _vitest.expect)(divElement).not.toHaveClass('disabled');
+    (0, _vitest.expect)(divElement).toHaveAttribute('id', 'idUndefined');
+    (0, _vitest.expect)(divElement).toHaveAttribute('role', 'combobox');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-controls', 'todo');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-haspopup', 'listbox');
+    (0, _vitest.expect)(divElement).not.toHaveAttribute('aria-expanded');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-autocomplete', 'list');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-owns', 'idUndefined');
+    (0, _vitest.expect)(divElement).not.toHaveAttribute('aria-labelledby');
+  });
+  (0, _vitest.it)('renders with custom props', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectionContainer["default"], {
+        id: "myComboBox",
+        expended: true,
+        focused: true,
+        disabled: true,
+        labelId: "myLabel",
+        children: "Content"
+      })),
+      container = _render2.container;
+    var divElement = container.querySelector('div');
+    (0, _vitest.expect)(divElement).toBeInTheDocument();
+    (0, _vitest.expect)(divElement).toHaveClass('lunatic-combo-box-selection');
+    (0, _vitest.expect)(divElement).toHaveClass('focused');
+    (0, _vitest.expect)(divElement).toHaveClass('disabled');
+    (0, _vitest.expect)(divElement).toHaveAttribute('id', 'myComboBox');
+    (0, _vitest.expect)(divElement).toHaveAttribute('role', 'combobox');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-controls', 'todo');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-haspopup', 'listbox');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-expanded', 'true');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-autocomplete', 'list');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-owns', 'myComboBox');
+    (0, _vitest.expect)(divElement).toHaveAttribute('aria-labelledby', 'myLabel');
+  });
+});

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

@@ -0,0 +1,60 @@
+"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"));
+var _labelSelection = _interopRequireDefault(require("./label-selection"));
+var _input = _interopRequireDefault(require("./input"));
+var _selectionContainer = _interopRequireDefault(require("./selection-container"));
+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 Selection(_ref) {
+  var labelRenderer = _ref.labelRenderer,
+    placeholder = _ref.placeholder,
+    search = _ref.search,
+    expended = _ref.expended,
+    disabled = _ref.disabled,
+    focused = _ref.focused,
+    onChange = _ref.onChange,
+    selectedIndex = _ref.selectedIndex,
+    options = _ref.options,
+    editable = _ref.editable,
+    labelId = _ref.labelId,
+    id = _ref.id;
+  var onChangeEx = (0, _react.useCallback)(function (e) {
+    onChange(e.target.value);
+  }, [onChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_selectionContainer["default"], {
+    id: id,
+    labelId: labelId,
+    expanded: expended,
+    ariaOwns: "".concat(id, "-list"),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
+      labelRenderer: labelRenderer,
+      placeholder: placeholder,
+      editable: editable,
+      selectedIndex: selectedIndex,
+      options: options,
+      search: search,
+      disabled: disabled,
+      expended: expended
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
+      id: "combobox-input-".concat(id),
+      className: "lunatic-combo-box-input",
+      onChange: onChangeEx,
+      value: search,
+      placeholder: placeholder,
+      disabled: disabled,
+      focused: focused,
+      editable: editable,
+      expended: expended
+    })]
+  });
+}
+var _default = Selection;
+exports["default"] = _default;

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

@@ -0,0 +1,104 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _selection = _interopRequireDefault(require("./selection"));
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var options = [{
+  label: 'Apple',
+  value: 'apple'
+}, {
+  label: 'Orange',
+  value: 'orange'
+}, {
+  label: 'Banana',
+  value: 'banana'
+}];
+(0, _vitest.describe)('Selection component', function () {
+  (0, _vitest.it)('should render correctly with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection["default"], {
+        labelRenderer: function labelRenderer(_ref) {
+          var option = _ref.option;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: option ? option.label : 'No selection'
+          });
+        },
+        options: options
+      })),
+      container = _render.container;
+    (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
+  });
+  (0, _vitest.it)('should render correctly when it is editable', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection["default"], {
+        labelRenderer: function labelRenderer(_ref2) {
+          var option = _ref2.option;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: option ? option.label : 'No selection'
+          });
+        },
+        options: options,
+        editable: true
+      })),
+      container = _render2.container;
+    (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
+  });
+  (0, _vitest.it)('should render correctly when it is expended', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection["default"], {
+        labelRenderer: function labelRenderer(_ref3) {
+          var option = _ref3.option;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: option ? option.label : 'No selection'
+          });
+        },
+        options: options,
+        expended: true
+      })),
+      container = _render3.container;
+    (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
+  });
+  (0, _vitest.it)('should render correctly when it is disabled', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection["default"], {
+        labelRenderer: function labelRenderer(_ref4) {
+          var option = _ref4.option;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: option ? option.label : 'No selection'
+          });
+        },
+        options: options,
+        disabled: true
+      })),
+      container = _render4.container;
+    (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
+  });
+  (0, _vitest.it)('should render the selected option when there is a selection', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection["default"], {
+        labelRenderer: function labelRenderer(_ref5) {
+          var option = _ref5.option;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: option ? option.label : 'No selection'
+          });
+        },
+        options: options,
+        selectedIndex: 0
+      })),
+      getByText = _render5.getByText;
+    (0, _vitest.expect)(getByText('Apple')).toBeInTheDocument();
+  });
+  (0, _vitest.it)('should not render the input when it is not editable', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection["default"], {
+        labelRenderer: function labelRenderer(_ref6) {
+          var option = _ref6.option;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: option ? option.label : 'No selection'
+          });
+        },
+        options: options,
+        placeholder: "Search fruits",
+        editable: false
+      })),
+      queryByPlaceholderText = _render6.queryByPlaceholderText;
+    (0, _vitest.expect)(queryByPlaceholderText('Search fruits')).not.toBeInTheDocument();
+  });
+});