@entur/dropdown 4.0.0-beta.0 → 4.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.1](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@3.0.15...@entur/dropdown@4.0.0-beta.1) (2022-09-27)
+
+### Features
+
+- **searchable dropdown:** fixes from beta testing ([f88405f](https://bitbucket.org/enturas/design-system/commits/f88405fd45353163bcd0b202b538a470d86e5d8c))
+- **searchable dropdown:** mvp new controlled searchable dropdown component (alpha) ([b8b2d05](https://bitbucket.org/enturas/design-system/commits/b8b2d051461406de0544b92b5169b066c91386ce))
+
 ## [3.0.14](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@3.0.13...@entur/dropdown@3.0.14) (2022-08-31)
 
 **Note:** Version bump only for package @entur/dropdown

package/dist/beta/SearchableDropdown.d.ts

@@ -3,12 +3,18 @@ import { NormalizedDropdownItemType } from '../useNormalizedItems';
 import './dropdown.scss';
 export declare type SearchableDropdownProps = {
     items: NormalizedDropdownItemType[];
-    value: NormalizedDropdownItemType;
+    selectedItem: NormalizedDropdownItemType | null;
     onChange: (value: NormalizedDropdownItemType | undefined | null) => void;
     label: string;
     placeholder?: string;
     clearable?: boolean;
     openOnFocus?: boolean;
     className?: string;
+    style?: {
+        [key: string]: any;
+    };
+    listStyle?: {
+        [key: string]: any;
+    };
 };
-export declare const SearchableDropdownBeta: ({ items, value, onChange, label, placeholder, clearable, openOnFocus, className, ...rest }: SearchableDropdownProps) => JSX.Element;
+export declare const SearchableDropdownBeta: ({ items, selectedItem: value, onChange, label, placeholder, clearable, openOnFocus, className, listStyle, ...rest }: SearchableDropdownProps) => JSX.Element;

package/dist/dropdown.cjs.development.js

@@ -1785,7 +1785,7 @@ function SelectedItemsLabel(items) {
   }).toString() : items.length + " elementer valgt";
 }
 
-var _excluded = ["items", "value", "onChange", "label", "placeholder", "clearable", "openOnFocus", "className"];
+var _excluded = ["items", "selectedItem", "onChange", "label", "placeholder", "clearable", "openOnFocus", "className", "listStyle"];
 
 function lowerCaseFilterTest(item, input) {
   if (!input) {
@@ -1795,13 +1795,14 @@ function lowerCaseFilterTest(item, input) {
   var sanitizeEscapeCharacters = input.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
   var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
   return inputRegex.test(item.label);
-}
+} // TODO Husk å @deprecate searchable-prop-en til Dropdown når denne komponenten skal ha official release
+
 
 var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
   var _selectedItem$label;
 
   var items = _ref.items,
-      value = _ref.value,
+      value = _ref.selectedItem,
       onChange = _ref.onChange,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? '!MANGLER LABEL!' : _ref$label,
@@ -1811,6 +1812,7 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       _ref$openOnFocus = _ref.openOnFocus,
       openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
       className = _ref.className,
+      listStyle = _ref.listStyle,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _React$useState = React__default["default"].useState(items),
@@ -1849,7 +1851,8 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     },
     items: filteredItems,
     itemToString: function itemToString(item) {
-      return item ? item.value : '';
+      if (item) return item.value;
+      return '';
     },
     stateReducer: stateReducer,
     selectedItem: value,
@@ -1869,12 +1872,15 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       selectedItem = _useCombobox.selectedItem,
       openMenu = _useCombobox.openMenu,
       inputValue = _useCombobox.inputValue,
-      setInputValue = _useCombobox.setInputValue;
+      setInputValue = _useCombobox.setInputValue; // TODO Husk å generelt legge inn støtte for typeof value === string
+
 
   React.useEffect(function () {
     if (inputValue.toLowerCase() === (value == null ? void 0 : value.label.toLowerCase()) || inputValue.toLowerCase() === (value == null ? void 0 : value.value.toLowerCase())) setInputValue('');
   }, [value]);
-  return React__default["default"].createElement("div", null, React__default["default"].createElement(form.BaseFormControl, _extends({
+  return React__default["default"].createElement("div", {
+    className: "eds-searchable-dropdown__wrapper"
+  }, React__default["default"].createElement(form.BaseFormControl, _extends({
     append: React__default["default"].createElement(Appendix, {
       selectedItem: selectedItem,
       isOpen: isOpen,
@@ -1905,22 +1911,23 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     onFocus: function onFocus() {
       if (!isOpen && openOnFocus) openMenu();
       setHideSelectedItem(true);
-    }
-  }), {
+    },
     onBlur: function onBlur() {
       setHideSelectedItem(false);
     },
     ref: inputRef
-  }))), React__default["default"].createElement("ul", _extends({
-    className: classNames__default["default"]('eds-dropdown-list', {
-      'eds-dropdown-list--open': isOpen
+  })))), React__default["default"].createElement("ul", _extends({
+    className: classNames__default["default"]('eds-searchable-dropdown__list', {
+      'eds-searchable-dropdown__list--open': isOpen
     })
-  }, getMenuProps(), rest), isOpen ? filteredItems.map(function (item, index) {
+  }, getMenuProps(), {
+    style: _extends({}, rest.style, listStyle)
+  }), isOpen ? filteredItems.map(function (item, index) {
     return (// eslint-disable-next-line react/jsx-key
       React__default["default"].createElement("li", _extends({
-        className: classNames__default["default"]('eds-dropdown-list__item', {
-          'eds-dropdown-list__item--highlighted': highlightedIndex === index,
-          'eds-dropdown-list__item--selected': selectedItem === item
+        className: classNames__default["default"]('eds-searchable-dropdown__list__item', {
+          'eds-searchable-dropdown__list__item--highlighted': highlightedIndex === index,
+          'eds-searchable-dropdown__list__item--selected': selectedItem === item
         })
       }, getItemProps({
         key: "" + index + item.value,
@@ -1930,7 +1937,7 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
         return React__default["default"].createElement(Icon, {
           key: index,
           inline: true,
-          className: "eds-dropdown-list__item-icon"
+          className: "eds-searchable-dropdown__list__item-icon"
         });
       })), selectedItem === item && React__default["default"].createElement(icons.CheckIcon, null))
     );
@@ -1961,17 +1968,17 @@ var Appendix = function Appendix(_ref4) {
       alignItems: 'center'
     }
   }, clearable && selectedItem && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("button", {
-    className: "eds-dropdown__clear-button",
+    className: "eds-searchable-dropdown__clear-button",
     type: "button",
     tabIndex: -1,
     onClick: function onClick() {
       return onChange(null);
     }
   }, React__default["default"].createElement(icons.CloseSmallIcon, null)), React__default["default"].createElement("div", {
-    className: "eds-dropdown__divider"
+    className: "eds-searchable-dropdown__divider"
   })), React__default["default"].createElement("button", _extends({}, getToggleButtonProps({
-    className: classNames__default["default"]('eds-dropdown__toggle-button', {
-      'eds-dropdown__toggle-button--open': isOpen
+    className: classNames__default["default"]('eds-searchable-dropdown__toggle-button', {
+      'eds-searchable-dropdown__toggle-button--open': isOpen
     })
   }), {
     tabIndex: "-1",