@entur/dropdown 2.2.4 → 3.0.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.1](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@3.0.0...@entur/dropdown@3.0.1) (2022-04-19)
+
+**Note:** Version bump only for package @entur/dropdown
+
+# [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
+
+- **dropdown:** add ref forwarding to dropdown and searchable dropdown ([af4cae7](https://bitbucket.org/enturas/design-system/commits/af4cae7bb5fe83c5d1c2f58462c3ba6e77f2e1b8))
+
 ## [2.2.4](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@2.2.3...@entur/dropdown@2.2.4) (2022-03-01)
 
 **Note:** Version bump only for package @entur/dropdown

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) {
@@ -321,7 +359,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__default["default"].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? 'Vennligst velg' : _ref$placeholder,
@@ -397,8 +435,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"];
 
@@ -412,7 +452,7 @@ function LowerCaseFilterTest(item, input) {
   return inputRegex.test(item.label);
 }
 
-var SearchableDropdown = function SearchableDropdown(_ref) {
+var SearchableDropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
@@ -443,8 +483,14 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       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);
@@ -463,24 +509,50 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     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
-  }, 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) {
@@ -1366,7 +1438,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__default["default"].forwardRef(function (_ref, ref) {
   var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
       debounceTimeout = _ref.debounceTimeout,
       disabled = _ref.disabled,
@@ -1437,9 +1509,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) {