@geomak/ui 6.2.2 → 6.2.3

package/dist/index.cjs

@@ -2994,6 +2994,7 @@ function TableBody({
   getRowKey
 }) {
   const [expanded, setExpanded] = React12.useState(() => /* @__PURE__ */ new Set());
+  const reduced = framerMotion.useReducedMotion();
   const toggleRow = (rowKey) => {
     setExpanded((prev) => {
       const next = new Set(prev);
@@ -3035,7 +3036,19 @@ function TableBody({
           ]
         }
       ),
-      hasExpand && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: expandColCount, className: "p-0 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: expandRow.expandComponent?.(row) }) }) })
+      hasExpand && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: expandColCount, className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          transition: reduced ? { duration: 0 } : { height: { duration: 0.28, ease: [0.16, 1, 0.3, 1] }, opacity: { duration: 0.2 } },
+          style: { overflow: "hidden" },
+          className: "border-b border-border",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: expandRow.expandComponent?.(row) })
+        },
+        "expand"
+      ) }) }) })
     ] }, rowKey);
   }) });
 }