@chakra-ui/transition - npm Package Compare versions

Comparing version 2.0.9 to 2.0.10

dist/index.cjs.js

@@ -27,3 +27,3 @@ "use strict";
   Collapse: () => Collapse,
-  EASINGS: () => TransitionEasings,
+  EASINGS: () => TRANSITION_EASINGS,
   Fade: () => Fade,
@@ -34,11 +34,13 @@ ScaleFade: () => ScaleFade,
   fadeConfig: () => fadeConfig,
+  getSlideTransition: () => getSlideTransition,
   scaleFadeConfig: () => scaleFadeConfig,
-  slideFadeConfig: () => slideFadeConfig
+  slideFadeConfig: () => slideFadeConfig,
+  withDelay: () => withDelay
 });
 module.exports = __toCommonJS(src_exports);
 
-// ../../react-shim.js
+// ../../../react-shim.js
 var import_react = __toESM(require("react"));
 
-// ../../utilities/shared-utils/dist/index.esm.js
+// ../../utilities/shared-utils/src/index.ts
 var cx = (...classNames) => classNames.filter(Boolean).join(" ");
@@ -60,3 +62,3 @@ function isDev() {
 // src/transition-utils.ts
-var TransitionEasings = {
+var TRANSITION_EASINGS = {
   ease: [0.25, 0.1, 0.25, 1],
@@ -67,3 +69,3 @@ easeIn: [0.4, 0, 1, 1],
 };
-var TransitionVariants = {
+var TRANSITION_VARIANTS = {
   scale: {
@@ -114,25 +116,25 @@ enter: { scale: 1 },
 };
-function slideTransition(options) {
+function getSlideTransition(options) {
   const side = (options == null ? void 0 : options.direction) ?? "right";
   switch (side) {
     case "right":
-      return TransitionVariants.slideRight;
+      return TRANSITION_VARIANTS.slideRight;
     case "left":
-      return TransitionVariants.slideLeft;
+      return TRANSITION_VARIANTS.slideLeft;
     case "bottom":
-      return TransitionVariants.slideDown;
+      return TRANSITION_VARIANTS.slideDown;
     case "top":
-      return TransitionVariants.slideUp;
+      return TRANSITION_VARIANTS.slideUp;
     default:
-      return TransitionVariants.slideRight;
+      return TRANSITION_VARIANTS.slideRight;
   }
 }
-var TransitionDefaults = {
+var TRANSITION_DEFAULTS = {
   enter: {
     duration: 0.2,
-    ease: TransitionEasings.easeOut
+    ease: TRANSITION_EASINGS.easeOut
   },
   exit: {
     duration: 0.1,
-    ease: TransitionEasings.easeIn
+    ease: TRANSITION_EASINGS.easeIn
   }
@@ -155,8 +157,8 @@ };
   exit: {
-    height: { duration: 0.2, ease: TransitionEasings.ease },
-    opacity: { duration: 0.3, ease: TransitionEasings.ease }
+    height: { duration: 0.2, ease: TRANSITION_EASINGS.ease },
+    opacity: { duration: 0.3, ease: TRANSITION_EASINGS.ease }
   },
   enter: {
-    height: { duration: 0.3, ease: TransitionEasings.ease },
-    opacity: { duration: 0.4, ease: TransitionEasings.ease }
+    height: { duration: 0.3, ease: TRANSITION_EASINGS.ease },
+    opacity: { duration: 0.4, ease: TRANSITION_EASINGS.ease }
   }
@@ -257,3 +259,3 @@ };
     opacity: 1,
-    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TransitionDefaults.enter, delay),
+    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter
@@ -263,3 +265,3 @@ }),
     opacity: 0,
-    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TransitionDefaults.exit, delay),
+    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
@@ -307,3 +309,3 @@ })
     ...reverse ? { scale: initialScale, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { scale: initialScale, ...transitionEnd == null ? void 0 : transitionEnd.exit } },
-    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TransitionDefaults.exit, delay)
+    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay)
   }),
@@ -313,3 +315,3 @@ enter: ({ transitionEnd, transition, delay }) => ({
     scale: 1,
-    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TransitionDefaults.enter, delay),
+    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter
@@ -358,3 +360,3 @@ })
     duration: 0.15,
-    ease: TransitionEasings.easeInOut
+    ease: TRANSITION_EASINGS.easeInOut
   },
