@entur/dropdown 2.2.3 → 3.0.0

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) {
@@ -311,7 +349,7 @@ var Appendix$1 = function Appendix(_ref3) {
 };
 
 var _excluded$4 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
-var RegularDropdown = function RegularDropdown(_ref) {
+var RegularDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? 'Vennligst velg' : _ref$placeholder,
@@ -387,8 +425,10 @@ var RegularDropdown = function RegularDropdown(_ref) {
         !isOpen && openMenu();
       }
     }
-  }, rest))), selectedItem ? selectedItem.label : placeholder));
-};
+  }, rest)), {
+    ref: ref
+  }), selectedItem ? selectedItem.label : placeholder));
+});
 
 var _excluded$3 = ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation", "placeholder"];
 
@@ -402,7 +442,7 @@ function LowerCaseFilterTest(item, input) {
   return inputRegex.test(item.label);
 }
 
-var SearchableDropdown = function SearchableDropdown(_ref) {
+var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
@@ -433,8 +473,14 @@ var SearchableDropdown = function SearchableDropdown(_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);
@@ -453,24 +499,50 @@ var SearchableDropdown = function SearchableDropdown(_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
-  }, rest)))));
+    placeholder: selectedItem ? selectedItem.label : placeholder
+  }, rest)), {
+    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) {
@@ -1356,7 +1428,7 @@ debounceTimeout) {
 };
 
 var _excluded$2 = ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle", "itemFilter", "disableLabelAnimation"];
-var Dropdown = function Dropdown(_ref) {
+var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
       debounceTimeout = _ref.debounceTimeout,
       disabled = _ref.disabled,
@@ -1427,9 +1499,10 @@ var Dropdown = function Dropdown(_ref) {
     openOnFocus: openOnFocus,
     listStyle: listStyle,
     clearable: clearable,
-    disableLabelAnimation: disableLabelAnimation
+    disableLabelAnimation: disableLabelAnimation,
+    ref: ref
   }, searchAbleProps))));
-};
+});
 
 var _excluded$1 = ["className", "disabled", "readOnly", "items", "loadingText", "prepend", "style", "label", "variant", "feedback", "disableLabelAnimation"];
 var NativeDropdown = function NativeDropdown(_ref) {