@spothero/ui 25.1.5 → 25.1.6

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import { accordionAnatomy, selectAnatomy } from '@chakra-ui/anatomy';
 import template from 'lodash/template';
 import cn from 'classnames';
 import AsyncSelect from 'react-select/async';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import Creatable from 'react-select/creatable';
 import { components as components$1 } from 'react-select';
 
@@ -4170,7 +4170,7 @@ RadioGroup.propTypes = {
   direction: PropTypes.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__*/forwardRef((_ref, ref) => {
   let {
       isChecked,
@@ -4184,15 +4184,23 @@ const SelectionCard = /*#__PURE__*/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 = usePrefersReducedMotion();
+
+  // Create a unique key based on the content to force re-animation
+  const contentKey = React__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__default.createElement(Box, {
-    paddingBottom: hasExpandableContent ? 3 : 0,
     borderRadius: "lg",
     borderColor: isChecked ? 'primary.default' : 'gray.medium',
     borderWidth: "1px",
@@ -4215,21 +4223,34 @@ const SelectionCard = /*#__PURE__*/forwardRef((_ref, ref) => {
     width: "100%",
     paddingX: 4,
     paddingY: 3
-  }, props), label)), /*#__PURE__*/React__default.createElement(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__default.createElement(Box, {
+  }, props), label)), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+    mode: "wait"
+  }, hasExpandableContent && /*#__PURE__*/React__default.createElement(Box, {
+    as: 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__default.createElement(Box, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Box, _extends$6({
     color: "gray.600",
     fontSize: expandableTextSize,
     paddingTop: 3,
-    paddingX: 4
+    paddingX: 4,
+    paddingBottom: 3
   }, expandableChildrenStyles), expandableChildren))));
 });
 SelectionCard.propTypes = {
@@ -4244,7 +4265,8 @@ SelectionCard.propTypes = {
   isExpandable: PropTypes.bool,
   expandableChildrenStyles: PropTypes.object,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  topChild: PropTypes.element
+  topChild: PropTypes.element,
+  expandableContentKey: PropTypes.string
 };
 
 const _excluded$4 = ["variant", "colorScheme"];