@@ -369,3 +371,3 @@ enter: {
   exit: ({ direction, transition, transitionEnd, delay }) => {
-    const { exit: exitStyles } = slideTransition({ direction });
+    const { exit: exitStyles } = getSlideTransition({ direction });
     return {
@@ -378,3 +380,3 @@ ...exitStyles,
   enter: ({ direction, transitionEnd, transition, delay }) => {
-    const { enter: enterStyles } = slideTransition({ direction });
+    const { enter: enterStyles } = getSlideTransition({ direction });
     return {
@@ -397,5 +399,6 @@ ...enterStyles,
     delay,
+    motionProps,
     ...rest
   } = props;
-  const transitionStyles = slideTransition({ direction });
+  const transitionStyles = getSlideTransition({ direction });
   const computedStyle = Object.assign({ position: "fixed" }, transitionStyles.position, style);
@@ -416,3 +419,4 @@ const show = unmountOnExit ? isOpen && unmountOnExit : true;
     variants: variants4,
-    style: computedStyle
+    style: computedStyle,
+    ...motionProps
   }));
@@ -430,3 +434,3 @@ });
     y: offsetY,
-    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TransitionDefaults.exit, delay),
+    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
@@ -438,3 +442,3 @@ }),
     y: 0,
-    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TransitionDefaults.enter, delay),
+    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter
@@ -446,3 +450,3 @@ }),
       opacity: 0,
-      transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TransitionDefaults.exit, delay),
+      transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
       ...reverse ? { ...offset, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { ...offset, ...transitionEnd == null ? void 0 : transitionEnd.exit } }
@@ -502,4 +506,6 @@ };
   fadeConfig,
+  getSlideTransition,
   scaleFadeConfig,
-  slideFadeConfig
+  slideFadeConfig,
+  withDelay
 });

dist/index.d.ts

 import * as react from 'react';
 import { Transition, Target, HTMLMotionProps } from 'framer-motion';
 
+declare type TransitionProperties = {
+    /**
+     * Custom `transition` definition for `enter` and `exit`
+     */
+    transition?: TransitionConfig;
+    /**
+     * Custom `transitionEnd` definition for `enter` and `exit`
+     */
+    transitionEnd?: TransitionEndConfig;
+    /**
+     * Custom `delay` definition for `enter` and `exit`
+     */
+    delay?: number | DelayConfig;
+};
 declare type WithMotionState<P> = Partial<Record<"enter" | "exit", P>>;
@@ -8,3 +22,3 @@ declare type TransitionConfig = WithMotionState<Transition>;
 declare type DelayConfig = WithMotionState<number>;
