@entur/dropdown 2.3.0 → 3.0.2

package/dist/dropdown.esm.js

@@ -1,5 +1,5 @@
 import { debounce, useRandomId, warnAboutMissingStyles } from '@entur/utils';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import Downshift, { useSelect } from 'downshift';
 import classNames from 'classnames';
 import { BaseFormControl, VariantProvider, FeedbackText } from '@entur/form';
@@ -77,6 +77,44 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+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 _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var _excluded$8 = ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"];
 var DownshiftContext = /*#__PURE__*/React.createContext(null);
 var DownshiftProvider = function DownshiftProvider(_ref) {
@@ -435,8 +473,14 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       selectHighlightedItem = _useDownshift.selectHighlightedItem,
       isOpen = _useDownshift.isOpen,
       openMenu = _useDownshift.openMenu,
+      closeMenu = _useDownshift.closeMenu,
       selectedItem = _useDownshift.selectedItem;
 
+  var _useState = useState(false),
+      hideSelectedItem = _useState[0],
+      setHideSelectedItem = _useState[1];
+
+  var inputRef = useRef(null);
   var filteredItems = React.useMemo(function () {
     return items.filter(function (item) {
       return itemFilter(item, inputValue);
@@ -455,28 +499,52 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label: label,
     isFilled: selectedItem ? true : false,
     disableLabelAnimation: disableLabelAnimation
-  }, selectedItem && !inputValue && React.createElement("span", {
-    className: "eds-dropdown__searchable-selected-item"
-  }, selectedItem.label), React.createElement("input", _extends({}, getInputProps(_extends({
+  }, !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
+    className: "eds-dropdown__searchable-selected-item__wrapper"
+  }, React.createElement("span", {
+    className: "eds-dropdown__searchable-selected-item",
+    onClick: function onClick() {
+      var _inputRef$current;
+
+      return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+    }
+  }, selectedItem.label)), React.createElement("input", _extends({}, getInputProps(_extends({
     disabled: disabled,
     readOnly: readOnly,
     className: 'eds-form-control eds-dropdown__input',
     onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && e.key === 'Tab') {
-        selectHighlightedItem();
-      }
+      if (selectOnTab && e.key === 'Tab') selectHighlightedItem();
     },
     onFocus: function onFocus() {
-      if (openOnFocus) {
-        !isOpen && openMenu();
-      }
+      if (!isOpen && openOnFocus) openMenu();
+      setHideSelectedItem(true);
     },
-    placeholder: selectedItem ? undefined : placeholder
+    placeholder: selectedItem ? selectedItem.label : placeholder
   }, rest)), {
-    ref: ref
+    onBlur: function onBlur() {
+      setHideSelectedItem(false);
+      closeMenu();
+    },
+    ref: mergeRefs(ref, inputRef)
   })));
 });
 
+var mergeRefs = function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return function (node) {
+    for (var _iterator = _createForOfIteratorHelperLoose(refs), _step; !(_step = _iterator()).done;) {
+      var ref = _step.value;
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) ref.current = node;
+    }
+  };
+};
+
 var DropdownInputGroup = function DropdownInputGroup(_ref) {
   var children = _ref.children,
       feedback = _ref.feedback,