@dnb/eufemia 9.25.0 → 9.27.0

package/cjs/style/themes/theme-ui/dnb-theme-ui.scss

@@ -54,6 +54,7 @@
 @import '../../../components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss';
 @import '../../../components/step-indicator/style/themes/dnb-step-indicator-v1-theme-ui.scss';
 @import '../../../components/switch/style/themes/dnb-switch-theme-ui.scss';
+@import '../../../components/table/style/themes/dnb-table-theme-ui.scss';
 @import '../../../components/tabs/style/themes/dnb-tabs-theme-ui.scss';
 @import '../../../components/textarea/style/themes/dnb-textarea-theme-ui.scss';
 @import '../../../components/timeline/style/themes/dnb-timeline-theme-ui.scss';

package/components/Style.d.ts

@@ -0,0 +1 @@
+export default Style;

package/components/Style.js

@@ -0,0 +1,3 @@
+import Style from './style/Style';
+export * from './style/Style';
+export default Style;

package/components/Table.d.ts

@@ -0,0 +1,3 @@
+export * from "./table/Table";
+export default Table;
+import Table from "./table/Table";

package/components/Table.js

@@ -0,0 +1,3 @@
+import Table from './table/Table';
+export * from './table/Table';
+export default Table;

package/components/accordion/Accordion.d.ts

@@ -11,12 +11,24 @@ export type AccordionPreventRerenderConditional = string | boolean;
 export type AccordionRememberState = string | boolean;
 export type AccordionFlushRememberedState = string | boolean;
 export type AccordionSingleContainer = string | boolean;
-export type AccordionVariant = 'default' | 'outlined' | 'filled';
+export type AccordionVariant = 'plain' | 'default' | 'outlined' | 'filled';
 export type AccordionAllowCloseAll = string | boolean;
 export type AccordionDisabled = string | boolean;
 export type AccordionSkeleton = string | boolean;
 export type AccordionHeading = boolean | React.ReactNode;
 export type AccordionHeadingLevel = string | number;
+export type AccordionIcon =
+  | React.ReactNode
+  | ((...args: any[]) => any)
+  | {
+      closed?: React.ReactNode | ((...args: any[]) => any);
+
+      /**
+       * If set to `true` the accordion will be expanded as its initial state.
+       */
+      expanded?: React.ReactNode | ((...args: any[]) => any);
+    };
+export type AccordionClosed = React.ReactNode | ((...args: any[]) => any);
 export type AccordionIconPosition = 'left' | 'right';
 export type AccordionAttributes = string | Object;
 export type AccordionSpace =
@@ -104,7 +116,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   single_container?: AccordionSingleContainer;
 
   /**
-   * Defines the used styling. As of now, only `outlined` is available. It defaults to `outlined`.
+   * Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.
    */
   variant?: AccordionVariant;
 
@@ -146,9 +158,10 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   heading_level?: AccordionHeadingLevel;
 
   /**
-   * Will replace the `chevron` icon. The icon will still rotate (by CSS).
+   * Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.
    */
