@homebound/beam 2.210.0 → 2.210.2

package/dist/components/Accordion.js

@@ -15,7 +15,8 @@ function Accordion(props) {
     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);
+    // On initial render, if the accordion is expanded, then set `height` to auto to avoid unnecessary animation on render.
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(expanded ? "auto" : "0");
     (0, react_1.useEffect)(() => {
         setExpanded(defaultExpanded && !disabled);
     }, [defaultExpanded, disabled]);
@@ -23,8 +24,18 @@ function Accordion(props) {
         // 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);
+        setContentHeight(expanded && contentRef.current ? `${contentRef.current.scrollHeight}px` : "0");
     }, [expanded]);
+    // Using a resizing observer to check if the content of the accordion changes (i.e. lazy loaded image, auto-sizing textarea, etc..),
+    // If it does change, then we need to update the container's height accordingly. Only update the height if the accordion is expanded.
+    // Note - This may result in two `setContentHeight` calls when the accordion opens: (1) via the above `useEffect` and (2) in `onResize`
+    //        Both `setContentHeight` calls _should_ set the same value, so no unnecessary re-renders would be triggered, making this a harmless additional set call.
+    const onResize = (0, react_1.useCallback)(() => {
+        if (contentRef.current && expanded) {
+            setContentHeight(`${contentRef.current.scrollHeight}px`);
+        }
+    }, [expanded, setContentHeight]);
+    (0, utils_1.useResizeObserver)({ ref: contentRef, onResize });
     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]).$ : {}),
@@ -39,7 +50,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: 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));
+                        } }, { 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.h(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/dist/components/AccordionList.js

@@ -8,7 +8,7 @@ const __1 = require("..");
 const Accordion_1 = require("./Accordion");
 function AccordionList(props) {
     const { accordions, size, allowMultipleExpanded = true } = props;
-    const [expandedIndex, setExpandedIndex] = (0, react_2.useState)();
+    const [expandedIndex, setExpandedIndex] = (0, react_2.useState)(accordions.findIndex((a) => a.defaultExpanded));
     const tid = (0, __1.useTestIds)(props, "accordionList");
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accordions.map((accordionProps, index, arr) => ((0, react_1.createElement)(Accordion_1.Accordion, { ...accordionProps, ...tid, key: index, size: size, bottomBorder: index === arr.length - 1, defaultExpanded: !allowMultipleExpanded && expandedIndex === index, index: index, setExpandedIndex: setExpandedIndex }))) }, void 0));
 }

package/package.json

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