@toptal/picasso-collapse 1.0.1

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { BaseProps, TransitionProps } from '@toptal/picasso-shared';
+export interface Props extends TransitionProps, BaseProps {
+    children: React.ReactElement;
+    in?: boolean;
+    appear?: boolean;
+    unmountOnExit?: boolean;
+    onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
+}
+export declare const Collapse: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Collapse;
+//# sourceMappingURL=Collapse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,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,KAAK,CAAC,YAAY,CAAA;IAE5B,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,8EA+EpB,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useRef, useState, forwardRef } from 'react';
+import { Transition } from 'react-transition-group';
+import { useMultipleForwardRefs } from '@toptal/picasso-utils';
+import { twJoin } from '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 resetHeight = () => {
+        setHeight(0);
+    };
+    const onExited = (node) => {
+        resetHeight();
+        if (onExitedProp) {
+            onExitedProp(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';
+        return (React.createElement("div", { className: twJoin([
+                isAnimating ? 'overflow-hidden max-h-0' : undefined,
+                state === 'exited' ? 'hidden' : undefined,
+                className,
+            ]), style: Object.assign(Object.assign(Object.assign({}, style), currentHeight), { transition: isAnimating
+                    ? `max-height ${timeout}ms ease`
+                    : undefined }), "data-testid": dataTestId, ref: combinedRef }, children));
+    }));
+});
+export default Collapse;
+//# sourceMappingURL=Collapse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../../src/Collapse/Collapse.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,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,gBAAgB,CAAA;AAevC,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,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,IAEf,QAAQ,CACL,CACP,CAAA;IACH,CAAC,CACU,CACd,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

@@ -0,0 +1,5 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props } from './Collapse';
+export { default as Collapse } from './Collapse';
+export declare type FadeProps = OmitInternalProps<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Collapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

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

@@ -0,0 +1,2 @@
+export { default as Collapse } from './Collapse';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Collapse/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist-package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Collapse';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist-package/src/index.js

@@ -0,0 +1,2 @@
+export * from './Collapse';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@toptal/picasso-collapse",
+  "version": "1.0.1",
+  "description": "Toptal UI components library - Collapse",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist-package/src/index.js",
+  "module": "./dist-package/src/index.js",
+  "scripts": {
+    "build:package": "tsc -b tsconfig.json",
+    "prepublishOnly": "yarn build:package"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toptal/picasso.git"
+  },
+  "author": "Toptal",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/toptal/picasso/issues"
+  },
+  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
+  "dependencies": {
+    "@toptal/picasso-utils": "1.0.2",
+    "tailwind-merge": "^2.2.2",
+    "react-transition-group": "^4.4.5"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "@toptal/picasso-tailwind": ">2.1.0",
+    "react": ">=16.12.0 < 19.0.0",
+    "tailwindcss": ">=3"
+  },
+  "exports": {
+    ".": "./dist-package/src/index.js"
+  },
+  "devDependencies": {
+    "@toptal/picasso-test-utils": "1.1.0"
+  },
+  "files": [
+    "dist-package/**",
+    "!dist-package/tsconfig.tsbuildinfo",
+    "src"
+  ]
+}

package/src/Collapse/Collapse.tsx

@@ -0,0 +1,101 @@
+import React, { useRef, useState, forwardRef } 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 'tailwind-merge'
+
+export interface Props extends TransitionProps, BaseProps {
+  /* Element that accepts ref */
+  children: React.ReactElement
+  /* Show the component; triggers the enter or exit states */
+  in?: boolean
+  /* Trigger the transition on the first mount, regardless of the `in` prop. */
+  appear?: boolean
+  /* Unmount the component on exit */
+  unmountOnExit?: boolean
+  /* Callback fired when the component has entered */
+  onEnter?: (node: HTMLElement, isAppearing: boolean) => void
+}
+
+export const Collapse = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      className,
+      in: inProps = false,
+      timeout = 350,
+      unmountOnExit,
+      style,
+      appear,
+      onExited: onExitedProp,
+      'data-testid': dataTestId,
+      ...rest
+    },
+    ref
+  ) => {
+    const collapseRef = useRef<HTMLDivElement>(null)
+    const combinedRef = useMultipleForwardRefs([ref, collapseRef])
+
+    const [height, setHeight] = useState<number>()
+
+    const setToCurrentHeight = () => {
+      if (collapseRef.current) {
+        setHeight(collapseRef.current.scrollHeight)
+      }
+    }
+
+    const resetHeight = () => {
+      setHeight(0)
+    }
+
+    const onExited = (node: HTMLElement) => {
+      resetHeight()
+      if (onExitedProp) {
+        onExitedProp(node)
+      }
+    }
+
+    return (
+      <Transition
+        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'
+
+          return (
+            <div
+              className={twJoin([
+                isAnimating ? 'overflow-hidden max-h-0' : undefined,
+                state === 'exited' ? 'hidden' : undefined,
+                className,
+              ])}
+              style={{
+                ...style,
+                ...currentHeight,
+                transition: isAnimating
+                  ? `max-height ${timeout}ms ease`
+                  : undefined,
+              }}
+              data-testid={dataTestId}
+              ref={combinedRef}
+            >
+              {children}
+            </div>
+          )
+        }}
+      </Transition>
+    )
+  }
+)
+
+export default Collapse

package/src/Collapse/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './Collapse'
+
+export { default as Collapse } from './Collapse'
+export type FadeProps = OmitInternalProps<Props>

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

@@ -0,0 +1,22 @@
+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'>
+        Toggle Collapse
+      </Button>
+      <Collapse in={faded} 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

@@ -0,0 +1,18 @@
+import { Collapse } from '../Collapse'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Transitions').createPage('Collapse')
+
+page.createTabChapter('Props').addComponentDocs({
+  component: Collapse,
+  name: 'Collapse',
+})
+
+page.createChapter().addExample(
+  'Collapse/story/Default.example.tsx',
+  {
+    title: 'Default',
+    takeScreenshot: false,
+  },
+  'base/Collapse'
+)

package/src/Collapse/test.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { act, cleanup, render } from '@toptal/picasso-test-utils'
+
+import Collapse from './Collapse'
+
+const SomeChildComponent = React.forwardRef<HTMLDivElement>((props, ref) => (
+  <div ref={ref} data-testid='child-div' {...props}>
+    Hello, I'm child div!
+  </div>
+))
+
+describe('Collapse', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    cleanup()
+    jest.useRealTimers()
+  })
+
+  it('transitions based on the `in` prop', () => {
+    const { getByTestId, rerender } = render(
+      <Collapse in={false} data-testid='collapse'>
+        <SomeChildComponent />
+      </Collapse>
+    )
+
+    expect(getByTestId('collapse')).toHaveClass('hidden')
+
+    act(() => {
+      rerender(
+        <Collapse in={true} data-testid='collapse'>
+          <SomeChildComponent />
+        </Collapse>
+      )
+      jest.runAllTimers()
+    })
+
+    expect(getByTestId('collapse')).toHaveStyle('display: block')
+  })
+
+  it('forwards the ref', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    const { getByTestId } = render(
+      <Collapse in={true} ref={ref} data-testid='collapse'>
+        <SomeChildComponent />
+      </Collapse>
+    )
+
+    expect(ref.current).toBe(getByTestId('collapse'))
+  })
+})

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Collapse'