-declare const TransitionEasings: {
+declare const TRANSITION_EASINGS: {
     readonly ease: readonly [0.25, 0.1, 0.25, 1];
@@ -16,3 +30,66 @@ readonly easeIn: readonly [0.4, 0, 1, 1];
 declare type SlideDirection = "top" | "left" | "bottom" | "right";
-declare type WithTransitionConfig<P extends object> = Omit<P, "transition"> & {
+declare function getSlideTransition(options?: {
+    direction?: SlideDirection;
+}): {
+    position: {
+        left: number;
+        top: number;
+        bottom: number;
+        width: string;
+    };
+    enter: {
+        x: number;
+        y: number;
+    };
+    exit: {
+        x: string;
+        y: number;
+    };
+} | {
+    position: {
+        right: number;
+        top: number;
+        bottom: number;
+        width: string;
+    };
+    enter: {
+        x: number;
+        y: number;
+    };
+    exit: {
+        x: string;
+        y: number;
+    };
+} | {
+    position: {
+        top: number;
+        left: number;
+        right: number;
+        maxWidth: string;
+    };
+    enter: {
+        x: number;
+        y: number;
+    };
+    exit: {
+        x: number;
+        y: string;
+    };
+} | {
+    position: {
+        bottom: number;
+        left: number;
+        right: number;
+        maxWidth: string;
+    };
+    enter: {
+        x: number;
+        y: number;
+    };
+    exit: {
+        x: number;
+        y: string;
+    };
+};
+declare type WithTransitionConfig<P extends object> = Omit<P, "transition"> & TransitionProperties & {
     /**
@@ -26,15 +103,11 @@ * If `true`, the element will unmount when `in={false}` and animation is done
     in?: boolean;
-    /**
-     * Custom `transition` definition for `enter` and `exit`
-     */
-    transition?: TransitionConfig;
-    /**
-     * Custom `transitionEnd` definition for `enter` and `exit`
-     */
-    transitionEnd?: TransitionEndConfig;
-    /**
-     * Custom `delay` definition for `enter` and `exit`
-     */
-    delay?: number | DelayConfig;
 };
+declare const withDelay: {
+    enter: (transition: Transition, delay?: number | DelayConfig) => Transition & {
+        delay: number | undefined;
+    };
+    exit: (transition: Transition, delay?: number | DelayConfig) => Transition & {
+        delay: number | undefined;
+    };
+};
 
@@ -93,2 +166,3 @@ interface CollapseOptions {
 interface SlideProps extends WithTransitionConfig<HTMLMotionProps<"div">>, SlideOptions {
+    motionProps?: HTMLMotionProps<"div">;
 }
@@ -120,2 +194,2 @@ declare const Slide: react.ForwardRefExoticComponent<SlideProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Collapse, CollapseOptions, CollapseProps, TransitionEasings as EASINGS, Fade, FadeProps, ICollapse, ScaleFade, ScaleFadeProps, Slide, SlideDirection, SlideFade, SlideFadeProps, SlideOptions, SlideProps, fadeConfig, scaleFadeConfig, slideFadeConfig };
+export { Collapse, CollapseOptions, CollapseProps, TRANSITION_EASINGS as EASINGS, Fade, FadeProps, ICollapse, ScaleFade, ScaleFadeProps, Slide, SlideDirection, SlideFade, SlideFadeProps, SlideOptions, SlideProps, TransitionProperties, fadeConfig, getSlideTransition, scaleFadeConfig, slideFadeConfig, withDelay };

dist/index.esm.js

@@ -1,5 +0,5 @@
-// ../../react-shim.js
+// ../../../react-shim.js
 import React from "react";
 
-// ../../utilities/shared-utils/dist/index.esm.js
+// ../../utilities/shared-utils/src/index.ts
 var cx = (...classNames) => classNames.filter(Boolean).join(" ");
@@ -24,3 +24,3 @@ function isDev() {
 // src/transition-utils.ts
-var TransitionEasings = {
+var TRANSITION_EASINGS = {
   ease: [0.25, 0.1, 0.25, 1],
@@ -31,3 +31,3 @@ easeIn: [0.4, 0, 1, 1],
 };
-var TransitionVariants = {
+var TRANSITION_VARIANTS = {
   scale: {
@@ -78,25 +78,25 @@ enter: { scale: 1 },
 };
-function slideTransition(options) {
+function getSlideTransition(options) {
   const side = (options == null ? void 0 : options.direction) ?? "right";
   switch (side) {
     case "right":
-      return TransitionVariants.slideRight;
+      return TRANSITION_VARIANTS.slideRight;
     case "left":
-      return TransitionVariants.slideLeft;
+      return TRANSITION_VARIANTS.slideLeft;
     case "bottom":
-      return TransitionVariants.slideDown;
+      return TRANSITION_VARIANTS.slideDown;
     case "top":
-      return TransitionVariants.slideUp;
+      return TRANSITION_VARIANTS.slideUp;
     default:
-      return TransitionVariants.slideRight;
+      return TRANSITION_VARIANTS.slideRight;
   }
 }
-var TransitionDefaults = {
+var TRANSITION_DEFAULTS = {
   enter: {
     duration: 0.2,
-    ease: TransitionEasings.easeOut
+    ease: TRANSITION_EASINGS.easeOut
   },
   exit: {
     duration: 0.1,
-    ease: TransitionEasings.easeIn
+    ease: TRANSITION_EASINGS.easeIn
   }
@@ -119,8 +119,8 @@ };
   exit: {
-    height: { duration: 0.2, ease: TransitionEasings.ease },
-    opacity: { duration: 0.3, ease: TransitionEasings.ease }
+    height: { duration: 0.2, ease: TRANSITION_EASINGS.ease },
+    opacity: { duration: 0.3, ease: TRANSITION_EASINGS.ease }
   },
   enter: {
-    height: { duration: 0.3, ease: TransitionEasings.ease },
-    opacity: { duration: 0.4, ease: TransitionEasings.ease }
+    height: { duration: 0.3, ease: TRANSITION_EASINGS.ease },
+    opacity: { duration: 0.4, ease: TRANSITION_EASINGS.ease }
   }
@@ -224,3 +224,3 @@ };
     opacity: 1,
-    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TransitionDefaults.enter, delay),
+    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter
@@ -230,3 +230,3 @@ }),
     opacity: 0,
-    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TransitionDefaults.exit, delay),
+    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
@@ -277,3 +277,3 @@ })
     ...reverse ? { scale: initialScale, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { scale: initialScale, ...transitionEnd == null ? void 0 : transitionEnd.exit } },
-    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TransitionDefaults.exit, delay)
+    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay)
   }),
