@cleartrip/ct-design-transition 4.0.0-TEST.3 → 5.0.0

package/dist/type.d.ts

@@ -1,6 +1,6 @@
 import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
 import * as React from 'react';
-import { CSSProperties } from 'styled-components';
+import { CSSProperties } from 'react';
 export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
 export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
 export type Direction = 'left' | 'right' | 'up' | 'down';
@@ -15,21 +15,21 @@ export interface TransitionProps extends TransitionActions, Partial<Pick<_Transi
 }
 export interface TransitionProps {
     appear?: boolean;
-    children: React.ReactElement<any, any>;
+    children: React.ReactElement;
     in?: boolean;
     type: 'fade' | 'zoom' | 'slide' | 'grow' | 'collapse' | 'grow_from_container' | 'slide_fade';
     css?: CSSProperties;
-    containerRef?: any;
+    containerRef?: React.MutableRefObject<HTMLElement | null>;
     slideDirection?: Direction;
 }
 export interface IGrowFromContainerProps {
-    containerRef?: React.MutableRefObject<HTMLDivElement | undefined>;
-    node: HTMLDivElement;
+    containerRef?: React.MutableRefObject<HTMLElement | null>;
+    node: HTMLElement;
     transitionProps?: ITransitionProps;
 }
 export interface ITransitionProps {
-    duration: number;
-    easing: string;
-    delay: number;
+    duration?: number | string;
+    easing?: string;
+    delay?: number | string;
 }
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Transition/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAC3G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;AACjH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAC;AAEnF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AACzD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,cAAc,GACd,eAAe,GACf,SAAS,GACT,QAAQ,GACR,gBAAgB,GAChB,qBAAqB,CAAC;AAC1B,MAAM,WAAW,eACf,SAAQ,iBAAiB,EACvB,OAAO,CAAC,IAAI,CAAC,gBAAgB,GAAG,WAAW,EAAE,cAAc,CAAC,CAAC,EAC7D,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;CAAG;AAExC,MAAM,WAAW,eAAe;IAK9B,MAAM,CAAC,EAAE,OAAO,CAAC;IAIjB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAIvC,EAAE,CAAC,EAAE,OAAO,CAAC;IAKb,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,qBAAqB,GAAG,YAAY,CAAC;IAI7F,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IAClE,IAAI,EAAE,cAAc,CAAC;IACrB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Transition/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAC3G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;AACjH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAC;AAEnF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AACzD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,cAAc,GACd,eAAe,GACf,SAAS,GACT,QAAQ,GACR,gBAAgB,GAChB,qBAAqB,CAAC;AAC1B,MAAM,WAAW,eACf,SACE,iBAAiB,EACjB,OAAO,CAAC,IAAI,CAAC,gBAAgB,GAAG,WAAW,EAAE,cAAc,CAAC,CAAC,EAC7D,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;CAAG;AAExC,MAAM,WAAW,eAAe;IAK9B,MAAM,CAAC,EAAE,OAAO,CAAC;IAIjB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAI7B,EAAE,CAAC,EAAE,OAAO,CAAC;IAKb,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,qBAAqB,GAAG,YAAY,CAAC;IAI7F,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1D,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-transition",
-  "version": "4.0.0-TEST.3",
+  "version": "5.0.0",
   "description": "Transition Component",
   "types": "dist/index.d.ts",
   "main": "dist/ct-design-transition.cjs.js",
@@ -12,19 +12,19 @@
     "./dist/ct-design-transition.cjs.js": "./dist/ct-design-transition.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "react-transition-group": "^4.4.5",
-    "@cleartrip/ct-design-theme": "3.20.0",
-    "@cleartrip/ct-design-use-merge-refs": "3.20.0",
-    "@cleartrip/ct-design-common-utils": "4.0.0-TEST.3"
+    "@cleartrip/ct-design-theme": "5.0.0",
+    "@cleartrip/ct-design-use-merge-refs": "5.0.0",
+    "@cleartrip/ct-design-common-utils": "5.0.0"
   },
   "devDependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -35,6 +35,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/Transition.tsx

