@chakra-ui/transition - npm Package Compare versions

Comparing version 1.0.0-rc.5 to 1.0.0-rc.6

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# 1.0.0-rc.6 (2020-10-25)
+
+**Note:** Version bump only for package @chakra-ui/transition
+
+
+
+
+
 # 1.0.0-rc.5 (2020-09-27)
@@ -8,0 +16,0 @@

dist/cjs/fade.js

 "use strict";
 
 exports.__esModule = true;
-exports.Fade = void 0;
+exports.Fade = exports.fadeConfig = void 0;
 
 var _utils = require("@chakra-ui/utils");
 
+var _framerMotion = require("framer-motion");
+
 var React = _interopRequireWildcard(require("react"));
 
-var _transition = require("./transition");
+var _utils2 = require("./__utils");
 
@@ -20,29 +22,39 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var styles = {
-  init: {
-    opacity: 0
+var variants = {
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.1,
+      ease: _utils2.EASINGS.easeOut
+    }
   },
-  entered: {
-    opacity: 1
-  },
-  exiting: {
-    opacity: 0
+  enter: {
+    opacity: 1,
+    transition: {
+      duration: 0.2,
+      ease: _utils2.EASINGS.easeIn
+    }
   }
 };
-
-var Fade = function Fade(props) {
-  var _props$timeout = props.timeout,
-      timeout = _props$timeout === void 0 ? 150 : _props$timeout,
-      rest = _objectWithoutPropertiesLoose(props, ["timeout"]);
-
-  return /*#__PURE__*/React.createElement(_transition.Transition, _extends({
-    transition: "all " + timeout + "ms cubic-bezier(0.175, 0.885, 0.320, 1.175)",
-    styles: styles,
-    timeout: {
-      enter: 0,
-      exit: timeout
-    }
-  }, rest));
+var fadeConfig = {
+  initial: "exit",
+  animate: "enter",
+  exit: "exit",
+  variants: variants
 };
+exports.fadeConfig = fadeConfig;
+var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
+  var unmountOnExit = props.unmountOnExit,
+      isOpen = props["in"],
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, ["unmountOnExit", "in", "className"]);
 
+  var shouldExpand = unmountOnExit ? isOpen && unmountOnExit : true;
+  return /*#__PURE__*/React.createElement(_framerMotion.AnimatePresence, null, shouldExpand && /*#__PURE__*/React.createElement(_framerMotion.motion.div, _extends({
+    ref: ref,
+    className: (0, _utils.cx)("chakra-fade", className)
+  }, fadeConfig, {
+    animate: isOpen || unmountOnExit ? "enter" : "exit"
+  }, rest)));
+});
 exports.Fade = Fade;
@@ -49,0 +61,0 @@

dist/cjs/index.js

@@ -5,6 +5,15 @@ "use strict";
 var _exportNames = {
-  CSSTransition: true
+  EASINGS: true
 };
-exports.CSSTransition = void 0;
+exports.EASINGS = void 0;
 
+var _collapse = require("./collapse");
+
+Object.keys(_collapse).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _collapse[key]) return;
+  exports[key] = _collapse[key];
+});
+
 var _fade = require("./fade");
@@ -15,2 +24,3 @@
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _fade[key]) return;
   exports[key] = _fade[key];
@@ -24,2 +34,3 @@ });
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _scaleFade[key]) return;
   exports[key] = _scaleFade[key];
@@ -33,2 +44,3 @@ });
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _slide[key]) return;
   exports[key] = _slide[key];
@@ -42,48 +54,9 @@ });
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _slideFade[key]) return;
   exports[key] = _slideFade[key];
 });
 
-var _transition = require("./transition");
+var _utils = require("./__utils");
 
-Object.keys(_transition).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  exports[key] = _transition[key];
-});
-
-var _transitionConfig = require("./transition-config");
-
-Object.keys(_transitionConfig).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  exports[key] = _transitionConfig[key];
-});
-
-var _hiddenTransition = require("./hidden-transition");
-
-Object.keys(_hiddenTransition).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  exports[key] = _hiddenTransition[key];
-});
-
-var _useTransitionConfig = require("./use-transition-config");
-
-Object.keys(_useTransitionConfig).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  exports[key] = _useTransitionConfig[key];
-});
-
-var _presets = require("./presets");
-
-Object.keys(_presets).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  exports[key] = _presets[key];
-});
-
-var _reactTransitionGroup = require("react-transition-group");
-
-exports.CSSTransition = _reactTransitionGroup.CSSTransition;
+exports.EASINGS = _utils.EASINGS;
 //# sourceMappingURL=index.js.map

dist/cjs/scale-fade.js

 "use strict";
 
 exports.__esModule = true;
-exports.ScaleFade = void 0;
+exports.ScaleFade = exports.scaleFadeConfig = void 0;
 
+var _utils = require("@chakra-ui/utils");
+
+var _framerMotion = require("framer-motion");
+
 var React = _interopRequireWildcard(require("react"));
 
-var _utils = require("@chakra-ui/utils");
+var _utils2 = require("./__utils");
 