-  icon?: React.ReactNode;
+  icon?: AccordionIcon;
+  closed?: AccordionClosed;
 
   /**
    * Will set the placement of the icon. Defaults to `left`.

package/components/accordion/AccordionContent.js

@@ -182,7 +182,7 @@ var AccordionContent = function (_React$PureComponent) {
         id: "".concat(id, "-content"),
         role: 'region',
         'aria-labelledby': "".concat(id, "-header"),
-        className: classnames('dnb-accordion__content__inner', createSpacingClasses(rest), keepContentInDom === false && 'dnb-accordion__content__inner--remove-content')
+        className: classnames('dnb-accordion__content__inner', createSpacingClasses(rest), !expanded && !keepContentInDom && 'dnb-accordion__content__inner--remove-content')
       };
 
       if (expanded) {

package/components/accordion/AccordionHeader.d.ts

@@ -81,9 +81,12 @@ export interface AccordionHeaderContainerProps {
 }
 declare const AccordionHeaderContainer: React.FC<AccordionHeaderContainerProps>;
 export type AccordionHeaderIconIcon =
-  | string
   | React.ReactNode
-  | ((...args: any[]) => any);
+  | ((...args: any[]) => any)
+  | {
+      closed?: React.ReactNode | ((...args: any[]) => any);
+      expanded?: React.ReactNode | ((...args: any[]) => any);
+    };
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -91,6 +94,7 @@ export type AccordionHeaderIconIcon =
 export interface AccordionHeaderIconProps {
   icon?: AccordionHeaderIconIcon;
   size?: string;
+  expanded?: boolean;
 }
 declare const AccordionHeaderIcon: React.FC<AccordionHeaderIconProps>;
 export type AccordionHeaderTitle =
@@ -116,9 +120,12 @@ export type AccordionHeaderHeading =
   | ((...args: any[]) => any);
 export type AccordionHeaderHeadingLevel = string | number;
 export type AccordionHeaderIcon =
-  | string
   | React.ReactNode
-  | ((...args: any[]) => any);
+  | ((...args: any[]) => any)
+  | {
+      closed?: React.ReactNode | ((...args: any[]) => any);
+      expanded?: React.ReactNode | ((...args: any[]) => any);
+    };
 export type AccordionHeaderIconPosition = 'left' | 'right';
 export type AccordionHeaderDisabled = string | boolean;
 export type AccordionHeaderSkeleton = string | boolean;

package/components/accordion/AccordionHeader.js

@@ -14,7 +14,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children"],
     _excluded2 = ["children"],
     _excluded3 = ["children"],
-    _excluded4 = ["icon"],
+    _excluded4 = ["icon", "expanded"],
     _excluded5 = ["children", "className", "left_component", "expanded", "title", "description", "icon", "icon_size", "disabled"];
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
@@ -93,23 +93,29 @@ AccordionHeaderContainer.defaultProps = {
 
 function AccordionHeaderIcon(_ref4) {
   var icon = _ref4.icon,
+      expanded = _ref4.expanded,
       rest = _objectWithoutProperties(_ref4, _excluded4);
 
   return React.createElement("span", {
     className: "dnb-accordion__header__icon"
   }, React.createElement(IconPrimary, _extends({}, rest, {
-    icon: icon || 'chevron-down',
+    icon: typeof (icon === null || icon === void 0 ? void 0 : icon.expanded) !== 'undefined' ? icon[expanded ? 'expanded' : 'closed'] : icon || 'chevron-down',
     "aria-hidden": true
   })));
 }
 
 process.env.NODE_ENV !== "production" ? AccordionHeaderIcon.propTypes = {
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  size: PropTypes.string
+  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.shape({
+    closed: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    expanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  })]),
+  size: PropTypes.string,
+  expanded: PropTypes.bool
 } : void 0;
 AccordionHeaderIcon.defaultProps = {
   icon: null,
-  size: 'medium'
+  size: 'medium',
+  expanded: null
 };
 
 var AccordionHeader = function (_React$PureComponent) {
@@ -219,7 +225,8 @@ var AccordionHeader = function (_React$PureComponent) {
       var defaultParts = [React.createElement(AccordionHeaderIcon, {
         key: "icon",
         icon: icon,
-        size: icon_size
+        size: icon_size,
+        expanded: this.context.expanded
       }), React.createElement(AccordionHeaderContainer, {
         key: "container"
       }, left_component), React.createElement(AccordionHeaderTitle, {
@@ -368,7 +375,10 @@ process.env.NODE_ENV !== "production" ? AccordionHeader.propTypes = _objectSprea
   element: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
   heading: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.node, PropTypes.func]),
   heading_level: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
+  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.shape({
+    closed: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    expanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  })]),
   icon_position: PropTypes.oneOf(['left', 'right']),
   icon_size: PropTypes.string,
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

package/components/accordion/AccordionPropTypes.js

@@ -24,7 +24,7 @@ export var accordionPropTypes = _objectSpread(_objectSpread({
   remember_state: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   flush_remembered_state: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   single_container: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  variant: PropTypes.oneOf(['default', 'outlined', 'filled']),
+  variant: PropTypes.oneOf(['plain', 'default', 'outlined', 'filled']),
   left_component: PropTypes.node,
   allow_close_all: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -34,7 +34,10 @@ export var accordionPropTypes = _objectSpread(_objectSpread({
   element: PropTypes.node,
   heading: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   heading_level: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  icon: PropTypes.node,
+  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.shape({
+    closed: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    expanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  })]),
   icon_position: PropTypes.oneOf(['left', 'right']),
   icon_size: PropTypes.string,
   attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),

package/components/accordion/AccordionProvider.d.ts

@@ -8,12 +8,26 @@ export type AccordionGroupPreventRerenderConditional = string | boolean;
 export type AccordionGroupRememberState = string | boolean;
 export type AccordionGroupFlushRememberedState = string | boolean;
 export type AccordionGroupSingleContainer = string | boolean;
-export type AccordionGroupVariant = 'default' | 'outlined' | 'filled';
+export type AccordionGroupVariant =
+  | 'plain'
+  | 'default'
+  | 'outlined'
+  | 'filled';
 export type AccordionGroupAllowCloseAll = string | boolean;
 export type AccordionGroupDisabled = string | boolean;
 export type AccordionGroupSkeleton = string | boolean;
 export type AccordionGroupHeading = boolean | React.ReactNode;
 export type AccordionGroupHeadingLevel = string | number;
+export type AccordionGroupIcon =
+  | React.ReactNode
+  | ((...args: any[]) => any)
+  | {
+      closed?: React.ReactNode | ((...args: any[]) => any);
+      expanded?: React.ReactNode | ((...args: any[]) => any);
+    };
+export type AccordionGroupClosed =
+  | React.ReactNode
+  | ((...args: any[]) => any);
 export type AccordionGroupIconPosition = 'left' | 'right';
 export type AccordionGroupAttributes = string | Object;
 export type AccordionGroupSpace =
@@ -55,7 +69,8 @@ export interface AccordionGroupProps extends React.HTMLProps<HTMLElement> {
   element?: React.ReactNode;
   heading?: AccordionGroupHeading;
   heading_level?: AccordionGroupHeadingLevel;
-  icon?: React.ReactNode;
+  icon?: AccordionGroupIcon;
+  closed?: AccordionGroupClosed;
   icon_position?: AccordionGroupIconPosition;
   icon_size?: string;
   attributes?: AccordionGroupAttributes;

package/components/autocomplete/Autocomplete.d.ts

@@ -41,6 +41,7 @@ export type AutocompleteFixedPosition = string | boolean;
 export type AutocompletePreventFocus = string | boolean;
 export type AutocompleteSkipKeysearch = string | boolean;
 export type AutocompleteSelectedValue = string | React.ReactNode;
+export type AutocompleteSuffixValue = string | React.ReactNode;
 export type AutocompleteContent = string | React.ReactNode | string[];
 export type AutocompleteRawData =
   | any[]
@@ -115,6 +116,7 @@ export type AutocompleteData =
       | React.ReactNode
       | {
           selected_value?: string | React.ReactNode;
+          suffix_value?: string | React.ReactNode;
           content?: string | React.ReactNode | string[];
         }
     )[];
@@ -129,6 +131,9 @@ export type AutocompleteOpened = string | boolean;
 export type AutocompleteDisabled = string | boolean;
 export type AutocompleteStretch = string | boolean;
 export type AutocompleteSkeleton = string | boolean;
+export type AutocompletePageOffset = string | number;
+export type AutocompleteObserverElement = string | React.ReactNode;
+export type AutocompleteMinHeight = string | number;
 export type AutocompleteChildren =
   | string
   | ((...args: any[]) => any)
@@ -205,6 +210,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
    */
   skip_keysearch?: AutocompleteSkipKeysearch;
   selected_value?: AutocompleteSelectedValue;
