@dnb/eufemia 9.25.0 → 9.26.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.26.0](https://github.com/dnbexperience/eufemia/compare/v9.25.0...v9.26.0) (2022-04-27)
+
+
+### Bug Fixes
+
+* **Autocomplete:** Missing properties in PropTypes ([#1383](https://github.com/dnbexperience/eufemia/issues/1383)) ([1256009](https://github.com/dnbexperience/eufemia/commit/125600991434f15b3c5d85b8c9ad28e1c2bfcc00))
+* **HelpButton:** ensure Drawer/Dialog/Modal trigger button gets a label ([4b52c98](https://github.com/dnbexperience/eufemia/commit/4b52c988904433ae3819b12709985ea0602462fa))
+
+
+### Features
+
+* add "plain" variant to Accordion ([#1398](https://github.com/dnbexperience/eufemia/issues/1398)) ([105d9ae](https://github.com/dnbexperience/eufemia/commit/105d9aed9e803aa0a3bd5d44686ccde4d64effb8))
+* make Accordion support a separate icon for the expanded state ([58ac1d3](https://github.com/dnbexperience/eufemia/commit/58ac1d385fcd497313067422123173766a0d739a))
+
 # [9.25.0](https://github.com/dnbexperience/eufemia/compare/v9.24.0...v9.25.0) (2022-04-05)
 
 

package/cjs/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/cjs/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/cjs/components/accordion/AccordionHeader.js

@@ -66,7 +66,7 @@ var _SkeletonHelper = require("../skeleton/SkeletonHelper");
 var _excluded = ["children"],
     _excluded2 = ["children"],
     _excluded3 = ["children"],
-    _excluded4 = ["icon"],
+    _excluded4 = ["icon", "expanded"],
     _excluded5 = ["children", "className", "left_component", "expanded", "title", "description", "icon", "icon_size", "disabled"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -153,23 +153,29 @@ AccordionHeaderContainer.defaultProps = {
 
 function AccordionHeaderIcon(_ref4) {
   var icon = _ref4.icon,
+      expanded = _ref4.expanded,
       rest = _objectWithoutProperties(_ref4, _excluded4);
 
   return _react.default.createElement("span", {
     className: "dnb-accordion__header__icon"
   }, _react.default.createElement(_IconPrimary.default, _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.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
-  size: _propTypes.default.string
+  icon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func, _propTypes.default.shape({
+    closed: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+    expanded: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
+  })]),
+  size: _propTypes.default.string,
+  expanded: _propTypes.default.bool
 } : void 0;
 AccordionHeaderIcon.defaultProps = {
   icon: null,
-  size: 'medium'
+  size: 'medium',
+  expanded: null
 };
 
 var AccordionHeader = function (_React$PureComponent) {
@@ -279,7 +285,8 @@ var AccordionHeader = function (_React$PureComponent) {
       var defaultParts = [_react.default.createElement(AccordionHeaderIcon, {
         key: "icon",
         icon: icon,
-        size: icon_size
+        size: icon_size,
+        expanded: this.context.expanded
       }), _react.default.createElement(AccordionHeaderContainer, {
         key: "container"
       }, left_component), _react.default.createElement(AccordionHeaderTitle, {
@@ -431,7 +438,10 @@ process.env.NODE_ENV !== "production" ? AccordionHeader.propTypes = _objectSprea
   element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
   heading: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
   heading_level: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
+  icon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func, _propTypes.default.shape({
+    closed: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+    expanded: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
+  })]),
   icon_position: _propTypes.default.oneOf(['left', 'right']),
   icon_size: _propTypes.default.string,
   disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),

package/cjs/components/accordion/AccordionPropTypes.js

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

package/cjs/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/cjs/components/autocomplete/Autocomplete.d.ts

@@ -129,6 +129,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)
@@ -509,6 +512,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;
 

package/cjs/components/autocomplete/Autocomplete.js

@@ -263,6 +263,10 @@ _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,
@@ -344,6 +348,10 @@ 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]),

package/cjs/components/help-button/HelpButtonInstance.js

@@ -138,16 +138,16 @@ var HelpButtonInstance = function (_React$PureComponent) {
         if (!params['aria-roledescription']) {
           params['aria-roledescription'] = this.context.getTranslation(this.props).HelpButton.aria_role;
         }
+      }
 
-        if (!params.text && !params['aria-label']) {
-          var ariaLabel = (0, _componentHelper.convertJsxToString)(props.title || props.children);
-
-          if (!ariaLabel) {
-            ariaLabel = this.context.getTranslation(this.props).HelpButton.title;
-          }
+      if (!params.text && !params['aria-label']) {
+        var ariaLabel = (0, _componentHelper.convertJsxToString)(props.title || props.children);
 
-          params['aria-label'] = ariaLabel;
+        if (!ariaLabel) {
+          ariaLabel = this.context.getTranslation(this.props).HelpButton.title;
         }
+
+        params['aria-label'] = ariaLabel;
       }
 
       if (icon === 'information' && !size) {

package/cjs/fragments/drawer-list/DrawerListProvider.d.ts

@@ -137,6 +137,7 @@ export interface DrawerListProviderProps
   on_resize?: (...args: any[]) => any;
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
+  enable_body_lock?: boolean;
   use_drawer_on_mobile?: DrawerListProviderUseDrawerOnMobile;
   page_offset?: DrawerListProviderPageOffset;
   observer_element?: DrawerListProviderObserverElement;

package/cjs/fragments/drawer-list/DrawerListProvider.js

@@ -1245,6 +1245,7 @@ exports.default = DrawerListProvider;
 _defineProperty(DrawerListProvider, "contextType", _Context.default);
 
 _defineProperty(DrawerListProvider, "defaultProps", _objectSpread(_objectSpread({}, _DrawerListHelpers.drawerListDefaultProps), {}, {
+  enable_body_lock: false,
   use_drawer_on_mobile: null,
   page_offset: null,
   observer_element: null,
@@ -1254,6 +1255,7 @@ _defineProperty(DrawerListProvider, "defaultProps", _objectSpread(_objectSpread(
 _defineProperty(DrawerListProvider, "blurDelay", 201);
 
 process.env.NODE_ENV !== "production" ? DrawerListProvider.propTypes = _objectSpread(_objectSpread({}, _DrawerListHelpers.drawerListPropTypes), {}, {
+  enable_body_lock: _propTypes.default.bool,
   use_drawer_on_mobile: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   page_offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   observer_element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),

package/cjs/shared/Eufemia.js

@@ -21,7 +21,7 @@ function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.25.0';
+          return '9.26.0';
         }
       }]);
 

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

@@ -129,6 +129,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)
@@ -509,6 +512,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;
 

package/components/autocomplete/Autocomplete.js

@@ -179,6 +179,10 @@ _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,
@@ -261,6 +265,10 @@ 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]),

package/components/help-button/HelpButtonInstance.js

@@ -74,16 +74,16 @@ var HelpButtonInstance = function (_React$PureComponent) {
         if (!params['aria-roledescription']) {
           params['aria-roledescription'] = this.context.getTranslation(this.props).HelpButton.aria_role;
         }
+      }
 
-        if (!params.text && !params['aria-label']) {
-          var ariaLabel = convertJsxToString(props.title || props.children);
-
-          if (!ariaLabel) {
-            ariaLabel = this.context.getTranslation(this.props).HelpButton.title;
-          }
+      if (!params.text && !params['aria-label']) {
+        var ariaLabel = convertJsxToString(props.title || props.children);
 
-          params['aria-label'] = ariaLabel;
+        if (!ariaLabel) {
+          ariaLabel = this.context.getTranslation(this.props).HelpButton.title;
         }
+
+        params['aria-label'] = ariaLabel;
       }
 
       if (icon === 'information' && !size) {