@lanaco/lnc-react-ui 2.1.12 → 2.1.13

package/lib/index.esm.js

@@ -53325,7 +53325,7 @@ Item.propTypes = {
 var css_248z = ".option-item-enter {\n  opacity: 0;\n}\n\n.option-item-enter-active {\n  transition: all 0.2s ease-in;\n  opacity: 1;\n}\n\n.option-item-exit {\n}\n\n.option--exit-active {\n  opacity: 0;\n  transition: opacity 200ms ease-out;\n}\n";
 styleInject(css_248z);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 var spin = keyframes$2(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    100% {\n      transform: rotate(360deg);\n    }\n\n    0% {\n      transform: rotate(0deg);\n    }\n"])));
 
 var getIconFontSize = function getIconFontSize(props) {
@@ -53373,7 +53373,7 @@ var Input = newStyled.input(_templateObject7 || (_templateObject7 = _taggedTempl
 var Content = newStyled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  background-color: white;\n  z-index: 1;\n  margin-top: 0.25rem;\n  padding: 0.1875rem;\n  width: calc(100% - 0.625rem);\n  border-radius: 0.15625rem;\n  box-shadow: 0 0 0.375rem #bebebe;\n  border: 0.125rem solid ", ";\n  flex-direction: column;\n  transition: all 250ms ease;\n"])), function (props) {
   return props.theme.palette[props.color].main;
 });
-var ContentItem = newStyled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0.375rem;\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: whitesmoke;\n    color: ", ";\n  }\n"])), function (props) {
+var ContentItem = newStyled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n\n  padding: 0.375rem;\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: whitesmoke;\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme.typography.fontFamily;
 }, function (props) {
   return props.theme.typography[props.size].fontSize;
@@ -53408,12 +53408,14 @@ var LoadingIcon = newStyled.div(_templateObject12 || (_templateObject12 = _tagge
 var InnerContainer = newStyled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: no-wrap;\n  align-items: stretch;\n"])));
 var ItemsContent = newStyled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
 var Controls = newStyled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var AddOptionText = newStyled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  font-weight: bold;\n"])));
 
 var MultiSelectDropdown = function MultiSelectDropdown(props) {
   var items = props.items,
       options = props.options,
       load = props.load,
       onChange = props.onChange,
+      onAdd = props.onAdd,
       clearOptions = props.clearOptions,
       loading = props.loading,
       notItemsFoundText = props.notItemsFoundText,
@@ -53424,7 +53426,9 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
       mapValueTo = props.mapValueTo,
       size = props.size,
       color = props.color,
-      theme = props.theme;
+      theme = props.theme,
+      enableAdd = props.enableAdd,
+      addOptionText = props.addOptionText;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -53466,17 +53470,23 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
 
     if (options !== null && options.length !== 0 && inFocus) {
       if (e.keyCode === 38 && cursor > 0) setCursor(cursor - 1);
-      if (e.keyCode === 40 && cursor < options.length - 1) setCursor(cursor + 1);
-      if (e.keyCode === 13) optionSelected([].concat(_toConsumableArray(items), [options[cursor]]));
+
+      if (e.keyCode === 40 && (cursor === options.length - 1 && enableAdd || cursor < options.length - 1)) {
+        setCursor(cursor + 1);
+      }
+
+      if (e.keyCode === 13 && cursor != options.length) optionSelected([].concat(_toConsumableArray(items), [options[cursor]]));
+      if (e.keyCode === 13 && cursor === options.length && enableAdd) addNew();
 
       if (e.key === "Backspace" && items.length > 0 && value === "") {
         handleRemoveItem(items.length - 1);
       }
 
-      console.log("ARR DOWN");
       return;
     }
 
+    if (e.keyCode === 13 && enableAdd && (options === null || options !== null && options.length === 0)) addNew();
+
     if (e.keyCode === 40) {
       setInFocus(true);
       setCursor(0);
@@ -53502,6 +53512,14 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
     setCursor(0);
   };
 
+  var addNew = function addNew() {
+    onAdd(value);
+    setValue("");
+    clearOptions(id);
+    setInFocus(false);
+    setCursor(0);
+  };
+
   var onInputBlur = function onInputBlur() {
     setInFocus(false);
     setInputFocus(false);
@@ -53539,7 +53557,15 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
           },
           hover: cursor === i
         }), item[mapValueTo]);
-      })));
+      }), enableAdd && !options.map(function (y) {
+        return y.value;
+      }).includes(value) ? /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {
+        key: options.length,
+        onMouseDown: function onMouseDown() {
+          return addNew();
+        },
+        hover: cursor === options.length
+      }), /*#__PURE__*/React__default.createElement(AddOptionText, null, addOptionText), value) : ""));
     }
 
     var empty = options === null || options !== null && options.length === 0;
