@dspworkplace/ui 2.1.3 → 2.1.5

package/dist/index.es.js

@@ -4829,9 +4829,19 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _templateObject12() {
+function _templateObject13() {
   var data = taggedTemplateLiteral(["\n    border: 0;\n    padding-right: 8px;\n    background: transparent;\n    cursor: inherit;\n    display: flex;\n    align-items: center;\n    height: 100%;\n"]);
 
+  _templateObject13 = function _templateObject13() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject12() {
+  var data = taggedTemplateLiteral(["\n    flex: 1;\n    min-width: 0;\n    border: 0;\n    outline: 0;\n    padding: 0;\n    background: transparent;\n    cursor: inherit;\n    font-family: inherit;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    padding-left: ", ";\n\n\n    &::placeholder {\n        color: ", ";\n        opacity: 1;\n    }\n"]);
+
   _templateObject12 = function _templateObject12() {
     return data;
   };
@@ -4840,7 +4850,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = taggedTemplateLiteral(["\n    flex: 1;\n    min-width: 0;\n    border: 0;\n    outline: 0;\n    padding: 0;\n    background: transparent;\n    cursor: inherit;\n    font-family: inherit;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    padding-left: 8px;\n\n\n    &::placeholder {\n        color: ", ";\n        opacity: 1;\n    }\n"]);
+  var data = taggedTemplateLiteral(["\n    display: flex;\n    isolation: isolate;\n    padding-left: 8px;\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -4850,7 +4860,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = taggedTemplateLiteral(["\n    height: 24px;\n    width: 24px;\n    box-sizing: border-box;\n    margin-right: 5px;\n    border-radius: 100%;\n    border: 2px solid white;\n    background: ", "\n    z-index: ", ";\n    margin-left: ", "\n    margin-top: 8px;\n    margin-bottom: 8px;\n    display: inline-block;\n"]);
+  var data = taggedTemplateLiteral(["\n    height: 16px;\n    width: 16px;\n    box-sizing: border-box;\n    border-radius: 100%;\n    border: 2px solid white;\n    background: ", ";\n    z-index: ", ";\n    margin-left: ", "\n    margin-right: 8px;\n    margin-top: 8px;\n    margin-bottom: 8px;\n    display: inline-block;\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -5004,6 +5014,17 @@ var ColorOption = styled.span(_templateObject10(), function (props) {
 }, function (props) {
   return props.index > 0 ? '-19px' : '0';
 });
+var Swatches = styled.span(_templateObject11());
+
+var renderSwatches = function renderSwatches(colors) {
+  return colors.length > 0 && /*#__PURE__*/React.createElement(Swatches, null, colors.slice(0, 3).map(function (color, index) {
+    return /*#__PURE__*/React.createElement(ColorOption, {
+      key: index,
+      index: index,
+      color: color
+    });
+  }));
+};
 
 var getSelected = function getSelected(options, defaultValue) {
   var selected;
@@ -5013,15 +5034,24 @@ var getSelected = function getSelected(options, defaultValue) {
   return selected;
 };
 
-var SearchInput = styled.input(_templateObject11(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (props) {
+var SearchInput = styled.input(_templateObject12(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (_ref3) {
+  var hasSwatch = _ref3.hasSwatch;
+  return hasSwatch ? 0 : '8px';
+}, function (props) {
   return props.hasSelection ? theme.colors.neutrals.gray : theme.colors.neutrals.medium;
 });
-var ToggleButton = styled.button(_templateObject12());
+var ToggleButton = styled.button(_templateObject13());
 
 var isOption = function isOption(item) {
   return item.value !== undefined && item.value !== null;
 };
 
+var scrollIntoView = function scrollIntoView(element) {
+  return element && element.scrollIntoView({
+    block: 'nearest'
+  });
+};
+
 var flattenOptions = function flattenOptions(options) {
   var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return (options || []).reduce(function (rows, item) {
@@ -5038,15 +5068,32 @@ var optionText = function optionText(node) {
   if (typeof node === 'string' || typeof node === 'number') return node.toString();
   if (Array.isArray(node)) return node.map(optionText).join('');
   return node.props ? optionText(node.props.children) : '';
+};
+
+var matchOptions = function matchOptions(items, text) {
+  if (!text) return items;
+  var query = text.toLowerCase();
+  return items.map(function (item) {
+    return {
+      item: item,
+      at: optionText(item.name).toLowerCase().indexOf(query)
+    };
+  }).filter(function (match) {
+    return match.at >= 0;
+  }).sort(function (a, b) {
+    return (a.at > 0) - (b.at > 0);
+  }).map(function (match) {
+    return match.item;
+  });
 }; // rendered in document.body so overflow on any ancestor cannot clip it; popper flips and shifts it to stay in the viewport
 // eslint-disable-next-line react/prop-types
 
 
-var FloatingOptions = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var anchor = _ref3.anchor,
-      openTo = _ref3.openTo,
-      style = _ref3.style,
-      props = objectWithoutProperties(_ref3, ["anchor", "openTo", "style"]);
+var FloatingOptions = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var anchor = _ref4.anchor,
+      openTo = _ref4.openTo,
+      style = _ref4.style,
+      props = objectWithoutProperties(_ref4, ["anchor", "openTo", "style"]);
 
   var _useState = useState(null),
       _useState2 = slicedToArray(_useState, 2),
@@ -5090,21 +5137,21 @@ var FloatingOptions = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   }, attributes.popper, props)), document.body);
 }); // eslint-disable-next-line react/prop-types
 
-var AutocompleteSelect = function AutocompleteSelect(_ref4) {
-  var options = _ref4.options,
-      selectedOpt = _ref4.selectedOpt,
-      setSelected = _ref4.setSelected,
-      onChange = _ref4.onChange,
-      onSelect = _ref4.onSelect,
-      placeholder = _ref4.placeholder,
-      error = _ref4.error,
-      valid = _ref4.valid,
-      noOptions = _ref4.noOptions,
-      visibleOptionsQty = _ref4.visibleOptionsQty,
-      openTo = _ref4.openTo,
-      startOpen = _ref4.startOpen,
-      resetCallback = _ref4.resetCallback,
-      props = objectWithoutProperties(_ref4, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
+var AutocompleteSelect = function AutocompleteSelect(_ref5) {
+  var options = _ref5.options,
+      selectedOpt = _ref5.selectedOpt,
+      setSelected = _ref5.setSelected,
+      onChange = _ref5.onChange,
+      onSelect = _ref5.onSelect,
+      placeholder = _ref5.placeholder,
+      error = _ref5.error,
+      valid = _ref5.valid,
+      noOptions = _ref5.noOptions,
+      visibleOptionsQty = _ref5.visibleOptionsQty,
+      openTo = _ref5.openTo,
+      startOpen = _ref5.startOpen,
+      resetCallback = _ref5.resetCallback,
+      props = objectWithoutProperties(_ref5, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
 
   var _useState3 = useState(),
       _useState4 = slicedToArray(_useState3, 2),
@@ -5122,24 +5169,18 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
   }).map(function (row) {
     return row.item;
   });
-
-  var filterItems = function filterItems(text) {
-    return text ? selectable.filter(function (item) {
-      return optionText(item.name).toLowerCase().startsWith(text.toLowerCase());
-    }) : selectable;
-  };
-
-  var items = filterItems(search);
+  var items = matchOptions(selectable, search);
   var hasSelection = selectedOpt.value.length > 0;
   var selectedText = optionText(selectedOpt.desc);
+  var selectedItem = selectable.find(function (item) {
+    return item.value.toString() === selectedOpt.value;
+  });
 
   var _useCombobox = useCombobox({
     items: items,
     value: search || '',
     onChange: setSearch,
-    selected: selectable.find(function (item) {
-      return item.value.toString() === selectedOpt.value;
-    }),
+    selected: selectedItem,
     onSelectChange: function onSelectChange(item) {
       if (!item) return;
       if (onSelect) onSelect(item);
@@ -5157,12 +5198,16 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
     },
     disabled: props.disabled,
     feature: supercomplete({
-      onRequestItem: function onRequestItem(_ref5, res) {
-        var value = _ref5.value;
-        var matches = filterItems(value);
-        if (matches.length > 0) res({
+      onRequestItem: function onRequestItem(_ref6, res) {
+        var value = _ref6.value;
+
+        var _matchOptions = matchOptions(selectable, value),
+            _matchOptions2 = slicedToArray(_matchOptions, 1),
+            first = _matchOptions2[0];
+
+        if (first && optionText(first.name).toLowerCase().startsWith(value.toLowerCase())) res({
           index: 0,
-          item: matches[0]
+          item: first
         });
       },
       select: true,
@@ -5180,16 +5225,23 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
   useEffect(function () {
     if (startOpen) setOpen(true);
   }, []);
+  var inputProps = getInputProps();
+  var shownText = inputProps.value.toLowerCase();
+  var shownItem = shownText ? [items[focusIndex]].concat(toConsumableArray(selectable)).find(function (item) {
+    return item && optionText(item.name).toLowerCase() === shownText;
+  }) : selectedItem;
+  var swatchColors = shownItem && shownItem.color ? [shownItem.color] : [];
   var index = -1;
   return /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
     ref: setAnchor,
     className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
   }, props, {
     title: selectedText
-  }), /*#__PURE__*/React.createElement(SearchInput, _extends_1({
+  }), renderSwatches(swatchColors), /*#__PURE__*/React.createElement(SearchInput, _extends_1({
     placeholder: hasSelection ? selectedText : placeholder,
-    hasSelection: hasSelection
-  }, getInputProps())), /*#__PURE__*/React.createElement(ToggleButton, getToggleProps(), open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
+    hasSelection: hasSelection,
+    hasSwatch: swatchColors.length > 0
+  }, inputProps)), /*#__PURE__*/React.createElement(ToggleButton, getToggleProps(), open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
     size: "15px",
     color: theme.colors.info.border
   }) : /*#__PURE__*/React.createElement(Icons.ArrowDown, {
@@ -5208,9 +5260,9 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
       item: item,
       depth: 0
     };
-  }) : rows).map(function (_ref6, key) {
-    var item = _ref6.item,
-        depth = _ref6.depth;
+  }) : rows).map(function (_ref7, key) {
+    var item = _ref7.item,
+        depth = _ref7.depth;
 
     if (!isOption(item)) {
       return /*#__PURE__*/React.createElement(OptionGroup$1, {
@@ -5227,12 +5279,15 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
       className: item.divider ? 'alone' : '',
       style: {
         paddingLeft: 8 + depth * 16,
-        background: focusIndex === index ? theme.colors.info.bg : undefined
+        // overrides li:hover, so a resting mouse does not keep a second row lit
+        background: focusIndex === index ? theme.colors.info.bg : 'transparent'
       }
     }, getItemProps({
       item: item,
       index: index
-    })), /*#__PURE__*/React.createElement(Value$1, {
+    })), item.color && /*#__PURE__*/React.createElement(ColorOption, {
+      color: item.color
+    }), /*#__PURE__*/React.createElement(Value$1, {
       option: true,
       style: {
         marginRight: 4
@@ -5248,18 +5303,18 @@ var summarizeSelection = function summarizeSelection(names) {
 }; // eslint-disable-next-line react/prop-types
 
 
-var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
-  var options = _ref7.options,
-      selectedValues = _ref7.selectedValues,
-      onToggle = _ref7.onToggle,
-      placeholder = _ref7.placeholder,
-      error = _ref7.error,
-      valid = _ref7.valid,
-      noOptions = _ref7.noOptions,
-      visibleOptionsQty = _ref7.visibleOptionsQty,
-      openTo = _ref7.openTo,
-      startOpen = _ref7.startOpen,
-      props = objectWithoutProperties(_ref7, ["options", "selectedValues", "onToggle", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen"]);
+var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref8) {
+  var options = _ref8.options,
+      selectedValues = _ref8.selectedValues,
+      onToggle = _ref8.onToggle,
+      placeholder = _ref8.placeholder,
+      error = _ref8.error,
+      valid = _ref8.valid,
+      noOptions = _ref8.noOptions,
+      visibleOptionsQty = _ref8.visibleOptionsQty,
+      openTo = _ref8.openTo,
+      startOpen = _ref8.startOpen,
+      props = objectWithoutProperties(_ref8, ["options", "selectedValues", "onToggle", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen"]);
 
   var _useState7 = useState(''),
       _useState8 = slicedToArray(_useState7, 2),
@@ -5271,22 +5326,30 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
       open = _useState10[0],
       setOpen = _useState10[1];
 
-  var _useState11 = useState(null),
+  var _useState11 = useState(-1),
       _useState12 = slicedToArray(_useState11, 2),
-      anchor = _useState12[0],
-      setAnchor = _useState12[1];
+      focusIndex = _useState12[0],
+      setFocusIndex = _useState12[1];
+
+  var _useState13 = useState(null),
+      _useState14 = slicedToArray(_useState13, 2),
+      anchor = _useState14[0],
+      setAnchor = _useState14[1];
 
   var nodeRef = useRef();
   var listRef = useRef();
   var setNode = useCallback(mergeRefs([nodeRef, setAnchor]), []);
+
+  var close = function close() {
+    setOpen(false);
+    setSearch('');
+    setFocusIndex(-1);
+  };
+
   useEffect(function () {
     var closeOnOutsideClick = function closeOnOutsideClick(e) {
       var inList = listRef.current && listRef.current.contains(e.target);
-
-      if (nodeRef.current && !nodeRef.current.contains(e.target) && !inList) {
-        setOpen(false);
-        setSearch('');
-      }
+      if (nodeRef.current && !nodeRef.current.contains(e.target) && !inList) close();
     };
 
     document.addEventListener('mousedown', closeOnOutsideClick);
@@ -5300,14 +5363,19 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
   }).map(function (row) {
     return row.item;
   });
-  var items = search ? selectable.filter(function (item) {
-    return optionText(item.name).toLowerCase().startsWith(search.toLowerCase());
-  }) : selectable;
-  var summary = summarizeSelection(selectable.filter(function (item) {
+  var items = matchOptions(selectable, search);
+  var selectedItems = selectable.filter(function (item) {
     return selectedValues.includes(item.value.toString());
-  }).map(function (item) {
+  });
+  var summary = summarizeSelection(selectedItems.map(function (item) {
     return optionText(item.name);
   }));
+  var selectedColors = search ? [] : selectedItems.filter(function (item) {
+    return item.color;
+  }).map(function (item) {
+    return item.color;
+  });
+  var index = -1;
   return /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
     ref: setNode,
     className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
@@ -5316,19 +5384,38 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
     onClick: function onClick() {
       return !props.disabled && setOpen(true);
     }
-  }), /*#__PURE__*/React.createElement(SearchInput, {
+  }), renderSwatches(selectedColors), /*#__PURE__*/React.createElement(SearchInput, {
     value: search,
     placeholder: summary || placeholder,
     hasSelection: summary.length > 0,
+    hasSwatch: selectedColors.length > 0,
     disabled: props.disabled,
     onChange: function onChange(e) {
       setSearch(e.target.value);
       setOpen(true);
+      setFocusIndex(-1);
     },
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Escape') {
-        setOpen(false);
-        setSearch('');
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          {
+            e.preventDefault();
+            var last = items.length - 1;
+            if (!open) setOpen(true);else if (e.key === 'ArrowDown') setFocusIndex(focusIndex >= last ? 0 : focusIndex + 1);else setFocusIndex(focusIndex <= 0 ? last : focusIndex - 1);
+            break;
+          }
+
+        case 'Enter':
+          if (open && items[focusIndex]) {
+            e.preventDefault();
+            onToggle(items[focusIndex]);
+          }
+
+          break;
+
+        case 'Escape':
+          close();
       }
     }
   }), /*#__PURE__*/React.createElement(ToggleButton, {
@@ -5336,7 +5423,9 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
     tabIndex: -1,
     onClick: function onClick(e) {
       e.stopPropagation();
-      if (!props.disabled) setOpen(!open);
+      if (props.disabled) return;
+      setOpen(!open);
+      setFocusIndex(-1);
     }
   }, open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
     size: "15px",
@@ -5358,9 +5447,9 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
       item: item,
       depth: 0
     };
-  }) : rows).map(function (_ref8, key) {
-    var item = _ref8.item,
-        depth = _ref8.depth;
+  }) : rows).map(function (_ref9, key) {
+    var item = _ref9.item,
+        depth = _ref9.depth;
 
     if (!isOption(item)) {
       return /*#__PURE__*/React.createElement(OptionGroup$1, {
@@ -5371,11 +5460,18 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
       }, item.name);
     }
 
+    var itemIndex = ++index;
     return /*#__PURE__*/React.createElement("li", {
       key: key,
+      ref: itemIndex === focusIndex ? scrollIntoView : undefined,
       style: {
         paddingLeft: 8 + depth * 16,
-        justifyContent: 'flex-start'
+        justifyContent: 'flex-start',
+        // overrides li:hover, so a resting mouse does not keep a second row lit
+        background: itemIndex === focusIndex ? theme.colors.info.bg : 'transparent'
+      },
+      onPointerMove: function onPointerMove() {
+        return setFocusIndex(itemIndex);
       },
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
@@ -5386,7 +5482,9 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
       }
     }, /*#__PURE__*/React.createElement(CustomCheckBox, null, selectedValues.includes(item.value.toString()) && /*#__PURE__*/React.createElement(Icons.Check, {
       size: "17px"
-    })), /*#__PURE__*/React.createElement(Value$1, {
+    })), item.color && /*#__PURE__*/React.createElement(ColorOption, {
+      color: item.color
+    }), /*#__PURE__*/React.createElement(Value$1, {
       option: true,
       style: {
         marginRight: 4
@@ -5395,27 +5493,27 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
   })));
 };
 
-var MultiDropdown = /*#__PURE__*/forwardRef(function (_ref9, ref) {
-  var name = _ref9.name,
-      label = _ref9.label,
-      help = _ref9.help,
-      error = _ref9.error,
-      valid = _ref9.valid,
-      options = _ref9.options,
-      placeholder = _ref9.placeholder,
-      onChange = _ref9.onChange,
-      defaultValue = _ref9.defaultValue,
-      visibleOptionsQty = _ref9.visibleOptionsQty,
-      openTo = _ref9.openTo,
-      _ref9$startOpen = _ref9.startOpen,
-      startOpen = _ref9$startOpen === void 0 ? false : _ref9$startOpen,
-      resetCallback = _ref9.resetCallback,
-      props = objectWithoutProperties(_ref9, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
-
-  var _useState13 = useState([]),
-      _useState14 = slicedToArray(_useState13, 2),
-      selectedValues = _useState14[0],
-      setSelectedValues = _useState14[1];
+var MultiDropdown = /*#__PURE__*/forwardRef(function (_ref10, ref) {
+  var name = _ref10.name,
+      label = _ref10.label,
+      help = _ref10.help,
+      error = _ref10.error,
+      valid = _ref10.valid,
+      options = _ref10.options,
+      placeholder = _ref10.placeholder,
+      onChange = _ref10.onChange,
+      defaultValue = _ref10.defaultValue,
+      visibleOptionsQty = _ref10.visibleOptionsQty,
+      openTo = _ref10.openTo,
+      _ref10$startOpen = _ref10.startOpen,
+      startOpen = _ref10$startOpen === void 0 ? false : _ref10$startOpen,
+      resetCallback = _ref10.resetCallback,
+      props = objectWithoutProperties(_ref10, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
+
+  var _useState15 = useState([]),
+      _useState16 = slicedToArray(_useState15, 2),
+      selectedValues = _useState16[0],
+      setSelectedValues = _useState16[1];
 
   var valueRef = useRef();
   var selectable = flattenOptions(options).filter(function (row) {
@@ -5502,31 +5600,31 @@ var MultiDropdown = /*#__PURE__*/forwardRef(function (_ref9, ref) {
     }, optionText(item.name));
   })));
 });
-var SingleDropdown = /*#__PURE__*/forwardRef(function (_ref10, ref) {
-  var name = _ref10.name,
-      label = _ref10.label,
-      help = _ref10.help,
-      error = _ref10.error,
-      valid = _ref10.valid,
-      options = _ref10.options,
-      placeholder = _ref10.placeholder,
-      onChange = _ref10.onChange,
-      defaultValue = _ref10.defaultValue,
-      visibleOptionsQty = _ref10.visibleOptionsQty,
-      openTo = _ref10.openTo,
-      _ref10$startOpen = _ref10.startOpen,
-      startOpen = _ref10$startOpen === void 0 ? false : _ref10$startOpen,
-      props = objectWithoutProperties(_ref10, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
+var SingleDropdown = /*#__PURE__*/forwardRef(function (_ref11, ref) {
+  var name = _ref11.name,
+      label = _ref11.label,
+      help = _ref11.help,
+      error = _ref11.error,
+      valid = _ref11.valid,
+      options = _ref11.options,
+      placeholder = _ref11.placeholder,
+      onChange = _ref11.onChange,
+      defaultValue = _ref11.defaultValue,
+      visibleOptionsQty = _ref11.visibleOptionsQty,
+      openTo = _ref11.openTo,
+      _ref11$startOpen = _ref11.startOpen,
+      startOpen = _ref11$startOpen === void 0 ? false : _ref11$startOpen,
+      props = objectWithoutProperties(_ref11, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
 
   var defaultSelected = {
     value: '',
     desc: ''
   };
 
-  var _useState15 = useState(defaultSelected),
-      _useState16 = slicedToArray(_useState15, 2),
-      selectedOpt = _useState16[0],
-      setSelected = _useState16[1];
+  var _useState17 = useState(defaultSelected),
+      _useState18 = slicedToArray(_useState17, 2),
+      selectedOpt = _useState18[0],
+      setSelected = _useState18[1];
 
   var valueRef = useRef();
 
@@ -5608,9 +5706,9 @@ var SingleDropdown = /*#__PURE__*/forwardRef(function (_ref10, ref) {
     disabled: props.disabled
   }));
 });
-var Dropdown = /*#__PURE__*/forwardRef(function (_ref11, ref) {
-  var multiple = _ref11.multiple,
-      props = objectWithoutProperties(_ref11, ["multiple"]);
+var Dropdown = /*#__PURE__*/forwardRef(function (_ref12, ref) {
+  var multiple = _ref12.multiple,
+      props = objectWithoutProperties(_ref12, ["multiple"]);
 
   return multiple ? /*#__PURE__*/React.createElement(MultiDropdown, _extends_1({
     ref: ref
@@ -5619,17 +5717,17 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref11, ref) {
   }, props));
 }); // eslint-disable-next-line react/prop-types
 
-var BoxOptions = function BoxOptions(_ref12) {
-  var options = _ref12.options,
-      isChild = _ref12.isChild,
-      setSelected = _ref12.setSelected,
-      onChange = _ref12.onChange,
-      noOptions = _ref12.noOptions,
-      selectedOpt = _ref12.selectedOpt,
-      setOpen = _ref12.setOpen,
-      onSelect = _ref12.onSelect,
-      visibleOptionsQty = _ref12.visibleOptionsQty,
-      openTo = _ref12.openTo;
+var BoxOptions = function BoxOptions(_ref13) {
+  var options = _ref13.options,
+      isChild = _ref13.isChild,
+      setSelected = _ref13.setSelected,
+      onChange = _ref13.onChange,
+      noOptions = _ref13.noOptions,
+      selectedOpt = _ref13.selectedOpt,
+      setOpen = _ref13.setOpen,
+      onSelect = _ref13.onSelect,
+      visibleOptionsQty = _ref13.visibleOptionsQty,
+      openTo = _ref13.openTo;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(Options$1, null, /*#__PURE__*/React.createElement("li", {
@@ -5701,32 +5799,32 @@ var BoxOptions = function BoxOptions(_ref12) {
     })) : /*#__PURE__*/React.createElement(OptionGroup$1, null, item.name));
   }));
 };
-var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref13, ref) {
-  var name = _ref13.name,
-      label = _ref13.label,
-      help = _ref13.help,
-      error = _ref13.error,
-      valid = _ref13.valid,
-      options = _ref13.options,
-      placeholder = _ref13.placeholder,
-      defaultValue = _ref13.defaultValue,
-      multiple = _ref13.multiple,
-      type = _ref13.type,
-      tooltip = _ref13.tooltip,
-      onChange = _ref13.onChange,
-      visibleOptionsQty = _ref13.visibleOptionsQty,
-      openTo = _ref13.openTo,
-      props = objectWithoutProperties(_ref13, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
-
-  var _useState17 = useState(false),
-      _useState18 = slicedToArray(_useState17, 2),
-      open = _useState18[0],
-      setOpen = _useState18[1];
+var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref14, ref) {
+  var name = _ref14.name,
+      label = _ref14.label,
+      help = _ref14.help,
+      error = _ref14.error,
+      valid = _ref14.valid,
+      options = _ref14.options,
+      placeholder = _ref14.placeholder,
+      defaultValue = _ref14.defaultValue,
+      multiple = _ref14.multiple,
+      type = _ref14.type,
+      tooltip = _ref14.tooltip,
+      onChange = _ref14.onChange,
+      visibleOptionsQty = _ref14.visibleOptionsQty,
+      openTo = _ref14.openTo,
+      props = objectWithoutProperties(_ref14, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
 
-  var _useState19 = useState([]),
+  var _useState19 = useState(false),
       _useState20 = slicedToArray(_useState19, 2),
-      selectedOpt = _useState20[0],
-      setSelected = _useState20[1];
+      open = _useState20[0],
+      setOpen = _useState20[1];
+
+  var _useState21 = useState([]),
+      _useState22 = slicedToArray(_useState21, 2),
+      selectedOpt = _useState22[0],
+      setSelected = _useState22[1];
 
   var nodeSelect = useRef();
   var valueRef = useRef();
@@ -5952,16 +6050,16 @@ var HandleState = function HandleState(index, setSelected, selectedOpt, multiple
   setSelected(ret);
 };
 
-var SelectOption = function SelectOption(_ref14) {
-  var options = _ref14.options,
-      setSelected = _ref14.setSelected,
-      selectedOpt = _ref14.selectedOpt,
-      multiple = _ref14.multiple,
-      type = _ref14.type,
-      onChange = _ref14.onChange,
-      noOptions = _ref14.noOptions,
-      visibleOptionsQty = _ref14.visibleOptionsQty,
-      openTo = _ref14.openTo;
+var SelectOption = function SelectOption(_ref15) {
+  var options = _ref15.options,
+      setSelected = _ref15.setSelected,
+      selectedOpt = _ref15.selectedOpt,
+      multiple = _ref15.multiple,
+      type = _ref15.type,
+      onChange = _ref15.onChange,
+      noOptions = _ref15.noOptions,
+      visibleOptionsQty = _ref15.visibleOptionsQty,
+      openTo = _ref15.openTo;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(OptionsPeople, null, /*#__PURE__*/React.createElement("li", null, noOptions || 'No data found'));
@@ -5996,9 +6094,9 @@ var SelectOption = function SelectOption(_ref14) {
   }));
 };
 
-var PhotoComponent = function PhotoComponent(_ref15) {
-  var profile = _ref15.profile,
-      index = _ref15.index;
+var PhotoComponent = function PhotoComponent(_ref16) {
+  var profile = _ref16.profile,
+      index = _ref16.index;
   var customStyle = {
     position: 'relative',
     display: 'inline-flex',
@@ -6022,11 +6120,11 @@ var PhotoComponent = function PhotoComponent(_ref15) {
   }));
 };
 
-var SelectValueRender = function SelectValueRender(_ref16) {
-  var options = _ref16.options,
-      selectedOpt = _ref16.selectedOpt,
-      type = _ref16.type,
-      noOptions = _ref16.noOptions;
+var SelectValueRender = function SelectValueRender(_ref17) {
+  var options = _ref17.options,
+      selectedOpt = _ref17.selectedOpt,
+      type = _ref17.type,
+      noOptions = _ref17.noOptions;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {