@dnb/eufemia 9.12.0 → 9.12.4

package/cjs/components/autocomplete/Autocomplete.js

@@ -18,20 +18,24 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 
 require("core-js/modules/es.array.index-of.js");
 
-require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.object.to-string.js");
 
-require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.function.name.js");
 
-require("core-js/modules/es.weak-map.js");
+require("core-js/modules/es.array.from.js");
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.string.iterator.js");
 
 require("core-js/modules/es.symbol.description.js");
 
 require("core-js/modules/es.symbol.iterator.js");
 
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -57,12 +61,12 @@ require("core-js/modules/es.regexp.constructor.js");
 
 require("core-js/modules/es.regexp.to-string.js");
 
+require("core-js/modules/es.string.match.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.string.includes.js");
 
-require("core-js/modules/es.array.reduce.js");
-
 require("core-js/modules/es.array.sort.js");
 
 require("core-js/modules/es.array.concat.js");
@@ -114,6 +118,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -258,7 +268,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({}, _SpacingHelper.spacingPropTypes), _DrawerListHelpers.drawerListPropTypes), {}, {
   id: _propTypes.default.string,
   mode: _propTypes.default.oneOf(['sync', 'async']),
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
@@ -320,8 +330,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   stretch: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   portal_class: _propTypes.default.string,
-  drawer_class: _propTypes.default.string
-}, _SpacingHelper.spacingPropTypes), {}, {
+  drawer_class: _propTypes.default.string,
   class: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object, _propTypes.default.array]),
@@ -392,18 +401,6 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       _this.setVisible();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "scrollToActiveItem", function (active_item) {
-      _this.context.drawerList.scrollToItem(active_item, {
-        scrollTo: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "scrollToSelectedItem", function (selected_item) {
-      _this.context.drawerList.scrollToAndSetActiveItem(selected_item, {
-        scrollTo: false
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "onInputChangeHandler", function (_ref2) {
       var value = _ref2.value,
           event = _ref2.event;
@@ -482,7 +479,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       value = String(value || '').trim();
 
       _this.setState({
-        skipHighlight: false,
+        disableHighlighting: false,
         _listenForPropChanges: false
       });
 
@@ -504,24 +501,28 @@ var AutocompleteInstance = function (_React$PureComponent2) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "wrapWithShowAll", function (data) {
-      if (!_this.hasFilterActive(data)) {
+      if (!data || !_this.hasFilterActive(data)) {
         return data;
       }
 
-      var lastItem = data.slice(-1)[0];
+      var lastItem = _this.context.drawerList.original_data.slice(-1)[0];
 
       if (lastItem && !lastItem.show_all) {
-        var show_all = _this._props.show_all;
-        data.push({
-          __id: lastItem.__id + 1,
-          class_name: 'dnb-autocomplete__show-all',
-          show_all: true,
-          active_item: false,
-          selected_item: false,
-          content: _react.default.createElement(_react.default.Fragment, null, _IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
-            icon: "arrow_down"
-          })), show_all)
-        });
+        var 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.default.createElement(_react.default.Fragment, null, _IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
+              icon: "arrow_down"
+            })), _this._props.show_all)
+          });
+        }
       }
 
       return data;
@@ -941,7 +942,9 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         cache_hash: 'all'
       });
 
