@dnb/eufemia 9.25.0 → 9.27.0

package/cjs/components/autocomplete/Autocomplete.js

@@ -101,7 +101,7 @@ var _Input = _interopRequireWildcard(require("../input/Input"));
 
 var _ProgressIndicator = _interopRequireDefault(require("../progress-indicator/ProgressIndicator"));
 
-var _DrawerList = _interopRequireDefault(require("../../fragments/drawer-list/DrawerList"));
+var _DrawerList = _interopRequireWildcard(require("../../fragments/drawer-list/DrawerList"));
 
 var _DrawerListContext = _interopRequireDefault(require("../../fragments/drawer-list/DrawerListContext"));
 
@@ -112,7 +112,7 @@ var _DrawerListHelpers = require("../../fragments/drawer-list/DrawerListHelpers"
 var _IconPrimary, _AlignmentHelper;
 
 var _excluded = ["fillDataIfEmpty"],
-    _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting"];
+    _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -212,6 +212,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   aria_live_options: null,
   indicator_label: null,
   show_options_sr: null,
+  selected_sr: null,
   submit_button_title: null,
   submit_button_icon: 'chevron_down',
   input_ref: null,
@@ -263,11 +264,16 @@ _defineProperty(Autocomplete, "defaultProps", {
   skeleton: null,
   portal_class: null,
   drawer_class: null,
+  page_offset: null,
+  observer_element: null,
+  min_height: null,
+  enable_body_lock: false,
   class: null,
   className: null,
   children: null,
   custom_element: null,
   custom_method: null,
+  ariaLiveDelay: null,
   on_show: null,
   on_hide: null,
   on_type: null,
@@ -289,6 +295,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   aria_live_options: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   indicator_label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   show_options_sr: _propTypes.default.string,
+  selected_sr: _propTypes.default.string,
   submit_button_title: _propTypes.default.string,
   submit_button_icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
   input_ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
@@ -328,6 +335,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   input_element: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   data: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), _propTypes.default.shape({
     selected_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+    suffix_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
     content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.string)])
   })]))]),
   search_in_word_index: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
@@ -344,11 +352,16 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   portal_class: _propTypes.default.string,
   drawer_class: _propTypes.default.string,
+  page_offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  observer_element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  min_height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  enable_body_lock: _propTypes.default.bool,
   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]),
   custom_element: _propTypes.default.object,
   custom_method: _propTypes.default.func,
+  ariaLiveDelay: _propTypes.default.number,
   on_show: _propTypes.default.func,
   on_type: _propTypes.default.func,
   on_focus: _propTypes.default.func,
@@ -922,16 +935,16 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       };
     });
 