-var _transition = require("./transition");
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -16,42 +18,65 @@
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function getTransitionStyles(initialScale) {
-  return {
-    init: {
-      opacity: 0,
-      transform: "scale(" + initialScale + ")"
-    },
-    entered: {
-      opacity: 1,
-      transform: "scale(1)"
-    },
-    exiting: {
-      opacity: 0,
-      transform: "scale(" + initialScale + ")"
+var variants = {
+  exit: function exit(props) {
+    return _extends({
+      opacity: 0
+    }, props.reverse ? {
+      scale: props.initialScale
+    } : {
+      transitionEnd: {
+        scale: props.initialScale
+      }
+    }, {
+      transition: {
+        duration: 0.1,
+        ease: _utils2.EASINGS.easeOut
+      }
+    });
+  },
+  enter: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.25,
+      ease: _utils2.EASINGS.easeInOut
     }
-  };
-}
-
-var ScaleFade = function ScaleFade(props) {
-  var _props$initialScale = props.initialScale,
-      initialScale = _props$initialScale === void 0 ? 0.9 : _props$initialScale,
-      _props$timeout = props.timeout,
-      timeout = _props$timeout === void 0 ? 150 : _props$timeout,
-      rest = _objectWithoutPropertiesLoose(props, ["initialScale", "timeout"]);
-
-  var styles = getTransitionStyles(initialScale);
-  return /*#__PURE__*/React.createElement(_transition.Transition, _extends({
-    styles: styles,
-    transition: "all " + timeout + "ms cubic-bezier(0.45, 0, 0.40, 1)",
-    timeout: {
-      enter: 0,
-      exit: timeout
-    },
-    unmountOnExit: true
-  }, rest));
+  }
 };
+var scaleFadeConfig = {
+  initial: "exit",
+  animate: "enter",
+  exit: "exit",
+  variants: variants
+};
+exports.scaleFadeConfig = scaleFadeConfig;
+var ScaleFade = /*#__PURE__*/React.forwardRef(function ScaleFade(props, ref) {
+  var unmountOnExit = props.unmountOnExit,
+      isOpen = props["in"],
+      _props$reverse = props.reverse,
+      reverse = _props$reverse === void 0 ? true : _props$reverse,
+      _props$initialScale = props.initialScale,
+      initialScale = _props$initialScale === void 0 ? 0.95 : _props$initialScale,
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, ["unmountOnExit", "in", "reverse", "initialScale", "className"]);
 
+  var show = unmountOnExit ? isOpen && unmountOnExit : true;
+  var custom = {
+    initialScale: initialScale,
+    reverse: reverse
+  };
+  var motionProps = (0, _utils.merge)(scaleFadeConfig, {
+    custom: custom,
+    animate: isOpen || unmountOnExit ? "enter" : "exit"
+  });
+  return /*#__PURE__*/React.createElement(_framerMotion.AnimatePresence, {
+    custom: custom
+  }, show && /*#__PURE__*/React.createElement(_framerMotion.motion.div, _extends({
+    ref: ref,
+    className: (0, _utils.cx)("chakra-offset-slide", className)
+  }, motionProps, rest)));
+});
 exports.ScaleFade = ScaleFade;
@@ -58,0 +83,0 @@

dist/cjs/slide-fade.js

 "use strict";
 
 exports.__esModule = true;
-exports.SlideFade = void 0;
+exports.SlideFade = exports.slideFadeConfig = void 0;
 
+var _utils = require("@chakra-ui/utils");
+
+var _framerMotion = require("framer-motion");
+
 var React = _interopRequireWildcard(require("react"));
 
-var _utils = require("@chakra-ui/utils");
+var _utils2 = require("./__utils");
 
