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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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.2](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@4.0.0-beta.1...@entur/dropdown@4.0.0-beta.2) (2022-09-30)
+
+### Features
+
+- **searchable dropdown:** fixes from beta testing ([c460e94](https://bitbucket.org/enturas/design-system/commits/c460e947b2f39fd486b79d433d43a4ac3cdc9bdc))
+
 # [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

package/dist/beta/SearchableDropdown.d.ts

@@ -1,14 +1,30 @@
 /// <reference types="react" />
+import { VariantType } from '@entur/form';
 import { NormalizedDropdownItemType } from '../useNormalizedItems';
 import './dropdown.scss';
 export declare type SearchableDropdownProps = {
+    /** Tilgjengelige valg i dropdown-en */
     items: NormalizedDropdownItemType[];
+    /** Valgt element. Bruk null for ingen verdi. */
     selectedItem: NormalizedDropdownItemType | null;
-    onChange: (value: NormalizedDropdownItemType | undefined | null) => void;
+    /** Callback for når brukeren endrer valg */
+    onChange: (value: NormalizedDropdownItemType | null) => void;
+    /** Beskrivende tekst som forklarer feltet */
     label: string;
+    /** Placeholder-tekst når ingenting er satt */
     placeholder?: string;
+    /** Vis knapp for å nullstille Dropdown-en skal vises
+     * @default false
+     */
     clearable?: boolean;
+    /** Vis listen med valg skal vises på fokus av inputfeltet
+     * @default false
+     */
     openOnFocus?: boolean;
+    /**  Gjør dropdown-en til å kun kunne leses */
+    readonly?: boolean;
+    feedback?: string;
+    variant?: VariantType;
     className?: string;
     style?: {
         [key: string]: any;
@@ -16,5 +32,6 @@ export declare type SearchableDropdownProps = {
     listStyle?: {
         [key: string]: any;
     };
+    [key: string]: any;
 };
-export declare const SearchableDropdownBeta: ({ items, selectedItem: value, onChange, label, placeholder, clearable, openOnFocus, className, listStyle, ...rest }: SearchableDropdownProps) => JSX.Element;
+export declare const SearchableDropdownBeta: ({ items, selectedItem: value, onChange, label, placeholder, clearable, openOnFocus, readonly, feedback, variant, 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", "selectedItem", "onChange", "label", "placeholder", "clearable", "openOnFocus", "className", "listStyle"];
+var _excluded = ["items", "selectedItem", "onChange", "label", "placeholder", "clearable", "openOnFocus", "readonly", "feedback", "variant", "className", "listStyle"];
 
 function lowerCaseFilterTest(item, input) {
   if (!input) {
@@ -1804,13 +1804,17 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
   var items = _ref.items,
       value = _ref.selectedItem,
       onChange = _ref.onChange,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? '!MANGLER LABEL!' : _ref$label,
+      label = _ref.label,
       placeholder = _ref.placeholder,
       _ref$clearable = _ref.clearable,
       clearable = _ref$clearable === void 0 ? false : _ref$clearable,
       _ref$openOnFocus = _ref.openOnFocus,
       openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
+      _ref$readonly = _ref.readonly,
+      readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+      feedback = _ref.feedback,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'info' : _ref$variant,
       className = _ref.className,
       listStyle = _ref.listStyle,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -1858,7 +1862,7 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     selectedItem: value,
     onSelectedItemChange: function onSelectedItemChange(_ref3) {
       var newSelectedItem = _ref3.selectedItem;
-      return onChange(newSelectedItem);
+      return onChange(newSelectedItem != null ? newSelectedItem : null);
     }
   }, rest)),
       isOpen = _useCombobox.isOpen,
@@ -1871,13 +1875,9 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       getItemProps = _useCombobox.getItemProps,
       selectedItem = _useCombobox.selectedItem,
       openMenu = _useCombobox.openMenu,
-      inputValue = _useCombobox.inputValue,
-      setInputValue = _useCombobox.setInputValue; // TODO Husk å generelt legge inn støtte for typeof value === string
+      inputValue = _useCombobox.inputValue; // 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", {
     className: "eds-searchable-dropdown__wrapper"
   }, React__default["default"].createElement(form.BaseFormControl, _extends({
@@ -1887,13 +1887,16 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       clearable: clearable,
       loading: false,
       loadingText: '',
-      readOnly: false,
+      readOnly: readonly,
       onChange: onChange,
       getToggleButtonProps: getToggleButtonProps
     }),
     className: classNames__default["default"]('eds-searchable-dropdown', className),
     label: label,
     isFilled: selectedItem ? true : false,
+    feedback: feedback,
+    variant: variant,
+    readOnly: readonly,
     labelProps: getLabelProps()
   }, getComboboxProps(), rest), !hideSelectedItem && selectedItem && !inputValue && React__default["default"].createElement("span", {
     className: "eds-searchable-dropdown__selected-item__wrapper"
@@ -1927,7 +1930,7 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       React__default["default"].createElement("li", _extends({
         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
+          'eds-searchable-dropdown__list__item--selected': (selectedItem == null ? void 0 : selectedItem.value) === item.value
         })
       }, getItemProps({
         key: "" + index + item.value,
@@ -1939,25 +1942,23 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
           inline: true,
           className: "eds-searchable-dropdown__list__item-icon"
         });
-      })), selectedItem === item && React__default["default"].createElement(icons.CheckIcon, null))
+      })), (selectedItem == null ? void 0 : selectedItem.value) === item.value && React__default["default"].createElement(icons.CheckIcon, null))
     );
   }) : null));
 };
 
 var Appendix = function Appendix(_ref4) {
   var clearable = _ref4.clearable,
-      loading = _ref4.loading,
-      loadingText = _ref4.loadingText,
       readOnly = _ref4.readOnly,
       getToggleButtonProps = _ref4.getToggleButtonProps,
       selectedItem = _ref4.selectedItem,
       isOpen = _ref4.isOpen,
       onChange = _ref4.onChange;
 
-  if (loading) {
-    return React__default["default"].createElement(DropdownLoadingDots, null, loadingText);
-  }
-
+  // TODO implement loading / async
+  // if (loading) {
+  //   return <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;
+  // }
   if (readOnly) {
     return null;
   }
@@ -1968,17 +1969,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-searchable-dropdown__clear-button",
+    className: "eds-searchable-dropdown-appendix__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-searchable-dropdown__divider"
+    className: "eds-searchable-dropdown-appendix__divider"
   })), React__default["default"].createElement("button", _extends({}, getToggleButtonProps({
-    className: classNames__default["default"]('eds-searchable-dropdown__toggle-button', {
-      'eds-searchable-dropdown__toggle-button--open': isOpen
+    className: classNames__default["default"]('eds-searchable-dropdown-appendix__toggle-button', {
+      'eds-searchable-dropdown-appendix__toggle-button--open': isOpen
     })
   }), {
     tabIndex: "-1",