@conveyorhq/arrow-ds 1.143.0 → 1.143.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.143.0",
+  "version": "1.143.1",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Accordion/Accordion.js

@@ -147,6 +147,7 @@ const AccordionIcon = ({ className, direction = "down", color, disabled = false,
 };
 exports.AccordionIcon = AccordionIcon;
 const AccordionContent = ({ children, maxHeight, style, className, scrollClassName, ...rest }) => {
+    const { disableAnimation } = (0, context_1.useAccordionGroupContext)();
     const { buttonId, contentId, defaultIsOpen, isOpen, } = (0, context_1.useAccordionItemContext)();
     const [childrenRef, setChildrenRef] = react_1.default.useState({ current: null });
     const onRefChange = react_1.default.useCallback((node) => {
@@ -155,18 +156,20 @@ const AccordionContent = ({ children, maxHeight, style, className, scrollClassNa
         }
     }, []);
     const [enableTransition, setEnableTransition] = react_1.default.useState(!defaultIsOpen);
-    const { height: componentHeight } = (0, component_size_1.default)(childrenRef);
-    const { height } = (0, web_1.useSpring)({
-        height: isOpen ? componentHeight : 0,
-        immediate: !enableTransition,
+    const { height } = (0, component_size_1.default)(childrenRef);
+    const props = (0, web_1.useSpring)({
+        height: isOpen ? height : 0,
+        opacity: isOpen ? 1 : 0,
+        config: { mass: 2, tension: 400, friction: 50 },
         onRest: () => {
             if (defaultIsOpen && isOpen) {
                 setEnableTransition(true);
             }
         },
+        immediate: disableAnimation || !enableTransition,
     });
-    return (react_1.default.createElement(web_1.animated.div, { className: (0, classnames_1.default)("overflow-hidden box-content", className), style: { ...style, height }, "aria-labelledby": buttonId, id: contentId, role: "region", ...rest },
-        react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: (0, classnames_1.default)(maxHeight && "overflow-y-auto"), style: maxHeight ? { maxHeight } : undefined }, children)));
+    return (react_1.default.createElement(web_1.animated.div, { className: (0, classnames_1.default)("overflow-hidden box-content", className), style: { ...style, ...props }, "aria-labelledby": buttonId, id: contentId, role: "region", ...rest },
+        react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: (0, classnames_1.default)(maxHeight && "overflow-y-auto", scrollClassName), style: maxHeight ? { maxHeight } : undefined }, children)));
 };
 exports.AccordionContent = AccordionContent;
 const Accordion = (props) => {

package/src/components/Accordion/Accordion.tsx

@@ -308,7 +308,7 @@ export const AccordionContent = ({
   scrollClassName,
   ...rest
 }: AccordionContentProps) => {
-  // const { disableAnimation } = useAccordionGroupContext();
+  const { disableAnimation } = useAccordionGroupContext();
   const {
     buttonId,
     contentId,
@@ -328,20 +328,24 @@ export const AccordionContent = ({
   const [enableTransition, setEnableTransition] = React.useState(
     !defaultIsOpen,
   );
-  const { height: componentHeight } = useComponentSize(childrenRef);
-  const { height } = useSpring({
-    height: isOpen ? componentHeight : 0,
-    immediate: !enableTransition,
+
+  const { height } = useComponentSize(childrenRef);
+  const props = useSpring({
+    height: isOpen ? height : 0,
+    opacity: isOpen ? 1 : 0,
+    config: { mass: 2, tension: 400, friction: 50 },
     onRest: () => {
       if (defaultIsOpen && isOpen) {
         setEnableTransition(true);
       }
     },
+    immediate: disableAnimation || !enableTransition,
   });
+
   return (
     <animated.div
       className={classNames("overflow-hidden box-content", className)}
-      style={{ ...style, height }}
+      style={{ ...style, ...props }}
       aria-labelledby={buttonId}
       id={contentId}
       role="region"
@@ -349,7 +353,7 @@ export const AccordionContent = ({
     >
       <Box
         ref={onRefChange}
-        className={classNames(maxHeight && "overflow-y-auto")}
+        className={classNames(maxHeight && "overflow-y-auto", scrollClassName)}
         style={maxHeight ? { maxHeight } : undefined}
       >
         {children}