-var _transition = require("./transition");
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -16,41 +18,82 @@
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function getTransitionStyles(initialOffset) {
-  return {
-    init: {
+var transitions = {
+  enter: {
+    duration: 0.2,
+    ease: _utils2.EASINGS.easeOut
+  },
+  exit: {
+    duration: 0.1,
+    ease: _utils2.EASINGS.easeIn
+  }
+};
+var variants = {
+  initial: function initial(props) {
+    return {
       opacity: 0,
-      transform: "translateY(" + initialOffset + ")"
-    },
-    entered: {
-      opacity: 1,
-      transform: "translateY(0px)"
-    },
-    exiting: {
+      x: props.offsetX,
+      y: props.offsetY,
+      transition: transitions.exit
+    };
+  },
+  exit: function exit(props) {
+    return _extends({
       opacity: 0,
-      transform: "translateY(" + initialOffset + ")"
-    }
-  };
-}
-
-var SlideFade = function SlideFade(props) {
-  var _props$initialOffset = props.initialOffset,
-      initialOffset = _props$initialOffset === void 0 ? "20px" : _props$initialOffset,
-      _props$timeout = props.timeout,
-      timeout = _props$timeout === void 0 ? 150 : _props$timeout,
-      rest = _objectWithoutPropertiesLoose(props, ["initialOffset", "timeout"]);
-
-  var styles = getTransitionStyles(initialOffset);
-  return /*#__PURE__*/React.createElement(_transition.Transition, _extends({
-    styles: styles,
-    transition: "all " + timeout + "ms cubic-bezier(0.4, 0.14, 0.3, 1)",
-    timeout: {
-      enter: 0,
-      exit: timeout
-    }
-  }, rest));
+      transition: transitions.exit
+    }, props.reverse && {
+      x: props.offsetX,
+      y: props.offsetY
+    }, !props.reverse && {
+      transitionEnd: {
+        x: props.offsetX,
+        y: props.offsetY
+      }
+    });
+  },
+  enter: {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    transition: transitions.enter
+  }
 };
+var slideFadeConfig = {
+  initial: "initial",
+  animate: "enter",
+  exit: "exit",
+  variants: variants
+};
+exports.slideFadeConfig = slideFadeConfig;
+var SlideFade = /*#__PURE__*/React.forwardRef(function SlideFade(props, ref) {
+  var unmountOnExit = props.unmountOnExit,
+      isOpen = props["in"],
+      _props$reverse = props.reverse,
+      reverse = _props$reverse === void 0 ? true : _props$reverse,
+      className = props.className,
+      _props$offsetX = props.offsetX,
+      offsetX = _props$offsetX === void 0 ? 0 : _props$offsetX,
+      _props$offsetY = props.offsetY,
+      offsetY = _props$offsetY === void 0 ? 8 : _props$offsetY,
+      rest = _objectWithoutPropertiesLoose(props, ["unmountOnExit", "in", "reverse", "className", "offsetX", "offsetY"]);
 
+  var shouldExpand = unmountOnExit ? isOpen && unmountOnExit : true;
+  var custom = {
+    offsetX: offsetX,
+    offsetY: offsetY,
+    reverse: reverse
+  };
+  var motionProps = (0, _utils.merge)(slideFadeConfig, {
+    custom: custom,
+    animate: isOpen || unmountOnExit ? "enter" : "exit"
+  });
+  return /*#__PURE__*/React.createElement(_framerMotion.AnimatePresence, {
+    custom: custom
+  }, shouldExpand && /*#__PURE__*/React.createElement(_framerMotion.motion.div, _extends({
+    ref: ref,
+    className: (0, _utils.cx)("chakra-offset-slide", className)
+  }, motionProps, rest)));
+});
 exports.SlideFade = SlideFade;
@@ -57,0 +100,0 @@

dist/cjs/slide.js

@@ -6,8 +6,10 @@ "use strict";
 
+var _utils = require("@chakra-ui/utils");
+
+var _framerMotion = require("framer-motion");
+
 var React = _interopRequireWildcard(require("react"));
 
-var _utils = require("@chakra-ui/utils");
+var _utils2 = require("./__utils");
 
-var _transition = require("./transition");
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -17,107 +19,112 @@
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var directions = {
+  bottom: {
+    motion: {
+      y: "100%"
+    },
+    baseStyle: {
+      maxWidth: "100vw",
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  },
+  top: {
+    motion: {
+      y: "-100%"
+    },
+    baseStyle: {
+      maxWidth: "100vw",
+      top: 0,
+      left: 0,
+      right: 0
+    }
+  },
+  left: {
+    motion: {
+      x: "-100%"
+    },
+    baseStyle: {
+      width: "100%",
+      height: "100vh",
+      left: 0,
+      top: 0
+    }
+  },
+  right: {
+    motion: {
+      x: "100%"
+    },
+    baseStyle: {
+      width: "100%",
+      right: 0,
+      top: 0,
+      height: "100vh"
+    }
+  }
+};
+var variants = {
+  exit: function exit(direction) {
+    var _directions$direction;
 
-function createBaseStyle(placement) {
-  switch (placement) {
-    case "bottom":
-      {
-        return {
-          maxWidth: "100vw",
-          bottom: 0,
-          left: 0,
-          right: 0
-        };
-      }
+    var _ref = (_directions$direction = directions[direction]) != null ? _directions$direction : {},
+        motion = _ref.motion;
 
-    case "top":
-      {
-        return {
-          maxWidth: "100vw",
-          top: 0,
-          left: 0,
-          right: 0
-        };
+    return _extends({}, motion, {
+      transition: {
+        duration: 0.15,
+        ease: _utils2.EASINGS.easeInOut
       }
+    });
+  },
+  enter: function enter(direction) {
+    var _directions$direction2, _ref4;
 
-    case "left":
-      {
-        return {
-          width: "100%",
-          height: "100vh",
-          left: 0,
-          top: 0
-        };
-      }
+    var _ref2 = (_directions$direction2 = directions[direction]) != null ? _directions$direction2 : {},
+        motion = _ref2.motion;
 
-    case "right":
-      {
-        return {
-          width: "100%",
-          right: 0,
-          top: 0,
-          height: "100vh"
-        };
-      }
+    var _ref3 = motion ? Object.keys(motion) : ["x"],
+        axis = _ref3[0];
 
-    default:
-      break;
+    return _ref4 = {}, _ref4[axis] = 0, _ref4.transition = {
+      type: "spring",
+      damping: 25,
+      stiffness: 180
+    }, _ref4;
   }
-}
-
-var getTransformStyle = function getTransformStyle(placement, value) {
-  var axis = "";
-  if (placement === "left" || placement === "right") axis = "X";
-  if (placement === "top" || placement === "bottom") axis = "Y";
-  return "translate" + axis + "(" + value + ")";
 };
+var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  var _directions$direction3;
 
-function getTransitionStyles(placement) {
-  var offset = {
-    bottom: "100%",
-    top: "-100%",
-    left: "-100%",
-    right: "100%"
-  };
-  return {
-    init: {
-      transform: getTransformStyle(placement, offset[placement])
-    },
-    entered: {
-      transform: getTransformStyle(placement, "0%")
-    },
-    exiting: {
-      transform: getTransformStyle(placement, offset[placement])
-    }
-  };
-}
+  var _props$direction = props.direction,
+      direction = _props$direction === void 0 ? "right" : _props$direction,
+      style = props.style,
+      unmountOnExit = props.unmountOnExit,
+      isOpen = props["in"],
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, ["direction", "style", "unmountOnExit", "in", "className"]);
 
-var Slide = function Slide(props) {
-  var _props$placement = props.placement,
-      placement = _props$placement === void 0 ? "left" : _props$placement,
-      _props$timeout = props.timeout,
-      timeout = _props$timeout === void 0 ? 150 : _props$timeout,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["placement", "timeout", "children"]);
+  var _ref5 = (_directions$direction3 = directions[direction]) != null ? _directions$direction3 : {},
+      baseStyle = _ref5.baseStyle;
 
-  var styles = getTransitionStyles(placement);
-
-  var positionStyles = _extends({
-    position: "fixed",
-    willChange: "transform"
-  }, createBaseStyle(placement));
-
-  return /*#__PURE__*/React.createElement(_transition.Transition, _extends({
-    styles: styles,
-    transition: "opacity " + timeout + "ms cubic-bezier(0, 0, 0.2, 1), transform " + timeout + "ms cubic-bezier(0, 0, 0.2, 1)",
-    timeout: {
-      enter: 0,
-      exit: timeout
-    }
-  }, rest), function (styles) {
-    return children(_extends({}, positionStyles, styles));
-  });
-};
-
+  var shouldExpand = unmountOnExit ? isOpen && unmountOnExit : true;
+  return /*#__PURE__*/React.createElement(_framerMotion.AnimatePresence, {
+    custom: direction
+  }, shouldExpand && /*#__PURE__*/React.createElement(_framerMotion.motion.div, _extends({
+    ref: ref,
+    initial: "exit",
+    className: (0, _utils.cx)("chakra-slide", className),
+    animate: isOpen || unmountOnExit ? "enter" : "exit",
+    exit: "exit",
+    custom: direction,
+    variants: variants,
+    style: _extends({
+      position: "fixed"
+    }, baseStyle, style)
+  }, rest)));
+});
 exports.Slide = Slide;
@@ -124,0 +131,0 @@

dist/esm/fade.js

@@ -5,31 +5,44 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { __DEV__ } from "@chakra-ui/utils";
+import { cx, __DEV__ } from "@chakra-ui/utils";
+import { AnimatePresence, motion } from "framer-motion";
 import * as React from "react";
-import { Transition } from "./transition";
-var styles = {
-  init: {
-    opacity: 0
+import { EASINGS } from "./__utils";
+var variants = {
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.1,
+      ease: EASINGS.easeOut
+    }
   },
-  entered: {
-    opacity: 1
-  },
-  exiting: {
-    opacity: 0
+  enter: {
+    opacity: 1,
+    transition: {
+      duration: 0.2,
+      ease: EASINGS.easeIn
+    }
   }
 };
-export var Fade = props => {
+export var fadeConfig = {
+  initial: "exit",
+  animate: "enter",
+  exit: "exit",
+  variants
+};
+export var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   var {
-    timeout = 150
+    unmountOnExit,
+    in: isOpen,
+    className
   } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["timeout"]);
+      rest = _objectWithoutPropertiesLoose(props, ["unmountOnExit", "in", "className"]);
 
-  return /*#__PURE__*/React.createElement(Transition, _extends({
-    transition: "all " + timeout + "ms cubic-bezier(0.175, 0.885, 0.320, 1.175)",
-    styles: styles,
-    timeout: {
-      enter: 0,
-      exit: timeout
-    }
-  }, rest));
-};
+  var shouldExpand = unmountOnExit ? isOpen && unmountOnExit : true;
+  return /*#__PURE__*/React.createElement(AnimatePresence, null, shouldExpand && /*#__PURE__*/React.createElement(motion.div, _extends({
+    ref: ref,
+    className: cx("chakra-fade", className)
+  }, fadeConfig, {
+    animate: isOpen || unmountOnExit ? "enter" : "exit"
+  }, rest)));
+});
 
