@inseefr/lunatic 0.1.13-hackathon → 0.2.0-prisme

package/README.md

@@ -14,6 +14,8 @@ The documentation can be found in the [docs](https://github.com/InseeFr/Lunatic/
 
 [Storybook](https://inseefr.github.io/Lunatic/storybook) is also available online.
 
+[Storybook of the future major release](https://inseefr.github.io/Lunatic/storybook-v2) under construction is also available online.
+
 ## Usage
 
 An [example](https://github.com/InseeFr/Lunatic/tree/master/example/orchestrator) of use of Lunatic is available. This simple orchestrator is deployed [online](https://inseefr.github.io/Lunatic/orchestrator).

package/lib/components/button/button.scss

@@ -0,0 +1,24 @@
+.button-lunatic {
+	min-width: 20%;
+	color: white;
+	border-color: var(--color-primary-dark);
+	background-color: var(--color-primary-dark);
+	font-size: 1.2em;
+	font-weight: bold;
+	padding: 0.4em;
+	&:hover,
+	&:focus:hover {
+		color: var(--color-primary-dark);
+		background-color: white;
+		border-color: var(--color-primary-dark);
+	}
+	&:focus {
+		outline: none;
+		background-color: var(--color-primary-light);
+		border-color: var(--color-primary-light);
+	}
+	&:disabled {
+		background: var(--color-disabled);
+		color: var(--color-primary-dark);
+	}
+}

package/lib/components/button/index.js

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

package/lib/components/button/lunatic-button.js

@@ -0,0 +1,62 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _isElement = require("../../utils/is-element");
+
+require("./button.scss");
+
+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 Button(_ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      label = _ref.label,
+      className = _ref.className;
+  var handleClick = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    e.preventDefault();
+    onClick(e);
+  }, [onClick]);
+  if ((0, _isElement.isElement)(children)) return /*#__PURE__*/_react["default"].createElement("button", {
+    disabled: disabled,
+    type: "button",
+    className: (0, _classnames["default"])('button-lunatic', className, {
+      disabled: disabled
+    }),
+    onClick: handleClick
+  }, children);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("input", {
+    disabled: disabled,
+    type: "button",
+    className: (0, _classnames["default"])('button-lunatic', className, {
+      disabled: disabled
+    }),
+    value: label || children,
+    onClick: handleClick
+  }));
+}
+
+Button.propTypes = {
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
+  disabled: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func.isRequired
+};
+var _default = Button;
+exports["default"] = _default;

package/lib/components/checkbox/checkbox-boolean/checkbox-boolean.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _commons = require("../commons");
+
+var _commons2 = require("../../commons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function CheckboxBoolean(_ref) {
+  var checked = _ref.checked,
+      id = _ref.id,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      labelId = _ref.labelId;
+  return /*#__PURE__*/_react["default"].createElement(_commons.CheckboxOption, {
+    disabled: disabled,
+    checked: checked,
+    id: id,
+    onClick: onClick,
+    labelledBy: labelId,
+    value: checked
+  });
+}
+
+var _default = (0, _commons2.createCustomizableLunaticField)(CheckboxBoolean);
+
+exports["default"] = _default;

package/lib/components/checkbox/checkbox-boolean/index.js

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

package/lib/components/checkbox/checkbox-boolean/lunatic-checkbox-boolean.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _checkboxBoolean = _interopRequireDefault(require("./checkbox-boolean"));
+
+var _commons = require("../../commons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function LunaticCheckboxBoolean(_ref) {
+  var value = _ref.value,
+      id = _ref.id,
+      options = _ref.options,
+      disabled = _ref.disabled,
+      onChange = _ref.onChange,
+      custom = _ref.custom;
+  return /*#__PURE__*/_react["default"].createElement(_checkboxBoolean["default"], {
+    id: id,
+    options: options,
+    checked: value,
+    onClick: onChange,
+    disabled: disabled,
+    custom: custom
+  });
+}
+
+LunaticCheckboxBoolean.defaultProps = {
+  value: false
+};
+
+var _default = (0, _commons.createLunaticComponent)(LunaticCheckboxBoolean, {
+  fieldset: true,
+  inputId: 'lunatic-checkbox-boolean'
+});
+
+exports["default"] = _default;

package/lib/components/checkbox/checkbox-group/checkbox-group.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _commons = require("../commons");
+
+var _commons2 = require("../../commons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function onClick() {}
+
+function CheckBoxOptionWrapper(_ref) {
+  var checkboxId = _ref.checkboxId,
+      labelId = _ref.labelId,
+      checked = _ref.checked,
+      value = _ref.value,
+      onKeyDown = _ref.onKeyDown,
+      handleChange = _ref.handleChange,
+      response = _ref.response;
+  var booleanValue = value || false;
+  var onClickOption = (0, _commons2.useOnHandleChange)({
+    handleChange: handleChange,
+    response: response,
+    value: booleanValue
+  }); // const onClickOption = useCallback(
+  // 	function (valueOption) {
+  // 		handleChange(response, !valueOption);
+  // 	},
+  // 	[handleChange, response]
+  // );
+
+  return /*#__PURE__*/_react["default"].createElement(_commons.CheckboxOption, {
+    id: checkboxId,
+    labelledBy: labelId,
+    checked: checked,
+    onClick: onClickOption,
+    value: booleanValue,
+    onKeyDown: onKeyDown
+  });
+}
+
+function CheckboxGroupContainer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "lunatic-checkbox-group-option"
+  }, children);
+}
+
+function CheckboxGroup(_ref3) {
+  var options = _ref3.options,
+      value = _ref3.value,
+      id = _ref3.id,
+      handleChange = _ref3.handleChange;
+  return options.map(function (option, index) {
+    var label = option.label,
+        response = option.response;
+
+    if (response && value) {
+      var name = response.name;
+
+      if (name in value) {
+        var optionValue = value[name];
+        var checkboxId = "lunatic-checkbox-".concat(id, "-").concat(name);
+        var labelId = "lunatic-checkbox-label-".concat(id, "-").concat(name);
+        return /*#__PURE__*/_react["default"].createElement(CheckboxGroupContainer, {
+          key: checkboxId
+        }, /*#__PURE__*/_react["default"].createElement(_commons2.Label, {
+          id: labelId,
+          htmlFor: checkboxId
+        }, label), /*#__PURE__*/_react["default"].createElement(CheckBoxOptionWrapper, {
+          checkboxId: checkboxId,
+          labelId: labelId,
+          checked: optionValue,
+          value: optionValue,
+          onKeyDown: onClick,
+          response: response,
+          handleChange: handleChange
+        }));
+      }
+    }
+
+    return null;
+  });
+}
+
+var _default = (0, _commons2.createCustomizableLunaticField)(CheckboxGroup);
+
+exports["default"] = _default;

