@toptal/picasso-collapse 2.0.0 → 2.0.1

package/dist-package/src/Collapse/Collapse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAuC,MAAM,OAAO,CAAA;AAE3D,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAIxE,MAAM,WAAW,KAAM,SAAQ,eAAe,EAAE,SAAS;IAEvD,QAAQ,EAAE,SAAS,CAAA;IAEnB,EAAE,CAAC,EAAE,OAAO,CAAA;IAEZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5D;AAED,eAAO,MAAM,QAAQ,8EAgFpB,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAwC,MAAM,OAAO,CAAA;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAGxE,MAAM,WAAW,KAAM,SAAQ,eAAe,EAAE,SAAS;IAEvD,QAAQ,EAAE,SAAS,CAAA;IAEnB,EAAE,CAAC,EAAE,OAAO,CAAA;IAEZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5D;AAoBD,eAAO,MAAM,QAAQ,8EAsFpB,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist-package/src/Collapse/Collapse.js

@@ -9,41 +9,54 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useRef, useState, forwardRef } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 import { Transition } from 'react-transition-group';
-import { useMultipleForwardRefs } from '@toptal/picasso-utils';
 import { twJoin } from '@toptal/picasso-tailwind-merge';
-export const Collapse = forwardRef((_a, ref) => {
-    var { children, className, in: inProps = false, timeout = 350, unmountOnExit, style, appear, onExited: onExitedProp, 'data-testid': dataTestId } = _a, rest = __rest(_a, ["children", "className", "in", "timeout", "unmountOnExit", "style", "appear", "onExited", 'data-testid']);
-    const collapseRef = useRef(null);
-    const combinedRef = useMultipleForwardRefs([ref, collapseRef]);
-    const [height, setHeight] = useState();
-    const setToCurrentHeight = () => {
-        if (collapseRef.current) {
-            setHeight(collapseRef.current.scrollHeight);
-        }
+const useCollapseLogic = (inProps) => {
+    const [height, setHeight] = useState(inProps ? 'auto' : '0px');
+    const wrapperRef = React.useRef(null);
+    const getCurrentHeight = () => { var _a; return (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight; };
+    const setHeightToCurrent = () => setHeight(`${getCurrentHeight()}px`);
+    const setHeightToZero = () => setHeight('0px');
+    const setHeightToAuto = () => setHeight('auto');
+    return {
+        height,
+        wrapperRef,
+        setHeightToCurrent,
+        setHeightToZero,
+        setHeightToAuto,
     };
-    const resetHeight = () => {
-        setHeight(0);
+};
+export const Collapse = forwardRef((_a, ref) => {
+    var { children, className, in: inProps = false, timeout = 350, unmountOnExit, style, appear, 'data-testid': dataTestId, onEnter, onExited } = _a, rest = __rest(_a, ["children", "className", "in", "timeout", "unmountOnExit", "style", "appear", 'data-testid', "onEnter", "onExited"]);
+    const { height, wrapperRef, setHeightToZero, setHeightToAuto, setHeightToCurrent, } = useCollapseLogic(inProps);
+    // we need to add small delay as 'enter', 'entering' and 'exit', 'exiting'
+    // are triggered in the same time and React is batching them
+    const handleEntering = () => setTimeout(setHeightToCurrent, 50);
+    const handleExiting = () => setTimeout(setHeightToZero, 50);
+    const handleEnter = (node, isAppearing) => {
+        setHeightToZero();
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter(node, isAppearing);
     };
-    const onExited = (node) => {
-        resetHeight();
-        if (onExitedProp) {
-            onExitedProp(node);
-        }
+    const handleExited = (node) => {
+        setHeightToZero();
+        onExited === null || onExited === void 0 ? void 0 : onExited(node);
     };
-    return (React.createElement(Transition, Object.assign({ in: inProps, appear: appear, nodeRef: collapseRef, onEntering: setToCurrentHeight, unmountOnExit: unmountOnExit, onExit: setToCurrentHeight, onExiting: resetHeight, onExited: onExited, timeout: timeout }, rest), state => {
-        const currentHeight = height === 0 ? null : { maxHeight: height };
-        const isAnimating = state === 'entering' || state === 'exiting';
+    const memoStyles = useMemo(() => {
+        return Object.assign(Object.assign({}, style), { transitionDuration: `${timeout}ms`, height });
+    }, [timeout, height, style]);
+    return (React.createElement(Transition, Object.assign({ in: inProps, appear: appear, onEnter: handleEnter, onEntering: handleEntering, 
+        // we need to set height to 'auto' after transition is finished
+        // to support dynamic content inside Collapse
+        onEntered: setHeightToAuto, onExit: setHeightToCurrent, onExiting: handleExiting, onExited: handleExited, unmountOnExit: unmountOnExit, timeout: timeout }, rest), state => {
         return (React.createElement("div", { className: twJoin([
-                'flex',
-                isAnimating ? 'overflow-hidden max-h-0' : undefined,
-                state === 'exited' ? 'hidden' : undefined,
+                'transition-[height] ease-in-out min-h-0',
+                state === 'exited' && !inProps && 'invisible',
+                state === 'entered' ? 'overflow-visible' : 'overflow-hidden',
                 className,
-            ]), style: Object.assign(Object.assign(Object.assign({}, style), currentHeight), { transition: isAnimating
-                    ? `max-height ${timeout}ms ease`
-                    : undefined }), "data-testid": dataTestId, ref: combinedRef },
-            React.createElement("div", { className: 'w-full' }, children)));
+            ]), style: memoStyles, "data-testid": dataTestId, ref: ref },
+            React.createElement("div", { className: 'flex', ref: wrapperRef },
+                React.createElement("div", { className: 'w-full' }, children))));
     }));
 });
 export default Collapse;

package/dist-package/src/Collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../../src/Collapse/Collapse.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAevD,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,OAAO,GAAG,GAAG,EACb,aAAa,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,UAAU,OAE1B,EADI,IAAI,cAVT,yGAWC,CADQ;IAIT,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAChD,MAAM,WAAW,GAAG,sBAAsB,CAAC,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,CAAA;IAE9D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAU,CAAA;IAE9C,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;SAC5C;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,CAAC,CAAC,CAAA;IACd,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,CAAC,IAAiB,EAAE,EAAE;QACrC,WAAW,EAAE,CAAA;QACb,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,IAAI,CAAC,CAAA;SACnB;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,EAAE,EAAE,OAAO,EACX,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,kBAAkB,EAC9B,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,kBAAkB,EAC1B,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IACZ,IAAI,GAEP,KAAK,CAAC,EAAE;QACP,MAAM,aAAa,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAA;QACjE,MAAM,WAAW,GAAG,KAAK,KAAK,UAAU,IAAI,KAAK,KAAK,SAAS,CAAA;QAE/D,OAAO,CACL,6BACE,SAAS,EAAE,MAAM,CAAC;gBAChB,MAAM;gBACN,WAAW,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS;gBACnD,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACzC,SAAS;aACV,CAAC,EACF,KAAK,gDACA,KAAK,GACL,aAAa,KAChB,UAAU,EAAE,WAAW;oBACrB,CAAC,CAAC,cAAc,OAAO,SAAS;oBAChC,CAAC,CAAC,SAAS,oBAEF,UAAU,EACvB,GAAG,EAAE,WAAW;YAEhB,6BAAK,SAAS,EAAC,QAAQ,IAAE,QAAQ,CAAO,CACpC,CACP,CAAA;IACH,CAAC,CACU,CACd,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-collapse",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Toptal UI components library - Collapse",
   "publishConfig": {
     "access": "public"

package/src/Collapse/Collapse.tsx

@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react'
-import React, { useRef, useState, forwardRef } from 'react'
+import React, { forwardRef, useMemo, useState } from 'react'
 import { Transition } from 'react-transition-group'
 import type { BaseProps, TransitionProps } from '@toptal/picasso-shared'
-import { useMultipleForwardRefs } from '@toptal/picasso-utils'
 import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends TransitionProps, BaseProps {
@@ -18,6 +17,24 @@ export interface Props extends TransitionProps, BaseProps {
   onEnter?: (node: HTMLElement, isAppearing: boolean) => void
 }
 
+const useCollapseLogic = (inProps: boolean) => {
+  const [height, setHeight] = useState<string>(inProps ? 'auto' : '0px')
+  const wrapperRef = React.useRef<HTMLDivElement>(null)
+
+  const getCurrentHeight = () => wrapperRef.current?.clientHeight
+  const setHeightToCurrent = () => setHeight(`${getCurrentHeight()}px`)
+  const setHeightToZero = () => setHeight('0px')
+  const setHeightToAuto = () => setHeight('auto')
+
+  return {
+    height,
+    wrapperRef,
+    setHeightToCurrent,
+    setHeightToZero,
+    setHeightToAuto,
+  }
+}
+
 export const Collapse = forwardRef<HTMLDivElement, Props>(
   (
     {
@@ -28,70 +45,76 @@ export const Collapse = forwardRef<HTMLDivElement, Props>(
       unmountOnExit,
       style,
       appear,
-      onExited: onExitedProp,
       'data-testid': dataTestId,
+      onEnter,
+      onExited,
       ...rest
     },
     ref
   ) => {
-    const collapseRef = useRef<HTMLDivElement>(null)
-    const combinedRef = useMultipleForwardRefs([ref, collapseRef])
+    const {
+      height,
+      wrapperRef,
+      setHeightToZero,
+      setHeightToAuto,
+      setHeightToCurrent,
+    } = useCollapseLogic(inProps)
 
-    const [height, setHeight] = useState<number>()
+    // we need to add small delay as 'enter', 'entering' and 'exit', 'exiting'
+    // are triggered in the same time and React is batching them
+    const handleEntering = () => setTimeout(setHeightToCurrent, 50)
+    const handleExiting = () => setTimeout(setHeightToZero, 50)
 
-    const setToCurrentHeight = () => {
-      if (collapseRef.current) {
-        setHeight(collapseRef.current.scrollHeight)
-      }
+    const handleEnter = (node: HTMLElement, isAppearing: boolean) => {
+      setHeightToZero()
+      onEnter?.(node, isAppearing)
     }
 
-    const resetHeight = () => {
-      setHeight(0)
+    const handleExited = (node: HTMLElement) => {
+      setHeightToZero()
+      onExited?.(node)
     }
 
-    const onExited = (node: HTMLElement) => {
-      resetHeight()
-      if (onExitedProp) {
-        onExitedProp(node)
+    const memoStyles = useMemo(() => {
+      return {
+        ...style,
+        transitionDuration: `${timeout}ms`,
+        height,
       }
-    }
+    }, [timeout, height, style])
 
     return (
       <Transition
         in={inProps}
         appear={appear}
-        nodeRef={collapseRef}
-        onEntering={setToCurrentHeight}
+        onEnter={handleEnter}
+        onEntering={handleEntering}
+        // we need to set height to 'auto' after transition is finished
+        // to support dynamic content inside Collapse
+        onEntered={setHeightToAuto}
+        onExit={setHeightToCurrent}
+        onExiting={handleExiting}
+        onExited={handleExited}
         unmountOnExit={unmountOnExit}
-        onExit={setToCurrentHeight}
-        onExiting={resetHeight}
-        onExited={onExited}
         timeout={timeout}
         {...rest}
       >
         {state => {
-          const currentHeight = height === 0 ? null : { maxHeight: height }
-          const isAnimating = state === 'entering' || state === 'exiting'
-
           return (
             <div
               className={twJoin([
-                'flex',
-                isAnimating ? 'overflow-hidden max-h-0' : undefined,
-                state === 'exited' ? 'hidden' : undefined,
+                'transition-[height] ease-in-out min-h-0',
+                state === 'exited' && !inProps && 'invisible',
+                state === 'entered' ? 'overflow-visible' : 'overflow-hidden',
                 className,
               ])}
-              style={{
-                ...style,
-                ...currentHeight,
-                transition: isAnimating
-                  ? `max-height ${timeout}ms ease`
-                  : undefined,
-              }}
+              style={memoStyles}
               data-testid={dataTestId}
-              ref={combinedRef}
+              ref={ref}
             >
-              <div className='w-full'>{children}</div>
+              <div className='flex' ref={wrapperRef}>
+                <div className='w-full'>{children}</div>
+              </div>
             </div>
           )
         }}

package/src/Collapse/story/AppearOnRender.example.tsx

@@ -0,0 +1,25 @@
+import { Container, Button } from '@toptal/picasso'
+import { Collapse } from '@toptal/picasso-collapse'
+import React, { useState } from 'react'
+
+const Example = () => {
+  const [faded, setFaded] = useState(false)
+
+  const handleOnClick = () => setFaded(prevFaded => !prevFaded)
+
+  return (
+    <Container>
+      <Button onClick={handleOnClick} className='mb-4'>
+        {faded ? 'Unmount Collapse' : 'Render Collapse'}
+      </Button>
+
+      {faded && (
+        <Collapse appear in timeout={400}>
+          <div className='bg-gray-100 p-4 rounded-md'>Collapse content</div>
+        </Collapse>
+      )}
+    </Container>
+  )
+}
+
+export default Example

package/src/Collapse/story/index.jsx

@@ -8,11 +8,21 @@ page.createTabChapter('Props').addComponentDocs({
   name: 'Collapse',
 })
 
-page.createChapter().addExample(
-  'Collapse/story/Default.example.tsx',
-  {
-    title: 'Default',
-    takeScreenshot: false,
-  },
-  'base/Collapse'
-)
+page
+  .createChapter()
+  .addExample(
+    'Collapse/story/Default.example.tsx',
+    {
+      title: 'Default',
+      takeScreenshot: false,
+    },
+    'base/Collapse'
+  )
+  .addExample(
+    'Collapse/story/AppearOnRender.example.tsx',
+    {
+      title: 'Appear on render',
+      takeScreenshot: false,
+    },
+    'base/Collapse'
+  )

package/src/Collapse/test.tsx

@@ -26,7 +26,7 @@ describe('Collapse', () => {
       </Collapse>
     )
 
-    expect(getByTestId('collapse')).toHaveClass('hidden')
+    expect(getByTestId('collapse')).toHaveClass('invisible')
 
     act(() => {
       rerender(