+  suffix_value?: AutocompleteSuffixValue;
   content?: AutocompleteContent;
   prepared_data?: any[];
   raw_data?: AutocompleteRawData;
@@ -258,6 +264,11 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
    */
   show_options_sr?: string;
 
+  /**
+   * Only for screen readers (VocieOver). The label used to announce the selected item. Defaults to `Valgt:`.
+   */
+  selected_sr?: string;
+
   /**
    * Title on submit button. Defaults to `Vis alternativer`.
    */
@@ -509,6 +520,26 @@ 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;
+
+  /**
+   * Defines if the available scrollable height. If scrolling not should change the height of the drawer-list, then set it to `0` (useful if the DrawerList is used in fixed positions on contrast to a scrollable page content). Defaults to `window.pageYOffset`.
+   */
+  page_offset?: AutocompletePageOffset;
+
+  /**
+   * Set a HTML element, either as a selector or a DOM element. Can be used to send in an element which will be used to make the <em>direction calculation</em> on.
+   */
+  observer_element?: AutocompleteObserverElement;
+
+  /**
+   * Defines if the minimum height (in `rem`) of the options list. Defaults to `10rem`.
+   */
+  min_height?: AutocompleteMinHeight;
+
+  /**
+   * If set to true, the HTML body will get locked from scrolling. Defaults to `false`.
+   */
+  enable_body_lock?: boolean;
   class?: string;
   className?: string;
 