package/lib/components/checkbox/checkbox-group/checkbox-option.js

@@ -0,0 +1,57 @@
+"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 _icons = require("../../commons/icons");
+
+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 CheckboxOption(_ref) {
+  var disabled = _ref.disabled,
+      checked = _ref.checked,
+      id = _ref.id,
+      value = _ref.value,
+      onClick = _ref.onClick,
+      labelledBy = _ref.labelledBy;
+  var onClickOption = (0, _react.useCallback)(function () {
+    onClick(value);
+  }, [value, onClick]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    var key = e.key;
+
+    if (key === 'Space') {// TODO
+    }
+  }, []);
+  var Icon = checked ? _icons.CheckboxChecked : _icons.CheckboxUnchecked;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('checkbox-modality', 'checkbox-modality-block', {
+      checked: checked,
+      disabled: disabled
+    })
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: id,
+    role: "checkbox",
+    className: "lunatic-input-checkbox",
+    "aria-checked": checked,
+    tabIndex: "0",
+    onClick: onClickOption,
+    onKeyDown: handleKeyDown,
+    "aria-labelledby": labelledBy
+  }, /*#__PURE__*/_react["default"].createElement(Icon, null)));
+}
+
+var _default = CheckboxOption;
+exports["default"] = _default;

package/lib/components/checkbox/checkbox-group/index.js

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