@@ -0,0 +1,502 @@
+import * as React from 'react';
+import { Transition as ReactTransition } from 'react-transition-group';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import useMergeRefs from '@cleartrip/ct-design-use-merge-refs';
+import { Direction, IGrowFromContainerProps, TransitionProps } from './type';
+import { styles } from './style';
+import { debounce } from '@cleartrip/ct-design-common-utils';
+
+const defaultTransform: Record<string, string | undefined> = {
+  grow: 'scale(0.75, 0.5625)',
+  zoom: 'scale(0)',
+};
+
+const reflow = (node: Element) => node.scrollTop;
+interface TransitionOptions {
+  mode: 'enter' | 'exit';
+}
+
+interface TransitionPropsInput {
+  timeout?: number | { enter?: number; exit?: number };
+  easing?: string | { enter?: string; exit?: string };
+  style?: React.CSSProperties;
+}
+
+function getTransitionProps(props: TransitionPropsInput, options: TransitionOptions) {
+  const { timeout, easing, style = {} } = props;
+
+  return {
+    duration: style.transitionDuration ?? (typeof timeout === 'number' ? timeout : timeout?.[options.mode] || 0),
+    easing: style.transitionTimingFunction ?? (typeof easing === 'object' ? easing[options.mode] : easing),
+    delay: style.transitionDelay,
+  };
+}
+
+function getTranslateValue(direction: Direction, node: HTMLElement, containerRef: HTMLElement | null) {
+  const rect = node.getBoundingClientRect();
+  const containerRect = containerRef && containerRef.getBoundingClientRect();
+
+  const computedStyle = window.getComputedStyle(node);
+  const transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
+
+  let offsetX = 0;
+  let offsetY = 0;
+
+  if (transform && transform !== 'none' && typeof transform === 'string') {
+    const transformValues = transform.split('(')[1].split(')')[0].split(',');
+    offsetX = parseInt(transformValues[4], 10);
+    offsetY = parseInt(transformValues[5], 10);
+  }
+
+  if (direction === 'left') {
+    if (containerRect) {
+      return `translateX(${containerRect.right + offsetX - rect.left}px)`;
+    }
+
+    return `translateX(${window.innerWidth + offsetX - rect.left}px)`;
+  }
+
+  if (direction === 'right') {
+    if (containerRect) {
+      return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
+    }
+
+    return `translateX(-${rect.left + rect.width - offsetX}px)`;
+  }
+
+  if (direction === 'up') {
+    if (containerRect) {
+      return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
+    }
+    return `translateY(${window.innerHeight + offsetY - rect.top}px)`;
+  }
+
+  // direction === 'down'
+  if (containerRect) {
+    return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
+  }
+  return `translateY(-${rect.top + rect.height - offsetY}px)`;
+}
+
+export function setTranslateValue(direction: Direction, node: HTMLElement, containerRef: HTMLElement | null) {
+  const transform = getTranslateValue(direction, node, containerRef);
+
+  if (transform) {
+    node.style.webkitTransform = transform;
+    node.style.transform = transform;
+  }
+}
+
+export function getGrowFromContainerStyles({ containerRef, node, transitionProps }: IGrowFromContainerProps) {
+  const { delay = 0, duration = 300, easing = '' } = transitionProps ?? {};
+
+  requestAnimationFrame(() => {
+    if (!containerRef?.current) return;
+
+    const { width, height, top, left } = containerRef.current.getBoundingClientRect() ?? {};
+
+    node.style.transition = '';
+    node.style.opacity = '0';
+
+    const { height: realHeight, width: realWidth } = node.getBoundingClientRect();
+
+    requestAnimationFrame(() => {
+      node.style.transformOrigin = 'top left';
+      node.style.top = top + 'px';
+      node.style.left = left + 'px';
+
+      node.style.opacity = '0';
+      node.style.height = height + 'px';
+      node.style.width = width + 'px';
+      node.style.transform = 'translate(0, 0)';
+
+      requestAnimationFrame(() => {
+        node.style.transition = `opacity ${
+          (typeof duration === 'number' ? duration : 300) / 3
+        }ms ${delay || 0}ms ${easing}, width ${duration || 300}ms ${delay || 0}ms ${easing}, height ${duration || 300}ms ${delay || 0}ms ${easing}, transform ${duration || 300}ms ${delay || 0}ms ${easing}`;
+        node.style.height = realHeight + 'px';
+        node.style.width = realWidth + 'px';
+        node.style.opacity = '1';
+        node.style.transform = `translate(${-left}px, ${-top}px)`;
+      });
+    });
+  });
+}
+
+export function getExitGrowFromContainerStyles({ containerRef, node, transitionProps }: IGrowFromContainerProps) {
+  const { delay = 0, duration = 300, easing = '' } = transitionProps ?? {};
+
+  const resizingTime = (6 * (typeof duration === 'number' ? duration : 300)) / 10;
+  const fadingDelay = (5 * (typeof duration === 'number' ? duration : 300)) / 10;
+
+  requestAnimationFrame(() => {
+    if (!containerRef?.current) return;
+
+    const { width, height, top, left } = containerRef.current.getBoundingClientRect() ?? {};
+
+    node.style.transition = `opacity ${duration}ms ${fadingDelay}ms ${easing}, width ${resizingTime}ms ${delay}ms ${easing}, height ${resizingTime}ms ${delay}ms ${easing}, transform ${resizingTime}ms ${delay}ms ${easing}`;
+    node.style.transformOrigin = 'top left';
+    node.style.top = top + 'px';
+    node.style.left = left + 'px';
+    node.style.opacity = '0';
+
+    node.style.height = height + 'px';
+    node.style.width = width + 'px';
+    node.style.transform = 'translate(0, 0)';
+  });
+}
+
+/***
+ * Transition component
+ * it is based on type
+ */
+const Transition = React.forwardRef<HTMLElement, TransitionProps>(
+  (
+    {
+      appear = true,
+      in: inProp,
+      css: _css,
+      style,
+      type,
+      children,
+      timeout,
+      easing,
+      containerRef,
+      slideDirection = 'down',
+      onEnter,
+      onEntered,
+      onEntering,
+      onExit,
+      onExited,
+      onExiting,
+      addEndListener,
+      ...other
+    },
+    forwardedRef,
+  ) => {
+    const theme = useTheme();
+    const defaultTimeout = {
+      enter: theme.transitions.duration.enteringScreen,
+      exit: theme.transitions.duration.leavingScreen,
+    };
+
+    timeout = timeout || defaultTimeout;
+
+    const nodeRef = React.useRef<HTMLElement>(null);
+    const handleRef = useMergeRefs(
+      nodeRef,
+      (children as React.ReactElement & { ref?: React.Ref<HTMLElement> })?.ref,
+      forwardedRef,
+    );
+
+    const normalizedTransitionCallback =
+      (callback?: ((node: HTMLElement, isAppearing?: boolean) => void) | ((node: HTMLElement) => void)) =>
+      (maybeIsAppearing?: boolean) => {
+        if (callback && nodeRef.current) {
+          const node = nodeRef.current;
+
+          // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+          if (maybeIsAppearing === undefined) {
+            callback(node);
+          } else {
+            callback(node, maybeIsAppearing);
+          }
+        }
+      };
+
+    //   const handleEntering = normalizedTransitionCallback(onEntering);
+
+    const handleEnter = normalizedTransitionCallback((node: HTMLElement, isAppearing?: boolean) => {
+      if (type === 'slide') {
+        setTranslateValue(slideDirection, node, containerRef?.current || null);
+      }
+      reflow(node); // So the animation always start from the start.
+
+      const transitionProps = getTransitionProps(
+        { style, timeout, easing },
+        {
+          mode: 'enter',
+        },
+      );
+
+      /**
+       * implementation for fade
+       */
+      if (type === 'fade') {
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.transition = theme.transitions.create('opacity', transitionProps);
+      }
+
+      if (type === 'slide_fade') {
+        node.style.webkitTransition = [
+          // @ts-expect-error - theme.transitions.create is of type unknown
+          theme.transitions.create('opacity', transitionProps),
+          // @ts-expect-error - theme.transitions.create is of type unknown
+          theme.transitions.create('transform', transitionProps),
+        ].join(',');
+
+        node.style.transition = [
+          // @ts-expect-error - theme.transitions.create is of type unknown
+          theme.transitions.create('opacity', transitionProps),
+          // @ts-expect-error - theme.transitions.create is of type unknown
+          theme.transitions.create('transform', transitionProps),
+        ].join(',');
+      }
+
+      if (type === 'grow_from_container') {
+        getGrowFromContainerStyles({
+          node,
+          containerRef,
+          transitionProps,
+        });
+      }
+
+      /**
+       * implementation for grow
+       */
+      if (type === 'grow') {
+        const duration = transitionProps.duration;
+        // if (timeout === 'auto') {
+        //   duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
+        //   autoTimeout.current = duration;
+        // } else {
+        //   duration = transitionProps.duration;
+        // }
+
+        node.style.transition = [
+          // @ts-expect-error - theme.transitions.create is of type unknown
+          theme.transitions.create('opacity', {
+            duration: transitionProps.duration,
+            delay: transitionProps.delay,
+          }),
+          // @ts-expect-error - theme.transitions.create is of type unknown
+          theme.transitions.create('transform', {
+            duration,
+            delay: transitionProps.delay,
+            easing: transitionProps.easing,
+          }),
+        ].join(',');
+      }
+      /**
+       * implementation for zoom
+       */
+      if (type === 'zoom') {
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.transition = theme.transitions.create('transform', transitionProps);
+      }
+
+      if (onEnter) {
+        onEnter(node, isAppearing || false);
+      }
+    });
+
+    const handleEntering = normalizedTransitionCallback((node: HTMLElement, isAppearing?: boolean) => {
+      if (type === 'slide') {
+        const easingValue = easing || {
+          enter: theme.transitions.easing.easeOut,
+          exit: theme.transitions.easing.sharp,
+        };
+        const transitionProps = getTransitionProps(
+          { timeout, style, easing: easingValue },
+          {
+            mode: 'enter',
+          },
+        );
+
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
+          ...transitionProps,
+        });
+
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.transition = theme.transitions.create('transform', {
+          ...transitionProps,
+        });
+
+        node.style.webkitTransform = '';
+        node.style.transform = '';
+      }
+      if (onEntering) {
+        onEntering(node, isAppearing || false);
+      }
+    });
+
+    const handleEntered = normalizedTransitionCallback(
+      onEntered ? (node: HTMLElement, isAppearing?: boolean) => onEntered(node, isAppearing || false) : undefined,
+    );
+
+    const handleExiting = normalizedTransitionCallback(onExiting);
+
+    const handleExit = normalizedTransitionCallback((node: HTMLElement) => {
+      const transitionProps = getTransitionProps(
+        { style, timeout, easing },
+        {
+          mode: 'exit',
+        },
+      );
+      /**
+       * implementation for fade
+       */
+      if (type == 'fade') {
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.transition = theme.transitions.create('opacity', transitionProps);
+      }
+
+      if (type === 'slide_fade') {
+        node.style.transition = '';
+        node.style.webkitTransition = '';
+      }
+
+      if (type === 'grow_from_container') {
+        getExitGrowFromContainerStyles({
+          node,
+          containerRef,
+          transitionProps,
+        });
+      }
+
+      /**
+       * implementation for grow
+       */
+      if (type === 'grow') {
+        node.style.transition = [
+          // @ts-expect-error - theme.transitions.create is of type unknown
+          theme.transitions.create('opacity', {
+            duration: transitionProps.duration,
+            delay: transitionProps.delay,
+          }),
+          // @ts-expect-error - theme.transitions.create is of type unknown
+          theme.transitions.create('transform', {
+            duration: transitionProps.duration,
+            delay: transitionProps.delay,
+            easing: transitionProps.easing,
+          }),
+        ].join(',');
+
+        node.style.opacity = '0';
+        node.style.transform = 'scale(0.75, 0.5625)';
+      }
+      /**
+       * implementation for zoom
+       */
+      if (type === 'zoom') {
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.transition = theme.transitions.create('transform', transitionProps);
+      }
+      /**
+       * TODO
+       * implementation for slide
+       */
+      if (type === 'slide') {
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
+        // @ts-expect-error - theme.transitions.create is of type unknown
+        node.style.transition = theme.transitions.create('transform', transitionProps);
+
+        setTranslateValue(slideDirection, node, containerRef?.current || null);
+      }
+
+      if (onExit) {
+        onExit(node);
+      }
+    });
+
+    const handleExited = normalizedTransitionCallback((node: HTMLElement) => {
+      if (type === 'slide') {
+        node.style.webkitTransition = '';
+        node.style.transition = '';
+      }
+
+      if (onExited) {
+        onExited(node);
+      }
+    });
+
+    const handleAddEndListener = (next: () => void) => {
+      if (addEndListener && nodeRef.current) {
+        // Old call signature before `react-transition-group` implemented `nodeRef`
+        addEndListener(nodeRef.current, next);
+      }
+    };
+
+    const updatePosition = React.useCallback(() => {
+      if (nodeRef.current) {
+        setTranslateValue(slideDirection, nodeRef.current, containerRef?.current || null);
+      }
+    }, [slideDirection, containerRef]);
+
+    React.useEffect(() => {
+      // Skip configuration where the position is screen size invariant.
+      if (inProp || slideDirection === 'down' || slideDirection === 'right') {
+        return undefined;
+      }
+
+      const handleResize = debounce(() => {
+        if (nodeRef.current) {
+          setTranslateValue(slideDirection, nodeRef.current, containerRef?.current || null);
+        }
+      });
+
+      window.addEventListener('resize', handleResize);
+      return () => {
+        //   handleResize.clear();
+        window.removeEventListener('resize', handleResize);
+      };
+    }, [slideDirection, inProp, containerRef]);
+
+    React.useEffect(() => {
+      if (type === 'slide' && !inProp) {
+        // We need to update the position of the drawer when the direction change and
+        // when it's hidden.
+        updatePosition();
+      }
+    }, [type, inProp, updatePosition]);
+
+    return (
+      <ReactTransition
+        appear={appear}
+        in={inProp}
+        nodeRef={nodeRef}
+        onEnter={handleEnter}
+        onEntered={handleEntered}
+        onEntering={handleEntering}
+        onExit={handleExit}
+        onExited={handleExited}
+        onExiting={handleExiting}
+        addEndListener={handleAddEndListener}
+        timeout={timeout}
+        {...other}
+      >
+        {(state) => {
+          const childrenProps = (children as React.ReactElement<{ style?: React.CSSProperties }>).props;
+          let childProp = {
+            style: {
+              opacity: type === 'fade' || type === 'grow' ? 0 : undefined,
+              transform: defaultTransform[type],
+              visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+              ...((styles as Record<string, Record<string, React.CSSProperties>>)[type]?.[state] || {}),
+              ...style,
+              ...childrenProps.style,
+            } as React.CSSProperties,
+            ref: handleRef,
+          };
+          if (type === 'slide') {
+            childProp = { ...childProp, ...childrenProps };
+          }
+          return React.cloneElement(children, childProp);
+        }}
+      </ReactTransition>
+    );
+  },
+);
+
+Transition.displayName = 'Transition';
+export default Transition;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Transition } from './Transition';
+export type * from './type';

package/src/style.ts

@@ -0,0 +1,45 @@
+export const styles = {
+  zoom: {
+    entering: {
+      transform: 'none',
+    },
+    entered: {
+      transform: 'none',
+    },
+  },
+  fade: {
+    entering: {
+      opacity: 1,
+    },
+    entered: {
+      opacity: 1,
+    },
+  },
+  grow: {
+    entering: {
+      opacity: 1,
+      transform: 'scale(1, 1)',
+    },
+    entered: {
+      opacity: 1,
+      transform: 'none',
+    },
+  },
+  slide_fade: {
+    entering: {
+      opacity: 0,
+      transform: 'translateY(4px)',
+    },
+    entered: {
+      opacity: 1,
+      transform: '',
+    },
+    exited: {
+      opacity: 0,
+      transform: 'translateY(4px)',
+    },
+  },
+  grow_from_container: {},
+  collapse: {},
+  slide: {},
+};