@spothero/ui 25.1.5 → 25.1.6

package/dist/index.cjs.js

@@ -4198,7 +4198,7 @@ RadioGroup.propTypes = {
   direction: PropTypes__default.default.oneOf(['row', 'column'])
 };
 
-const _excluded$5 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild"];
+const _excluded$5 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
 const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       isChecked,
@@ -4212,15 +4212,23 @@ const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isExpandable,
       size = 'md',
       expandableChildrenStyles = {},
-      topChild
+      topChild,
+      expandableContentKey = 'selection-card-content'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$5);
   const Component = isRadio ? Radio : Checkbox;
   const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   const hasExpandableContent = isExpandable && isChecked && expandableChildren;
   const prefersReducedMotion = react.usePrefersReducedMotion();
+
+  // Create a unique key based on the content to force re-animation
+  const contentKey = React__namespace.default.useMemo(() => {
+    if (typeof expandableChildren === 'string') {
+      return expandableChildren;
+    }
+    return expandableContentKey || JSON.stringify(expandableChildren === null || expandableChildren === void 0 ? void 0 : expandableChildren.props) || Math.random();
+  }, [expandableChildren, expandableContentKey]);
   return /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    paddingBottom: hasExpandableContent ? 3 : 0,
     borderRadius: "lg",
     borderColor: isChecked ? 'primary.default' : 'gray.medium',
     borderWidth: "1px",
@@ -4243,21 +4251,34 @@ const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     width: "100%",
     paddingX: 4,
     paddingY: 3
-  }, props), label)), /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    overflow: "hidden",
-    display: "grid"
-    // Using this as a pseudo height transition to get around no height auto transition
-    ,
-    gridTemplateRows: hasExpandableContent ? '1fr' : '0fr',
-    opacity: hasExpandableContent ? '100%' : '0%',
-    transition: prefersReducedMotion ? '' : 'all 150ms ease-out'
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Box, {
+  }, props), label)), /*#__PURE__*/React__namespace.default.createElement(framerMotion.AnimatePresence, {
+    mode: "wait"
+  }, hasExpandableContent && /*#__PURE__*/React__namespace.default.createElement(react.Box, {
+    as: framerMotion.motion.div,
+    key: contentKey,
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    animate: {
+      height: 'auto',
+      opacity: 1
+    },
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    transition: {
+      duration: prefersReducedMotion ? 0 : 0.15,
+      ease: 'easeOut'
+    },
     overflow: "hidden"
-  }, hasExpandableContent && /*#__PURE__*/React__namespace.default.createElement(react.Box, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Box, _extends$6({
     color: "gray.600",
     fontSize: expandableTextSize,
     paddingTop: 3,
-    paddingX: 4
+    paddingX: 4,
+    paddingBottom: 3
   }, expandableChildrenStyles), expandableChildren))));
 });
 SelectionCard.propTypes = {
@@ -4272,7 +4293,8 @@ SelectionCard.propTypes = {
   isExpandable: PropTypes__default.default.bool,
   expandableChildrenStyles: PropTypes__default.default.object,
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
-  topChild: PropTypes__default.default.element
+  topChild: PropTypes__default.default.element,
+  expandableContentKey: PropTypes__default.default.string
 };
 
 const _excluded$4 = ["variant", "colorScheme"];