@@ -53547,9 +53573,15 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
     if (inFocus && empty && loading === false) {
       return /*#__PURE__*/React__default.createElement(FadeIn, null, /*#__PURE__*/React__default.createElement(Content, _extends({}, themeProps, {
         key: 0
-      }), /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {
+      }), enableAdd ? /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {
         key: 0,
-        hover: true,
+        onMouseDown: function onMouseDown() {
+          return addNew();
+        },
+        hover: true
+      }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, notItemsFoundText, /*#__PURE__*/React__default.createElement(AddOptionText, null, addOptionText), value)) : /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {
+        key: 0,
+        hover: false,
         onMouseDown: onInputBlur
       }), notItemsFoundText)));
     }
@@ -53610,6 +53642,7 @@ MultiSelectDropdown.defaultProps = {
   disabled: false,
   load: function load() {},
   onChange: function onChange() {},
+  onAdd: function onAdd() {},
   clearOptions: function clearOptions() {},
   items: [],
   options: [],
@@ -53619,7 +53652,9 @@ MultiSelectDropdown.defaultProps = {
   notItemsFoundText: "No items found...",
   theme: theme,
   mapIdTo: "id",
-  mapValueTo: "value"
+  mapValueTo: "value",
+  enableAdd: false,
+  addOptionText: "Add new item"
 };
 MultiSelectDropdown.propTypes = {
   theme: PropTypes.object.isRequired,
@@ -53627,6 +53662,7 @@ MultiSelectDropdown.propTypes = {
   disabled: PropTypes.bool,
   load: PropTypes.func,
   onChange: PropTypes.func,
+  onAdd: PropTypes.func,
   clearOptions: PropTypes.func,
   className: PropTypes.string,
   items: PropTypes.array,
@@ -53635,7 +53671,9 @@ MultiSelectDropdown.propTypes = {
   mapValueTo: PropTypes.string,
   notItemsFoundText: PropTypes.string,
   size: PropTypes.oneOf(["small", "medium", "large"]),
-  color: PropTypes.oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"])
+  color: PropTypes.oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"]),
+  enableAdd: PropTypes.bool,
+  addOptionText: PropTypes.string
 };
 
 export { Alet as Alert, Button$1 as Button, CheckBox, CheckboxLookup, ConfirmationForm, DataView, DateInput, DropDown, DropdownLookup, DropdownMenu, FormContainer, FormField, Grid, Icon$1 as Icon, ItemCounter, Modal$1 as Modal, MultiSelectDropdown, NumberInput, Pagination, PasswordInput, PeriodSelector, SearchBar, Spinner, Tabs, TagSelector, TextArea, TextInput, ToggleSwitch, theme };

package/lib/index.js

@@ -53366,7 +53366,7 @@ Item.propTypes = {
 var css_248z = ".option-item-enter {\n  opacity: 0;\n}\n\n.option-item-enter-active {\n  transition: all 0.2s ease-in;\n  opacity: 1;\n}\n\n.option-item-exit {\n}\n\n.option--exit-active {\n  opacity: 0;\n  transition: opacity 200ms ease-out;\n}\n";
 styleInject(css_248z);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 var spin = keyframes$2(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    100% {\n      transform: rotate(360deg);\n    }\n\n    0% {\n      transform: rotate(0deg);\n    }\n"])));
 
 var getIconFontSize = function getIconFontSize(props) {
@@ -53414,7 +53414,7 @@ var Input = newStyled.input(_templateObject7 || (_templateObject7 = _taggedTempl
 var Content = newStyled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  position: absolute;\n  background-color: white;\n  z-index: 1;\n  margin-top: 0.25rem;\n  padding: 0.1875rem;\n  width: calc(100% - 0.625rem);\n  border-radius: 0.15625rem;\n  box-shadow: 0 0 0.375rem #bebebe;\n  border: 0.125rem solid ", ";\n  flex-direction: column;\n  transition: all 250ms ease;\n"])), function (props) {
   return props.theme.palette[props.color].main;
 });
-var ContentItem = newStyled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0.375rem;\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: whitesmoke;\n    color: ", ";\n  }\n"])), function (props) {
+var ContentItem = newStyled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n  font-family: ", ";\n  font-size: ", ";\n\n  padding: 0.375rem;\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: whitesmoke;\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme.typography.fontFamily;
 }, function (props) {
   return props.theme.typography[props.size].fontSize;
@@ -53449,12 +53449,14 @@ var LoadingIcon = newStyled.div(_templateObject12 || (_templateObject12 = _tagge
 var InnerContainer = newStyled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-wrap: no-wrap;\n  align-items: stretch;\n"])));
 var ItemsContent = newStyled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral__default['default'](["\n  flex-grow: 1;\n"])));
 var Controls = newStyled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n"])));
+var AddOptionText = newStyled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral__default['default'](["\n  font-weight: bold;\n"])));
 
 var MultiSelectDropdown = function MultiSelectDropdown(props) {
   var items = props.items,
       options = props.options,
       load = props.load,
       onChange = props.onChange,
+      onAdd = props.onAdd,
       clearOptions = props.clearOptions,
       loading = props.loading,
       notItemsFoundText = props.notItemsFoundText,
@@ -53465,7 +53467,9 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
       mapValueTo = props.mapValueTo,
       size = props.size,
       color = props.color,
-      theme = props.theme;
+      theme = props.theme,
+      enableAdd = props.enableAdd,
+      addOptionText = props.addOptionText;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -53507,17 +53511,23 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
 
     if (options !== null && options.length !== 0 && inFocus) {
       if (e.keyCode === 38 && cursor > 0) setCursor(cursor - 1);
-      if (e.keyCode === 40 && cursor < options.length - 1) setCursor(cursor + 1);
-      if (e.keyCode === 13) optionSelected([].concat(_toConsumableArray__default['default'](items), [options[cursor]]));
+
+      if (e.keyCode === 40 && (cursor === options.length - 1 && enableAdd || cursor < options.length - 1)) {
+        setCursor(cursor + 1);
+      }
+
+      if (e.keyCode === 13 && cursor != options.length) optionSelected([].concat(_toConsumableArray__default['default'](items), [options[cursor]]));
+      if (e.keyCode === 13 && cursor === options.length && enableAdd) addNew();
 
       if (e.key === "Backspace" && items.length > 0 && value === "") {
         handleRemoveItem(items.length - 1);
       }
 
-      console.log("ARR DOWN");
       return;
     }
 
+    if (e.keyCode === 13 && enableAdd && (options === null || options !== null && options.length === 0)) addNew();
+
     if (e.keyCode === 40) {
       setInFocus(true);
       setCursor(0);
@@ -53543,6 +53553,14 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
     setCursor(0);
   };
 
+  var addNew = function addNew() {
+    onAdd(value);
+    setValue("");
+    clearOptions(id);
+    setInFocus(false);
+    setCursor(0);
+  };
+
   var onInputBlur = function onInputBlur() {
     setInFocus(false);
     setInputFocus(false);
@@ -53580,7 +53598,15 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
           },
           hover: cursor === i
         }), item[mapValueTo]);
-      })));
+      }), enableAdd && !options.map(function (y) {
+        return y.value;
+      }).includes(value) ? /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {
+        key: options.length,
+        onMouseDown: function onMouseDown() {
+          return addNew();
+        },
+        hover: cursor === options.length
+      }), /*#__PURE__*/React__default['default'].createElement(AddOptionText, null, addOptionText), value) : ""));
     }
 
     var empty = options === null || options !== null && options.length === 0;
