@entur/dropdown 3.0.15 → 3.0.16

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 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
+
+- **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/DropdownList.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { UseComboboxGetMenuPropsOptions, GetPropsCommonOptions, UseComboboxGetItemPropsOptions } from 'downshift';
+import { NormalizedDropdownItemType } from '../useNormalizedItems';
+declare type DropdownListProps = {
+    selectedItem: NormalizedDropdownItemType | null;
+    isOpen: boolean;
+    filteredItems: NormalizedDropdownItemType[];
+    highlightedIndex: number;
+    listStyle: {
+        [key: string]: any;
+    } | undefined;
+    getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
+    getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType>) => any;
+    [key: string]: any;
+};
+export declare const DropdownList: ({ selectedItem, isOpen, getMenuProps, getItemProps, filteredItems, highlightedIndex, listStyle, ...rest }: DropdownListProps) => JSX.Element;
+export {};

package/dist/beta/SearchableDropdown.d.ts

@@ -0,0 +1,42 @@
+/// <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;
+    /** 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
+     * @default false
+     */
+    readonly?: boolean;
+    /** Hvilken valideringsvariant som gjelder */
+    variant?: VariantType;
+    /** Valideringsmelding, brukes sammen med `variant` */
+    feedback?: string;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+    /** Style som kun påføres listeelementet */
+    listStyle?: {
+        [key: string]: any;
+    };
+    [key: string]: any;
+};
+export declare const SearchableDropdownBeta: ({ items, selectedItem: value, onChange, label, placeholder, clearable, openOnFocus, readonly, feedback, variant, className, listStyle, ...rest }: SearchableDropdownProps) => JSX.Element;

package/dist/beta/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchableDropdown';

package/dist/dropdown.cjs.development.js

@@ -11,6 +11,7 @@ var icons = require('@entur/icons');
 var a11y = require('@entur/a11y');
 var loader = require('@entur/loader');
 var tokens = require('@entur/tokens');