-      _this.scrollToSelectedItem(_this.context.drawerList.selected_item);
+      _this.context.drawerList.setActiveItemAndScrollToIt(_this.context.drawerList.selected_item, {
+        scrollTo: false
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "totalReset", function () {
@@ -956,9 +959,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         _listenForPropChanges: false
       });
 
-      _this.context.drawerList.setState({
-        selected_item: null
-      });
+      _this.resetSelections();
     });
 
     _defineProperty(_assertThisInitialized(_this), "resetSelections", function () {
@@ -981,8 +982,8 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           searchNumbers = _ref5$searchNumbers === void 0 ? (0, _componentHelper.isTrue)(_this.props.search_numbers) : _ref5$searchNumbers,
           _ref5$inWordIndex = _ref5.inWordIndex,
           inWordIndex = _ref5$inWordIndex === void 0 ? (parseFloat(_this.props.search_in_word_index) || 3) - 2 : _ref5$inWordIndex,
-          _ref5$skipHighlight = _ref5.skipHighlight,
-          skipHighlight = _ref5$skipHighlight === void 0 ? false : _ref5$skipHighlight,
+          _ref5$disableHighligh = _ref5.disableHighlighting,
+          disableHighlighting = _ref5$disableHighligh === void 0 ? false : _ref5$disableHighligh,
           _ref5$skipFilter = _ref5.skipFilter,
           skipFilter = _ref5$skipFilter === void 0 ? false : _ref5$skipFilter,
           _ref5$skipReorder = _ref5.skipReorder,
@@ -1000,20 +1001,27 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         return [];
       }
 
-      var words = value.split(/\s+/g).filter(Boolean);
-      var wordsCount = words.length;
+      var searchWords = value.split(/\s+/g).filter(Boolean);
       var wordCond = '^|\\s';
 
-      var findWords = function findWords(searchChunk) {
-        if (typeof searchChunk !== 'string') {
+      var findSearchWords = function findSearchWords(contentChunk) {
+        if (typeof contentChunk !== 'string') {
           return [];
         }
 
-        return words.filter(function (word, wordIndex) {
+        return searchWords.map(function (word, wordIndex) {
+          return {
+            word: word,
+            wordIndex: wordIndex
+          };
+        }).filter(function (_ref6) {
+          var word = _ref6.word,
+              wordIndex = _ref6.wordIndex;
+
           if (searchNumbers) {
             word = word.replace(/[^\d\w]/g, '');
           } else {
-            word = escapeRegexChars(word);
+            word = (0, _componentHelper.escapeRegexChars)(word);
           }
 
           if (searchNumbers) {
@@ -1022,28 +1030,33 @@ var AutocompleteInstance = function (_React$PureComponent2) {
 
           var regexWord = new RegExp(wordIndex > inWordIndex ? "".concat(word) : "(".concat(wordCond, ")").concat(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(function (word, wordIndex) {
-          var score = wordsCount - wordIndex;
-          var regexWord = new RegExp("^".concat(escapeRegexChars(word)), 'i');
-          var startOfWord = regexWord.test(searchChunk);
+        }).map(function (_ref7) {
+          var word = _ref7.word,
+              wordIndex = _ref7.wordIndex;
+          var wordScore = 0;
+          wordScore += (contentChunk.match(new RegExp("(".concat(wordCond, ")").concat((0, _componentHelper.escapeRegexChars)(word)), 'ig')) || []).length;
 
-          if (startOfWord) {
-            score = score + 1;
+          if (wordIndex === 0) {
+            var isFirstWord = new RegExp("^".concat((0, _componentHelper.escapeRegexChars)(searchWords[0])), 'i').test(contentChunk.split(' ')[0]);
+
+            if (isFirstWord) {
+              wordScore += searchWords.length + 1;
+            }
           }
 
           return {
             word: word,
             wordIndex: wordIndex,
-            score: score
+            wordScore: wordScore
           };
         });
       };
@@ -1052,8 +1065,8 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       var strE = "\uFFFF";
       var tagS = '<span class="dnb-drawer-list__option__item--highlight">';
       var tagE = '</span>';
-      searchIndex = searchIndex.map(function (item) {
-        var listOfFoundWords = findWords(item.searchChunk);
+      searchIndex = searchIndex.map(function (item, i) {
+        var listOfFoundWords = findSearchWords(item.contentChunk, i);
 
         if (typeof item.dataItem === 'string') {
           item.dataItem = {
@@ -1066,6 +1079,12 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         }
 
         item.dataItem.render = function (children, id) {
+          var _children2, _children2$props;
+
+          if (disableHighlighting || _this.state.disableHighlighting) {
+            return children;
+          }
+
           var cacheHash = id + value;
           _this._rC = _this._rC || {};
 
@@ -1075,41 +1094,37 @@ var AutocompleteInstance = function (_React$PureComponent2) {
 
           var isComponent = typeof children !== 'string' && _react.default.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(function (component) {
+          children = children.map(function (originalChild) {
             return {
-              component: component,
-              segment: (0, _componentHelper.convertJsxToString)(component)
+              originalChild: originalChild,
+              segment: (0, _componentHelper.convertJsxToString)(originalChild, ' ').trim()
             };
           });
-          children = children.map(function (_ref6, idx) {
-            var component = _ref6.component,
-                segment = _ref6.segment;
-
-            if (skipHighlight || _this.state.skipHighlight) {
-              return segment;
-            }
-
-            var origSegment = segment;
-            listOfFoundWords.forEach(function (_ref7) {
-              var word = _ref7.word,
-                  wordIndex = _ref7.wordIndex;
-              word = escapeRegexChars(word);
-
-              if (searchNumbers) {
-                word.split('').forEach(function (char) {
-                  if (/[\d\w]/.test(char)) {
-                    segment = segment.replace(new RegExp("(".concat(char, ")"), 'gi'), "".concat(strS, "$1").concat(strE));
-                  }
-                });
-              } else {
-                if (wordIndex > inWordIndex) {
-                  segment = segment.replace(new RegExp("(".concat(word, ")"), 'gi'), "".concat(strS, "$1").concat(strE));
+          children = children.map(function (_ref8, idx) {
+            var originalChild = _ref8.originalChild,
+                segment = _ref8.segment;
+            searchWords.forEach(function (word, wordIndex) {
+              if (segment) {
+                word = (0, _componentHelper.escapeRegexChars)(word);
+
+                if (searchNumbers) {
+                  word.split('').forEach(function (char) {
+                    if (/[\d\w]/.test(char)) {
+                      segment = segment.replace(new RegExp("(".concat(char, ")"), 'gi'), "".concat(strS, "$1").concat(strE));
+                    }
+                  });
                 } else {
-                  segment = segment.replace(new RegExp("(".concat(wordCond, ")(").concat(word, ")"), 'gi'), "$1".concat(strS, "$2").concat(strE));
+                  if (wordIndex > inWordIndex) {
+                    segment = segment.replace(new RegExp("(".concat(word, ")"), 'gi'), "".concat(strS, "$1").concat(strE));
+                  } else {
+                    segment = segment.replace(new RegExp("(".concat(wordCond, ")(").concat(word, ")"), 'gi'), "$1".concat(strS, "$2").concat(strE));
+                  }
                 }
               }
             });
@@ -1129,15 +1144,21 @@ var AutocompleteInstance = function (_React$PureComponent2) {
             }
 
             if (isComponent) {
-              if (Array.isArray(component.props.children)) {
-                result = component.props.children.map(function (Comp) {
-                  return 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(function (Comp) {
+                  return Comp === originalChild || Comp.props && Comp.props.children === originalChild ? result : Comp;
                 });
+              } else if (typeof originalChild === 'string') {
+                result = originalChild;
               }
 
-              result = _react.default.cloneElement(component, {
-                key: 'clone' + cacheHash
-              }, result);
+              if (_react.default.isValidElement(originalChild)) {
+                result = _react.default.cloneElement(originalChild, {
+                  key: 'clone' + cacheHash + idx
+                }, result);
+              }
             }
 
             return result;
@@ -1145,31 +1166,42 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           return _this._rC[cacheHash] = children;
         };
 
-        var totalScore = listOfFoundWords.reduce(function (acc, _ref8) {
-          var score = _ref8.score;
-          return acc += score;
-        }, 0);
-
         if (_this.skipFilter || skipFilter) {
           return item.dataItem;
         }
 
+        var totalScore = listOfFoundWords.length;
+
+        var _iterator = _createForOfIteratorHelper(listOfFoundWords),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var wordScore = _step.value.wordScore;
+            totalScore += wordScore;
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
         return {
-          countFindings: listOfFoundWords.length + totalScore,
+          totalScore: totalScore,
           item: item
         };
       });
 
       if (!_this.skipFilter && !skipFilter) {
         searchIndex = searchIndex.filter(function (_ref9) {
-          var countFindings = _ref9.countFindings;
-          return countFindings;
+          var totalScore = _ref9.totalScore;
+          return totalScore;
         });
 
         if (!_this.skipReorder && !skipReorder) {
           searchIndex = searchIndex.sort(function (_ref10, _ref11) {
-            var a = _ref10.countFindings;
-            var b = _ref11.countFindings;
+            var a = _ref10.totalScore;
+            var b = _ref11.totalScore;
             return b - a;
           });
         }
@@ -1201,20 +1233,17 @@ var AutocompleteInstance = function (_React$PureComponent2) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onPreChangeHandler", function (_ref13) {
-      var data = _ref13.data,
-          selected_item = _ref13.selected_item;
+      var data = _ref13.data;
 
       if (data && data.show_all) {
         _this.showAll();
 
-        if (parseFloat(selected_item) > -1) {
-          var active_item = selected_item - 1;
+        var active_item = data.lastActiveItem;
 
-          _this.context.drawerList.setState({
-            active_item: active_item
+        if (parseFloat(active_item) > -1) {
+          _this.context.drawerList.setActiveItemAndScrollToIt(active_item, {
+            scrollTo: false
           });
-
-          _this.scrollToActiveItem(active_item);
         }
 
         return false;
@@ -1231,7 +1260,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         if (!(0, _componentHelper.isTrue)(keep_open)) {
           _this.setState({
             skipFocusDuringChange: true,
-            skipHighlight: true,
+            disableHighlighting: true,
             _listenForPropChanges: false
           });
 
@@ -1645,24 +1674,24 @@ var AutocompleteInstance = function (_React$PureComponent2) {
   }], [{
     key: "parseDataItem",
     value: function parseDataItem(dataItem) {
-      var toParse = (0, _DrawerListHelpers.parseContentTitle)(dataItem, {
+      var searchWord = (0, _DrawerListHelpers.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;
     }
   }, {
     key: "createSearchIndex",
     value: function createSearchIndex(data) {
       return data.map(function (dataItem) {
-        var searchChunk = AutocompleteInstance.parseDataItem(dataItem);
+        var contentChunk = AutocompleteInstance.parseDataItem(dataItem);
         return {
           dataItem: dataItem,
-          searchChunk: searchChunk
+          contentChunk: contentChunk
         };
       });
     }
@@ -1679,7 +1708,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
       if (state._listenForPropChanges) {
-        state.skipHighlight = (0, _componentHelper.isTrue)(props.disable_highlighting);
+        state.disableHighlighting = (0, _componentHelper.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;
@@ -1704,8 +1733,4 @@ _defineProperty(AutocompleteInstance, "defaultProps", Autocomplete.defaultProps)
 _defineProperty(AutocompleteInstance, "contextType", _DrawerListContext.default);
 
 process.env.NODE_ENV !== "production" ? AutocompleteInstance.propTypes = Autocomplete.propTypes : void 0;
-Autocomplete.HorizontalItem = _DrawerList.default.HorizontalItem;
-
-function escapeRegexChars(str) {
-  return str.replace(/[-[\]{}()*+?.,\\^$|#]/g, '\\$&');
-}
+Autocomplete.HorizontalItem = _DrawerList.default.HorizontalItem;

package/cjs/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/cjs/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/cjs/components/date-picker/DatePicker.js

@@ -441,7 +441,7 @@ var DatePicker = function (_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,
@@ -449,7 +449,8 @@ var DatePicker = function (_React$PureComponent) {
       }, status_props)), _react.default.createElement("span", {
         className: "dnb-date-picker__row"
       }, _react.default.createElement("span", {
-        className: "dnb-date-picker__shell"
+        className: "dnb-date-picker__shell",
+        id: "".concat(id, "-shell")
       }, _react.default.createElement(_DatePickerInput.default, _extends({
         id: id,
         title: title,

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

@@ -119,6 +119,12 @@ var DatePickerCalendar = function (_React$PureComponent) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "onMouseLeaveHandler", function () {
+      _this.context.updateState({
+        hoverDate: null
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (event) {
       var _event$target;
 
@@ -478,6 +484,7 @@ var DatePickerCalendar = function (_React$PureComponent) {
         tabIndex: "0",
         "aria-labelledby": "".concat(id, "--title"),
         onKeyDown: this.onKeyDownHandler,
+        onMouseLeave: this.onMouseLeaveHandler,
         ref: this._listRef
       }, !hideDays && _react.default.createElement("thead", {
         "aria-hidden": true

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

@@ -857,7 +857,7 @@ var DatePickerInput = function (_React$PureComponent) {
           on_click: onSubmit
         }, submitAttributes, status_props)),
         lang: locale === null || locale === void 0 ? void 0 : locale.code
-      }, attributes)), ' ');
+      }, attributes)));
     }
   }]);