@dnb/eufemia 9.12.1 → 9.13.0

package/es/components/autocomplete/Autocomplete.d.ts

@@ -1,4 +1,52 @@
 import * as React from 'react';
+export type AutocompleteSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type AutocompleteTop = string | number | boolean;
+export type AutocompleteRight = string | number | boolean;
+export type AutocompleteBottom = string | number | boolean;
+export type AutocompleteLeft = string | number | boolean;
+export type AutocompleteUseDrawerOnMobile = string | boolean;
+export type AutocompleteActionMenu = string | boolean;
+export type AutocompleteIsPopup = string | boolean;
+export type AutocompleteAlignDrawer = 'left' | 'right';
+export type AutocompleteWrapperElement =
+  | Object
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type AutocompleteIndependentWidth = string | boolean;
+export type AutocompleteFixedPosition = string | boolean;
+export type AutocompletePreventFocus = string | boolean;
+export type AutocompleteSkipKeysearch = string | boolean;
+export type AutocompleteSelectedValue = string | React.ReactNode;
+export type AutocompleteContent = string | React.ReactNode | string[];
+export type AutocompleteRawData =
+  | any[]
+  | Object
+  | ((...args: any[]) => any);
+export type AutocompleteIgnoreEvents = string | boolean;
 export type AutocompleteMode = 'sync' | 'async';
 export type AutocompleteTitle = string | React.ReactNode;
 export type AutocompletePlaceholder = string | React.ReactNode;
@@ -80,35 +128,6 @@ export type AutocompleteOpened = string | boolean;
 export type AutocompleteDisabled = string | boolean;
 export type AutocompleteStretch = string | boolean;
 export type AutocompleteSkeleton = string | boolean;
-export type AutocompleteSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type AutocompleteTop = string | number | boolean;
-export type AutocompleteRight = string | number | boolean;
-export type AutocompleteBottom = string | number | boolean;
-export type AutocompleteLeft = string | number | boolean;
 export type AutocompleteChildren =
   | string
   | ((...args: any[]) => any)
@@ -120,6 +139,82 @@ export type AutocompleteChildren =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: AutocompleteSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: AutocompleteTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: AutocompleteRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: AutocompleteBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: AutocompleteLeft;
+  role?: string;
+
+  /**
+   * Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete is using this because of the huge data changes due to search and reorder. Defaults to `null`.
+   */
+  cache_hash?: string;
+  use_drawer_on_mobile?: AutocompleteUseDrawerOnMobile;
+  action_menu?: AutocompleteActionMenu;
+  is_popup?: AutocompleteIsPopup;
+
+  /**
+   * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if a independent width is used. Defaults to `left`.
+   */
+  align_drawer?: AutocompleteAlignDrawer;
+
+  /**
+   * Has to be a HTML Element, ideal a mother element, used to calculate sizes and distances. Also used for the "click outside" detection. Clicking on the `wrapper_element` will not be anymore triggered as an outside click.
+   */
+  wrapper_element?: AutocompleteWrapperElement;
+
+  /**
+   * Define a HTML class that will be set on the list, beside `dnb-drawer-list__list`.
+   */
+  list_class?: string;
+
+  /**
+   * If set to true, the DrawerList will handle it&#39;s width and position handling independent to the parent/mother element. Defaults to `false`.
+   */
+  independent_width?: AutocompleteIndependentWidth;
+
+  /**
+   * If set to true, the DrawerList will be fixed in it&#39;s scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   */
+  fixed_position?: AutocompleteFixedPosition;
+  prevent_focus?: AutocompletePreventFocus;
+
+  /**
+   * If set to true, search items by the first key will be ignored. Defaults to `false`.
+   */
+  skip_keysearch?: AutocompleteSkipKeysearch;
+  selected_value?: AutocompleteSelectedValue;
+  content?: AutocompleteContent;
+  prepared_data?: any[];
+  raw_data?: AutocompleteRawData;
+
+  /**
+   * If set to true, all keyboard and mouse events will be ignored. Defaults to `false`.
+   */
+  ignore_events?: AutocompleteIgnoreEvents;
+  handle_dismiss_focus?: (...args: any[]) => any;
+  on_pre_change?: (...args: any[]) => any;
+  on_resize?: (...args: any[]) => any;
   id?: string;
 
   /**
@@ -403,31 +498,6 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
    * Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.
    */
   drawer_class?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: AutocompleteSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: AutocompleteTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: AutocompleteRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: AutocompleteBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: AutocompleteLeft;
   class?: string;
   className?: string;
 

