@norges-domstoler/dds-components 11.1.0 → 11.1.1

package/dist/cjs/components/Card/CardAccordion/useElementHeight.d.ts

@@ -0,0 +1 @@
+export declare function useElementHeight(element: HTMLDivElement | null): number | null;

package/dist/cjs/index.js

@@ -7555,7 +7555,25 @@ var useIsMounted = function useIsMounted() {
   }, []);
 };
 
-var expandingAnimation = styled.css(["@media (prefers-reduced-motion:no-preference){transition:padding 0.2s,visibility 0.3s,max-height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
+function useElementHeight(element) {
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  React.useEffect(function () {
+    if (!element) return;
+    var resizeObserver = new ResizeObserver(function () {
+      setHeight(element.offsetHeight);
+    });
+    resizeObserver.observe(element);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [element]);
+  return height;
+}
+
+var expandingAnimation = styled.css(["@media (prefers-reduced-motion:no-preference){transition:height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
 function getPadding(props) {
   var padding = props.padding;
   return padding || cardAccordionTokens.body.padding;
@@ -7563,28 +7581,20 @@ function getPadding(props) {
 var Body = styled__default.default.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
-})(["@media (prefers-reduced-motion:no-preference){", "}padding:", ";", " ", " ", ""], function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){", "}", " height:", "px;overflow:hidden;"], function (_ref) {
   var animate = _ref.animate;
   return animate && expandingAnimation;
-}, getPadding, getFontStyling(typographyTypes$3.body), function (_ref2) {
-  var paddingTop = _ref2.paddingTop;
-  return paddingTop && styled.css(["padding-top:", ";"], paddingTop);
-}, function (_ref3) {
-  var isExpanded = _ref3.isExpanded;
-  return !isExpanded && styled.css(["padding-top:0;padding-bottom:0;"]);
+}, getFontStyling(typographyTypes$3.body), function (_ref2) {
+  var height = _ref2.height,
+    isExpanded = _ref2.isExpanded;
+  return isExpanded ? height : 0;
 });
 var BodyContainer = styled__default.default.div.withConfig({
   displayName: "CardAccordionBody__BodyContainer",
   componentId: "sc-igsnpx-1"
-})(["", " overflow:hidden;visibility:", ";max-height:", "px;"], function (_ref4) {
-  var animate = _ref4.animate;
-  return animate && expandingAnimation;
-}, function (_ref5) {
-  var isExpanded = _ref5.isExpanded;
-  return isExpanded ? 'visible' : 'hidden';
-}, function (_ref6) {
-  var maxHeight = _ref6.maxHeight;
-  return maxHeight ? maxHeight : 0;
+})(["padding:", ";", ""], getPadding, function (_ref3) {
+  var paddingTop = _ref3.paddingTop;
+  return paddingTop && styled.css(["padding-top:", ";"], paddingTop);
 });
 var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -7593,20 +7603,24 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps"]);
+    padding = props.padding,
+    paddingTop = props.paddingTop,
+    rest = tslib.__rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps", "padding", "paddingTop"]);
   var bodyRef = React.useRef(null);
-  var isMounted = useIsMounted();
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     animate = _useState2[0],
     setAnimate = _useState2[1];
-  var _useState3 = React.useState(0),
+  var isMounted = useIsMounted();
+  var height = useElementHeight(bodyRef.current);
+  var _useState3 = React.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    maxHeight = _useState4[0],
-    setMaxHeight = _useState4[1];
+    initialExpandedHeight = _useState4[0],
+    setIntialExpandedHeight = _useState4[1];
   React.useLayoutEffect(function () {
+    // For å unngå initiell animasjon dersom Accordion er satt til å være åpen som default.
     if (bodyRef.current && isExpanded) {
-      setMaxHeight(bodyRef.current.scrollHeight);
+      setIntialExpandedHeight(bodyRef.current.scrollHeight);
     }
   }, []);
   React.useEffect(function () {
@@ -7614,22 +7628,17 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setAnimate(true);
     }
   }, [isMounted]);
-  React.useEffect(function () {
-    if (!isExpanded) {
-      setMaxHeight(0);
-    } else if (bodyRef && bodyRef.current) {
-      setMaxHeight(bodyRef.current.scrollHeight);
-    }
-  }, [isExpanded]);
   var bodyProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: ref,
     isExpanded: isExpanded,
-    role: 'region'
+    role: 'region',
+    height: height || initialExpandedHeight || 0
   });
   var bodyContainerProps = {
     ref: bodyRef,
-    maxHeight: maxHeight,
-    isExpanded: isExpanded
+    isExpanded: isExpanded,
+    padding: padding,
+    paddingTop: paddingTop
   };
   return jsxRuntime.jsx(Body, Object.assign({}, bodyProps, {
     animate: animate,

package/dist/components/Card/CardAccordion/CardAccordionBody.js

@@ -7,8 +7,9 @@ import useIsMounted from '../../../hooks/useIsMounted.js';
 import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
 import { getFontStyling } from '../../Typography/Typography.utils.js';
 import { cardAccordionTokens, typographyTypes } from './CardAccordion.tokens.js';
+import { useElementHeight } from './useElementHeight.js';
 
-var expandingAnimation = css(["@media (prefers-reduced-motion:no-preference){transition:padding 0.2s,visibility 0.3s,max-height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
+var expandingAnimation = css(["@media (prefers-reduced-motion:no-preference){transition:height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
 function getPadding(props) {
   var padding = props.padding;
   return padding || cardAccordionTokens.body.padding;
@@ -16,28 +17,20 @@ function getPadding(props) {
 var Body = styled.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
-})(["@media (prefers-reduced-motion:no-preference){", "}padding:", ";", " ", " ", ""], function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){", "}", " height:", "px;overflow:hidden;"], function (_ref) {
   var animate = _ref.animate;
   return animate && expandingAnimation;
-}, getPadding, getFontStyling(typographyTypes.body), function (_ref2) {
-  var paddingTop = _ref2.paddingTop;
-  return paddingTop && css(["padding-top:", ";"], paddingTop);
-}, function (_ref3) {
-  var isExpanded = _ref3.isExpanded;
-  return !isExpanded && css(["padding-top:0;padding-bottom:0;"]);
+}, getFontStyling(typographyTypes.body), function (_ref2) {
+  var height = _ref2.height,
+    isExpanded = _ref2.isExpanded;
+  return isExpanded ? height : 0;
 });
 var BodyContainer = styled.div.withConfig({
   displayName: "CardAccordionBody__BodyContainer",
   componentId: "sc-igsnpx-1"
-})(["", " overflow:hidden;visibility:", ";max-height:", "px;"], function (_ref4) {
-  var animate = _ref4.animate;
-  return animate && expandingAnimation;
-}, function (_ref5) {
-  var isExpanded = _ref5.isExpanded;
-  return isExpanded ? 'visible' : 'hidden';
-}, function (_ref6) {
-  var maxHeight = _ref6.maxHeight;
-  return maxHeight ? maxHeight : 0;
+})(["padding:", ";", ""], getPadding, function (_ref3) {
+  var paddingTop = _ref3.paddingTop;
+  return paddingTop && css(["padding-top:", ";"], paddingTop);
 });
 var CardAccordionBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
@@ -46,20 +39,24 @@ var CardAccordionBody = /*#__PURE__*/forwardRef(function (props, ref) {
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = __rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps"]);
+    padding = props.padding,
+    paddingTop = props.paddingTop,
+    rest = __rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps", "padding", "paddingTop"]);
   var bodyRef = useRef(null);
-  var isMounted = useIsMounted();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     animate = _useState2[0],
     setAnimate = _useState2[1];
-  var _useState3 = useState(0),
+  var isMounted = useIsMounted();
+  var height = useElementHeight(bodyRef.current);
+  var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    maxHeight = _useState4[0],
-    setMaxHeight = _useState4[1];
+    initialExpandedHeight = _useState4[0],
+    setIntialExpandedHeight = _useState4[1];
   useLayoutEffect(function () {
+    // For å unngå initiell animasjon dersom Accordion er satt til å være åpen som default.
     if (bodyRef.current && isExpanded) {
-      setMaxHeight(bodyRef.current.scrollHeight);
+      setIntialExpandedHeight(bodyRef.current.scrollHeight);
     }
   }, []);
   useEffect(function () {
@@ -67,22 +64,17 @@ var CardAccordionBody = /*#__PURE__*/forwardRef(function (props, ref) {
       setAnimate(true);
     }
   }, [isMounted]);
-  useEffect(function () {
-    if (!isExpanded) {
-      setMaxHeight(0);
-    } else if (bodyRef && bodyRef.current) {
-      setMaxHeight(bodyRef.current.scrollHeight);
-    }
-  }, [isExpanded]);
   var bodyProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: ref,
     isExpanded: isExpanded,
-    role: 'region'
+    role: 'region',
+    height: height || initialExpandedHeight || 0
   });
   var bodyContainerProps = {
     ref: bodyRef,
-    maxHeight: maxHeight,
-    isExpanded: isExpanded
+    isExpanded: isExpanded,
+    padding: padding,
+    paddingTop: paddingTop
   };
   return jsx(Body, Object.assign({}, bodyProps, {
     animate: animate,

package/dist/components/Card/CardAccordion/useElementHeight.d.ts

@@ -0,0 +1 @@
+export declare function useElementHeight(element: HTMLDivElement | null): number | null;

package/dist/components/Card/CardAccordion/useElementHeight.js

@@ -0,0 +1,22 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+
+function useElementHeight(element) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  useEffect(function () {
+    if (!element) return;
+    var resizeObserver = new ResizeObserver(function () {
+      setHeight(element.offsetHeight);
+    });
+    resizeObserver.observe(element);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [element]);
+  return height;
+}
+
+export { useElementHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "11.1.0",
+  "version": "11.1.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",