@dnb/eufemia 9.12.3 → 9.12.4

package/es/components/autocomplete/Autocomplete.js

@@ -204,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
       };
     });
   }
@@ -235,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;
@@ -293,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
@@ -370,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);
@@ -388,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;
@@ -799,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", () => {
@@ -813,9 +805,7 @@ class AutocompleteInstance extends React.PureComponent {
         typedInputValue: null,
         _listenForPropChanges: false
       });
-      this.context.drawerList.setState({
-        selected_item: null
-      });
+      this.resetSelections();
     });
 
     _defineProperty(this, "resetSelections", () => {
@@ -833,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
     } = {}) => {
@@ -849,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 {
@@ -871,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
           };
         });
       };
@@ -901,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 = {
@@ -915,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 || {};
 
@@ -924,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}`);
+                  }
                 }
               }
             });
@@ -977,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;
@@ -991,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);
         }
 
@@ -1043,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;
@@ -1072,7 +1085,7 @@ class AutocompleteInstance extends React.PureComponent {
         if (!isTrue(keep_open)) {
           this.setState({
             skipFocusDuringChange: true,
-            skipHighlight: true,
+            disableHighlighting: true,
             _listenForPropChanges: false
           });
           this.setHidden();

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

@@ -62,3 +62,9 @@
 .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); }

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

@@ -32,12 +32,19 @@
   }
 }
 
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
-  font-weight: var(--font-weight-basis);
-}
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
-  color: var(--color-black-55);
+.dnb-autocomplete__root .dnb-drawer-list__option {
+  &__item:nth-of-type(1) {
+    font-weight: var(--font-weight-basis);
+  }
+  &__item:nth-of-type(n + 2) {
+    color: var(--color-black-55);
+  }
+  &__item--highlight {
+    font-weight: var(--font-weight-bold);
+  }
 }
-.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
-  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: var(--color-white);
 }

package/es/components/date-picker/DatePicker.js

@@ -337,7 +337,7 @@ export default class DatePicker extends React.PureComponent {
       global_status_id: global_status_id,
       label: label,
       text_id: id + '-status',
-      width_selector: id + '-input',
+      width_selector: id + '-shell',
       text: status,
       status: status_state,
       no_animation: status_no_animation,
@@ -345,7 +345,8 @@ export default class DatePicker extends React.PureComponent {
     }, status_props)), React.createElement("span", {
       className: "dnb-date-picker__row"
     }, React.createElement("span", {
-      className: "dnb-date-picker__shell"
+      className: "dnb-date-picker__shell",
+      id: `${id}-shell`
     }, React.createElement(DatePickerInput, _extends({
       id: id,
       title: title,

package/es/components/date-picker/DatePickerCalendar.js

@@ -24,6 +24,12 @@ export default class DatePickerCalendar extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "onMouseLeaveHandler", () => {
+      this.context.updateState({
+        hoverDate: null
+      });
+    });
+
     _defineProperty(this, "onKeyDownHandler", event => {
       var _event$target;
 
@@ -371,6 +377,7 @@ export default class DatePickerCalendar extends React.PureComponent {
       tabIndex: "0",
       "aria-labelledby": `${id}--title`,
       onKeyDown: this.onKeyDownHandler,
+      onMouseLeave: this.onMouseLeaveHandler,
       ref: this._listRef
     }, !hideDays && React.createElement("thead", {
       "aria-hidden": true

package/es/components/date-picker/DatePickerInput.js

@@ -604,7 +604,7 @@ export default class DatePickerInput extends React.PureComponent {
         on_click: onSubmit
       }, submitAttributes, status_props)),
       lang: locale === null || locale === void 0 ? void 0 : locale.code
-    }, attributes)), ' ');
+    }, attributes)));
   }
 
 }

package/es/components/form-status/FormStatus.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _circle, _path8;
 
-const _excluded = ["show", "title", "status", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "status_id", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
+const _excluded = ["show", "title", "status", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "label", "status_id", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -266,6 +266,7 @@ export default class FormStatus extends React.PureComponent {
       stretch,
       class: _className,
       text_id,
+      label,
       status_id,
       id,
       text,

package/es/components/number-format/NumberUtils.js

@@ -193,26 +193,31 @@ export const format = (value, {
     aria = display;
   }
 
-  const cleanedValue = formatNumber(value, locale, opts, item => {
-    switch (item.type) {
-      case 'currency':
-      case 'group':
-      case 'literal':
-        item.value = '';
-        return item;
+  if (returnAria) {
+    const cleanedValue = formatNumber(opts.style === 'percent' ? value / 100 : value, locale, opts, item => {
+      switch (item.type) {
+        case 'currency':
+        case 'group':
+        case 'literal':
+        case 'percentSign':
+          item.value = '';
+          return item;
 
-      default:
-        return item;
-    }
-  });
-  return returnAria ? {
-    value,
-    cleanedValue,
-    number: display,
-    aria,
-    locale,
-    type
-  } : display;
+        default:
+          return item;
+      }
+    });
+    return {
+      value,
+      cleanedValue,
+      number: display,
+      aria,
+      locale,
+      type
+    };
+  }
+
+  return display;
 };
 export const formatDecimals = (value, decimals, omit_rounding = false, opts = {}) => {
   decimals = parseFloat(decimals);