@spothero/ui 25.1.3 → 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';
 
@@ -997,18 +997,20 @@ Button$1.defaultProps = {
   type: 'button'
 };
 
-const _excluded$s = ["header", "children"];
+const _excluded$s = ["header", "drawerCloseButton", "children", "headerProps"];
 const Drawer = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       header,
-      children
+      drawerCloseButton,
+      children,
+      headerProps
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React__default.createElement(Drawer$1, _extends$6({
     placement: "right"
   }, props, {
     ref: ref
-  }), /*#__PURE__*/React__default.createElement(DrawerOverlay, null), /*#__PURE__*/React__default.createElement(DrawerContent, null, /*#__PURE__*/React__default.createElement(DrawerHeader, null, header, /*#__PURE__*/React__default.createElement(DrawerCloseButton, null)), children));
+  }), /*#__PURE__*/React__default.createElement(DrawerOverlay, null), /*#__PURE__*/React__default.createElement(DrawerContent, null, /*#__PURE__*/React__default.createElement(DrawerHeader, headerProps, header, drawerCloseButton || /*#__PURE__*/React__default.createElement(DrawerCloseButton, null)), children));
 });
 Drawer.propTypes = {
   children: PropTypes.node.isRequired,
@@ -3814,7 +3816,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes.object
 };
 
-const _excluded$8 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
+const _excluded$8 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
 
 /**
  * A component used in the homepage/midfunnel refresh of 2024
@@ -3831,6 +3833,7 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
       isInvalid,
       isDisabled,
       isRequired,
+      isHighlighted,
       rightElement,
       leftElement,
       rightElementStyles,
@@ -3864,10 +3867,13 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props, {
     isDisabled: isDisabled,
     color: isInvalid || !label ? 'gray.600' : 'black',
-    borderColor: isInvalid ? 'error' : 'gray.200',
+    borderColor: isInvalid ? 'error' : isHighlighted ? 'primary.default' : 'gray.200',
     _focus: {
       borderColor: isInvalid ? 'error' : 'primary.default'
     },
+    _hover: {
+      borderColor: isHighlighted ? 'primary.default' : 'gray.300'
+    },
     paddingTop: label ? 'var(--chakra-sizes-5-5)' : '3',
     textTransform: "none"
   }), buttonValue));
@@ -4164,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,
@@ -4178,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",
@@ -4209,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 = {
@@ -4238,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"];
@@ -4623,14 +4651,16 @@ const ToggleButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
     onChange,
     value,
     children,
-    groupProps
+    groupProps,
+    buttonGroupStyles: _buttonGroupStyles = {},
+    childrenStyles = {}
   } = props;
   if (!children) throw new Error('Children required');
 
   // iterate over array of child nodes to apply extended props
   return /*#__PURE__*/React__default.createElement(ButtonGroup, _extends$6({
     ref: ref,
-    sx: _objectSpread2({}, buttonGroupStyles)
+    sx: _objectSpread2(_objectSpread2({}, buttonGroupStyles), _buttonGroupStyles)
   }, groupProps), React__default.Children.map(children, CHILD => {
     var _CHILD$props3;
     return /*#__PURE__*/React__default.cloneElement(CHILD, _objectSpread2({
@@ -4639,10 +4669,8 @@ const ToggleButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
         if (value === (CHILD === null || CHILD === void 0 || (_CHILD$props = CHILD.props) === null || _CHILD$props === void 0 ? void 0 : _CHILD$props.value)) return;
         onChange(CHILD === null || CHILD === void 0 || (_CHILD$props2 = CHILD.props) === null || _CHILD$props2 === void 0 ? void 0 : _CHILD$props2.value);
       }
-    }, value !== (CHILD === null || CHILD === void 0 || (_CHILD$props3 = CHILD.props) === null || _CHILD$props3 === void 0 ? void 0 : _CHILD$props3.value) ? {
-      sx: _objectSpread2(_objectSpread2({}, defaultStyles), inactiveStyles)
-    } : {
-      sx: _objectSpread2(_objectSpread2({}, defaultStyles), activeStyles)
+    }, {
+      sx: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles), value !== (CHILD === null || CHILD === void 0 || (_CHILD$props3 = CHILD.props) === null || _CHILD$props3 === void 0 ? void 0 : _CHILD$props3.value) ? inactiveStyles : activeStyles), childrenStyles)
     }));
   }));
 });