-    _defineProperty(_assertThisInitialized(_this2), "hasShowMore", function () {
+    _defineProperty(_assertThisInitialized(_this2), "hasInjectedDataItem", function () {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.context.drawerList.data;
       var lastItem = data.slice(-1)[0];
-      return lastItem && lastItem.show_all === true;
+      return lastItem ? lastItem.show_all || lastItem.__id === 'no_options' : false;
     });
 
     _defineProperty(_assertThisInitialized(_this2), "countData", function () {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.context.drawerList.data;
       var count = data.length;
-      return count > 0 && _this2.hasShowMore(data) ? count - 1 : count;
+      return count > 0 && _this2.hasInjectedDataItem(data) ? count - 1 : count;
     });
 
     _defineProperty(_assertThisInitialized(_this2), "hasValidData", function () {
@@ -1494,10 +1507,13 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       var opened = this.context.drawerList.opened;
       var _this$_props = this._props,
           aria_live_options = _this$_props.aria_live_options,
-          no_options = _this$_props.no_options;
+          no_options = _this$_props.no_options,
+          _this$_props$ariaLive = _this$_props.ariaLiveDelay,
+          ariaLiveDelay = _this$_props$ariaLive === void 0 ? 1000 : _this$_props$ariaLive;
       clearTimeout(this._ariaLiveUpdateTimeout);
-      this._ariaLiveUpdateTimeout = setTimeout(function () {
-        if (opened) {
+
+      if (opened) {
+        this._ariaLiveUpdateTimeout = setTimeout(function () {
           var newString = null;
 
           var count = _this5.countData();
@@ -1519,14 +1535,33 @@ var AutocompleteInstance = function (_React$PureComponent2) {
                 ariaLiveUpdate: null,
                 _listenForPropChanges: false
               });
-            }, 1e3);
+            }, 1000);
           }
-        }
-      }, 1e3);
+        }, ariaLiveDelay);
+      }
+    }
+  }, {
+    key: "getVocieOverActiveItem",
+    value: function getVocieOverActiveItem(selected_sr) {
+      if (_helpers.IS_MAC) {
+        var _this$context$drawerL = this.context.drawerList,
+            active_item = _this$context$drawerL.active_item,
+            selected_item = _this$context$drawerL.selected_item;
+        var currentDataItem = (0, _DrawerListHelpers.getCurrentData)(active_item, this.context.drawerList.data);
+        return _react.default.createElement("span", {
+          className: "dnb-sr-only",
+          "aria-live": "assertive",
+          "aria-atomic": true
+        }, currentDataItem && _react.default.createElement(_react.default.Fragment, null, active_item === selected_item ? _react.default.createElement(_react.default.Fragment, null, selected_sr, " ") : null, _react.default.createElement(_DrawerList.ItemContent, null, currentDataItem)));
+      }
+
+      return null;
     }
   }, {
     key: "render",
     value: function render() {
+      var _getCurrentData;
+
       var props = this._props = (0, _componentHelper.extendPropsWithContext)(this.props, Autocomplete.defaultProps, this.context.getTranslation(this.props).Autocomplete, this.context.FormRow, this.context.Autocomplete);
 
       var title = props.title,
@@ -1565,6 +1600,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           search_numbers = props.search_numbers,
           search_in_word_index = props.search_in_word_index,
           show_options_sr = props.show_options_sr,
+          selected_sr = props.selected_sr,
           submit_button_title = props.submit_button_title,
           submit_button_icon = props.submit_button_icon,
           portal_class = props.portal_class,
@@ -1591,6 +1627,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           show_all = props.show_all,
           aria_live_options = props.aria_live_options,
           disable_highlighting = props.disable_highlighting,
+          ariaLiveDelay = props.ariaLiveDelay,
           attributes = _objectWithoutProperties(props, _excluded2);
 
       var id = this._id;
@@ -1599,12 +1636,12 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           inputValue = _this$state.inputValue,
           visibleIndicator = _this$state.visibleIndicator,
           ariaLiveUpdate = _this$state.ariaLiveUpdate;
-      var _this$context$drawerL = this.context.drawerList,
-          hidden = _this$context$drawerL.hidden,
-          selected_item = _this$context$drawerL.selected_item,
-          active_item = _this$context$drawerL.active_item,
-          direction = _this$context$drawerL.direction,
-          opened = _this$context$drawerL.opened;
+      var _this$context$drawerL2 = this.context.drawerList,
+          hidden = _this$context$drawerL2.hidden,
+          selected_item = _this$context$drawerL2.selected_item,
+          active_item = _this$context$drawerL2.active_item,
+          direction = _this$context$drawerL2.direction,
+          opened = _this$context$drawerL2.opened;
       var isExpanded = Boolean(opened) && this.hasValidData();
       delete attributes.onBlur;
       this.attributes = (0, _componentHelper.validateDOMAttributes)(null, attributes);
@@ -1726,6 +1763,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         status: status ? status_state : null,
         status_state: status_state,
         type: null,
+        inner_element: (_getCurrentData = (0, _DrawerListHelpers.getCurrentData)(selected_item, this.context.drawerList.original_data)) === null || _getCurrentData === void 0 ? void 0 : _getCurrentData.suffix_value,
         submit_element: submitButton,
         input_state: this.state.skipFocusDuringChange ? 'focus' : undefined,
         clear: (0, _componentHelper.isTrue)(show_clear_button),
@@ -1764,16 +1802,12 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         on_hide: this.onHideHandler,
         on_pre_change: this.onPreChangeHandler,
         on_key_down: this.onReserveActivityHandler,
-        onMouseDown: this.onReserveActivityHandler,
-        onTouchStart: this.onReserveActivityHandler
+        onMouseDown: this.onReserveActivityHandler
       })), suffix && _react.default.createElement(_Suffix.default, {
         className: "dnb-autocomplete__suffix",
         id: id + '-suffix',
         context: props
-      }, suffix))), _helpers.IS_MAC && _react.default.createElement("span", {
-        className: "dnb-sr-only",
-        "aria-live": "assertive"
-      }, AutocompleteInstance.getCurrentDataTitle(active_item, this.context.drawerList.original_data)), _react.default.createElement("span", {
+      }, suffix))), this.getVocieOverActiveItem(selected_sr), _react.default.createElement("span", {
         className: "dnb-sr-only",
         "aria-live": "assertive"
       }, ariaLiveUpdate));

package/cjs/components/autocomplete/style/_autocomplete.scss

@@ -76,6 +76,11 @@
       justify-content: center;
       align-items: center;
 
+      .dnb-drawer-list__option__item {
+        display: flex;
+        flex-direction: column;
+      }
+
       .dnb-icon {
         align-self: center;
       }
@@ -98,20 +103,66 @@
       width: 100%;
     }
   }
