@dnb/eufemia 9.32.1 → 9.34.0

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.34.0](https://github.com/dnbexperience/eufemia/compare/v9.33.0...v9.34.0) (2022-10-24)
+
+
+### Bug Fixes
+
+* **Upload:** make import paths valid in released version ([#1659](https://github.com/dnbexperience/eufemia/issues/1659)) ([4eb622a](https://github.com/dnbexperience/eufemia/commit/4eb622a01bf4c8727057e84af380033c332fc480))
+
+
+### Features
+
+* **useMedia:** add React Hook to handle Eufemia layout breakpoints ([#1650](https://github.com/dnbexperience/eufemia/issues/1650)) ([d41f7dd](https://github.com/dnbexperience/eufemia/commit/d41f7dda7a6c803a6578b5021a405141608f39e8))
+
+# [9.33.0](https://github.com/dnbexperience/eufemia/compare/v9.32.1...v9.33.0) (2022-10-23)
+
+
+### Bug Fixes
+
+* **Accordion:** replace internal animation with HeightAnimation component ([#1619](https://github.com/dnbexperience/eufemia/issues/1619)) ([2cb2d48](https://github.com/dnbexperience/eufemia/commit/2cb2d48df457bcf13838b126b6fc197feb04d453))
+* **Dl:** ensure correct spacing ([#1626](https://github.com/dnbexperience/eufemia/issues/1626)) ([5330e6d](https://github.com/dnbexperience/eufemia/commit/5330e6dc1c313ce7f3e72f0e6d57b41450e5ac47))
+* **Dl:** remove span as direct sibling for horizontal direction ([#1625](https://github.com/dnbexperience/eufemia/issues/1625)) ([6845219](https://github.com/dnbexperience/eufemia/commit/6845219f3568b1b943199ff63bcfba7820899913))
+* **Drawer:** ensure ScrollView is used for scrollable content ([#1632](https://github.com/dnbexperience/eufemia/issues/1632)) ([fea2358](https://github.com/dnbexperience/eufemia/commit/fea23585869e830d2f5c2095d5ed18a26cc635de))
+* **DrawerList:** fix auto sizing when used in Drawer component ([#1634](https://github.com/dnbexperience/eufemia/issues/1634)) ([f19d58b](https://github.com/dnbexperience/eufemia/commit/f19d58bcad58226373722e7c3cbf5529bd58e730)), closes [#1632](https://github.com/dnbexperience/eufemia/issues/1632) [#1633](https://github.com/dnbexperience/eufemia/issues/1633) [#1631](https://github.com/dnbexperience/eufemia/issues/1631)
+* **DrawerList:** reset "enable_body_lock" handlers after closing ([#1629](https://github.com/dnbexperience/eufemia/issues/1629)) ([1a90c72](https://github.com/dnbexperience/eufemia/commit/1a90c729d091074c18c807f799d83853c36eed7e))
+* **Drawer:** make spacing of header and nav robust ([#1641](https://github.com/dnbexperience/eufemia/issues/1641)) ([5454ded](https://github.com/dnbexperience/eufemia/commit/5454ded078b972de35d4942c29367845a56d8e32))
+* **FormStatus:** fix stretch when used in Dropdown and Autocomplete ([#1618](https://github.com/dnbexperience/eufemia/issues/1618)) ([a961feb](https://github.com/dnbexperience/eufemia/commit/a961feb1b06c7ddba10b3d5423c57e045e9e52b5))
+* **gatsby-plugin-eufemia-theme-handler:** support Gatsby > v4.24 ([#1623](https://github.com/dnbexperience/eufemia/issues/1623)) ([34d0f6c](https://github.com/dnbexperience/eufemia/commit/34d0f6cafa3793bd9b4763d7aad05c39201d2443))
+* **Icon:** fix override of data-testid property when provided ([#1637](https://github.com/dnbexperience/eufemia/issues/1637)) ([d335a14](https://github.com/dnbexperience/eufemia/commit/d335a14873bed46922ed9accd3e6c0d79f2e7c18))
+* **Pagination:** fix locale support ([#1651](https://github.com/dnbexperience/eufemia/issues/1651)) ([01b93ce](https://github.com/dnbexperience/eufemia/commit/01b93ce55513dcecc1fc012973a194e7e2c8f218))
+* **Section:** make style_type property accept any string ([#1636](https://github.com/dnbexperience/eufemia/issues/1636)) ([9e51565](https://github.com/dnbexperience/eufemia/commit/9e5156531b614558836ed77dcaafb9e649b69606))
+* **Section:** rename AllSectionProps to SectionAllProps ([#1640](https://github.com/dnbexperience/eufemia/issues/1640)) ([23de874](https://github.com/dnbexperience/eufemia/commit/23de87451a6a59223cbc91dd2f094cf65af6e9bc))
+* **Space:** rewrite Space component to TypeScript ([#1644](https://github.com/dnbexperience/eufemia/issues/1644)) ([c59f732](https://github.com/dnbexperience/eufemia/commit/c59f7329dfcb748240200f0d79995a47eba876ad))
+* **Tooltip:** ensure timers cleanup on unmount ([#1642](https://github.com/dnbexperience/eufemia/issues/1642)) ([6dd4b7b](https://github.com/dnbexperience/eufemia/commit/6dd4b7ba11ffc7edfe0e5640702763dc9b6e5e86))
+
+
+### Features
+
+* **DrawerList:** animate max-height when changed during scrolling ([#1631](https://github.com/dnbexperience/eufemia/issues/1631)) ([cf302f7](https://github.com/dnbexperience/eufemia/commit/cf302f7d9c04ad0cb019401ddebd268599be5275))
+* **DrawerList:** animate position when used inside dnb-scroll-view ([#1633](https://github.com/dnbexperience/eufemia/issues/1633)) ([7ed9550](https://github.com/dnbexperience/eufemia/commit/7ed9550513e8ff7a8d18c009c0023e646b187c31))
+* **HeightAnimation:** add showOverflow property ([#1627](https://github.com/dnbexperience/eufemia/issues/1627)) ([a9bbce4](https://github.com/dnbexperience/eufemia/commit/a9bbce415e8ddb4bbe2ae3935402c2347ee1d854))
+* **HeightAnimation:** make the view open by default ([#1646](https://github.com/dnbexperience/eufemia/issues/1646)) ([32aa0eb](https://github.com/dnbexperience/eufemia/commit/32aa0eb76d03a81e653c6a99c40b621813767238))
+* **icons:** hierarchy, layout_card and unlock ([#1654](https://github.com/dnbexperience/eufemia/issues/1654)) ([d8d37ba](https://github.com/dnbexperience/eufemia/commit/d8d37bacaf76e7d70c04f9447bffa63ef8b6c4f3))
+* **Upload:** add new Upload component ([#1581](https://github.com/dnbexperience/eufemia/issues/1581)) ([3304347](https://github.com/dnbexperience/eufemia/commit/330434709ddf31e3916f6fdf96d082986f0f0503)), closes [#1626](https://github.com/dnbexperience/eufemia/issues/1626)
+
 ## [9.32.1](https://github.com/dnbexperience/eufemia/compare/v9.32.0...v9.32.1) (2022-10-09)
 
 

package/assets/icons/hierarchy.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M3.333 10.333V9.4c0-.515.418-.933.934-.933h7.466c.516 0 .934.418.934.933v.933M8 5.667v2.8M2.5 15h1.667a1.5 1.5 0 0 0 1.5-1.5v-1.667a1.5 1.5 0 0 0-1.5-1.5H2.5a1.5 1.5 0 0 0-1.5 1.5V13.5A1.5 1.5 0 0 0 2.5 15Zm4.667-9.333h1.666a1.5 1.5 0 0 0 1.5-1.5V2.5a1.5 1.5 0 0 0-1.5-1.5H7.167a1.5 1.5 0 0 0-1.5 1.5v1.667a1.5 1.5 0 0 0 1.5 1.5ZM11.833 15H13.5a1.5 1.5 0 0 0 1.5-1.5v-1.667a1.5 1.5 0 0 0-1.5-1.5h-1.667a1.5 1.5 0 0 0-1.5 1.5V13.5a1.5 1.5 0 0 0 1.5 1.5Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/assets/icons/hierarchy_medium.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M4.667 15.667V14.2c0-.81.656-1.467 1.466-1.467h11.734c.81 0 1.466.657 1.466 1.467v1.467M12 8.333v4.4M3.357 23h2.62a2.357 2.357 0 0 0 2.356-2.357v-2.62a2.357 2.357 0 0 0-2.357-2.356H3.357A2.357 2.357 0 0 0 1 18.024v2.619A2.357 2.357 0 0 0 3.357 23ZM10.69 8.333h2.62a2.357 2.357 0 0 0 2.357-2.357V3.357A2.357 2.357 0 0 0 13.31 1h-2.62a2.357 2.357 0 0 0-2.357 2.357v2.62a2.357 2.357 0 0 0 2.357 2.356ZM18.024 23h2.619A2.357 2.357 0 0 0 23 20.643v-2.62a2.357 2.357 0 0 0-2.357-2.356h-2.62a2.357 2.357 0 0 0-2.356 2.357v2.619A2.357 2.357 0 0 0 18.024 23Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>

package/assets/icons/layout_card.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" clip-rule="evenodd" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 2.448C1 1.648 1.648 1 2.448 1h11.104c.8 0 1.448.648 1.448 1.448v2.704c0 .8-.648 1.448-1.448 1.448H2.448C1.648 6.6 1 5.952 1 5.152V2.448Zm0 8.4c0-.8.648-1.448 1.448-1.448h11.104c.8 0 1.448.649 1.448 1.448v2.704c0 .8-.648 1.448-1.448 1.448H2.448C1.648 15 1 14.352 1 13.552v-2.704Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/assets/icons/layout_card_medium.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" clip-rule="evenodd" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 3.276A2.276 2.276 0 0 1 3.276 1h17.448A2.276 2.276 0 0 1 23 3.276v4.248A2.276 2.276 0 0 1 20.724 9.8H3.276A2.276 2.276 0 0 1 1 7.524V3.276Zm0 13.2A2.276 2.276 0 0 1 3.276 14.2h17.448A2.276 2.276 0 0 1 23 16.476v4.248A2.276 2.276 0 0 1 20.724 23H3.276A2.276 2.276 0 0 1 1 20.724v-4.248Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>

package/assets/icons/unlock.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M1 6.793V4.38a3.38 3.38 0 0 1 6.759 0v1.69M9.93 9.931v1.931M5.103 7.034c0-.533.433-.965.966-.965h7.965c.534 0 .966.432.966.965v7a.966.966 0 0 1-.966.966H6.07a.966.966 0 0 1-.966-.966v-7Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/assets/icons/unlock_medium.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M1 10V6.25a5.25 5.25 0 0 1 10.5 0v2.625m3.375 6v3m-7.5-7.5a1.5 1.5 0 0 1 1.5-1.5H21.25a1.5 1.5 0 0 1 1.5 1.5V21.25a1.5 1.5 0 0 1-1.5 1.5H8.875a1.5 1.5 0 0 1-1.5-1.5V10.375Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>

package/cjs/components/Upload.d.ts

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

package/cjs/components/Upload.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _Upload = _interopRequireWildcard(require("./upload/Upload"));
+
+Object.keys(_Upload).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Upload[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Upload[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _Upload.default;
+exports.default = _default;

package/cjs/components/accordion/Accordion.d.ts

@@ -105,6 +105,11 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
    */
   remember_state?: AccordionRememberState;
 
+  /**
+   * Send along a custom React Ref for `.dnb-accordion__content`.
+   */
+  contentRef?: Object;
+
   /**
    * If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.
    */

package/cjs/components/accordion/Accordion.js

@@ -69,7 +69,7 @@ var _AccordionPropTypes = require("./AccordionPropTypes");
 
 var _AccordionHeader;
 
-var _excluded = ["variant", "className", "class", "prerender", "prevent_rerender", "prevent_rerender_conditional", "single_container", "remember_state", "disabled", "skeleton", "no_animation", "expanded_ssr", "children", "id", "group", "expanded", "title", "description", "left_component", "icon", "icon_position", "icon_size", "on_change", "on_state_update", "custom_method", "custom_element"];
+var _excluded = ["variant", "className", "class", "prerender", "prevent_rerender", "prevent_rerender_conditional", "single_container", "remember_state", "disabled", "skeleton", "no_animation", "expanded_ssr", "children", "id", "group", "expanded", "title", "description", "left_component", "icon", "icon_position", "icon_size", "on_change", "on_state_update", "custom_method", "custom_element", "contentRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -197,7 +197,6 @@ var Accordion = function (_React$PureComponent) {
       _expanded: props.expanded,
       expanded: props.expanded !== null ? (0, _componentHelper.isTrue)(props.expanded) : (0, _componentHelper.isTrue)(context === null || context === void 0 ? void 0 : context.expanded),
       group: props.group || (context === null || context === void 0 ? void 0 : context.group),
-      no_animation: (0, _componentHelper.isTrue)(props.no_animation || (context === null || context === void 0 ? void 0 : context.no_animation)),
       _listenForPropChanges: false
     };
 
@@ -317,7 +316,6 @@ var Accordion = function (_React$PureComponent) {
 
       return _react.default.createElement(_Context.default.Consumer, null, function (globalContext) {
         return _react.default.createElement(_AccordionContext.default.Consumer, null, function (nestedContext) {
-          var no_animation = _this3.state.no_animation;
           var expanded = _this3.state.expanded;
           var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(_this3.props, Accordion.defaultProps, _this3.context, nestedContext, {
             skeleton: globalContext === null || globalContext === void 0 ? void 0 : globalContext.skeleton
@@ -339,7 +337,7 @@ var Accordion = function (_React$PureComponent) {
               remember_state = props.remember_state,
               disabled = props.disabled,
               skeleton = props.skeleton,
-              _no_animation = props.no_animation,
+              no_animation = props.no_animation,
               _expanded_ssr = props.expanded_ssr,
               children = props.children,
               _id = props.id,
@@ -355,12 +353,13 @@ var Accordion = function (_React$PureComponent) {
               on_state_update = props.on_state_update,
               custom_method = props.custom_method,
               custom_element = props.custom_element,
+              contentRef = props.contentRef,
               rest = _objectWithoutProperties(props, _excluded);
 
           var id = _this3._id;
           var mainParams = {
             id: id,
-            className: (0, _classnames.default)('dnb-accordion', (0, _SpacingHelper.createSpacingClasses)(props), className, _className, expanded && 'dnb-accordion--expanded', no_animation && 'dnb-accordion--no-animation', variant && "dnb-accordion__variant--".concat(variant), (0, _componentHelper.isTrue)(prerender) && 'dnb-accordion--prerender')
+            className: (0, _classnames.default)('dnb-accordion', (0, _SpacingHelper.createSpacingClasses)(props), className, _className, expanded && 'dnb-accordion--expanded', variant && "dnb-accordion__variant--".concat(variant), (0, _componentHelper.isTrue)(prerender) && 'dnb-accordion--prerender')
           };
 
           if (_this3.state.open) {
@@ -380,6 +379,7 @@ var Accordion = function (_React$PureComponent) {
             remember_state: (0, _componentHelper.isTrue)(remember_state),
             disabled: (0, _componentHelper.isTrue)(disabled),
             skeleton: (0, _componentHelper.isTrue)(skeleton),
+            no_animation: (0, _componentHelper.isTrue)(no_animation),
             callOnChange: _this3.callOnChangeHandler
           });
 

package/cjs/components/accordion/AccordionContent.d.ts

@@ -31,10 +31,5 @@ export interface AccordionContentProps
   className?: string;
   children?: AccordionContentChildren;
 }
-export default class AccordionContent extends React.Component<
-  AccordionContentProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+declare const AccordionContent: React.FC<AccordionContentProps>;
+export default AccordionContent;

package/cjs/components/accordion/AccordionContent.js

@@ -1,13 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-require("core-js/modules/es.object.get-prototype-of.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.reflect.construct.js");
-
 require("core-js/modules/es.object.keys.js");
 
 require("core-js/modules/es.array.index-of.js");
@@ -16,6 +8,8 @@ require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.array.filter.js");
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -24,36 +18,28 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 
 require("core-js/modules/es.object.assign.js");
 
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = AccordionContent;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _componentHelper = require("../../shared/component-helper");
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _AnimateHeight = _interopRequireDefault(require("../../shared/AnimateHeight"));
+var _componentHelper = require("../../shared/component-helper");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _shared = require("../../shared");
 
 var _AccordionContext = _interopRequireDefault(require("./AccordionContext"));
 
 var _SpacingHelper = require("../space/SpacingHelper");
 
-var _excluded = ["className", "instance"];
+var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation"));
+
+var _excluded = ["className", "children", "instance"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -63,222 +49,154 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var AccordionContent = function (_React$PureComponent) {
-  _inherits(AccordionContent, _React$PureComponent);
-
-  var _super = _createSuper(AccordionContent);
+function AccordionContent(props) {
+  var context = _react.default.useContext(_AccordionContext.default);
 
-  function AccordionContent(props, context) {
-    var _this;
+  var id = context.id,
+      expanded = context.expanded,
+      prerender = context.prerender,
+      prevent_rerender = context.prevent_rerender,
+      single_container = context.single_container,
+      disabled = context.disabled,
+      no_animation = context.no_animation,
+      contentRef = context.contentRef;
 
-    _classCallCheck(this, AccordionContent);
+  var className = props.className,
+      children = props.children,
+      instance = props.instance,
+      rest = _objectWithoutProperties(props, _excluded);
 
-    _this = _super.call(this, props);
-    _this._ref = _react.default.createRef();
-    _this.state = {
-      isInitial: !context.expanded,
-      isAnimating: false,
-      keepContentInDom: null
-    };
-    _this.anim = new _AnimateHeight.default();
+  var elementRef = _react.default.useRef(null);
 
-    _this.anim.onStart(function () {
-      _this.setState({
-        isAnimating: true
-      });
-    });
+  var cacheRef = _react.default.useRef(null);
 
-    _this.anim.onEnd(function () {
-      _this.setState({
-        isAnimating: false
-      });
+  if (contentRef) {
+    elementRef = contentRef;
+  }
 
-      _this.setState({
-        keepContentInDom: _this.context.expanded
-      });
-    });
+  var setContainerHeight = function setContainerHeight() {
+    var single_container = context.single_container;
 
-    if (props.instance && Object.prototype.hasOwnProperty.call(props.instance, 'current')) {
-      props.instance.current = _assertThisInitialized(_this);
-    }
+    if (single_container) {
+      var contentElem = elementRef.current;
 
-    return _this;
-  }
+      if (contentElem) {
+        try {
+          contentElem.style.height = '';
+          var containerElement = (0, _componentHelper.getPreviousSibling)('dnb-accordion-group--single-container', contentElem);
 
-  _createClass(AccordionContent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.anim.setElement(this._ref.current, (0, _componentHelper.getPreviousSibling)('dnb-accordion-group--single-container', this._ref.current));
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.anim.remove();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
-      var _this$context = this.context,
-          expanded = _this$context.expanded,
-          single_container = _this$context.single_container;
-
-      if (expanded !== this.state._expanded) {
-        var isInitial = !expanded && this.state.isInitial;
-        this.setState({
-          _expanded: expanded,
-          isInitial: false,
-          keepContentInDom: true
-        }, function () {
-          if (expanded) {
-            _this2.anim.open({
-              animate: !isInitial
-            });
-          } else {
-            _this2.anim.close({
-              animate: !isInitial
-            });
+          if (no_animation) {
+            containerElement.style.transitionDuration = '1ms';
           }
-        });
-      }
 
-      if ((0, _componentHelper.isTrue)(single_container) && AccordionContent.getContent(prevProps) !== AccordionContent.getContent(this.props)) {
-        this.anim.setContainerHeight();
+          var minHeight = (contentElem.offsetHeight + contentElem.offsetTop) / 16;
+          containerElement.style.minHeight = "".concat(minHeight, "rem");
+        } catch (e) {
+          (0, _componentHelper.warn)(e);
+        }
       }
     }
-  }, {
-    key: "setContainerHeight",
-    value: function setContainerHeight() {
-      var _this$anim;
-
-      (_this$anim = this.anim) === null || _this$anim === void 0 ? void 0 : _this$anim.setContainerHeight();
+  };
+
+  var renderContent = function renderContent() {
+    var children = (0, _componentHelper.processChildren)(props);
+    var expanded = context.expanded,
+        prerender = context.prerender,
+        prevent_rerender = context.prevent_rerender,
+        prevent_rerender_conditional = context.prevent_rerender_conditional;
+    var content = children;
+
+    if (typeof content === 'string') {
+      content = _react.default.createElement("p", {
+        className: "dnb-p"
+      }, content);
     }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var children = AccordionContent.getContent(this.props);
-      var _this$context2 = this.context,
-          expanded = _this$context2.expanded,
-          prerender = _this$context2.prerender,
-          prevent_rerender = _this$context2.prevent_rerender,
-          prevent_rerender_conditional = _this$context2.prevent_rerender_conditional;
-      var content = children;
-
-      if (typeof content === 'string') {
-        content = _react.default.createElement("p", {
-          className: "dnb-p"
-        }, content);
-      }
-
-      content = expanded || prerender || this.state.keepContentInDom || this.state.isAnimating ? children : null;
-
-      if ((0, _componentHelper.isTrue)(prevent_rerender)) {
-        if ((0, _componentHelper.isTrue)(prevent_rerender_conditional) && this._cache !== content) {
-          this._cache = content;
-        }
 
-        if (this._cache) {
-          content = this._cache;
-        } else {
-          this._cache = content;
-        }
+    if ((0, _componentHelper.isTrue)(prevent_rerender)) {
+      if (!(expanded || prerender)) {
+        content = null;
       }
 
-      return content;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          className = _this$props.className,
-          instance = _this$props.instance,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-      var _this$state = this.state,
-          keepContentInDom = _this$state.keepContentInDom,
-          isAnimating = _this$state.isAnimating;
-      var _this$context3 = this.context,
-          id = _this$context3.id,
-          expanded = _this$context3.expanded,
-          disabled = _this$context3.disabled;
-      var content = this.renderContent();
-
-      var wrapperParams = _objectSpread({
-        className: (0, _classnames.default)('dnb-accordion__content', className, !expanded && !keepContentInDom && 'dnb-accordion__content--hidden', isAnimating && 'dnb-accordion__content--is-animating')
-      }, rest);
-
-      var innerParams = {
-        id: "".concat(id, "-content"),
-        role: 'region',
-        'aria-labelledby': "".concat(id, "-header"),
-        className: (0, _classnames.default)('dnb-accordion__content__inner', (0, _SpacingHelper.createSpacingClasses)(rest), !expanded && !keepContentInDom && 'dnb-accordion__content__inner--remove-content')
-      };
-
-      if (expanded) {
-        innerParams['aria-expanded'] = true;
+      if ((0, _componentHelper.isTrue)(prevent_rerender_conditional) && cacheRef.current !== content) {
+        cacheRef.current = content;
       }
 
-      if (!expanded || disabled) {
-        innerParams.disabled = true;
-        innerParams['aria-hidden'] = true;
+      if (cacheRef.current) {
+        content = cacheRef.current;
+      } else {
+        cacheRef.current = content;
       }
-
-      (0, _componentHelper.validateDOMAttributes)(this.props, wrapperParams);
-      (0, _componentHelper.validateDOMAttributes)(null, innerParams);
-      return _react.default.createElement("div", _extends({}, wrapperParams, {
-        ref: this._ref
-      }), _react.default.createElement("div", innerParams, content));
     }
-  }], [{
-    key: "getContent",
-    value: function getContent(props) {
-      return (0, _componentHelper.processChildren)(props);
+
+    return content;
+  };
+
+  _react.default.useEffect(function () {
+    if (expanded && (0, _componentHelper.isTrue)(single_container)) {
+      setContainerHeight();
     }
-  }]);
+  }, [children, expanded, single_container]);
 
-  return AccordionContent;
-}(_react.default.PureComponent);
+  _react.default.useState(function () {
+    if (instance && Object.prototype.hasOwnProperty.call(instance, 'current')) {
+      instance.current = {
+        setContainerHeight: setContainerHeight
+      };
+    }
+  });
 
-exports.default = AccordionContent;
+  var isSmallScreen = (0, _shared.useMediaQuery)({
+    when: {
+      max: 'small'
+    }
+  });
+  var content = renderContent();
+
+  var wrapperParams = _objectSpread({
+    className: (0, _classnames.default)('dnb-accordion__content', className)
+  }, rest);
+
+  var keepInDOM = prerender || prevent_rerender;
+  var innerParams = {
+    id: "".concat(id, "-content"),
+    'aria-labelledby': "".concat(id, "-header"),
+    className: (0, _classnames.default)('dnb-accordion__content__inner', (0, _SpacingHelper.createSpacingClasses)(rest))
+  };
+
+  if (expanded) {
+    innerParams['aria-expanded'] = true;
+  }
 
-_defineProperty(AccordionContent, "contextType", _AccordionContext.default);
+  if (!expanded || disabled) {
+    innerParams.disabled = true;
+    innerParams['aria-hidden'] = true;
+  }
 
-_defineProperty(AccordionContent, "defaultProps", {
-  instance: null,
-  className: null,
-  children: null
-});
+  (0, _componentHelper.validateDOMAttributes)(props, wrapperParams);
+  (0, _componentHelper.validateDOMAttributes)(null, innerParams);
+  var animate = !no_animation && (single_container ? isSmallScreen : true);
+  return _react.default.createElement(_HeightAnimation.default, _extends({}, wrapperParams, {
+    open: expanded,
+    animate: animate,
+    keepInDOM: keepInDOM,
+    innerRef: elementRef
+  }), _react.default.createElement("section", innerParams, content));
+}
 
 process.env.NODE_ENV !== "production" ? AccordionContent.propTypes = _objectSpread(_objectSpread({
   instance: _propTypes.default.object
 }, _SpacingHelper.spacingPropTypes), {}, {
   className: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
-}) : void 0;
+}) : void 0;
+AccordionContent.defaultProps = {
+  instance: null,
+  className: null,
+  children: null
+};