@@ -36,0 +49,0 @@ if (__DEV__) {

dist/esm/index.js

@@ -0,1 +1,2 @@
+export * from "./collapse";
 export * from "./fade";
@@ -5,8 +6,3 @@ export * from "./scale-fade";
 export * from "./slide-fade";
-export * from "./transition";
-export * from "./transition-config";
-export * from "./hidden-transition";
-export * from "./use-transition-config";
-export * from "./presets";
-export { CSSTransition } from "react-transition-group";
+export { EASINGS } from "./__utils";
 //# sourceMappingURL=index.js.map

dist/esm/scale-fade.js

@@ -0,44 +1,65 @@
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+import { cx, merge, __DEV__ } from "@chakra-ui/utils";
+import { AnimatePresence, motion } from "framer-motion";
 import * as React from "react";
-import { __DEV__ } from "@chakra-ui/utils";
-import { Transition } from "./transition";
-
-function getTransitionStyles(initialScale) {
-  return {
-    init: {
-      opacity: 0,
-      transform: "scale(" + initialScale + ")"
-    },
-    entered: {
-      opacity: 1,
-      transform: "scale(1)"
-    },
-    exiting: {
-      opacity: 0,
-      transform: "scale(" + initialScale + ")"
+import { EASINGS } from "./__utils";
+var variants = {
+  exit: props => _extends({
+    opacity: 0
+  }, props.reverse ? {
+    scale: props.initialScale
+  } : {
+    transitionEnd: {
+      scale: props.initialScale
     }
-  };
-}
-
-export var ScaleFade = props => {
+  }, {
+    transition: {
+      duration: 0.1,
+      ease: EASINGS.easeOut
+    }
+  }),
+  enter: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.25,
+      ease: EASINGS.easeInOut
+    }
+  }
+};
+export var scaleFadeConfig = {
+  initial: "exit",
+  animate: "enter",
+  exit: "exit",
+  variants
+};
+export var ScaleFade = /*#__PURE__*/React.forwardRef(function ScaleFade(props, ref) {
   var {
-    initialScale = 0.9,
-    timeout = 150
+    unmountOnExit,
+    in: isOpen,
+    reverse = true,
+    initialScale = 0.95,
+    className
   } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["initialScale", "timeout"]);
+      rest = _objectWithoutPropertiesLoose(props, ["unmountOnExit", "in", "reverse", "initialScale", "className"]);
 
-  var styles = getTransitionStyles(initialScale);
-  return /*#__PURE__*/React.createElement(Transition, _extends({
-    styles: styles,
-    transition: "all " + timeout + "ms cubic-bezier(0.45, 0, 0.40, 1)",
-    timeout: {
-      enter: 0,
-      exit: timeout
-    },
-    unmountOnExit: true
-  }, rest));
-};
+  var show = unmountOnExit ? isOpen && unmountOnExit : true;
+  var custom = {
+    initialScale,
+    reverse
+  };
+  var motionProps = merge(scaleFadeConfig, {
+    custom,
+    animate: isOpen || unmountOnExit ? "enter" : "exit"
+  });
+  return /*#__PURE__*/React.createElement(AnimatePresence, {
+    custom: custom
+  }, show && /*#__PURE__*/React.createElement(motion.div, _extends({
+    ref: ref,
+    className: cx("chakra-offset-slide", className)
+  }, motionProps, rest)));
+});
 