@@ -518,6 +549,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   children?: AutocompleteChildren;
   custom_element?: Object;
   custom_method?: (...args: any[]) => any;
+  ariaLiveDelay?: number;
 
   /**
    * Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.

package/components/autocomplete/Autocomplete.js

@@ -23,7 +23,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 _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; } } }; }
 
@@ -71,7 +71,7 @@ import FormStatus from '../form-status/FormStatus';
 import IconPrimary from '../icon-primary/IconPrimary';
 import Input, { SubmitButton } from '../input/Input';
 import ProgressIndicator from '../progress-indicator/ProgressIndicator';
-import DrawerList from '../../fragments/drawer-list/DrawerList';
+import DrawerList, { ItemContent } from '../../fragments/drawer-list/DrawerList';
 import DrawerListContext from '../../fragments/drawer-list/DrawerListContext';
 import DrawerListProvider from '../../fragments/drawer-list/DrawerListProvider';
 import { drawerListPropTypes, parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
@@ -128,6 +128,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,
@@ -179,11 +180,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,
@@ -206,6 +212,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   aria_live_options: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   indicator_label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   show_options_sr: PropTypes.string,
+  selected_sr: PropTypes.string,
   submit_button_title: PropTypes.string,
   submit_button_icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
   input_ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -245,6 +252,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   input_element: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   data: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.node]), PropTypes.shape({
     selected_value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    suffix_value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.string)])
   })]))]),
   search_in_word_index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -261,11 +269,16 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   portal_class: PropTypes.string,
   drawer_class: PropTypes.string,
+  page_offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  observer_element: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  min_height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  enable_body_lock: PropTypes.bool,
   class: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object, PropTypes.array]),
   custom_element: PropTypes.object,
   custom_method: PropTypes.func,
+  ariaLiveDelay: PropTypes.number,
   on_show: PropTypes.func,
   on_type: PropTypes.func,
   on_focus: PropTypes.func,
@@ -839,16 +852,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 () {
@@ -1411,10 +1424,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();
@@ -1436,14 +1452,33 @@ var AutocompleteInstance = function (_React$PureComponent2) {
                 ariaLiveUpdate: null,
                 _listenForPropChanges: false
               });
-            }, 1e3);
+            }, 1000);
           }
-        }
-      }, 1e3);
+        }, ariaLiveDelay);
+      }
+    }
+  }, {
+    key: "getVocieOverActiveItem",
+    value: function getVocieOverActiveItem(selected_sr) {
+      if (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 = getCurrentData(active_item, this.context.drawerList.data);
+        return React.createElement("span", {
+          className: "dnb-sr-only",
+          "aria-live": "assertive",
+          "aria-atomic": true
+        }, currentDataItem && React.createElement(React.Fragment, null, active_item === selected_item ? React.createElement(React.Fragment, null, selected_sr, " ") : null, React.createElement(ItemContent, null, currentDataItem)));
+      }
+
+      return null;
     }
   }, {
     key: "render",
     value: function render() {
+      var _getCurrentData;
+
       var props = this._props = extendPropsWithContext(this.props, Autocomplete.defaultProps, this.context.getTranslation(this.props).Autocomplete, this.context.FormRow, this.context.Autocomplete);
 
       var title = props.title,
@@ -1482,6 +1517,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,
@@ -1508,6 +1544,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;
@@ -1516,12 +1553,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 = validateDOMAttributes(null, attributes);
@@ -1643,6 +1680,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         status: status ? status_state : null,
         status_state: status_state,
         type: null,
+        inner_element: (_getCurrentData = 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: isTrue(show_clear_button),
@@ -1681,16 +1719,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.createElement(Suffix, {
         className: "dnb-autocomplete__suffix",
         id: id + '-suffix',
         context: props
-      }, suffix))), IS_MAC && React.createElement("span", {
-        className: "dnb-sr-only",
-        "aria-live": "assertive"
-      }, AutocompleteInstance.getCurrentDataTitle(active_item, this.context.drawerList.original_data)), React.createElement("span", {
+      }, suffix))), this.getVocieOverActiveItem(selected_sr), React.createElement("span", {
         className: "dnb-sr-only",
         "aria-live": "assertive"
       }, ariaLiveUpdate));

package/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 {