package/lib/components/checkbox/checkbox-group/lunatic-checkbox-group.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _checkboxGroup = _interopRequireDefault(require("./checkbox-group"));
+
+var _commons = require("../../commons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function LunaticCheckboxGroup(_ref) {
+  var id = _ref.id,
+      value = _ref.value,
+      responses = _ref.responses,
+      custom = _ref.custom,
+      handleChange = _ref.handleChange;
+  return /*#__PURE__*/_react["default"].createElement(_checkboxGroup["default"], {
+    id: id,
+    options: responses,
+    value: value,
+    handleChange: handleChange,
+    custom: custom
+  });
+}
+
+var _default = (0, _commons.createLunaticComponent)(LunaticCheckboxGroup, {
+  fieldset: true,
+  inputId: 'lunatic-checkbox-group'
+});
+
+exports["default"] = _default;

package/lib/components/checkbox/checkbox-one/index.js

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

package/lib/components/checkbox/checkbox-one/lunatic-checkbox-one.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _radio = _interopRequireDefault(require("../../radio"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function LunaticCheckboxOne(props) {
+  return /*#__PURE__*/_react["default"].createElement(_radio["default"], _extends({}, props, {
+    checkboxStyle: true
+  }));
+}
+
+var _default = LunaticCheckboxOne;
+exports["default"] = _default;

package/lib/components/checkbox/checkbox.scss

@@ -0,0 +1 @@
+.lunatic-checkbox-boolean{}

package/lib/components/checkbox/commons/checkbox-option.js

@@ -0,0 +1,59 @@
+"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 _icons = require("../../commons/icons");
+
+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 CheckboxOption(_ref) {
+  var disabled = _ref.disabled,
+      checked = _ref.checked,
+      id = _ref.id,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? false : _ref$value,
+      onClick = _ref.onClick,
+      labelledBy = _ref.labelledBy;
+  var onClickOption = (0, _react.useCallback)(function () {
+    onClick(!value);
+  }, [value, onClick]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    var code = e.code;
+
+    if (code === 'Space') {
+      onClickOption();
+    }
+  }, [onClickOption]);
+  var Icon = checked ? _icons.CheckboxChecked : _icons.CheckboxUnchecked;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('checkbox-modality', 'checkbox-modality-block', {
+      checked: checked,
+      disabled: disabled
+    })
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: id,
+    role: "checkbox",
+    className: "lunatic-input-checkbox",
+    "aria-checked": checked,
+    tabIndex: "0",
+    onClick: onClickOption,
+    onKeyDown: handleKeyDown,
+    "aria-labelledby": labelledBy
+  }, /*#__PURE__*/_react["default"].createElement(Icon, null)));
+}
+
+var _default = CheckboxOption;
+exports["default"] = _default;

package/lib/components/checkbox/commons/index.js

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

package/lib/components/checkbox/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CheckboxBoolean", {
+  enumerable: true,
+  get: function get() {
+    return _checkboxBoolean["default"];
+  }
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function get() {
+    return _checkboxGroup["default"];
+  }
+});
+Object.defineProperty(exports, "CheckboxOne", {
+  enumerable: true,
+  get: function get() {
+    return _checkboxOne["default"];
+  }
+});
+
+var _checkboxGroup = _interopRequireDefault(require("./checkbox-group"));
+
+var _checkboxBoolean = _interopRequireDefault(require("./checkbox-boolean"));
+
+var _checkboxOne = _interopRequireDefault(require("./checkbox-one"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/components/commons/build-style-object.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _lodash = _interopRequireDefault(require("lodash.camelcase"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function buildStyleObject(obj) {
+  return obj ? Object.entries(obj).reduce(function (_, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    if (key.startsWith(':')) _[key] = buildStyleObject(value);else _[(0, _lodash["default"])(key)] = value;
+    return _;
+  }, {}) : {};
+}
+
+var _default = buildStyleObject;
+exports["default"] = _default;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: "lunatic-combo-box-container-".concat(id),
+    className: (0, _classnames["default"])('lunatic-combo-box-container', className, classStyle)
+  }, 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;