@entur/dropdown 2.3.0 → 3.0.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@2.3.0...@entur/dropdown@3.0.0) (2022-03-17)
+
+### Bug Fixes
+
+- **dropdown:** fix text truncate shortening words which don't need shortening ([4072480](https://bitbucket.org/enturas/design-system/commits/40724805af543369513d61c8d8d5b2461c48cc2f))
+
+### Features
+
+- **dropdown:** improve usability of input field in searchable dropdown ([9f24e4b](https://bitbucket.org/enturas/design-system/commits/9f24e4b27b64b7f637914be6715a1ff4af7c0b77))
+
+### BREAKING CHANGES
+
+- **dropdown:** - Visuals and interaction method have changed
+
 # [2.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@2.2.4...@entur/dropdown@2.3.0) (2022-03-14)
 
 ### Features

package/dist/dropdown.cjs.development.js

@@ -87,6 +87,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__default["default"].createContext(null);
 var DownshiftProvider = function DownshiftProvider(_ref) {
@@ -445,8 +483,14 @@ var SearchableDropdown = /*#__PURE__*/React__default["default"].forwardRef(funct
       selectHighlightedItem = _useDownshift.selectHighlightedItem,
       isOpen = _useDownshift.isOpen,
       openMenu = _useDownshift.openMenu,
+      closeMenu = _useDownshift.closeMenu,
       selectedItem = _useDownshift.selectedItem;
 
+  var _useState = React.useState(false),
+      hideSelectedItem = _useState[0],
+      setHideSelectedItem = _useState[1];
+
+  var inputRef = React.useRef(null);
   var filteredItems = React__default["default"].useMemo(function () {
     return items.filter(function (item) {
       return itemFilter(item, inputValue);
@@ -465,28 +509,52 @@ var SearchableDropdown = /*#__PURE__*/React__default["default"].forwardRef(funct
     label: label,
     isFilled: selectedItem ? true : false,
     disableLabelAnimation: disableLabelAnimation
-  }, selectedItem && !inputValue && React__default["default"].createElement("span", {
-    className: "eds-dropdown__searchable-selected-item"
-  }, selectedItem.label), React__default["default"].createElement("input", _extends({}, getInputProps(_extends({
+  }, !hideSelectedItem && selectedItem && !inputValue && React__default["default"].createElement("span", {
+    className: "eds-dropdown__searchable-selected-item__wrapper"
+  }, React__default["default"].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__default["default"].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,