package/es/components/autocomplete/Autocomplete.js

@@ -28,7 +28,7 @@ import ProgressIndicator from '../progress-indicator/ProgressIndicator';
 import DrawerList from '../../fragments/drawer-list/DrawerList';
 import DrawerListContext from '../../fragments/drawer-list/DrawerListContext';
 import DrawerListProvider from '../../fragments/drawer-list/DrawerListProvider';
-import { parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
+import { drawerListPropTypes, parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
 export default class Autocomplete extends React.PureComponent {
   static enableWebComponent() {
     registerElement(Autocomplete === null || Autocomplete === void 0 ? void 0 : Autocomplete.tagName, Autocomplete, Autocomplete.defaultProps);
@@ -124,7 +124,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   input_element: null
 });
 
-process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_objectSpread({
+process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_objectSpread(_objectSpread({}, spacingPropTypes), drawerListPropTypes), {}, {
   id: PropTypes.string,
   mode: PropTypes.oneOf(['sync', 'async']),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -186,8 +186,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   portal_class: PropTypes.string,
-  drawer_class: PropTypes.string
-}, spacingPropTypes), {}, {
+  drawer_class: PropTypes.string,
   class: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object, PropTypes.array]),
@@ -205,23 +204,23 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
 
 class AutocompleteInstance extends React.PureComponent {
   static parseDataItem(dataItem) {
-    const toParse = parseContentTitle(dataItem, {
+    const searchWord = parseContentTitle(dataItem.search_content || dataItem, {
       separator: ' '
     });
 
-    if (typeof toParse !== 'string' && Array.isArray(toParse)) {
-      return AutocompleteInstance.parseDataItem(toParse);
+    if (typeof searchWord !== 'string' && Array.isArray(searchWord)) {
+      return AutocompleteInstance.parseDataItem(searchWord);
     }
 
-    return toParse;
+    return searchWord;
   }
 
   static createSearchIndex(data) {
     return data.map(dataItem => {
-      const searchChunk = AutocompleteInstance.parseDataItem(dataItem);
+      const contentChunk = AutocompleteInstance.parseDataItem(dataItem);
       return {
         dataItem,
-        searchChunk
+        contentChunk
       };
     });
   }
@@ -236,7 +235,7 @@ class AutocompleteInstance extends React.PureComponent {
 
   static getDerivedStateFromProps(props, state) {
     if (state._listenForPropChanges) {
-      state.skipHighlight = isTrue(props.disable_highlighting);
+      state.disableHighlighting = isTrue(props.disable_highlighting);
 
       if (props.input_value !== 'initval' && typeof state.inputValue === 'undefined' && props.input_value && props.input_value.length > 0) {
         state.inputValue = props.input_value;
@@ -294,18 +293,6 @@ class AutocompleteInstance extends React.PureComponent {
       this.setVisible();
     });
 
-    _defineProperty(this, "scrollToActiveItem", active_item => {
-      this.context.drawerList.scrollToItem(active_item, {
-        scrollTo: false
-      });
-    });
-
-    _defineProperty(this, "scrollToSelectedItem", selected_item => {
-      this.context.drawerList.scrollToAndSetActiveItem(selected_item, {
-        scrollTo: false
-      });
-    });
-
     _defineProperty(this, "onInputChangeHandler", ({
       value,
       event
@@ -371,7 +358,7 @@ class AutocompleteInstance extends React.PureComponent {
 
       value = String(value || '').trim();
       this.setState({
-        skipHighlight: false,
+        disableHighlighting: false,
         _listenForPropChanges: false
       });
       let data = this.runFilter(value, options);
@@ -389,26 +376,28 @@ class AutocompleteInstance extends React.PureComponent {
     });
 
     _defineProperty(this, "wrapWithShowAll", data => {
-      if (!this.hasFilterActive(data)) {
+      if (!data || !this.hasFilterActive(data)) {
         return data;
       }
 
-      const lastItem = data.slice(-1)[0];
+      const lastItem = this.context.drawerList.original_data.slice(-1)[0];
 
       if (lastItem && !lastItem.show_all) {
-        const {
-          show_all
-        } = this._props;
-        data.push({
-          __id: lastItem.__id + 1,
-          class_name: 'dnb-autocomplete__show-all',
-          show_all: true,
-          active_item: false,
-          selected_item: false,
-          content: React.createElement(React.Fragment, null, _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
-            icon: "arrow_down"
-          })), show_all)
-        });
+        const lastActiveItem = data.slice(-1)[0];
+
+        if (lastActiveItem) {
+          data.push({
+            __id: lastItem.__id + 1,
+            lastActiveItem: lastActiveItem.__id,
+            class_name: 'dnb-autocomplete__show-all',
+            show_all: true,
+            active_item: false,
+            selected_item: false,
+            content: React.createElement(React.Fragment, null, _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
+              icon: "arrow_down"
+            })), this._props.show_all)
+          });
+        }
       }
 
       return data;
@@ -800,7 +789,9 @@ class AutocompleteInstance extends React.PureComponent {
       this.context.drawerList.setState({
         cache_hash: 'all'
       });
-      this.scrollToSelectedItem(this.context.drawerList.selected_item);
+      this.context.drawerList.setActiveItemAndScrollToIt(this.context.drawerList.selected_item, {
+        scrollTo: false
+      });
     });
 
     _defineProperty(this, "totalReset", () => {
@@ -814,9 +805,7 @@ class AutocompleteInstance extends React.PureComponent {
         typedInputValue: null,
         _listenForPropChanges: false
       });
-      this.context.drawerList.setState({
-        selected_item: null
-      });
+      this.resetSelections();
     });
 
     _defineProperty(this, "resetSelections", () => {
@@ -834,7 +823,7 @@ class AutocompleteInstance extends React.PureComponent {
       searchIndex = this.state.searchIndex,
       searchNumbers = isTrue(this.props.search_numbers),
       inWordIndex = (parseFloat(this.props.search_in_word_index) || 3) - 2,
-      skipHighlight = false,
+      disableHighlighting = false,
       skipFilter = false,
       skipReorder = false
     } = {}) => {
@@ -850,16 +839,21 @@ class AutocompleteInstance extends React.PureComponent {
         return [];
       }
 
-      const words = value.split(/\s+/g).filter(Boolean);
-      const wordsCount = words.length;
+      const searchWords = value.split(/\s+/g).filter(Boolean);
       const wordCond = '^|\\s';
 
-      const findWords = searchChunk => {
-        if (typeof searchChunk !== 'string') {
+      const findSearchWords = contentChunk => {
+        if (typeof contentChunk !== 'string') {
           return [];
         }
 
-        return words.filter((word, wordIndex) => {
+        return searchWords.map((word, wordIndex) => ({
+          word,
+          wordIndex
+        })).filter(({
+          word,
+          wordIndex
+        }) => {
           if (searchNumbers) {
             word = word.replace(/[^\d\w]/g, '');
           } else {
@@ -872,28 +866,34 @@ class AutocompleteInstance extends React.PureComponent {
 
           const regexWord = new RegExp(wordIndex > inWordIndex ? `${word}` : `(${wordCond})${word}`, 'i');
 
-          if (regexWord.test(searchChunk)) {
+          if (regexWord.test(contentChunk)) {
             return true;
           }
 
-          if (searchNumbers && regexWord.test(searchChunk.replace(/[^0-9]/g, ''))) {
+          if (searchNumbers && regexWord.test(contentChunk.replace(/[^0-9]/g, ''))) {
             return true;
           }
 
           return false;
-        }).map((word, wordIndex) => {
-          let score = wordsCount - wordIndex;
-          const regexWord = new RegExp(`^${escapeRegexChars(word)}`, 'i');
-          const startOfWord = regexWord.test(searchChunk);
-
-          if (startOfWord) {
-            score = score + 1;
+        }).map(({
+          word,
+          wordIndex
+        }) => {
+          let wordScore = 0;
+          wordScore += (contentChunk.match(new RegExp(`(${wordCond})${escapeRegexChars(word)}`, 'ig')) || []).length;
+
+          if (wordIndex === 0) {
+            const isFirstWord = new RegExp(`^${escapeRegexChars(searchWords[0])}`, 'i').test(contentChunk.split(' ')[0]);
+
+            if (isFirstWord) {
+              wordScore += searchWords.length + 1;
+            }
           }
 
           return {
             word,
             wordIndex,
-            score
+            wordScore
           };
         });
       };
@@ -902,8 +902,8 @@ class AutocompleteInstance extends React.PureComponent {
       const strE = '\uFFFF';
       const tagS = '<span class="dnb-drawer-list__option__item--highlight">';
       const tagE = '</span>';
-      searchIndex = searchIndex.map(item => {
-        const listOfFoundWords = findWords(item.searchChunk);
+      searchIndex = searchIndex.map((item, i) => {
+        const listOfFoundWords = findSearchWords(item.contentChunk, i);
 
         if (typeof item.dataItem === 'string') {
           item.dataItem = {
@@ -916,6 +916,12 @@ class AutocompleteInstance extends React.PureComponent {
         }
 
         item.dataItem.render = (children, id) => {
+          var _children2, _children2$props;
+
+          if (disableHighlighting || this.state.disableHighlighting) {
+            return children;
+          }
+
           const cacheHash = id + value;
           this._rC = this._rC || {};
 
@@ -925,40 +931,36 @@ class AutocompleteInstance extends React.PureComponent {
 
           const isComponent = typeof children !== 'string' && React.isValidElement(children);
 
-          if (!Array.isArray(children)) {
+          if (isComponent && Array.isArray((_children2 = children) === null || _children2 === void 0 ? void 0 : (_children2$props = _children2.props) === null || _children2$props === void 0 ? void 0 : _children2$props.children)) {
+            children = children.props.children;
+          } else if (!Array.isArray(children)) {
             children = [children];
           }
 
-          children = children.map(component => ({
-            component,
-            segment: convertJsxToString(component)
+          children = children.map(originalChild => ({
+            originalChild,
+            segment: convertJsxToString(originalChild, ' ').trim()
           }));
           children = children.map(({
-            component,
+            originalChild,
             segment
           }, idx) => {
-            if (skipHighlight || this.state.skipHighlight) {
-              return segment;
-            }
-
-            const origSegment = segment;
-            listOfFoundWords.forEach(({
-              word,
-              wordIndex
-            }) => {
-              word = escapeRegexChars(word);
-
-              if (searchNumbers) {
-                word.split('').forEach(char => {
-                  if (/[\d\w]/.test(char)) {
-                    segment = segment.replace(new RegExp(`(${char})`, 'gi'), `${strS}$1${strE}`);
-                  }
-                });
-              } else {
-                if (wordIndex > inWordIndex) {
-                  segment = segment.replace(new RegExp(`(${word})`, 'gi'), `${strS}$1${strE}`);
+            searchWords.forEach((word, wordIndex) => {
+              if (segment) {
+                word = escapeRegexChars(word);
+
+                if (searchNumbers) {
+                  word.split('').forEach(char => {
+                    if (/[\d\w]/.test(char)) {
+                      segment = segment.replace(new RegExp(`(${char})`, 'gi'), `${strS}$1${strE}`);
+                    }
+                  });
                 } else {
-                  segment = segment.replace(new RegExp(`(${wordCond})(${word})`, 'gi'), `$1${strS}$2${strE}`);
+                  if (wordIndex > inWordIndex) {
+                    segment = segment.replace(new RegExp(`(${word})`, 'gi'), `${strS}$1${strE}`);
+                  } else {
+                    segment = segment.replace(new RegExp(`(${wordCond})(${word})`, 'gi'), `$1${strS}$2${strE}`);
+                  }
                 }
               }
             });
@@ -978,13 +980,21 @@ class AutocompleteInstance extends React.PureComponent {
             }
 
             if (isComponent) {
-              if (Array.isArray(component.props.children)) {
-                result = component.props.children.map(Comp => Comp === origSegment || Comp.props && Comp.props.children === origSegment ? result : Comp);
+              var _originalChild$props;
+
+              if (Array.isArray(originalChild === null || originalChild === void 0 ? void 0 : (_originalChild$props = originalChild.props) === null || _originalChild$props === void 0 ? void 0 : _originalChild$props.children)) {
+                result = originalChild.props.children.map(Comp => {
+                  return Comp === originalChild || Comp.props && Comp.props.children === originalChild ? result : Comp;
+                });
+              } else if (typeof originalChild === 'string') {
+                result = originalChild;
               }
 
-              result = React.cloneElement(component, {
-                key: 'clone' + cacheHash
-              }, result);
+              if (React.isValidElement(originalChild)) {
+                result = React.cloneElement(originalChild, {
+                  key: 'clone' + cacheHash + idx
+                }, result);
+              }
             }
 
             return result;
@@ -992,30 +1002,34 @@ class AutocompleteInstance extends React.PureComponent {
           return this._rC[cacheHash] = children;
         };
 
-        const totalScore = listOfFoundWords.reduce((acc, {
-          score
-        }) => acc += score, 0);
-
         if (this.skipFilter || skipFilter) {
           return item.dataItem;
         }
 
+        let totalScore = listOfFoundWords.length;
+
+        for (const {
+          wordScore
+        } of listOfFoundWords) {
+          totalScore += wordScore;
+        }
+
         return {
-          countFindings: listOfFoundWords.length + totalScore,
+          totalScore,
           item
         };
       });
 
       if (!this.skipFilter && !skipFilter) {
         searchIndex = searchIndex.filter(({
-          countFindings
-        }) => countFindings);
+          totalScore
+        }) => totalScore);
 
         if (!this.skipReorder && !skipReorder) {
           searchIndex = searchIndex.sort(({
-            countFindings: a
+            totalScore: a
           }, {
-            countFindings: b
+            totalScore: b
           }) => b - a);
         }
 
@@ -1044,18 +1058,16 @@ class AutocompleteInstance extends React.PureComponent {
     });
 
     _defineProperty(this, "onPreChangeHandler", ({
-      data,
-      selected_item
+      data
     }) => {
       if (data && data.show_all) {
         this.showAll();
+        const active_item = data.lastActiveItem;
 
-        if (parseFloat(selected_item) > -1) {
-          const active_item = selected_item - 1;
-          this.context.drawerList.setState({
-            active_item
+        if (parseFloat(active_item) > -1) {
+          this.context.drawerList.setActiveItemAndScrollToIt(active_item, {
+            scrollTo: false
           });
-          this.scrollToActiveItem(active_item);
         }
 
         return false;
@@ -1073,7 +1085,7 @@ class AutocompleteInstance extends React.PureComponent {
         if (!isTrue(keep_open)) {
           this.setState({
             skipFocusDuringChange: true,
-            skipHighlight: true,
+            disableHighlighting: true,
             _listenForPropChanges: false
           });
           this.setHidden();
@@ -1084,21 +1096,11 @@ class AutocompleteInstance extends React.PureComponent {
             });
           } catch (e) {}
 
-          const selectDelay = () => {
-            this.setState({
-              inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.data),
-              skipFocusDuringChange: false,
-              _listenForPropChanges: false
-            });
-            this.setFocusOnInput();
-          };
-
-          if (isTrue(this.props.no_animation)) {
-            selectDelay();
-          } else {
-            clearTimeout(this._selectTimeout);
-            this._selectTimeout = setTimeout(selectDelay, DrawerListProvider.blurDelay);
-          }
+          this.setState({
+            inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.data),
+            skipFocusDuringChange: false,
+            _listenForPropChanges: false
+          }, () => this.setFocusOnInput());
         } else {
           this.setState({
             inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.data),

package/es/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.css

@@ -62,3 +62,13 @@
 .dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
   font-weight: 600;
   font-weight: var(--font-weight-bold); }
+
+.dnb-autocomplete__root
+.dnb-drawer-list__option--selected
+.dnb-drawer-list__option__item:nth-of-type(n + 2) {
+  color: #fff;
+  color: var(--color-white); }
+
+.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
+  color: #fff;
+  color: var(--color-white); }