@@ -45,0 +66,0 @@ if (__DEV__) {

dist/esm/slide-fade.js

@@ -0,43 +1,79 @@
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+import { cx, merge, __DEV__ } from "@chakra-ui/utils";
+import { AnimatePresence, motion } from "framer-motion";
 import * as React from "react";
-import { __DEV__ } from "@chakra-ui/utils";
-import { Transition } from "./transition";
-
-function getTransitionStyles(initialOffset) {
-  return {
-    init: {
-      opacity: 0,
-      transform: "translateY(" + initialOffset + ")"
-    },
-    entered: {
-      opacity: 1,
-      transform: "translateY(0px)"
-    },
-    exiting: {
-      opacity: 0,
-      transform: "translateY(" + initialOffset + ")"
+import { EASINGS } from "./__utils";
+var transitions = {
+  enter: {
+    duration: 0.2,
+    ease: EASINGS.easeOut
+  },
+  exit: {
+    duration: 0.1,
+    ease: EASINGS.easeIn
+  }
+};
+var variants = {
+  initial: props => ({
+    opacity: 0,
+    x: props.offsetX,
+    y: props.offsetY,
+    transition: transitions.exit
+  }),
+  exit: props => _extends({
+    opacity: 0,
+    transition: transitions.exit
+  }, props.reverse && {
+    x: props.offsetX,
+    y: props.offsetY
+  }, !props.reverse && {
+    transitionEnd: {
+      x: props.offsetX,
+      y: props.offsetY
     }
-  };
-}
-
-export var SlideFade = props => {
+  }),
+  enter: {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    transition: transitions.enter
+  }
+};
+export var slideFadeConfig = {
+  initial: "initial",
+  animate: "enter",
+  exit: "exit",
+  variants
+};
+export var SlideFade = /*#__PURE__*/React.forwardRef(function SlideFade(props, ref) {
   var {
-    initialOffset = "20px",
-    timeout = 150
+    unmountOnExit,
+    in: isOpen,
+    reverse = true,
+    className,
+    offsetX = 0,
+    offsetY = 8
   } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["initialOffset", "timeout"]);
+      rest = _objectWithoutPropertiesLoose(props, ["unmountOnExit", "in", "reverse", "className", "offsetX", "offsetY"]);
 
-  var styles = getTransitionStyles(initialOffset);
-  return /*#__PURE__*/React.createElement(Transition, _extends({
-    styles: styles,
-    transition: "all " + timeout + "ms cubic-bezier(0.4, 0.14, 0.3, 1)",
-    timeout: {
-      enter: 0,
-      exit: timeout
-    }
-  }, rest));
-};
+  var shouldExpand = unmountOnExit ? isOpen && unmountOnExit : true;
+  var custom = {
+    offsetX,
+    offsetY,
+    reverse
+  };
+  var motionProps = merge(slideFadeConfig, {
+    custom,
+    animate: isOpen || unmountOnExit ? "enter" : "exit"
+  });
+  return /*#__PURE__*/React.createElement(AnimatePresence, {
+    custom: custom
+  }, shouldExpand && /*#__PURE__*/React.createElement(motion.div, _extends({
+    ref: ref,
+    className: cx("chakra-offset-slide", className)
+  }, motionProps, rest)));
+});
 
@@ -44,0 +80,0 @@ if (__DEV__) {

dist/esm/slide.js

@@ -0,108 +1,118 @@
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+import { cx, __DEV__ } from "@chakra-ui/utils";
+import { AnimatePresence, motion } from "framer-motion";
 import * as React from "react";
-import { __DEV__ } from "@chakra-ui/utils";
-import { Transition } from "./transition";
+import { EASINGS } from "./__utils";
+var directions = {
+  bottom: {
+    motion: {
+      y: "100%"
+    },
+    baseStyle: {
+      maxWidth: "100vw",
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  },
+  top: {
+    motion: {
+      y: "-100%"
+    },
+    baseStyle: {
+      maxWidth: "100vw",
+      top: 0,
+      left: 0,
+      right: 0
+    }
+  },
+  left: {
+    motion: {
+      x: "-100%"
+    },
+    baseStyle: {
+      width: "100%",
+      height: "100vh",
+      left: 0,
+      top: 0
+    }
+  },
+  right: {
+    motion: {
+      x: "100%"
+    },
+    baseStyle: {
+      width: "100%",
+      right: 0,
+      top: 0,
+      height: "100vh"
+    }
+  }
+};
+var variants = {
+  exit: direction => {
+    var _directions$direction;
 
-function createBaseStyle(placement) {
-  switch (placement) {
-    case "bottom":
-      {
-        return {
-          maxWidth: "100vw",
-          bottom: 0,
-          left: 0,
-          right: 0
-        };
+    var {
+      motion
+    } = (_directions$direction = directions[direction]) != null ? _directions$direction : {};
+    return _extends({}, motion, {
+      transition: {
+        duration: 0.15,
+        ease: EASINGS.easeInOut
       }
+    });
+  },
+  enter: direction => {
+    var _directions$direction2;
 
-    case "top":
-      {
-        return {
-          maxWidth: "100vw",
-          top: 0,
-          left: 0,
-          right: 0
-        };
+    var {
+      motion
+    } = (_directions$direction2 = directions[direction]) != null ? _directions$direction2 : {};
+    var [axis] = motion ? Object.keys(motion) : ["x"];
+    return {
+      [axis]: 0,
+      transition: {
+        type: "spring",
+        damping: 25,
+        stiffness: 180
       }
-
-    case "left":
-      {
-        return {
-          width: "100%",
-          height: "100vh",
-          left: 0,
-          top: 0
-        };
-      }
-
-    case "right":
-      {
-        return {
-          width: "100%",
-          right: 0,
-          top: 0,
-          height: "100vh"
-        };
-      }
-
-    default:
-      break;
+    };
   }
-}
-
-var getTransformStyle = (placement, value) => {
-  var axis = "";
-  if (placement === "left" || placement === "right") axis = "X";
-  if (placement === "top" || placement === "bottom") axis = "Y";
-  return "translate" + axis + "(" + value + ")";
 };
+export var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  var _directions$direction3;
 
-function getTransitionStyles(placement) {
-  var offset = {
-    bottom: "100%",
-    top: "-100%",
-    left: "-100%",
-    right: "100%"
-  };
-  return {
-    init: {
-      transform: getTransformStyle(placement, offset[placement])
-    },
-    entered: {
-      transform: getTransformStyle(placement, "0%")
-    },
-    exiting: {
-      transform: getTransformStyle(placement, offset[placement])
-    }
-  };
-}
-
-export var Slide = props => {
   var {
-    placement = "left",
-    timeout = 150,
-    children
+    direction = "right",
+    style,
+    unmountOnExit,
+    in: isOpen,
+    className
   } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["placement", "timeout", "children"]);
+      rest = _objectWithoutPropertiesLoose(props, ["direction", "style", "unmountOnExit", "in", "className"]);
 
-  var styles = getTransitionStyles(placement);
+  var {
+    baseStyle
+  } = (_directions$direction3 = directions[direction]) != null ? _directions$direction3 : {};
+  var shouldExpand = unmountOnExit ? isOpen && unmountOnExit : true;
+  return /*#__PURE__*/React.createElement(AnimatePresence, {
+    custom: direction
+  }, shouldExpand && /*#__PURE__*/React.createElement(motion.div, _extends({
+    ref: ref,
+    initial: "exit",
+    className: cx("chakra-slide", className),
+    animate: isOpen || unmountOnExit ? "enter" : "exit",
+    exit: "exit",
+    custom: direction,
+    variants: variants,
+    style: _extends({
+      position: "fixed"
+    }, baseStyle, style)
+  }, rest)));
+});
 
-  var positionStyles = _extends({
-    position: "fixed",
-    willChange: "transform"
-  }, createBaseStyle(placement));
-
-  return /*#__PURE__*/React.createElement(Transition, _extends({
-    styles: styles,
-    transition: "opacity " + timeout + "ms cubic-bezier(0, 0, 0.2, 1), transform " + timeout + "ms cubic-bezier(0, 0, 0.2, 1)",
-    timeout: {
-      enter: 0,
-      exit: timeout
-    }
-  }, rest), styles => children(_extends({}, positionStyles, styles)));
-};
-
 if (__DEV__) {
@@ -109,0 +119,0 @@ Slide.displayName = "Slide";

dist/types/fade.d.ts

@@ -0,6 +1,14 @@
+import { HTMLMotionProps } from "framer-motion";
 import * as React from "react";
-import { TransitionProps } from "./transition";
-export declare type FadeProps = Omit<TransitionProps, "styles" | "timeout"> & {
-    timeout?: number;
-};
-export declare const Fade: React.FC<FadeProps>;
+export declare const fadeConfig: HTMLMotionProps<any>;
+export interface FadeProps extends HTMLMotionProps<"div"> {
+    /**
+     * If `true`, the collapse will unmount when `isOpen={false}` and animation is done
+     */
+    unmountOnExit?: boolean;
+    /**
+     * If `true`, the content will slide in
+     */
+    in?: boolean;
+}
+export declare const Fade: React.ForwardRefExoticComponent<FadeProps & React.RefAttributes<HTMLDivElement>>;

dist/types/index.d.ts

@@ -0,1 +1,2 @@
+export * from "./collapse";
 export * from "./fade";
@@ -5,7 +6,2 @@ export * from "./scale-fade";
 export * from "./slide-fade";
-export * from "./transition";
-export * from "./transition-config";
-export * from "./hidden-transition";
-export * from "./use-transition-config";
-export * from "./presets";
-export { CSSTransition } from "react-transition-group";
+export { EASINGS } from "./__utils";

dist/types/scale-fade.d.ts

@@ -0,9 +1,22 @@
+import { HTMLMotionProps } from "framer-motion";
 import * as React from "react";
-import { TransitionProps } from "./transition";
-export declare type ScaleFadeProps = Omit<TransitionProps, "styles" | "timeout"> & {
-    /** The initial scale to animate from */
+export declare const scaleFadeConfig: HTMLMotionProps<"div">;
+export interface ScaleFadeProps extends HTMLMotionProps<"div"> {
+    /**
+     * The initial scale of the element
+     */
     initialScale?: number;
-    /** The transition timeout */
-    timeout?: number;
-};
-export declare const ScaleFade: React.FC<ScaleFadeProps>;
+    /**
+     * If `true`, the element will transition back to exit state
+     */
+    reverse?: boolean;
+    /**
+     * If `true`, the collapse will unmount when `isOpen={false}` and animation is done
+     */
+    unmountOnExit?: boolean;
+    /**
+     * If `true`, the content will slide in
+     */
+    in?: boolean;
+}
+export declare const ScaleFade: React.ForwardRefExoticComponent<ScaleFadeProps & React.RefAttributes<HTMLDivElement>>;

dist/types/slide-fade.d.ts

@@ -0,13 +1,27 @@
+import { HTMLMotionProps } from "framer-motion";
 import * as React from "react";
-import { TransitionProps } from "./transition";
-export interface SlideFadeProps extends Omit<TransitionProps, "styles" | "timeout"> {
+export declare const slideFadeConfig: HTMLMotionProps<"div">;
+export interface SlideFadeProps extends HTMLMotionProps<"div"> {
     /**
-     * The initial offset to slide from
+     * The offset on the horizontal or `x` axis
      */
-    initialOffset?: string;
+    offsetX?: number;
     /**
-     * The transition timeout
+     * The offset on the vertical or `y` axis
      */
-    timeout?: number;
+    offsetY?: number;
+    /**
+     * If `true`, the element will be transitioned back to the offset when it leaves.
+     * Otherwise, it'll only fade out
+     */
+    reverse?: boolean;
+    /**
+     * If `true`, the collapse will unmount when `isOpen={false}` and animation is done
+     */
+    unmountOnExit?: boolean;
+    /**
+     * If `true`, the content will slide in
+     */
+    in?: boolean;
 }
-export declare const SlideFade: React.FC<SlideFadeProps>;
+export declare const SlideFade: React.ForwardRefExoticComponent<SlideFadeProps & React.RefAttributes<HTMLDivElement>>;

dist/types/slide.d.ts

@@ -0,11 +1,68 @@
+import { HTMLMotionProps } from "framer-motion";
 import * as React from "react";
-import { TransitionProps } from "./transition";
-declare type Placement = "left" | "right" | "bottom" | "top";
-export declare type SlideProps = Omit<TransitionProps, "styles" | "timeout"> & {
-    /** The direction to slide drawer from */
-    placement?: Placement;
-    /** The transition timeout */
-    timeout?: number;
+export declare type SlideDirection = keyof typeof directions;
+declare const directions: {
+    bottom: {
+        motion: {
+            y: string;
+        };
+        baseStyle: {
+            maxWidth: string;
+            bottom: number;
+            left: number;
+            right: number;
+        };
+    };
+    top: {
+        motion: {
+            y: string;
+        };
+        baseStyle: {
+            maxWidth: string;
+            top: number;
+            left: number;
+            right: number;
+        };
+    };
+    left: {
+        motion: {
+            x: string;
+        };
+        baseStyle: {
+            width: string;
+            height: string;
+            left: number;
+            top: number;
+        };
+    };
+    right: {
+        motion: {
+            x: string;
+        };
+        baseStyle: {
+            width: string;
+            right: number;
+            top: number;
+            height: string;
+        };
+    };
 };
-export declare const Slide: React.FC<SlideProps>;
+export interface SlideOptions {
+    /**
+     * If `true`, the collapse will unmount when `isOpen={false}` and animation is done
+     */
+    unmountOnExit?: boolean;
+    /**
+     * The direction to slide from
+     * @default "right"
+     */
+    direction?: SlideDirection;
+    /**
+     * If `true`, the content will slide in
+     */
+    in?: boolean;
+}
+export interface SlideProps extends HTMLMotionProps<"div">, SlideOptions {
+}
+export declare const Slide: React.ForwardRefExoticComponent<SlideProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package.json

 {
   "name": "@chakra-ui/transition",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.6",
   "description": "Common transition components for Chakra UI",
@@ -21,2 +21,8 @@ "sideEffects": false,
   "typings": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
   "files": [
@@ -50,14 +56,9 @@ "dist"
   "dependencies": {
-    "@chakra-ui/utils": "1.0.0-rc.5",
-    "@types/react-transition-group": "4.4.0",
-    "react-transition-group": "4.4.1"
+    "@chakra-ui/utils": "1.0.0-rc.6"
   },
-  "devDependencies": {
-    "@chakra-ui/system": "1.0.0-rc.5"
-  },
   "peerDependencies": {
-    "@chakra-ui/system": ">=1.0.0-rc.3",
-    "react": "16.x"
+    "framer-motion": "2.x",
+    "react": "16.x || 17.x"
   },
-  "gitHead": "b5c8482b778b19f27ea1d6c8ab6d5ed39c664afa"
+  "gitHead": "e55b45840d1edc821ad0bb45632535333be5bb86"
 }

README.md

@@ -1,4 +0,65 @@
-Base Package
+# @chakra-ui/transition
 
-Don't run any npm script in here. It's just a basic folder to enable us create
-new packages faster.
+## Installation
+
+```sh
+yarn add @chakra-ui/transition
+# or
+npm i @chakra-ui/transition
+```
+
+## Collapse
+
+The Collapse component is used to create regions of content that can
+expand/collapse with a simple animation. It helps to hide content that's not
+immediately relevant to the user.
+
+## Import component
+
+```jsx
+import { Collapse } from "@chakra-ui/transition"
+```
+
+## Usage
+
+```jsx
+function SampleSpring() {
+  const { isOpen, onToggle } = useDisclosure()
+  return (
+    <>
+      <Button onClick={onToggle}>Click</Button>
+      <Collapse isOpen={isOpen}>
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
+        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
+        labore wes anderson cred nesciunt sapiente ea proident.
+      </Collapse>
+    </>
+  )
+}
+```
+
+## Changing the starting height
+
+```jsx
+function Example() {
+  const [show, setShow] = React.useState(false)
+
+  const handleToggle = () => setShow(!show)
+
+  return (
+    <>
+      <Collapse startingHeight={20} isOpen={show}>
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
+        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
+        labore wes anderson cred nesciunt sapiente ea proident.
+      </Collapse>
+      <Button size="sm" onClick={handleToggle} mt="1rem">
+        Show {show ? "Less" : "More"}
+      </Button>
+    </>
+  )
+}
+```
+
+// TODO: Explain the `framer-motion` part and how to customize the motion
+variants

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Dependency count

3

decreased by-40%

Dev dependency count

0

decreased by-100%

Number of lines in readme file

66

increased by1220%

Worsened metrics

Total package byte prevSize

102966

decreased by-17.7%

Number of package files

39

decreased by-43.48%

Lines of code

1076

decreased by-18.61%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@chakra-ui/utils@1.0.0-rc.6(transitive)

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Addedframer-motion@2.9.5(transitive)

• + Addedframesync@4.1.0(transitive)

• + Addedhey-listen@1.0.8(transitive)

• + Addedpopmotion@9.0.0-rc.20(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedstyle-value-types@3.2.0(transitive)

• + Addedtslib@1.14.1(transitive)

• - Removed@types/react-transition-group@4.4.0

• - Removedreact-transition-group@4.4.1

• - Removed@babel/code-frame@7.26.2(transitive)

• - Removed@babel/generator@7.26.2(transitive)

• - Removed@babel/helper-module-imports@7.25.9(transitive)

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/parser@7.26.2(transitive)

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@babel/template@7.25.9(transitive)

• - Removed@babel/traverse@7.25.9(transitive)

• - Removed@babel/types@7.26.0(transitive)

• - Removed@chakra-ui/anatomy@2.2.2(transitive)

• - Removed@chakra-ui/color-mode@2.2.0(transitive)

• - Removed@chakra-ui/object-utils@2.1.0(transitive)

• - Removed@chakra-ui/react-use-safe-layout-effect@2.1.0(transitive)

• - Removed@chakra-ui/react-utils@2.0.12(transitive)

• - Removed@chakra-ui/shared-utils@2.0.5(transitive)

• - Removed@chakra-ui/styled-system@2.9.2(transitive)

• - Removed@chakra-ui/system@2.6.2(transitive)

• - Removed@chakra-ui/theme@3.3.1(transitive)

• - Removed@chakra-ui/theme-tools@2.1.2(transitive)

• - Removed@chakra-ui/theme-utils@2.0.21(transitive)

• - Removed@chakra-ui/utils@1.0.0-rc.52.0.15(transitive)

• - Removed@emotion/babel-plugin@11.12.0(transitive)

• - Removed@emotion/hash@0.9.2(transitive)

• - Removed@emotion/is-prop-valid@1.3.1(transitive)

• - Removed@emotion/memoize@0.9.0(transitive)

• - Removed@emotion/serialize@1.3.2(transitive)

• - Removed@emotion/styled@11.13.0(transitive)

• - Removed@emotion/unitless@0.10.0(transitive)

• - Removed@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• - Removed@emotion/utils@1.4.1(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@types/lodash.merge@4.6.6(transitive)

• - Removed@types/lodash.mergewith@4.6.7(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@18.3.12(transitive)

• - Removed@types/react-transition-group@4.4.0(transitive)

• - Removedbabel-plugin-macros@3.1.0(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedcolor2k@2.0.3(transitive)

• - Removedconvert-source-map@1.9.0(transitive)

• - Removedcosmiconfig@7.1.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removeddom-helpers@5.2.1(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedescape-string-regexp@4.0.0(transitive)

• - Removedfind-root@1.1.0(transitive)

• - Removedframesync@6.1.2(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedimport-fresh@3.3.0(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.15.1(transitive)

• - Removedjsesc@3.0.2(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedlodash.merge@4.6.2(transitive)

• - Removedmemoize-one@5.1.1(transitive)

• - Removedms@2.1.3(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-fast-compare@3.2.2(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-transition-group@4.4.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedresolve@1.22.8(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedstylis@4.2.0(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removedtslib@2.4.0(transitive)

• - Removedyaml@1.10.2(transitive)

• Updated@chakra-ui/utils@1.0.0-rc.6