-  &--show-indicator &__input .dnb-input__icon {
-    color: transparent;
-  }
+
   &--opened .dnb-input__submit-button__button .dnb-icon {
     transform: rotate(180deg);
     transform-origin: 50% 50%;
   }
   .dnb-input__submit-button__button .dnb-icon {
     transition: transform 400ms ease-out;
+
+    html[data-visual-test] & {
+      transition-duration: 1ms !important;
+    }
   }
 
-  &__shell,
-  &__input {
-    border-radius: var(--autocomplete-border-radius);
+  // Support for "suffix_value"
+  .dnb-input {
+    &__inner__element {
+      position: relative;
+      z-index: 3;
+    }
+
+    &--has-submit-element .dnb-input__placeholder,
+    &--has-submit-element .dnb-input__input {
+      @include allAbove(small) {
+        // same width of submit button
+        padding-right: 0 !important; // use important so we avoid to have all sizes in addition
+      }
+      @include allBelow(small) {
+        // same width of submit button
+        padding-right: 2.5rem !important; // use important so we avoid to have all sizes in addition
+      }
+    }
+
+    &__inner__element.dnb-p {
+      pointer-events: none;
+      white-space: nowrap;
+      padding: 0 0.5rem;
+
+      @include allBelow(small) {
+        display: none;
+      }
+    }
+
+    &__inner__element.dnb-p,
+    .dnb-spacing &__inner__element.dnb-p {
+      margin: 0;
+    }
+
+    &--has-submit-element .dnb-input__inner__element {
+      // same width of submit button
+      margin-right: 2.5rem !important; // use important so we avoid to have all sizes in addition
+    }
+  }
+  &--icon-position-right .dnb-input {
+    // stylelint-disable-next-line
+    &__inner__element.dnb-p {
+      padding-right: 3rem;
+    }
+    &--icon-position-right &--icon-position-right#{&}--has-icon &__input {
+      padding-right: 1rem;
+    }
   }
 
   &__text {

package/cjs/components/autocomplete/style/dnb-autocomplete.css

@@ -1469,11 +1469,6 @@ legend.dnb-form-label {
     word-break: normal;
     position: relative;
     z-index: 2; }
-  .dnb-input input.dnb-input__input {
-    font-size: 1.125rem;
-    font-size: var(--input-font-size);
-    line-height: 1.125rem;
-    line-height: var(--font-size-basis); }
   .dnb-input__input[disabled] {
     -moz-user-select: none;
      -ms-user-select: none;
@@ -1490,12 +1485,16 @@ legend.dnb-form-label {
     padding-left: 1rem;
     padding-left: var(--input-padding);
     padding-right: 1rem;
-    padding-right: var(--input-padding);
-    text-align: inherit;
+    padding-right: var(--input-padding); }
+  .dnb-input__placeholder, .dnb-input__input,
+  .dnb-input input.dnb-input__input {
+    padding-top: 0;
+    padding-bottom: 0;
     color: inherit;
     background-color: transparent;
     font-size: 1.125rem;
-    font-size: var(--input-font-size); }
+    font-size: var(--input-font-size);
+    line-height: inherit; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;
@@ -3784,6 +3783,14 @@ legend.dnb-form-label {
             align-items: center;
     color: #007272;
     color: var(--color-sea-green); }
+    .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column; }
     .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon {
       -ms-flex-item-align: center;
           align-self: center; }
@@ -3800,8 +3807,6 @@ legend.dnb-form-label {
     .dnb-autocomplete__input .dnb-input__shell,
     .dnb-autocomplete__input .dnb-input__input {
       width: 100%; }
-  .dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
-    color: transparent; }
   .dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon {
     -webkit-transform: rotate(180deg);
             transform: rotate(180deg);
@@ -3812,9 +3817,36 @@ legend.dnb-form-label {
     transition: -webkit-transform 400ms ease-out;
     transition: transform 400ms ease-out;
     transition: transform 400ms ease-out, -webkit-transform 400ms ease-out; }
-  .dnb-autocomplete__shell, .dnb-autocomplete__input {
-    border-radius: 0.25rem;
-    border-radius: var(--autocomplete-border-radius); }
+    html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
+      -webkit-transition-duration: 1ms !important;
+              transition-duration: 1ms !important; }
+  .dnb-autocomplete .dnb-input__inner__element {
+    position: relative;
+    z-index: 3; }
+  @media screen and (min-width: 40em) {
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+      padding-right: 0 !important; } }
+  @media screen and (max-width: 40em) {
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+      padding-right: 2.5rem !important; } }
+  .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+    pointer-events: none;
+    white-space: nowrap;
+    padding: 0 0.5rem; }
+    @media screen and (max-width: 40em) {
+      .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+        display: none; } }
+  .dnb-autocomplete .dnb-input__inner__element.dnb-p,
+  .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+    margin: 0; }
+  .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element {
+    margin-right: 2.5rem !important; }
+  .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p {
+    padding-right: 3rem; }
+  .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
+    padding-right: 1rem; }
   .dnb-autocomplete__text {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;