@@ -53588,9 +53614,15 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
     if (inFocus && empty && loading === false) {
       return /*#__PURE__*/React__default['default'].createElement(FadeIn, null, /*#__PURE__*/React__default['default'].createElement(Content, _extends__default['default']({}, themeProps, {
         key: 0
-      }), /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {
+      }), enableAdd ? /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {
         key: 0,
-        hover: true,
+        onMouseDown: function onMouseDown() {
+          return addNew();
+        },
+        hover: true
+      }), /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, notItemsFoundText, /*#__PURE__*/React__default['default'].createElement(AddOptionText, null, addOptionText), value)) : /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {
+        key: 0,
+        hover: false,
         onMouseDown: onInputBlur
       }), notItemsFoundText)));
     }
@@ -53651,6 +53683,7 @@ MultiSelectDropdown.defaultProps = {
   disabled: false,
   load: function load() {},
   onChange: function onChange() {},
+  onAdd: function onAdd() {},
   clearOptions: function clearOptions() {},
   items: [],
   options: [],
@@ -53660,7 +53693,9 @@ MultiSelectDropdown.defaultProps = {
   notItemsFoundText: "No items found...",
   theme: theme,
   mapIdTo: "id",
-  mapValueTo: "value"
+  mapValueTo: "value",
+  enableAdd: false,
+  addOptionText: "Add new item"
 };
 MultiSelectDropdown.propTypes = {
   theme: PropTypes__default['default'].object.isRequired,
@@ -53668,6 +53703,7 @@ MultiSelectDropdown.propTypes = {
   disabled: PropTypes__default['default'].bool,
   load: PropTypes__default['default'].func,
   onChange: PropTypes__default['default'].func,
+  onAdd: PropTypes__default['default'].func,
   clearOptions: PropTypes__default['default'].func,
   className: PropTypes__default['default'].string,
   items: PropTypes__default['default'].array,
@@ -53676,7 +53712,9 @@ MultiSelectDropdown.propTypes = {
   mapValueTo: PropTypes__default['default'].string,
   notItemsFoundText: PropTypes__default['default'].string,
   size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
-  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"])
+  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"]),
+  enableAdd: PropTypes__default['default'].bool,
+  addOptionText: PropTypes__default['default'].string
 };
 
 exports.Alert = Alet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",