colibri-ui 0.8.88 → 0.8.89

package/Accordion/Accordion.module.css

@@ -10,6 +10,10 @@
   transition: block-size 0.2s ease-in-out;
 }
 
+.inner {
+  display: flow-root;
+}
+
 .button {
   align-items: center;
   background: none;

package/Accordion/index.js

@@ -18,15 +18,29 @@ const Accordion = ({
   boldTitle = false,
   children,
   className,
-  tabIndex
+  tabIndex,
+  defaultOpen = false
 }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const contentRef = React.useRef(null);
+  const innerRef = React.useRef(null);
   const toggleAccordion = () => setIsOpen(!isOpen);
-  React.useEffect(() => {
-    if (contentRef.current) {
-      contentRef.current.style.blockSize = isOpen ? `${contentRef.current.scrollHeight}px` : "0";
+  React.useLayoutEffect(() => {
+    const content = contentRef.current;
+    const inner = innerRef.current;
+    if (!content || !inner) return;
+    if (!isOpen) {
+      content.style.blockSize = "0";
+      return;
     }
+    const updateBlockSize = () => {
+      content.style.blockSize = `${inner.scrollHeight}px`;
+    };
+    updateBlockSize();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateBlockSize);
+    observer.observe(inner);
+    return () => observer.disconnect();
   }, [isOpen]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(styles__default.default.root, className)
@@ -53,7 +67,10 @@ const Accordion = ({
   }))), /*#__PURE__*/React__default.default.createElement("div", {
     ref: contentRef,
     className: styles__default.default.content
-  }, children));
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    ref: innerRef,
+    className: styles__default.default.inner
+  }, children)));
 };
 
 exports.Accordion = Accordion;

package/Accordion/index.props.d.ts

@@ -4,4 +4,6 @@ export type AccordionProps = PropsWithChildren<{
     className?: string;
     boldTitle?: boolean;
     tabIndex?: number;
+    /** Initial expanded state. Defaults to `false`. */
+    defaultOpen?: boolean;
 }>;

package/esm/Accordion/Accordion.module.css

@@ -10,6 +10,10 @@
   transition: block-size 0.2s ease-in-out;
 }
 
+.inner {
+  display: flow-root;
+}
+
 .button {
   align-items: center;
   background: none;

package/esm/Accordion/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect } from 'react';
 import clsx from 'clsx';
 import 'tslib';
 import { Chevron } from '../Icons/Chevron.js';
@@ -10,15 +10,29 @@ const Accordion = ({
   boldTitle = false,
   children,
   className,
-  tabIndex
+  tabIndex,
+  defaultOpen = false
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   const contentRef = useRef(null);
+  const innerRef = useRef(null);
   const toggleAccordion = () => setIsOpen(!isOpen);
-  useEffect(() => {
-    if (contentRef.current) {
-      contentRef.current.style.blockSize = isOpen ? `${contentRef.current.scrollHeight}px` : "0";
+  useLayoutEffect(() => {
+    const content = contentRef.current;
+    const inner = innerRef.current;
+    if (!content || !inner) return;
+    if (!isOpen) {
+      content.style.blockSize = "0";
+      return;
     }
+    const updateBlockSize = () => {
+      content.style.blockSize = `${inner.scrollHeight}px`;
+    };
+    updateBlockSize();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateBlockSize);
+    observer.observe(inner);
+    return () => observer.disconnect();
   }, [isOpen]);
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(styles.root, className)
@@ -45,7 +59,10 @@ const Accordion = ({
   }))), /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
     className: styles.content
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: innerRef,
+    className: styles.inner
+  }, children)));
 };
 
 export { Accordion };

package/esm/Accordion/index.props.d.ts

@@ -4,4 +4,6 @@ export type AccordionProps = PropsWithChildren<{
     className?: string;
     boldTitle?: boolean;
     tabIndex?: number;
+    /** Initial expanded state. Defaults to `false`. */
+    defaultOpen?: boolean;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.88",
+  "version": "0.8.89",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",