@homebound/beam 2.208.0 → 2.208.1

package/dist/components/Accordion.js

@@ -12,11 +12,19 @@ function Accordion(props) {
     const { title, children, size, disabled = false, defaultExpanded = false, topBorder = true, bottomBorder = false, index, setExpandedIndex, } = props;
     const testIds = (0, utils_2.useTestIds)(props, "accordion");
     const id = (0, utils_1.useId)();
-    const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
+    const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded && !disabled);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
+    const contentRef = (0, react_1.useRef)(null);
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
-        setExpanded(defaultExpanded);
-    }, [defaultExpanded]);
+        setExpanded(defaultExpanded && !disabled);
+    }, [defaultExpanded, disabled]);
+    (0, react_1.useEffect)(() => {
+        // When the `expanded` value changes - If true, it means the Accordion's content has been rendered, Otherwise, it's been hidden
+        // Then when the content is displayed, the calculate its height so we can give this value to the container to animate height smoothly.
+        // When content is removed, simply set the height back to 0
+        setContentHeight(expanded && contentRef.current ? contentRef.current.scrollHeight : 0);
+    }, [expanded]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, testIds.container, { css: {
             ...Css_1.Css.bGray300.if(topBorder).bt.if(bottomBorder).bb.$,
             ...(size ? Css_1.Css.wPx(accordionSizes[size]).$ : {}),
@@ -31,13 +39,7 @@ function Accordion(props) {
                 } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: title }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
                             transition: "transform 250ms linear",
                             transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "chevronDown" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, testIds.details, { id: id, "aria-hidden": !expanded, css: {
-                    // Use max-height for grow/shrink animation (remove close animation for AccordionList to avoid delays)
-                    ...Css_1.Css.overflowHidden
-                        .maxhPx(1000)
-                        .add("transition", `max-height ${expanded || !index ? "250ms" : "0"} ease-in-out`).$,
-                    ...(!expanded || disabled ? Css_1.Css.maxh0.$ : {}),
-                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.px2.pb2.pt1.$ }, { children: children }), void 0) }), void 0)] }), void 0));
+                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "chevronDown" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, testIds.details, { id: id, "aria-hidden": !expanded, css: Css_1.Css.overflowHidden.hPx(contentHeight).add("transition", "height 250ms ease-in-out").$ }, { children: expanded && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.px2.pb2.pt1.$, ref: contentRef }, testIds.content, { children: children }), void 0)) }), void 0)] }), void 0));
 }
 exports.Accordion = Accordion;
 const accordionSizes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.208.0",
+  "version": "2.208.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",