@dnb/eufemia 9.23.1 → 9.26.0

package/components/tooltip/TooltipPortal.js

@@ -53,8 +53,11 @@ var TooltipPortal = function (_React$PureComponent) {
       var _this$props = _this.props,
           group = _this$props.group,
           active = _this$props.active;
-      tooltipPortal[group] = tooltipPortal[group] || {};
-      tooltipPortal[group].node || (tooltipPortal[group].node = _this.useRootElement());
+      tooltipPortal[group] = tooltipPortal[group] || {
+        node: _this.useRootElement(),
+        count: 0
+      };
+      tooltipPortal[group].count++;
 
       _this.setState({
         isMounted: true,
@@ -71,7 +74,7 @@ var TooltipPortal = function (_React$PureComponent) {
 
       var group = _this.props.group;
 
-      if (tooltipPortal[group].timeout) {
+      if (!_this.isMainGorup() && tooltipPortal[group]) {
         clearTimeout(tooltipPortal[group].timeout);
       }
 
@@ -124,7 +127,7 @@ var TooltipPortal = function (_React$PureComponent) {
             }
           });
         } else if (!active && prevProps.active) {
-          tooltipPortal[group].timeout = setTimeout(function () {
+          this.timeout = tooltipPortal[group].timeout = setTimeout(function () {
             _this2.setState({
               active: false
             }, function () {
@@ -146,19 +149,22 @@ var TooltipPortal = function (_React$PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var group = this.props.group;
+      clearTimeout(this.timeout);
 
       if (tooltipPortal[group]) {
+        tooltipPortal[group].count--;
+
         if (!this.isMainGorup()) {
           ReactDOM.unmountComponentAtNode(tooltipPortal[group].node);
         }
 
-        clearTimeout(tooltipPortal[group].timeout);
+        if (tooltipPortal[group].count === 0) {
+          try {
+            document.body.removeChild(tooltipPortal[group].node);
+          } catch (e) {}
 
-        try {
-          document.body.removeChild(tooltipPortal[group].node);
-        } catch (e) {}
-
-        tooltipPortal[group] = null;
+          tooltipPortal[group] = null;
+        }
       }
     }
   }, {

package/components/tooltip/style/_tooltip.scss

@@ -54,6 +54,13 @@
     animation: hide-tooltip 1ms ease-out 1s forwards;
   }
 
+  &__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
   &__content {
     min-width: 2rem;
     min-height: 1.5rem;

package/components/tooltip/style/dnb-tooltip.css

@@ -121,6 +121,11 @@
   html[data-visual-test] .dnb-tooltip--hide {
     -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
             animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0; }
   .dnb-tooltip__content {
     min-width: 2rem;
     min-height: 1.5rem;

package/components/tooltip/style/dnb-tooltip.min.css

@@ -1 +1 @@
-.dnb-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tooltip *,.dnb-tooltip :after,.dnb-tooltip :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tooltip :after,.dnb-tooltip :before{text-decoration:inherit;vertical-align:inherit}.dnb-tooltip{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--animate_position{-webkit-transition:all .3s ease-in-out,opacity .2s ease-out;transition:all .3s ease-in-out,opacity .2s ease-out}.dnb-tooltip--active{-webkit-animation:show-tooltip .2s ease-out forwards;animation:show-tooltip .2s ease-out forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{-webkit-animation:show-tooltip 1ms ease-out forwards;animation:show-tooltip 1ms ease-out forwards}.dnb-tooltip--hide{-webkit-animation:hide-tooltip .2s ease-in-out forwards;animation:hide-tooltip .2s ease-in-out forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{-webkit-animation:hide-tooltip 1ms ease-out forwards;animation:hide-tooltip 1ms ease-out forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{-webkit-animation:hide-tooltip 1ms ease-out 1s forwards;animation:hide-tooltip 1ms ease-out 1s forwards}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;-webkit-transform:translateY(70%) rotate(45deg);transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{-ms-flex-item-align:start;align-self:flex-start}.dnb-tooltip__arrow__arrow--right{-ms-flex-item-align:end;align-self:flex-end}@-webkit-keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}
+.dnb-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tooltip *,.dnb-tooltip :after,.dnb-tooltip :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tooltip :after,.dnb-tooltip :before{text-decoration:inherit;vertical-align:inherit}.dnb-tooltip{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--animate_position{-webkit-transition:all .3s ease-in-out,opacity .2s ease-out;transition:all .3s ease-in-out,opacity .2s ease-out}.dnb-tooltip--active{-webkit-animation:show-tooltip .2s ease-out forwards;animation:show-tooltip .2s ease-out forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{-webkit-animation:show-tooltip 1ms ease-out forwards;animation:show-tooltip 1ms ease-out forwards}.dnb-tooltip--hide{-webkit-animation:hide-tooltip .2s ease-in-out forwards;animation:hide-tooltip .2s ease-in-out forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{-webkit-animation:hide-tooltip 1ms ease-out forwards;animation:hide-tooltip 1ms ease-out forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{-webkit-animation:hide-tooltip 1ms ease-out 1s forwards;animation:hide-tooltip 1ms ease-out 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;-webkit-transform:translateY(70%) rotate(45deg);transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{-ms-flex-item-align:start;align-self:flex-start}.dnb-tooltip__arrow__arrow--right{-ms-flex-item-align:end;align-self:flex-end}@-webkit-keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}

package/components/visually-hidden/VisuallyHidden.d.ts

@@ -17,7 +17,7 @@ export interface VisuallyHiddenProps {
     focusable?: boolean;
     /**
      * Root element of the component
-     * Default: div
+     * Default: span
      */
     element?: string | React.ReactNode;
 }

package/components/visually-hidden/VisuallyHidden.js

@@ -22,7 +22,7 @@ export var defaultProps = {
   className: null,
   children: null,
   focusable: false,
-  element: 'div'
+  element: 'span'
 };
 
 var VisuallyHidden = function VisuallyHidden(localProps) {

package/elements/Anchor.d.ts

@@ -35,6 +35,7 @@ export type AnchorElement =
 export type AnchorTo = string | Object | ((...args: any[]) => any);
 export type AnchorClassName = string | Object | any[];
 export type AnchorTooltip = ((...args: any[]) => any) | React.ReactNode;
+export type AnchorSkeleton = string | boolean;
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -97,6 +98,11 @@ export interface AnchorProps extends React.HTMLProps<HTMLElement> {
    */
   tooltip?: AnchorTooltip;
   children?: React.ReactNode;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: AnchorSkeleton;
 }
 declare const Anchor: React.FC<AnchorProps>;
 export default Anchor;

package/elements/Anchor.js

@@ -47,7 +47,8 @@ process.env.NODE_ENV !== "production" ? Anchor.propTypes = _objectSpread(_object
   target: PropTypes.string,
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
   tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  children: PropTypes.node
+  children: PropTypes.node,
+  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 }) : void 0;
 Anchor.defaultProps = {
   element: null,
@@ -58,7 +59,8 @@ Anchor.defaultProps = {
   target: null,
   className: null,
   tooltip: null,
-  children: null
+  children: null,
+  skeleton: null
 };
 
 var AnchorInstance = function (_React$PureComponent) {

package/elements/Ingress.d.ts

@@ -1,5 +1,5 @@
-export default Paragraph;
-declare function Paragraph(p: any): JSX.Element;
-declare namespace Paragraph {
+export default Ingress;
+declare function Ingress(p: any): JSX.Element;
+declare namespace Ingress {
     const tagName: string;
 }

package/elements/Ingress.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import P from './P';
 
-var Paragraph = function Paragraph(p) {
+var Ingress = function Ingress(p) {
   return React.createElement(P, _extends({
     style_type: "ingress"
   }, p));
 };
 
-Paragraph.tagName = 'dnb-p--ingress';
-export default Paragraph;
+Ingress.tagName = 'dnb-p--ingress';
+export default Ingress;

package/elements/Lead.d.ts

@@ -1,29 +1,5 @@
-import * as React from 'react';
-export type LeadSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type LeadTop = string | number | boolean;
-export type LeadRight = string | number | boolean;
-export type LeadBottom = string | number | boolean;
-export type LeadLeft = string | number | boolean;
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface LeadProps extends React.HTMLProps<HTMLElement> {
-  space?: LeadSpace;
-  top?: LeadTop;
-  right?: LeadRight;
-  bottom?: LeadBottom;
-  left?: LeadLeft;
-  children?: React.ReactNode;
-}
-declare const Lead: React.FC<LeadProps>;
 export default Lead;
+declare function Lead(p: any): JSX.Element;
+declare namespace Lead {
+    const tagName: string;
+}

package/elements/Lead.js

@@ -1,32 +1,12 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React from 'react';
-import PropTypes from 'prop-types';
-import { spacingPropTypes } from '../components/space/SpacingHelper';
-import E from './Element';
-var Lead = React.forwardRef(function (props, ref) {
-  return React.createElement(E, _extends({
-    is: "p",
-    inner_ref: ref
-  }, props));
-});
-Lead.tagName = 'dnb-lead';
-Lead.propTypes = _objectSpread(_objectSpread({}, spacingPropTypes), {}, {
-  children: PropTypes.node
-});
-Lead.defaultProps = {
-  children: null
+import P from './P';
+
+var Lead = function Lead(p) {
+  return React.createElement(P, _extends({
+    style_type: "lead"
+  }, p));
 };
+
+Lead.tagName = 'dnb-p--lead';
 export default Lead;

package/elements/lib.d.ts

@@ -19,7 +19,10 @@ export function getElements(): {
         (p: any): JSX.Element;
         tagName: string;
     };
-    Lead: import("react").FC<import("./Lead").LeadProps>;
+    Lead: {
+        (p: any): JSX.Element;
+        tagName: string;
+    };
     Li: import("react").FC<import("./Li").LiProps>;
     Link: import("react").FC<import("./Anchor").AnchorProps>;
     Ol: import("react").FC<import("./Ol").OlProps>;

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

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["children"],
       _excluded2 = ["children"],
       _excluded3 = ["children"],
-      _excluded4 = ["icon"],
+      _excluded4 = ["icon", "expanded"],
       _excluded5 = ["children", "className", "left_component", "expanded", "title", "description", "icon", "icon_size", "disabled"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -77,25 +77,31 @@ AccordionHeaderContainer.defaultProps = {
 
 function AccordionHeaderIcon(_ref4) {
   let {
-    icon
+    icon,
+    expanded
   } = _ref4,
       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
 };
 export default class AccordionHeader extends React.PureComponent {
   constructor(props) {
@@ -197,7 +203,8 @@ export default class AccordionHeader extends React.PureComponent {
     const 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, {
@@ -333,7 +340,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/es/components/accordion/AccordionPropTypes.js

@@ -17,7 +17,7 @@ export const 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]),
@@ -27,7 +27,10 @@ export const 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/es/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/es/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/es/components/autocomplete/Autocomplete.js

@@ -118,6 +118,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,
@@ -199,6 +203,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]),
@@ -1470,6 +1478,7 @@ class AutocompleteInstance extends React.PureComponent {
       onSubmit: this.toggleVisible,
       'aria-haspopup': 'listbox',
       'aria-expanded': isExpanded,
+      'aria-label': !hidden ? submit_button_title : undefined,
       tooltip: hidden ? submit_button_title : null,
       className: opened ? 'dnb-button--active' : null
     };

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

@@ -273,6 +273,11 @@
   html[data-visual-test] .dnb-tooltip--hide {
     -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
             animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0; }
   .dnb-tooltip__content {
     min-width: 2rem;
     min-height: 1.5rem;
@@ -790,7 +795,8 @@
     -moz-appearance: none;
     -webkit-appearance: none; }
   .dnb-button[disabled] {
-    cursor: not-allowed; }
+    cursor: not-allowed;
+    outline: none; }
   .dnb-form-row--vertical .dnb-form-row__content > .dnb-button {
     -ms-flex-item-align: start;
         align-self: flex-start; }
@@ -1026,6 +1032,11 @@ button.dnb-button::-moz-focus-inner {
   html[data-visual-test] .dnb-tooltip--hide {
     -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
             animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0; }
   .dnb-tooltip__content {
     min-width: 2rem;
     min-height: 1.5rem;
@@ -2167,6 +2178,11 @@ legend.dnb-form-label {
   html[data-visual-test] .dnb-tooltip--hide {
     -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
             animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0; }
   .dnb-tooltip__content {
     min-width: 2rem;
     min-height: 1.5rem;
@@ -2671,7 +2687,8 @@ legend.dnb-form-label {
     -moz-appearance: none;
     -webkit-appearance: none; }
   .dnb-button[disabled] {
-    cursor: not-allowed; }
+    cursor: not-allowed;
+    outline: none; }
   .dnb-form-row--vertical .dnb-form-row__content > .dnb-button {
     -ms-flex-item-align: start;
         align-self: flex-start; }
@@ -3107,9 +3124,7 @@ legend.dnb-form-label {
             order: 1;
     position: relative;
     z-index: 4;
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
+    display: inline-block;
     width: 100%;
     overflow: hidden;
     color: inherit;