+var button = require('@entur/button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -87,7 +88,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$8 = ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"];
+var _excluded$a = ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"];
 var DownshiftContext = /*#__PURE__*/React__default["default"].createContext(null);
 var DownshiftProvider = function DownshiftProvider(_ref) {
   var children = _ref.children,
@@ -105,7 +106,7 @@ var DownshiftProvider = function DownshiftProvider(_ref) {
       style = _ref.style,
       _ref$searchable = _ref.searchable,
       searchable = _ref$searchable === void 0 ? false : _ref$searchable,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   var handleStateChange = function handleStateChange(changes, stateAndHelpers) {
     if (changes.type === Downshift__default["default"].stateChangeTypes.controlledPropUpdatedSelectedItem) {
@@ -175,10 +176,10 @@ var useDownshift = function useDownshift() {
   return context;
 };
 
-var _excluded$7 = ["items"];
-var DropdownList = function DropdownList(_ref) {
+var _excluded$9 = ["items"];
+var DropdownList$1 = function DropdownList(_ref) {
   var items = _ref.items,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var _useDownshift = useDownshift(),
       highlightedIndex = _useDownshift.highlightedIndex,
@@ -228,18 +229,18 @@ var DropdownToggleButton$1 = function DropdownToggleButton() {
   }), React__default["default"].createElement(icons.DownArrowIcon, null));
 };
 
-var _excluded$6 = ["className", "children"];
+var _excluded$8 = ["className", "children"];
 var DropdownLoadingDots = function DropdownLoadingDots(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   return React__default["default"].createElement("div", _extends({
     className: classNames__default["default"]('eds-inline-spinner', className)
   }, rest), React__default["default"].createElement(loader.LoadingDots, null), React__default["default"].createElement(a11y.VisuallyHidden, null, children));
 };
 
-var _excluded$5 = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
+var _excluded$7 = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
 var BaseDropdown = function BaseDropdown(_ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -255,7 +256,7 @@ var BaseDropdown = function BaseDropdown(_ref) {
       _ref$isFilled = _ref.isFilled,
       isFilled = _ref$isFilled === void 0 ? false : _ref$isFilled,
       disableLabelAnimation = _ref.disableLabelAnimation,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var _useDownshift = useDownshift(),
       getLabelProps = _useDownshift.getLabelProps;
@@ -264,7 +265,7 @@ var BaseDropdown = function BaseDropdown(_ref) {
     className: "eds-dropdown-wrapper",
     style: style
   }, React__default["default"].createElement(form.BaseFormControl, _extends({
-    append: React__default["default"].createElement(Appendix$1, {
+    append: React__default["default"].createElement(Appendix$2, {
       clearable: clearable,
       loading: loading,
       loadingText: loadingText,
@@ -275,7 +276,7 @@ var BaseDropdown = function BaseDropdown(_ref) {
     isFilled: isFilled,
     labelProps: getLabelProps(),
     disableLabelAnimation: disableLabelAnimation
-  }, rest), children), React__default["default"].createElement(DropdownList, _extends({
+  }, rest), children), React__default["default"].createElement(DropdownList$1, _extends({
     items: items,
     style: _extends({
       position: 'absolute',
@@ -303,7 +304,7 @@ var ClearButton$1 = function ClearButton(_ref2) {
   }));
 };
 
-var Appendix$1 = function Appendix(_ref3) {
+var Appendix$2 = function Appendix(_ref3) {
   var clearable = _ref3.clearable,
       loading = _ref3.loading,
       loadingText = _ref3.loadingText,
@@ -320,7 +321,7 @@ var Appendix$1 = function Appendix(_ref3) {
   return clearable ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ClearButton$1, null), " ", React__default["default"].createElement(DropdownToggleButton$1, null)) : React__default["default"].createElement(DropdownToggleButton$1, null);
 };
 
-var _excluded$4 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
+var _excluded$6 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
 var RegularDropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
       _ref$placeholder = _ref.placeholder,
@@ -337,7 +338,7 @@ var RegularDropdown = /*#__PURE__*/React__default["default"].forwardRef(function
       loadingText = _ref.loadingText,
       className = _ref.className,
       clearable = _ref.clearable,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   var _useDownshift = useDownshift(),
       getToggleButtonProps = _useDownshift.getToggleButtonProps,
@@ -402,7 +403,7 @@ var RegularDropdown = /*#__PURE__*/React__default["default"].forwardRef(function
   }), selectedItem ? selectedItem.label : placeholder));
 });
 
-var _excluded$3 = ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation", "placeholder"];
+var _excluded$5 = ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation", "placeholder"];
 
 function LowerCaseFilterTest(item, input) {
   if (!input) {
@@ -437,7 +438,7 @@ var SearchableDropdown = /*#__PURE__*/React__default["default"].forwardRef(funct
       label = _ref.label,
       disableLabelAnimation = _ref.disableLabelAnimation,
       placeholder = _ref.placeholder,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   var _useDownshift = useDownshift(),
       getInputProps = _useDownshift.getInputProps,
@@ -1383,7 +1384,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 _excluded$4 = ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle", "itemFilter", "disableLabelAnimation"];
 var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
       debounceTimeout = _ref.debounceTimeout,
@@ -1411,7 +1412,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       listStyle = _ref.listStyle,
       itemFilter = _ref.itemFilter,
       disableLabelAnimation = _ref.disableLabelAnimation,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   var _useResolvedItems = useResolvedItems(items, debounceTimeout),
       normalizedItems = _useResolvedItems.items,
@@ -1460,7 +1461,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }, searchAbleProps))));
 });
 
-var _excluded$1 = ["className", "disabled", "readOnly", "items", "loadingText", "prepend", "style", "label", "variant", "feedback", "disableLabelAnimation"];
+var _excluded$3 = ["className", "disabled", "readOnly", "items", "loadingText", "prepend", "style", "label", "variant", "feedback", "disableLabelAnimation"];
 var NativeDropdown = function NativeDropdown(_ref) {
   var className = _ref.className,
       _ref$disabled = _ref.disabled,
@@ -1475,7 +1476,7 @@ var NativeDropdown = function NativeDropdown(_ref) {
       variant = _ref.variant,
       feedback = _ref.feedback,
       disableLabelAnimation = _ref.disableLabelAnimation,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var _useResolvedItems = useResolvedItems(items),
       normalizedItems = _useResolvedItems.items,
@@ -1517,7 +1518,7 @@ var NativeDropdown = function NativeDropdown(_ref) {
   })));
 };
 
-var _excluded = ["items", "itemsSelectedLabel", "label", "feedback", "variant", "disabled", "readOnly", "onChange", "className", "clearable", "loading", "loadingText", "openOnFocus", "style", "listStyle", "initialSelectedItems", "debounceTimeout"];
+var _excluded$2 = ["items", "itemsSelectedLabel", "label", "feedback", "variant", "disabled", "readOnly", "onChange", "className", "clearable", "loading", "loadingText", "openOnFocus", "style", "listStyle", "initialSelectedItems", "debounceTimeout"];
 var MultiSelectContext = /*#__PURE__*/React__default["default"].createContext(null);
 
 var useMultiSelectContext = function useMultiSelectContext() {
@@ -1579,7 +1580,7 @@ var MultiSelect = function MultiSelect(_ref) {
       _ref$initialSelectedI = _ref.initialSelectedItems,
       initialSelectedItems = _ref$initialSelectedI === void 0 ? [] : _ref$initialSelectedI,
       debounceTimeout = _ref.debounceTimeout,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var _useResolvedItems = useResolvedItems(input, debounceTimeout),
       items = _useResolvedItems.items;
@@ -1655,7 +1656,7 @@ var MultiSelect = function MultiSelect(_ref) {
     isFilled: selectedItems.length > 0 || isOpen,
     disabled: disabled,
     readOnly: readOnly,
-    append: React__default["default"].createElement(Appendix, {
+    append: React__default["default"].createElement(Appendix$1, {
       hasSelected: clearable && selectedItems.length > 0,
       loading: loading,
       loadingText: loadingText,
@@ -1728,7 +1729,7 @@ var ClearButton = function ClearButton(_ref3) {
   }));
 };
 
-var Appendix = function Appendix(_ref4) {
+var Appendix$1 = function Appendix(_ref4) {
   var loading = _ref4.loading,
       loadingText = _ref4.loadingText,
       readOnly = _ref4.readOnly,
@@ -1785,9 +1786,234 @@ function SelectedItemsLabel(items) {
   }).toString() : items.length + " elementer valgt";
 }
 
+var _excluded$1 = ["selectedItem", "isOpen", "getMenuProps", "getItemProps", "filteredItems", "highlightedIndex", "listStyle"];
+var DropdownList = function DropdownList(_ref) {
+  var selectedItem = _ref.selectedItem,
+      isOpen = _ref.isOpen,
+      getMenuProps = _ref.getMenuProps,
+      getItemProps = _ref.getItemProps,
+      filteredItems = _ref.filteredItems,
+      highlightedIndex = _ref.highlightedIndex,
+      listStyle = _ref.listStyle,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  return React__default["default"].createElement("ul", _extends({
+    className: classNames__default["default"]('eds-searchable-dropdown__list', {
+      'eds-searchable-dropdown__list--open': isOpen
+    })
+  }, 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-searchable-dropdown__list__item', {
+          'eds-searchable-dropdown__list__item--highlighted': highlightedIndex === index,
+          'eds-searchable-dropdown__list__item--selected': (selectedItem == null ? void 0 : selectedItem.value) === item.value
+        })
+      }, getItemProps({
+        key: "" + index + item.value,
+        item: item,
+        index: index
+      })), React__default["default"].createElement("span", null, item.label), item.icons && React__default["default"].createElement("span", null, item.icons.map(function (Icon, index) {
+        return React__default["default"].createElement(Icon, {
+          key: index,
+          inline: true,
+          className: "eds-searchable-dropdown__list__item-icon"
+        });
+      })), (selectedItem == null ? void 0 : selectedItem.value) === item.value && React__default["default"].createElement(icons.CheckIcon, null))
+    );
+  }) : null);
+};
+
+var _excluded = ["items", "selectedItem", "onChange", "label", "placeholder", "clearable", "openOnFocus", "readonly", "feedback", "variant", "className", "listStyle"];
+
+function lowerCaseFilterTest(item, input) {
+  if (!input) {
+    return true;
+  }
+
+  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
+// TODO Husk å generelt legge inn støtte for typeof value === string
+
+
+var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
+  var _selectedItem$label;
+
+  var items = _ref.items,
+      value = _ref.selectedItem,
+      onChange = _ref.onChange,
+      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);
+
+  var _React$useState = React__default["default"].useState(items),
+      filteredItems = _React$useState[0],
+      setFilteredItems = _React$useState[1];
+
+  var _useState = React.useState(false),
+      hideSelectedItem = _useState[0],
+      setHideSelectedItem = _useState[1];
+
+  var inputRef = React.useRef(null);
+  var stateReducer = React__default["default"].useCallback(function (_, actionAndChanges) {
+    var type = actionAndChanges.type,
+        changes = actionAndChanges.changes;
+
+    switch (type) {
+      case Downshift.useCombobox.stateChangeTypes.ItemClick:
+      case Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case Downshift.useCombobox.stateChangeTypes.InputBlur:
+      case Downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+        return _extends({}, changes, changes.selectedItem && {
+          inputValue: ''
+        });
+
+      default:
+        return changes;
+    }
+  }, []);
+
+  var _useCombobox = Downshift.useCombobox(_extends({
+    onInputValueChange: function onInputValueChange(_ref2) {
+      var inputValue = _ref2.inputValue;
+      setFilteredItems(items.filter(function (item) {
+        return lowerCaseFilterTest(item, inputValue);
+      }));
+    },
+    items: filteredItems,
+    itemToString: function itemToString(item) {
+      if (item) return item.value;
+      return '';
+    },
+    stateReducer: stateReducer,
+    selectedItem: value,
+    onSelectedItemChange: function onSelectedItemChange(_ref3) {
+      var newSelectedItem = _ref3.selectedItem;
+      return onChange(newSelectedItem != null ? newSelectedItem : null);
+    }
+  }, rest)),
+      isOpen = _useCombobox.isOpen,
+      getToggleButtonProps = _useCombobox.getToggleButtonProps,
+      getLabelProps = _useCombobox.getLabelProps,
+      getMenuProps = _useCombobox.getMenuProps,
+      getInputProps = _useCombobox.getInputProps,
+      getComboboxProps = _useCombobox.getComboboxProps,
+      highlightedIndex = _useCombobox.highlightedIndex,
+      getItemProps = _useCombobox.getItemProps,
+      selectedItem = _useCombobox.selectedItem,
+      openMenu = _useCombobox.openMenu,
+      inputValue = _useCombobox.inputValue;
+
+  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,
+      clearable: clearable,
+      loading: false,
+      loadingText: '',
+      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"
+  }, React__default["default"].createElement("span", {
+    className: "eds-searchable-dropdown__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({
+    placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder,
+    className: "eds-searchable-dropdown__input eds-form-control"
+  }, getInputProps({
+    onFocus: function onFocus() {
+      if (!isOpen && openOnFocus) openMenu();
+      setHideSelectedItem(true);
+    },
+    onBlur: function onBlur() {
+      setHideSelectedItem(false);
+    },
+    ref: inputRef
+  })))), React__default["default"].createElement(DropdownList, {
+    selectedItem: selectedItem,
+    isOpen: isOpen,
+    filteredItems: filteredItems,
+    highlightedIndex: highlightedIndex,
+    listStyle: listStyle,
+    getMenuProps: getMenuProps,
+    getItemProps: getItemProps
+  }));
+};
+
+var Appendix = function Appendix(_ref4) {
+  var clearable = _ref4.clearable,
+      readOnly = _ref4.readOnly,
+      getToggleButtonProps = _ref4.getToggleButtonProps,
+      selectedItem = _ref4.selectedItem,
+      isOpen = _ref4.isOpen,
+      onChange = _ref4.onChange;
+
+  // TODO implement loading / async
+  // if (loading) {
+  //   return <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;
+  // }
+  if (readOnly) {
+    return null;
+  }
+
+  return React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, clearable && selectedItem && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(button.IconButton, {
+    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-appendix__divider"
+  })), React__default["default"].createElement(button.IconButton, _extends({}, getToggleButtonProps({
+    className: classNames__default["default"]('eds-searchable-dropdown-appendix__toggle-button', {
+      'eds-searchable-dropdown-appendix__toggle-button--open': isOpen
+    })
+  }), {
+    tabIndex: -1,
+    type: "button"
+  }), React__default["default"].createElement(icons.DownArrowIcon, null)));
+};
+
 utils.warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
 
 exports.Dropdown = Dropdown;
 exports.MultiSelect = MultiSelect;
 exports.NativeDropdown = NativeDropdown;
+exports.SearchableDropdownBeta = SearchableDropdownBeta;
 //# sourceMappingURL=dropdown.cjs.development.js.map