@@ -283,3 +283,3 @@ enter: ({ transitionEnd, transition, delay }) => ({
     scale: 1,
-    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TransitionDefaults.enter, delay),
+    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter
@@ -331,3 +331,3 @@ })
     duration: 0.15,
-    ease: TransitionEasings.easeInOut
+    ease: TRANSITION_EASINGS.easeInOut
   },
@@ -342,3 +342,3 @@ enter: {
   exit: ({ direction, transition, transitionEnd, delay }) => {
-    const { exit: exitStyles } = slideTransition({ direction });
+    const { exit: exitStyles } = getSlideTransition({ direction });
     return {
@@ -351,3 +351,3 @@ ...exitStyles,
   enter: ({ direction, transitionEnd, transition, delay }) => {
-    const { enter: enterStyles } = slideTransition({ direction });
+    const { enter: enterStyles } = getSlideTransition({ direction });
     return {
@@ -370,5 +370,6 @@ ...enterStyles,
     delay,
+    motionProps,
     ...rest
   } = props;
-  const transitionStyles = slideTransition({ direction });
+  const transitionStyles = getSlideTransition({ direction });
   const computedStyle = Object.assign({ position: "fixed" }, transitionStyles.position, style);
@@ -389,3 +390,4 @@ const show = unmountOnExit ? isOpen && unmountOnExit : true;
     variants: variants4,
-    style: computedStyle
+    style: computedStyle,
+    ...motionProps
   }));
@@ -406,3 +408,3 @@ });
     y: offsetY,
-    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TransitionDefaults.exit, delay),
+    transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
@@ -414,3 +416,3 @@ }),
     y: 0,
-    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TransitionDefaults.enter, delay),
+    transition: (transition == null ? void 0 : transition.enter) ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
     transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter
@@ -422,3 +424,3 @@ }),
       opacity: 0,
-      transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TransitionDefaults.exit, delay),
+      transition: (transition == null ? void 0 : transition.exit) ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
       ...reverse ? { ...offset, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { ...offset, ...transitionEnd == null ? void 0 : transitionEnd.exit } }
@@ -471,3 +473,3 @@ };
   Collapse,
-  TransitionEasings as EASINGS,
+  TRANSITION_EASINGS as EASINGS,
   Fade,
@@ -478,4 +480,6 @@ ScaleFade,
   fadeConfig,
+  getSlideTransition,
   scaleFadeConfig,
-  slideFadeConfig
+  slideFadeConfig,
+  withDelay
 };

package.json

 {
   "name": "@chakra-ui/transition",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "Common transition components for Chakra UI",
@@ -18,4 +18,2 @@ "sideEffects": false,
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
   "files": [
@@ -30,3 +28,3 @@ "dist"
     "url": "git+https://github.com/chakra-ui/chakra-ui.git",
-    "directory": "packages/transition"
+    "directory": "packages/components/transition"
   },
@@ -41,10 +39,20 @@ "bugs": {
   "devDependencies": {
-    "@chakra-ui/hooks": "2.0.9",
-    "@chakra-ui/shared-utils": "2.0.1",
+    "@chakra-ui/hooks": "2.0.11",
+    "@chakra-ui/shared-utils": "2.0.2",
     "framer-motion": "^6.2.9",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "clean-package": "2.1.1"
   },
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "JSX=1 tsup src/index.ts --dts",
-    "dev": "pnpm build -- --watch",
+    "dev": "pnpm build:fast -- --watch",
     "clean": "rimraf dist .turbo",
@@ -51,0 +59,0 @@ "typecheck": "tsc --noEmit",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37721

increased by5.48%

Lines of code

1125

increased by8.17%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes