@react-md/transition - npm Package Compare versions

Comparing version 2.0.0-alpha.14 to 2.0.0-alpha.15

CHANGELOG.md

@@ -1,12 +0,72 @@
-# v2.0.0-alpha.0
+# v2.0.0
 
-## New Features / Breaking Changes
+## New Behavior and Features
 
-- It is now possible to have the Collapse component be rendered while collapsed
-  and have a min height value set.
-- It is now possible to create more advanced collapsible elements with the new
-  children render function API.
-- No longer uses `react-motion` to animate the height changes with the spring
-  animation.
-- removed the old Scss selectors for the different types since selectors are
-  mostly considered bad practice now as mixins should be used instead.
+- The `Collapse` component will have a static transition time instead of being
+  based on the size of the content
+- The `Collapse` component now supports a `minHeight` to create a partially
+  collapsed element
+- Added two additional components for default transitions: `CrossFade` and
+  `ScaleTransition`
+- Added hook versions for all the collapse and cross fade transitions:
+  - `useCollase`
+  - `useCrossFade`
+- Created hook versions of the `react-transition-group` package to handle custom
+  transitions with `useTransition` and `useCSSTransition`
+- Created a hook to be used with the `react-transition-group` package to fix an
+  element to another element within the page. (Similar to the `Layover`
+  component)
+
+## Breaking Changes
+
+- The `Collapse` component no longer uses [react-motion] and spring
+  configuration.
+- Removed the transition placeholders and the transition class names:
+  - `%md-transition--sharp`
+  - `%md-transition--standard`
+  - `%md-transition--acceleration`
+  - `%md-transition--deceleration`
+  - `.md-transition--sharp`
+  - `.md-transition--standard`
+  - `.md-transition--acceleration`
+  - `.md-transition--deceleration`
+
+### New SCSS Variables, Functions, and Mixins
+
+- `$rmd-transition-enter-time: 0.2s !default` - The duration for an enter
+  transition used for most transitions
+- `$rmd-transition-leave-time: 0.15s !default` - The duration for a leave
+  transition used for most transitions
+- `$rmd-collapse-enter-transition-func: deceleration !default` - A customizable
+  variable for the collapse transition that can be one of: `sharp`, `standard`,
+  `acceleration`, or `deceleration`
+- `$rmd-collapse-leave-transition-func: acceleration !default` - A customizable
+  variable for the collapse transition that can be one of: `sharp`, `standard`,
+  `acceleration`, or `deceleration`
+- `$rmd-transition-scale-enter-duration: $rmd-transition-enter-time !default` -
+  The transition duration for the new scaling transition's entering phase.
+- `$rmd-transition-scale-leave-duration: $rmd-transition-leave-time !default` -
+  The transition duration for the new scaling transition leaving phase.
+- `$rmd-transition-scale-y-enter-duration: $rmd-transition-enter-time !default` -
+  The transition duration for the new vertical scaling transition's entering
+  phase.
+- `$rmd-transition-scale-y-leave-duration: $rmd-transition-leave-time !default` -
+  The transition duration for the new vertical scaling transition leaving phase.
+- `@mixin rmd-transition` - applies the correct transition/animation timing
+  function from one of the supported transition types.
+- `@mixin rmd-transition-shadow-transition` - adds a performant version of a
+  `box-shadow` transition using a pseudo element and opacity changes.
+
+### Renamed SCSS Variables, Functions, and Mixins
+
+- `$md-transition-sharp` was renamed to `$rmd-transition-sharp`
+- `$md-transition-standard` was renamed to `$rmd-transition-standard`
+- `$md-transition-acceleration` was renamed to `$rmd-transition-acceleration`
+- `$md-transition-deceleration` was renamed to `$rmd-transition-deceleration`
+- `$md-transition-time` was renamed to `$rmd-transition-standard-time`
+- `$md-cross-fade-transition-time` was renamed to
+  `$rmd-cross-fade-transition-duration`
+- `$md-cross-fade-distance` was renamed to `$rmd-cross-fade-translate-distance`
+  and changed the default value from `16px` to `-1rem`
+
+[react-motion]: https://www.npmjs.com/package/react-motion

dist/scssVariables.d.ts

@@ -6,4 +6,4 @@ declare const _default: {
     "rmd-transition-deceleration": string;
-    "rmd-transition-enter-time": string;
-    "rmd-transition-leave-time": string;
+    "rmd-transition-enter-duration": string;
+    "rmd-transition-leave-duration": string;
     "rmd-transition-standard-time": string;
@@ -18,3 +18,3 @@ "rmd-collapse-enter-transition-func": string;
     "rmd-transition-scale-y-leave-duration": string;
-    "rmd-transition-theme-values": {
+    "rmd-transitions": {
         sharp: string;
@@ -21,0 +21,0 @@ standard: string;

dist/scssVariables.js

@@ -9,4 +9,4 @@ "use strict";
     "rmd-transition-deceleration": "cubic-bezier(0, 0, 0.2, 1)",
-    "rmd-transition-enter-time": "0.2s",
-    "rmd-transition-leave-time": "0.15s",
+    "rmd-transition-enter-duration": "0.2s",
+    "rmd-transition-leave-duration": "0.15s",
     "rmd-transition-standard-time": "0.15s",
@@ -21,3 +21,3 @@ "rmd-collapse-enter-transition-func": "deceleration",
     "rmd-transition-scale-y-leave-duration": "0.15s",
-    "rmd-transition-theme-values": {
+    "rmd-transitions": {
         sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
@@ -24,0 +24,0 @@ standard: "cubic-bezier(0.4, 0, 0.2, 1)",

es/Collapse.js

@@ -12,34 +12,43 @@ var __assign = (this && this.__assign) || function () {
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { isValidElement } from "react";
-import { useCollapseTransition, useCollapsibleElement, } from "./useCollapseTransition";
-function Collapse(_a) {
-    var children = _a.children, _b = _a.minHeight, minHeight = _b === void 0 ? 0 : _b, _c = _a.minPaddingBottom, minPaddingBottom = _c === void 0 ? 0 : _c, _d = _a.minPaddingTop, minPaddingTop = _d === void 0 ? 0 : _d, _e = _a.enterDuration, enterDuration = _e === void 0 ? 250 : _e, _f = _a.leaveDuration, leaveDuration = _f === void 0 ? 200 : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, props = __rest(_a, ["children", "minHeight", "minPaddingBottom", "minPaddingTop", "enterDuration", "leaveDuration", "disabled"]);
-    var config = __assign(__assign({}, props), { minHeight: minHeight,
+import { Children, cloneElement } from "react";
+import cn from "classnames";
+import { DEFAULT_COLLAPSE_MIN_HEIGHT, DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM, DEFAULT_COLLAPSE_MIN_PADDING_TOP, COLLAPSE_TIMEOUT, } from "./constants";
+import useCollapse from "./useCollapse";
+/**
+ * The `Collapse` component is used to transition a child element in and
+ * out of view by animating it's `max-height`. This means that the child must
+ * either be an HTMLElement or a component that forwards the `ref` to an
+ * HTMLElement and applies the `style`, `className`, and `hidden` props to an
+ * HTMLElement.
+ *
+ * Note: This component **should not be used for `position: absolute` or
+ * `position: fixed` elements**. Instead, the `ScaleTransition` or just a simple
+ * `transform` transition should be used instead. Animating `max-height`,
+ * `padding-top`, and `padding-bottom` is much less performant than `transform`
+ * transition since it forces DOM repaints.
+ */
+export default function Collapse(_a) {
+    var children = _a.children, collapsed = _a.collapsed, className = _a.className, _b = _a.appear, appear = _b === void 0 ? false : _b, _c = _a.timeout, timeout = _c === void 0 ? COLLAPSE_TIMEOUT : _c, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, _d = _a.minHeight, minHeight = _d === void 0 ? DEFAULT_COLLAPSE_MIN_HEIGHT : _d, _e = _a.minPaddingTop, minPaddingTop = _e === void 0 ? DEFAULT_COLLAPSE_MIN_PADDING_TOP : _e, _f = _a.minPaddingBottom, minPaddingBottom = _f === void 0 ? DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM : _f, _g = _a.temporary, temporary = _g === void 0 ? minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0 : _g;
+    var _h = useCollapse(collapsed, {
+        appear: appear,
+        temporary: temporary,
+        className: className,
+        timeout: timeout,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: onExited,
+        minHeight: minHeight,
         minPaddingBottom: minPaddingBottom,
         minPaddingTop: minPaddingTop,
-        enterDuration: enterDuration,
-        leaveDuration: leaveDuration,
-        disabled: disabled });
-    // it's ok to dynamically do hooks here since I want the app to crash if the
-    // dev is swapping between a clonable child and a children renderer function
-    /* eslint-disable react-hooks/rules-of-hooks */
-    if (isValidElement(children)) {
-        return useCollapsibleElement(children, config);
-    }
-    var _h = useCollapseTransition(config), rendered = _h.rendered, transitionProps = _h.transitionProps;
+    }), rendered = _h[0], transitionProps = _h[1];
     if (!rendered) {
         return null;
     }
-    return children(transitionProps);
+    var child = Children.only(children);
+    var transitionStyle = transitionProps.style;
+    var childStyle = child.props.style;
+    return cloneElement(child, __assign(__assign({}, transitionProps), { style: transitionStyle ? __assign(__assign({}, transitionStyle), childStyle) : childStyle, className: cn(transitionProps.className, child.props.className) }));
 }
@@ -59,10 +68,19 @@ if (process.env.NODE_ENV !== "production") {
             ]),
-            enterDuration: PropTypes.number,
-            leaveDuration: PropTypes.number,
-            isEmptyCollapsed: PropTypes.bool,
+            timeout: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.shape({
+                    appear: PropTypes.number,
+                    enter: PropTypes.number,
+                    exit: PropTypes.number,
+                }),
+            ]),
+            temporary: PropTypes.bool,
             children: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
                 .isRequired,
-            onExpanded: PropTypes.func,
-            onCollapsed: PropTypes.func,
-            disabled: PropTypes.bool,
+            onEnter: PropTypes.func,
+            onEntering: PropTypes.func,
+            onEntered: PropTypes.func,
+            onExit: PropTypes.func,
+            onExiting: PropTypes.func,
+            onExited: PropTypes.func,
         };
@@ -72,3 +90,2 @@ }
 }
-export default Collapse;
 //# sourceMappingURL=Collapse.js.map

es/CrossFade.js

@@ -23,27 +23,74 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from "react";
-import CSSTransition from "react-transition-group/CSSTransition";
-var DEFAULT_CROSS_FADE_TIMEOUT = {
-    enter: 300,
-    exit: 0,
-};
-var DEFAULT_CROSS_FADE_CLASSNAMES = {
-    appear: "rmd-cross-fade",
-    appearActive: "rmd-cross-fade--active",
-    enter: "rmd-cross-fade",
-    enterActive: "rmd-cross-fade--active",
-};
+import React, { Children, cloneElement, forwardRef, isValidElement, } from "react";
+import cn from "classnames";
+import { applyRef } from "@react-md/utils";
+import useCrossFade from "./useCrossFade";
 /**
- * This is a very simpel wrapper for the CSSTransition component from
- * `react-transition-group` this is used to do a cross fade animation.
+ * The `Collapse` is really just a convenience wrapper for the `useCrossFade`
+ * hook that triggers the transition by cloning the `ref` and `className` into
+ * the `children` of this component.
  *
- * By default, this animation will occur immediately when the component
- * mounts, but you can set the `in` prop manually to dynamically trigger
- * the animation instead.
+ * This transition will only fire on mount and when the `appear` prop is set to
+ * `true`, so the way to trigger new animations is by changing the `key` for
+ * this component so it re-mounts. However it is generally not recommended to
+ * fire this transition on first page load especially when dealing with server
+ * side rendering. A simple way to work around this is have the `CrossFade` near
+ * the root of the app and just disable the `appear` prop until the first
+ * render.
+ *
+ * If you want more fine-grain control over the transition, it is recommended to
+ * use the `useCrossFade` hook instead.
  */
-function CrossFade(_a) {
-    var _b = _a.in, propIn = _b === void 0 ? true : _b, _c = _a.appear, appear = _c === void 0 ? true : _c, _d = _a.timeout, timeout = _d === void 0 ? DEFAULT_CROSS_FADE_TIMEOUT : _d, _e = _a.classNames, classNames = _e === void 0 ? DEFAULT_CROSS_FADE_CLASSNAMES : _e, _f = _a.mountOnEnter, mountOnEnter = _f === void 0 ? true : _f, _g = _a.unmountOnExit, unmountOnExit = _g === void 0 ? true : _g, children = _a.children, props = __rest(_a, ["in", "appear", "timeout", "classNames", "mountOnEnter", "unmountOnExit", "children"]);
-    return (React.createElement(CSSTransition, __assign({}, props, { in: propIn, appear: appear, timeout: timeout, classNames: classNames, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }), children));
+function CrossFade(_a, forwardedRef) {
+    var _b = _a.wrap, wrap = _b === void 0 ? false : _b, _c = _a.appear, appear = _c === void 0 ? true : _c, _d = _a.temporary, temporary = _d === void 0 ? false : _d, propClassName = _a.className, _e = _a.transitionIn, transitionIn = _e === void 0 ? true : _e, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, props = __rest(_a, ["wrap", "appear", "temporary", "className", "transitionIn", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
+    var _f = useCrossFade({
+        appear: appear,
+        className: propClassName,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: onExited,
+        temporary: temporary,
+        transitionIn: transitionIn,
+    }), rendered = _f[0], _g = _f[1], ref = _g.ref, className = _g.className;
+    if (!rendered) {
+        return null;
+    }
+    if (!wrap && isValidElement(children)) {
+        var child = Children.only(children);
+        return cloneElement(child, {
+            ref: ref,
+            className: cn(child.props.className, className),
+        });
+    }
+    return (React.createElement("div", __assign({}, props, { className: className, ref: function (instance) {
+            applyRef(instance, forwardedRef);
+            ref.current = instance;
+        } }), children));
 }
-export default CrossFade;
+var ForwardedCrossFade = forwardRef(CrossFade);
+if (process.env.NODE_ENV !== "production") {
+    try {
+        var PropTypes = require("prop-types");
+        ForwardedCrossFade.propTypes = {
+            wrap: PropTypes.bool,
+            appear: PropTypes.bool,
+            temporary: PropTypes.bool,
+            style: PropTypes.object,
+            className: PropTypes.string,
+            transitionIn: PropTypes.bool,
+            onEnter: PropTypes.func,
+            onEntering: PropTypes.func,
+            onEntered: PropTypes.func,
+            onExit: PropTypes.func,
+            onExiting: PropTypes.func,
+            onExited: PropTypes.func,
+            children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
+        };
+    }
+    catch (e) { }
+}
+export default ForwardedCrossFade;
 //# sourceMappingURL=CrossFade.js.map

es/index.js

@@ -7,5 +7,9 @@ export { default as Collapse } from "./Collapse";
 export * from "./ScaleTransition";
-export { useCollapseTransition, useCollapsibleElement, } from "./useCollapseTransition";
 export { default as useFixedPositioning } from "./useFixedPositioning";
 export * from "./useFixedPositioning";
+export * from "./constants";
+export { default as useCollapse } from "./useCollapse";
+export { default as useCrossFade } from "./useCrossFade";
+export { default as useTransition, } from "./useTransition";
+export { default as useCSSTransition, } from "./useCSSTransition";
 //# sourceMappingURL=index.js.map

es/ScaleTransition.js

@@ -26,24 +26,3 @@ var __assign = (this && this.__assign) || function () {
 import { ConditionalPortal, } from "@react-md/portal";
-export var SCALE_CLASSNAMES = {
-    appear: "rmd-transition--scale-enter",
-    appearActive: "rmd-transition--scale-enter-active",
-    enter: "rmd-transition--scale-enter",
-    enterActive: "rmd-transition--scale-enter-active",
-    enterDone: "",
-    exit: "rmd-transition--scale-exit",
-    exitActive: "rmd-transition--scale-exit-active",
-};
-export var SCALE_Y_CLASSNAMES = {
-    appear: "rmd-transition--scale-y-enter",
-    appearActive: "rmd-transition--scale-y-enter-active",
-    enter: "rmd-transition--scale-y-enter",
-    enterActive: "rmd-transition--scale-y-enter-active",
-    enterDone: "",
-    exit: "rmd-transition--scale-y-exit",
-    exitActive: "rmd-transition--scale-y-exit-active",
-};
-export var SCALE_TIMEOUT = {
-    enter: 200,
-    exit: 150,
-};
+import { SCALE_CLASSNAMES, SCALE_TIMEOUT, SCALE_Y_CLASSNAMES, } from "./constants";
 /**
@@ -61,3 +40,3 @@ * This `ScaleTransition` component is used to trigger an animation that
 function ScaleTransition(_a) {
-    var visible = _a.visible, children = _a.children, propClassNames = _a.classNames, vertical = _a.vertical, _b = _a.timeout, timeout = _b === void 0 ? SCALE_TIMEOUT : _b, _c = _a.portal, portal = _c === void 0 ? false : _c, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, _d = _a.mountOnEnter, mountOnEnter = _d === void 0 ? true : _d, _e = _a.unmountOnExit, unmountOnExit = _e === void 0 ? true : _e, props = __rest(_a, ["visible", "children", "classNames", "vertical", "timeout", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit"]);
+    var visible = _a.visible, children = _a.children, propClassNames = _a.classNames, _b = _a.vertical, vertical = _b === void 0 ? false : _b, _c = _a.timeout, timeout = _c === void 0 ? SCALE_TIMEOUT : _c, _d = _a.portal, portal = _d === void 0 ? false : _d, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, _e = _a.mountOnEnter, mountOnEnter = _e === void 0 ? true : _e, _f = _a.unmountOnExit, unmountOnExit = _f === void 0 ? true : _f, props = __rest(_a, ["visible", "children", "classNames", "vertical", "timeout", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit"]);
     var classNames = propClassNames;
@@ -64,0 +43,0 @@ if (!classNames) {

es/useFixedPositioning.js

@@ -12,4 +12,4 @@ var __assign = (this && this.__assign) || function () {
 };
-import { useCallback, useRef, useState, useEffect } from "react";
-import { getFixedPosition, useResizeListener, useScrollListener, getViewportSize, } from "@react-md/utils";
+import { useCallback, useEffect, useState } from "react";
+import { getFixedPosition, getViewportSize, useResizeListener, useScrollListener, } from "@react-md/utils";
 function getFixedTo(fixedTo) {
@@ -45,5 +45,8 @@ if (!fixedTo) {
     var _m = useState(), style = _m[0], setStyle = _m[1];
-    var element = useRef(null);
-    var updateStyle = useCallback(function () {
-        var node = element.current;
+    var _o = useState(null), element = _o[0], setElement = _o[1];
+    var updateStyle = useCallback(function (nextElement) {
+        var node = nextElement !== null && nextElement !== void 0 ? nextElement : element;
+        if (typeof nextElement !== "undefined") {
+            setElement(nextElement);
+        }
         if (!node) {
@@ -71,3 +74,4 @@ return;
         var actual = { x: actualX, y: actualY };
-        if (onPositionChange && (anchor.x !== actual.x || anchor.y !== actual.y)) {
+        if (onPositionChange &&
+            (anchor.x !== actual.x || anchor.y !== actual.y)) {
             onPositionChange(anchor, actual);
@@ -93,7 +97,4 @@ }
         yMargin,
+        element,
     ]);
-    var updateNodeAndStyle = useCallback(function (node) {
-        element.current = node;
-        updateStyle();
-    }, [updateStyle]);
     var handleEnter = useCallback(function (node, appear) {
@@ -103,4 +104,4 @@ if (onEnter) {
         }
-        updateNodeAndStyle(node);
-    }, [onEnter, updateNodeAndStyle]);
+        updateStyle(node);
+    }, [onEnter, updateStyle]);
     var handleEntering = useCallback(function (node, appear) {
@@ -110,4 +111,4 @@ if (onEntering) {
         }
-        updateNodeAndStyle(node);
-    }, [onEntering, updateNodeAndStyle]);
+        updateStyle(node);
+    }, [onEntering, updateStyle]);
     var handleEntered = useCallback(function (node, appear) {
@@ -117,4 +118,4 @@ if (onEntered) {
         }
-        updateNodeAndStyle(node);
-    }, [onEntered, updateNodeAndStyle]);
+        updateStyle(node);
+    }, [onEntered, updateStyle]);
     var handleExited = useCallback(function (node) {
@@ -124,6 +125,6 @@ if (onExited) {
         }
-        element.current = null;
+        setElement(null);
     }, [onExited]);
     useResizeListener({
-        enabled: !!element.current,
+        enabled: !!element,
         onResize: function (event) {
@@ -137,20 +138,20 @@ if (onResize) {
     useScrollListener({
-        enabled: !!element.current,
+        enabled: !!element,
         onScroll: function (event) {
             if (onScroll) {
                 var container = getFixedTo(fixedTo);
-                var rect = container && container.getBoundingClientRect();
+                var containerRect = container && container.getBoundingClientRect();
+                var elementRect = element && element.getBoundingClientRect();
                 var visible = false;
-                if (rect) {
+                if (containerRect && elementRect) {
                     var vh = getViewportSize("height");
                     var vw = getViewportSize("width");
-                    var top_1 = rect.top, left = rect.left;
-                    visible =
-                        top_1 >= vhMargin &&
-                            top_1 <= vh - vhMargin &&
-                            left >= vwMargin &&
-                            left <= vw - vwMargin;
+                    var top_1 = Math.min(elementRect.top, containerRect.top);
+                    var right = Math.max(elementRect.right, containerRect.right);
+                    var bottom = Math.max(elementRect.bottom, containerRect.bottom);
+                    var left = Math.min(elementRect.left, containerRect.left);
+                    visible = bottom >= 0 && top_1 <= vh && right >= 0 && left <= vw;
                 }
                 onScroll(event, {
-                    element: element.current,
+                    element: element,
                     fixedTo: container,
@@ -157,0 +158,0 @@ visible: visible,

lib/Collapse.js

@@ -13,36 +13,49 @@ "use strict";
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var useCollapseTransition_1 = require("./useCollapseTransition");
+var classnames_1 = __importDefault(require("classnames"));
+var constants_1 = require("./constants");
+var useCollapse_1 = __importDefault(require("./useCollapse"));
+/**
+ * The `Collapse` component is used to transition a child element in and
+ * out of view by animating it's `max-height`. This means that the child must
+ * either be an HTMLElement or a component that forwards the `ref` to an
+ * HTMLElement and applies the `style`, `className`, and `hidden` props to an
+ * HTMLElement.
+ *
+ * Note: This component **should not be used for `position: absolute` or
+ * `position: fixed` elements**. Instead, the `ScaleTransition` or just a simple
+ * `transform` transition should be used instead. Animating `max-height`,
+ * `padding-top`, and `padding-bottom` is much less performant than `transform`
+ * transition since it forces DOM repaints.
+ */
 function Collapse(_a) {
-    var children = _a.children, _b = _a.minHeight, minHeight = _b === void 0 ? 0 : _b, _c = _a.minPaddingBottom, minPaddingBottom = _c === void 0 ? 0 : _c, _d = _a.minPaddingTop, minPaddingTop = _d === void 0 ? 0 : _d, _e = _a.enterDuration, enterDuration = _e === void 0 ? 250 : _e, _f = _a.leaveDuration, leaveDuration = _f === void 0 ? 200 : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, props = __rest(_a, ["children", "minHeight", "minPaddingBottom", "minPaddingTop", "enterDuration", "leaveDuration", "disabled"]);
-    var config = __assign(__assign({}, props), { minHeight: minHeight,
+    var children = _a.children, collapsed = _a.collapsed, className = _a.className, _b = _a.appear, appear = _b === void 0 ? false : _b, _c = _a.timeout, timeout = _c === void 0 ? constants_1.COLLAPSE_TIMEOUT : _c, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, _d = _a.minHeight, minHeight = _d === void 0 ? constants_1.DEFAULT_COLLAPSE_MIN_HEIGHT : _d, _e = _a.minPaddingTop, minPaddingTop = _e === void 0 ? constants_1.DEFAULT_COLLAPSE_MIN_PADDING_TOP : _e, _f = _a.minPaddingBottom, minPaddingBottom = _f === void 0 ? constants_1.DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM : _f, _g = _a.temporary, temporary = _g === void 0 ? minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0 : _g;
+    var _h = useCollapse_1.default(collapsed, {
+        appear: appear,
+        temporary: temporary,
+        className: className,
+        timeout: timeout,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: onExited,
+        minHeight: minHeight,
         minPaddingBottom: minPaddingBottom,
         minPaddingTop: minPaddingTop,
-        enterDuration: enterDuration,
-        leaveDuration: leaveDuration,
-        disabled: disabled });
-    // it's ok to dynamically do hooks here since I want the app to crash if the
-    // dev is swapping between a clonable child and a children renderer function
-    /* eslint-disable react-hooks/rules-of-hooks */
-    if (react_1.isValidElement(children)) {
-        return useCollapseTransition_1.useCollapsibleElement(children, config);
-    }
-    var _h = useCollapseTransition_1.useCollapseTransition(config), rendered = _h.rendered, transitionProps = _h.transitionProps;
+    }), rendered = _h[0], transitionProps = _h[1];
     if (!rendered) {
         return null;
     }
-    return children(transitionProps);
+    var child = react_1.Children.only(children);
+    var transitionStyle = transitionProps.style;
+    var childStyle = child.props.style;
+    return react_1.cloneElement(child, __assign(__assign({}, transitionProps), { style: transitionStyle ? __assign(__assign({}, transitionStyle), childStyle) : childStyle, className: classnames_1.default(transitionProps.className, child.props.className) }));
 }
+exports.default = Collapse;
 if (process.env.NODE_ENV !== "production") {
@@ -61,10 +74,19 @@ try {
             ]),
-            enterDuration: PropTypes.number,
-            leaveDuration: PropTypes.number,
-            isEmptyCollapsed: PropTypes.bool,
+            timeout: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.shape({
+                    appear: PropTypes.number,
+                    enter: PropTypes.number,
+                    exit: PropTypes.number,
+                }),
+            ]),
+            temporary: PropTypes.bool,
             children: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
                 .isRequired,
-            onExpanded: PropTypes.func,
-            onCollapsed: PropTypes.func,
-            disabled: PropTypes.bool,
+            onEnter: PropTypes.func,
+            onEntering: PropTypes.func,
+            onEntered: PropTypes.func,
+            onExit: PropTypes.func,
+            onExiting: PropTypes.func,
+            onExited: PropTypes.func,
         };
@@ -74,3 +96,2 @@ }
 }
-exports.default = Collapse;
 //# sourceMappingURL=Collapse.js.map

lib/CrossFade.js

@@ -24,2 +24,9 @@ "use strict";
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -29,27 +36,74 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
-var DEFAULT_CROSS_FADE_TIMEOUT = {
-    enter: 300,
-    exit: 0,
-};
-var DEFAULT_CROSS_FADE_CLASSNAMES = {
-    appear: "rmd-cross-fade",
-    appearActive: "rmd-cross-fade--active",
-    enter: "rmd-cross-fade",
-    enterActive: "rmd-cross-fade--active",
-};
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("@react-md/utils");
+var useCrossFade_1 = __importDefault(require("./useCrossFade"));
 /**
- * This is a very simpel wrapper for the CSSTransition component from
- * `react-transition-group` this is used to do a cross fade animation.
+ * The `Collapse` is really just a convenience wrapper for the `useCrossFade`
+ * hook that triggers the transition by cloning the `ref` and `className` into
+ * the `children` of this component.
  *
- * By default, this animation will occur immediately when the component
- * mounts, but you can set the `in` prop manually to dynamically trigger
- * the animation instead.
+ * This transition will only fire on mount and when the `appear` prop is set to
+ * `true`, so the way to trigger new animations is by changing the `key` for
+ * this component so it re-mounts. However it is generally not recommended to
+ * fire this transition on first page load especially when dealing with server
+ * side rendering. A simple way to work around this is have the `CrossFade` near
+ * the root of the app and just disable the `appear` prop until the first
+ * render.
+ *
+ * If you want more fine-grain control over the transition, it is recommended to
+ * use the `useCrossFade` hook instead.
  */
-function CrossFade(_a) {
-    var _b = _a.in, propIn = _b === void 0 ? true : _b, _c = _a.appear, appear = _c === void 0 ? true : _c, _d = _a.timeout, timeout = _d === void 0 ? DEFAULT_CROSS_FADE_TIMEOUT : _d, _e = _a.classNames, classNames = _e === void 0 ? DEFAULT_CROSS_FADE_CLASSNAMES : _e, _f = _a.mountOnEnter, mountOnEnter = _f === void 0 ? true : _f, _g = _a.unmountOnExit, unmountOnExit = _g === void 0 ? true : _g, children = _a.children, props = __rest(_a, ["in", "appear", "timeout", "classNames", "mountOnEnter", "unmountOnExit", "children"]);
-    return (react_1.default.createElement(CSSTransition_1.default, __assign({}, props, { in: propIn, appear: appear, timeout: timeout, classNames: classNames, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }), children));
+function CrossFade(_a, forwardedRef) {
+    var _b = _a.wrap, wrap = _b === void 0 ? false : _b, _c = _a.appear, appear = _c === void 0 ? true : _c, _d = _a.temporary, temporary = _d === void 0 ? false : _d, propClassName = _a.className, _e = _a.transitionIn, transitionIn = _e === void 0 ? true : _e, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, props = __rest(_a, ["wrap", "appear", "temporary", "className", "transitionIn", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
+    var _f = useCrossFade_1.default({
+        appear: appear,
+        className: propClassName,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: onExited,
+        temporary: temporary,
+        transitionIn: transitionIn,
+    }), rendered = _f[0], _g = _f[1], ref = _g.ref, className = _g.className;
+    if (!rendered) {
+        return null;
+    }
+    if (!wrap && react_1.isValidElement(children)) {
+        var child = react_1.Children.only(children);
+        return react_1.cloneElement(child, {
+            ref: ref,
+            className: classnames_1.default(child.props.className, className),
+        });
+    }
+    return (react_1.default.createElement("div", __assign({}, props, { className: className, ref: function (instance) {
+            utils_1.applyRef(instance, forwardedRef);
+            ref.current = instance;
+        } }), children));
 }
-exports.default = CrossFade;
+var ForwardedCrossFade = react_1.forwardRef(CrossFade);
+if (process.env.NODE_ENV !== "production") {
+    try {
+        var PropTypes = require("prop-types");
+        ForwardedCrossFade.propTypes = {
+            wrap: PropTypes.bool,
+            appear: PropTypes.bool,
+            temporary: PropTypes.bool,
+            style: PropTypes.object,
+            className: PropTypes.string,
+            transitionIn: PropTypes.bool,
+            onEnter: PropTypes.func,
+            onEntering: PropTypes.func,
+            onEntered: PropTypes.func,
+            onExit: PropTypes.func,
+            onExiting: PropTypes.func,
+            onExited: PropTypes.func,
+            children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
+        };
+    }
+    catch (e) { }
+}
+exports.default = ForwardedCrossFade;
 //# sourceMappingURL=CrossFade.js.map

lib/index.js

@@ -15,8 +15,14 @@ "use strict";
 __export(require("./ScaleTransition"));
-var useCollapseTransition_1 = require("./useCollapseTransition");
-exports.useCollapseTransition = useCollapseTransition_1.useCollapseTransition;
-exports.useCollapsibleElement = useCollapseTransition_1.useCollapsibleElement;
 var useFixedPositioning_1 = require("./useFixedPositioning");
 exports.useFixedPositioning = useFixedPositioning_1.default;
 __export(require("./useFixedPositioning"));
+__export(require("./constants"));
+var useCollapse_1 = require("./useCollapse");
+exports.useCollapse = useCollapse_1.default;
+var useCrossFade_1 = require("./useCrossFade");
+exports.useCrossFade = useCrossFade_1.default;
+var useTransition_1 = require("./useTransition");
+exports.useTransition = useTransition_1.default;
+var useCSSTransition_1 = require("./useCSSTransition");
+exports.useCSSTransition = useCSSTransition_1.default;
 //# sourceMappingURL=index.js.map

lib/ScaleTransition.js

@@ -31,24 +31,3 @@ "use strict";
 var portal_1 = require("@react-md/portal");
-exports.SCALE_CLASSNAMES = {
-    appear: "rmd-transition--scale-enter",
-    appearActive: "rmd-transition--scale-enter-active",
-    enter: "rmd-transition--scale-enter",
-    enterActive: "rmd-transition--scale-enter-active",
-    enterDone: "",
-    exit: "rmd-transition--scale-exit",
-    exitActive: "rmd-transition--scale-exit-active",
-};
-exports.SCALE_Y_CLASSNAMES = {
-    appear: "rmd-transition--scale-y-enter",
-    appearActive: "rmd-transition--scale-y-enter-active",
-    enter: "rmd-transition--scale-y-enter",
-    enterActive: "rmd-transition--scale-y-enter-active",
-    enterDone: "",
-    exit: "rmd-transition--scale-y-exit",
-    exitActive: "rmd-transition--scale-y-exit-active",
-};
-exports.SCALE_TIMEOUT = {
-    enter: 200,
-    exit: 150,
-};
+var constants_1 = require("./constants");
 /**
@@ -66,6 +45,6 @@ * This `ScaleTransition` component is used to trigger an animation that
 function ScaleTransition(_a) {
-    var visible = _a.visible, children = _a.children, propClassNames = _a.classNames, vertical = _a.vertical, _b = _a.timeout, timeout = _b === void 0 ? exports.SCALE_TIMEOUT : _b, _c = _a.portal, portal = _c === void 0 ? false : _c, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, _d = _a.mountOnEnter, mountOnEnter = _d === void 0 ? true : _d, _e = _a.unmountOnExit, unmountOnExit = _e === void 0 ? true : _e, props = __rest(_a, ["visible", "children", "classNames", "vertical", "timeout", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit"]);
+    var visible = _a.visible, children = _a.children, propClassNames = _a.classNames, _b = _a.vertical, vertical = _b === void 0 ? false : _b, _c = _a.timeout, timeout = _c === void 0 ? constants_1.SCALE_TIMEOUT : _c, _d = _a.portal, portal = _d === void 0 ? false : _d, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, _e = _a.mountOnEnter, mountOnEnter = _e === void 0 ? true : _e, _f = _a.unmountOnExit, unmountOnExit = _f === void 0 ? true : _f, props = __rest(_a, ["visible", "children", "classNames", "vertical", "timeout", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit"]);
     var classNames = propClassNames;
     if (!classNames) {
-        classNames = vertical ? exports.SCALE_Y_CLASSNAMES : exports.SCALE_CLASSNAMES;
+        classNames = vertical ? constants_1.SCALE_Y_CLASSNAMES : constants_1.SCALE_CLASSNAMES;
     }
@@ -72,0 +51,0 @@ return (react_1.default.createElement(portal_1.ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },

lib/useFixedPositioning.js

@@ -46,5 +46,8 @@ "use strict";
     var _m = react_1.useState(), style = _m[0], setStyle = _m[1];
-    var element = react_1.useRef(null);
-    var updateStyle = react_1.useCallback(function () {
-        var node = element.current;
+    var _o = react_1.useState(null), element = _o[0], setElement = _o[1];
+    var updateStyle = react_1.useCallback(function (nextElement) {
+        var node = nextElement !== null && nextElement !== void 0 ? nextElement : element;
+        if (typeof nextElement !== "undefined") {
+            setElement(nextElement);
+        }
         if (!node) {
@@ -72,3 +75,4 @@ return;
         var actual = { x: actualX, y: actualY };
-        if (onPositionChange && (anchor.x !== actual.x || anchor.y !== actual.y)) {
+        if (onPositionChange &&
+            (anchor.x !== actual.x || anchor.y !== actual.y)) {
             onPositionChange(anchor, actual);
@@ -94,7 +98,4 @@ }
         yMargin,
+        element,
     ]);
-    var updateNodeAndStyle = react_1.useCallback(function (node) {
-        element.current = node;
-        updateStyle();
-    }, [updateStyle]);
     var handleEnter = react_1.useCallback(function (node, appear) {
@@ -104,4 +105,4 @@ if (onEnter) {
         }
-        updateNodeAndStyle(node);
-    }, [onEnter, updateNodeAndStyle]);
+        updateStyle(node);
+    }, [onEnter, updateStyle]);
     var handleEntering = react_1.useCallback(function (node, appear) {
@@ -111,4 +112,4 @@ if (onEntering) {
         }
-        updateNodeAndStyle(node);
-    }, [onEntering, updateNodeAndStyle]);
+        updateStyle(node);
+    }, [onEntering, updateStyle]);
     var handleEntered = react_1.useCallback(function (node, appear) {
@@ -118,4 +119,4 @@ if (onEntered) {
         }
-        updateNodeAndStyle(node);
-    }, [onEntered, updateNodeAndStyle]);
+        updateStyle(node);
+    }, [onEntered, updateStyle]);
     var handleExited = react_1.useCallback(function (node) {
@@ -125,6 +126,6 @@ if (onExited) {
         }
-        element.current = null;
+        setElement(null);
     }, [onExited]);
     utils_1.useResizeListener({
-        enabled: !!element.current,
+        enabled: !!element,
         onResize: function (event) {
@@ -138,20 +139,20 @@ if (onResize) {
     utils_1.useScrollListener({
-        enabled: !!element.current,
+        enabled: !!element,
         onScroll: function (event) {
             if (onScroll) {
                 var container = getFixedTo(fixedTo);
-                var rect = container && container.getBoundingClientRect();
+                var containerRect = container && container.getBoundingClientRect();
+                var elementRect = element && element.getBoundingClientRect();
                 var visible = false;
-                if (rect) {
+                if (containerRect && elementRect) {
                     var vh = utils_1.getViewportSize("height");
                     var vw = utils_1.getViewportSize("width");
-                    var top_1 = rect.top, left = rect.left;
-                    visible =
-                        top_1 >= vhMargin &&
-                            top_1 <= vh - vhMargin &&
-                            left >= vwMargin &&
-                            left <= vw - vwMargin;
+                    var top_1 = Math.min(elementRect.top, containerRect.top);
+                    var right = Math.max(elementRect.right, containerRect.right);
+                    var bottom = Math.max(elementRect.bottom, containerRect.bottom);
+                    var left = Math.min(elementRect.left, containerRect.left);
+                    visible = bottom >= 0 && top_1 <= vh && right >= 0 && left <= vw;
                 }
                 onScroll(event, {
-                    element: element.current,
+                    element: element,
                     fixedTo: container,
@@ -158,0 +159,0 @@ visible: visible,

package.json

 {
   "name": "@react-md/transition",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.15",
   "description": "A package for working with react-md to use some simple transitions.",
@@ -39,6 +39,6 @@ "scripts": {
   "dependencies": {
-    "@react-md/portal": "^2.0.0-alpha.13",
-    "@react-md/theme": "^2.0.0-alpha.14",
-    "@react-md/utils": "^2.0.0-alpha.14",
-    "@types/react-transition-group": "^4.2.3",
+    "@react-md/portal": "^2.0.0-alpha.15",
+    "@react-md/theme": "^2.0.0-alpha.15",
+    "@react-md/utils": "^2.0.0-alpha.15",
+    "@types/react-transition-group": "^4.2.4",
     "classnames": "^2.2.6",
@@ -56,3 +56,3 @@ "react-transition-group": "^4.3.0"
   },
-  "gitHead": "2c22440705bce3fb3cfc5876011e7b3df8be1c03"
+  "gitHead": "c20671308497530c59f6563eafd1914b55122b8c"
 }

README.md

 # @react-md/transition
 
-Create CSS transitions using the provided transition timing functions for fluid
-animations. Also includes a `Collapse` component to animate height changes.
+Create simple CSS transitions using the provided transition hooks and components
+utilizing the default transition timing functions. This package also provides a
+collapse transition, scaling transition, vertical only scaling transition, and a
+new page transition named cross fade.
 
-## Installation
+Provided components and hooks:
 
-```sh
-$ npm install --save @react-md/transition
-```
+- `Collapse` or `useCollapse` - transition an element in and out of view based
+  on the height of the element
+- `CrossFade` or `useCrossFade` - a transition generally used for a full page
+  transition that fades and slightly moves a child component into view
+- `ScaleTransition` - transition an element in and out of view with a `scale`
+  transform that can be updated to just be `scaleY`
+- `useTransition` - a hook implementation of the `Transition` component from
+  `react-transition-group`
+- `useCSSTransition` -a hook implementation of the `CSSTransition` component
+  from `react-transition-group`
+- `useFixedPositioning` - hooks into the `CSSTransition` component from
+  `react-transition-group` to fix an element to another element within the
+  viewport
 
@@ -18,1 +30,50 @@ The `rmd-transition-shadow-transition` mixin allows you to "performantly"
 are triggered. The code below will help explain this part a bit more.
+
+## Installation
+
+```sh
+$ npm install --save @react-md/transition
+```
+
+It is also recommended to install the following packages as they work
+hand-in-hand with this package:
+
+```sh
+$ npm install --save @react-md/theme \
+    @react-md/utils
+```
+
+<!-- DOCS_REMOVE -->
+
+## Documentation
+
+You should check out the
+[full documentation](https://react-md.dev/packages/transition/demos) for live
+examples and more customization information, but an example usage is shown
+below.
+
+<!-- DOCS_REMOVE_END -->
+
+## Usage
+
+```tsx
+import React, { useState } from "react";
+import { render } from "react-dom";
+import { Button } from "@react-md/button";
+import { Collapse } from "@react-md/transition";
+
+const App = () => {
+  const [collapsed, setCollapsed] = useState(true);
+
+  return (
+    <>
+      <Button onClick={() => setCollapsed(!collapsed)}>Toggle</Button>
+      <Collapse collapsed={collapsed}>
+        <div>This is my collapsible content!</div>
+      </Collapse>
+    </>
+  );
+};
+
+render(<App />, document.getElementById("root"));
+```

src/index.ts

@@ -10,8 +10,17 @@ export { default as Collapse } from "./Collapse";
 
-export {
-  useCollapseTransition,
-  useCollapsibleElement,
-} from "./useCollapseTransition";
 export { default as useFixedPositioning } from "./useFixedPositioning";
 export * from "./useFixedPositioning";
+export * from "./constants";
 export * from "./types";
+
+export { default as useCollapse } from "./useCollapse";
+export { default as useCrossFade, CrossFadeOptions } from "./useCrossFade";
+export {
+  default as useTransition,
+  TransitionReturnValue,
+  TransitionState,
+} from "./useTransition";
+export {
+  default as useCSSTransition,
+  CSSTransitionReturnValue,
+} from "./useCSSTransition";

src/scssVariables.ts

@@ -7,4 +7,4 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-transition-deceleration": "cubic-bezier(0, 0, 0.2, 1)",
-  "rmd-transition-enter-time": "0.2s",
-  "rmd-transition-leave-time": "0.15s",
+  "rmd-transition-enter-duration": "0.2s",
+  "rmd-transition-leave-duration": "0.15s",
   "rmd-transition-standard-time": "0.15s",
@@ -19,3 +19,3 @@ "rmd-collapse-enter-transition-func": "deceleration",
   "rmd-transition-scale-y-leave-duration": "0.15s",
-  "rmd-transition-theme-values": {
+  "rmd-transitions": {
     sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
@@ -22,0 +22,0 @@ standard: "cubic-bezier(0.4, 0, 0.2, 1)",

src/types.ts

@@ -1,6 +0,16 @@
-import { TransitionProps } from "react-transition-group/Transition";
-import { CSSTransitionProps } from "react-transition-group/CSSTransition";
+import { CSSProperties, MutableRefObject } from "react";
+import {
+  CSSTransitionClassNames,
+  CSSTransitionProps,
+} from "react-transition-group/CSSTransition";
+import {
+  TransitionActions,
+  TransitionProps,
+} from "react-transition-group/Transition";
 
-export type TransitionTimeout = TransitionProps["timeout"];
+// Convenience Types since I reuse the react-transition-group package a decent
+// amount in other `react-md` packages
 
+export type TransitionTimeout = Required<TransitionProps>["timeout"];
+
 // Don't want the children stuff when overriding/reusing in react-md components
@@ -10,5 +20,2 @@ // as well as the [prop: string]: any, so pick the reusable ones
   | "in"
-  | "appear"
-  | "enter"
-  | "exit"
   | "mountOnEnter"
@@ -27,3 +34,4 @@ | "unmountOnExit"
 export interface OverridableTransitionProps
-  extends Pick<TransitionProps, TransitionKeys> {
+  extends TransitionActions,
+    Pick<TransitionProps, TransitionKeys> {
   timeout?: TransitionTimeout;
@@ -34,1 +42,305 @@ }
   Pick<CSSTransitionProps, "classNames">;
+
+// ============================================================================
+// `react-md` specific types below
+
+/**
+ * This is basically the same as the `EnterHandler` from
+ * `react-transition-group` except that this allows for the element type to be
+ * provided.
+ */
+export type EnterHandler<E extends HTMLElement = HTMLDivElement> = (
+  node: E,
+  isAppearing: boolean
+) => void;
+
+/**
+ * This is basically the same as the `ExitHandler` from `react-transition-group`
+ * except that this allows for the element type to be provided.
+ */
+export type ExitHandler<E extends HTMLElement = HTMLDivElement> = (
+  node: E
+) => void;
+
+export interface TransitionCallbacks<E extends HTMLElement = HTMLDivElement> {
+  /**
+   * An optional enter handler that can be used to determine additional
+   * transition styles if you need access to the DOM node to calculate those
+   * styles. This will also be fired for `appear` transitions.
+   *
+   * This will be fired right after the `transitionIn` is set to `true`.
+   */
+  onEnter?: EnterHandler<E>;
+
+  /**
+   * An optional entering handler that can be used to determine additional
+   * transition styles if you need access to the DOM node to calculate those
+   * styles. This will also be fired for `appear` transitions.
+   *
+   * This will be fired almost immediately after the `onEnter` callback.
+   * However, if the `repaint` option was enabled, it will ensure the DOM as
+   * been repainted before firing to help with CSS transitions.
+   */
+  onEntering?: EnterHandler<E>;
+
+  /**
+   * An optional entered handler that can be used to determine additional
+   * transition styles if you need access to the DOM node to calculate those
+   * styles. This will also be fired for `appear` transitions.
+   *
+   * This will be fired once the transition has finished.
+   */
+  onEntered?: EnterHandler<E>;
+
+  /**
+   * An optional exit handler that can be used to determine additional
+   * transition styles if you need access to the DOM node to calculate those
+   * styles.
+   *
+   * This will be fired right after the `transitionIn` is set to `false`.
+   */
+  onExit?: ExitHandler<E>;
+
+  /**
+   * An optional exit handler that can be used to determine additional
+   * transition styles if you need access to the DOM node to calculate those
+   * styles.
+   *
+   * This will be fired almost immdiately after the `onExit` callback. However,
+   * if the `repaint` option was enabled, it will ensure the DOM as been
+   * repainted before firing to help with CSS transitions.
+   */
+  onExiting?: ExitHandler<E>;
+
+  /**
+   * An optional entered handler that can be used to determine additional
+   * transition styles if you need access to the DOM node to calculate those
+   * styles. This will also be fired for `appear` transitions.
+   *
+   * This will be fired once the transition has finished.
+   *
+   * Note: If the `temporary` option was enabled, the `rendered` result will be
+   * `false` and the node actually won't exist in the DOM anymore.
+   */
+  onExited?: ExitHandler<E>;
+}
+
+/**
+ * The options availabe for the `useTransition` hook. This was once again
+ * heavily inspired by the `Transition` and `CSSTransition` components from
+ * `react-transition-group`.
+ */
+export interface TransitionOptions<E extends HTMLElement = HTMLDivElement>
+  extends TransitionCallbacks<E> {
+  /**
+   * Changing this boolean will trigger a transition between the six stagees:
+   *
+   * - `ENTER`
+   * - `ENTERING`
+   * - `ENTERED`
+   * - `EXIT`
+   * - `EXITING`
+   * - `EXITED`
+   *
+   * Changing from `false` to `true`, the stagees will change in this order:
+   * `EXITED` -> `ENTER` -> `ENTERING` -> `ENTERED`
+   *
+   * Changing from `true` to `false`, the stagees will change in this order:
+   * `ENTERED` -> `EXIT` -> `EXITING` -> `EXITED`
+   */
+  transitionIn: boolean;
+
+  /**
+   * Boolean if the transition should also be triggered immediately once the
+   * component mounts. This is generally not recommended for server side
+   * rendering/initial page load so it is set to `false` by default.
+   */
+  appear?: boolean;
+
+  /**
+   * Boolean if the component should mount and unmount based on the current
+   * `transitionIn` stage with a default value of `false`. When this is
+   * `false`, the first result (`rendered`) in the return value array will
+   * always be `true`.
+   *
+   * When this is set to `true`, the first result (`rendered`) in the return
+   * value array will be `true` only while the `transitionIn` option is `true`
+   * or the transition is still happening.
+   *
+   * Note: **Changing this option while the hook/component is mounted will not
+   * do anything**. If you want to dynamically change the component's temporary
+   * state, you will need to also change the `key` to get the component to
+   * re-mount.
+   */
+  temporary?: boolean;
+
+  /**
+   * Boolean if the transition should force a DOM repaint before triggering the
+   * next stage. Defaults to `false` since it's only really recommended for DOM
+   * and CSS transitions.
+   */
+  repaint?: boolean;
+
+  /**
+   * The transition timeout to use for each stage. Just like in
+   * `react-transition-group`, this can either be a `number` which will a static
+   * duration to use for each stage. Otherwise, this can be an object of
+   * timeouts for the `appear`, `enter`, and `exit` stages which default to `0`
+   * if omitted.
+   *
+   * Note: If any of the timeout values are set to `0`, the transition will be
+   * considered disabled and skip the `ENTERING`/`EXITING` stages.
+   *
+   * Note: If the `appear` stage is omitted in the timeout object but the
+   * `appear` option was enabled for the transition, it will instead default to
+   * the `enter` duration.
+   */
+  timeout: TransitionTimeout;
+}
+
+export interface CSSTransitionOptions<E extends HTMLElement>
+  extends Omit<TransitionOptions<E>, "repaint"> {
+  /**
+   * An optional className that should ge merged with the CSS transition class
+   * name based on the current transition stage.
+   */
+  className?: string;
+
+  /**
+   * The transition class names to apply. Unlike in `react-transition-group`, if
+   * this is a `string` instead of an object, the different states will be
+   * `--{state}` instead of `-{state}`.
+   *
+   * Example:
+   *
+   * ```ts
+   * const options = {
+   *   classNames: "scale"
+   * }
+   *
+   * // creates
+   * const classNames = {
+   *   enter: "scale--enter",
+   *   enterActive: "scale--enter-active",
+   *   exit: "scale--exit",
+   *   exitActive: "scale--exit-active",
+   * }
+   * ```
+   *
+   * ```ts
+   * const options = {
+   *   classNames: "scale"
+   *   appear: true,
+   * }
+   *
+   * // creates
+   * const classNames = {
+   *   appear: "scale--enter",
+   *   appearActive: "scale--enter-active",
+   *   enter: "scale--enter",
+   *   enterActive: "scale--enter-active",
+   *   exit: "scale--exit",
+   *   exitActive: "scale--exit-active",
+   * }
+   * ```
+   */
+  classNames: CSSTransitionClassNames | string;
+}
+
+export interface CSSTransitionProvidedProps<E extends HTMLElement> {
+  /**
+   * A ref that **must** be passed to the element that is triggering a CSS
+   * transition change. An error will be thrown if the transition starts, but
+   * the ref is still `null` or the `ref` was passed to a component instance
+   * instead of a DOM node.
+   */
+  ref: MutableRefObject<E | null>;
+
+  /**
+   * The current class name based on the provided `className` options and the
+   * state in the transition.
+   */
+  className: string | undefined;
+}
+
+export interface CollapseOptions<E extends HTMLElement>
+  extends Omit<TransitionOptions<E>, "repaint" | "transitionIn" | "timeout"> {
+  /**
+   * An optional className to merge with the current collapse transition
+   * className.
+   */
+  className?: string;
+
+  /**
+   * The timeout for the collapse transition. This will default to 250ms enter
+   * and 200ms exit.
+   */
+  timeout?: TransitionTimeout;
+
+  /**
+   * The minimum height that the collapsed element can be which defaults to `0`.
+   * This can either be a number of pixels or a string CSS height value.
+   *
+   * Setting this value to any non-zero value will allow for the element to
+   * shrink to the defined min-height, and then expand to the full height once
+   * no longer collapsed.
+   *
+   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options
+   * are all set to `0` (default), the child will be removed from the DOM while
+   * collapsed.
+   */
+  minHeight?: number | string;
+
+  /**
+   * The minimum padding-top that the collapsed element can be which defaults to
+   * `0`. This can either be a number of pixels or a string CSS `padding-top`
+   * value.
+   *
+   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options
+   * are all set to `0` (default), the child will be removed from the DOM while
+   * collapsed.
+   */
+  minPaddingTop?: number | string;
+
+  /**
+   * The minimum padding-bottom that the collapsed element can be which defaults
+   * to `0`. This can either be a number of pixels or a string CSS
+   * `padding-bottom` value.
+   *
+   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options
+   * are all set to `0` (default), the child will be removed from the DOM while
+   * collapsed.
+   */
+  minPaddingBottom?: number | string;
+}
+
+export interface CollapseTransitionProvidedProps<
+  E extends HTMLElement = HTMLDivElement
+> {
+  /**
+   * A ref that **must** be passed to the element that is triggering a CSS
+   * transition change. An error will be thrown if the transition starts, but
+   * the ref is still `null` or the `ref` was passed to a component instance
+   * instead of a DOM node.
+   */
+  ref: MutableRefObject<E | null>;
+
+  /**
+   * The `hidden` DOM attribute that will be enabled if the component is fully
+   * collapsed with no height and padding but still rendered within the DOM.
+   */
+  hidden: boolean;
+
+  /**
+   * A conditional style that will provide the required `max-height`,
+   * `padding-top`, `padding-bottom`, and `transition-duration` styles required
+   * for the collapse transition.
+   */
+  style?: CSSProperties;
+
+  /**
+   * The class name to apply that will allow for the element to transition
+   * between collapsed states.
+   */
+  className: string;
+}

src/useFixedPositioning.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, useCallback, useRef, useState, useEffect } from "react";
+import { CSSProperties, useCallback, useEffect, useState } from "react";
 import { TransitionProps } from "react-transition-group/Transition";
@@ -6,6 +6,6 @@ import {
   getFixedPosition,
+  getViewportSize,
   PositionAnchor,
   useResizeListener,
   useScrollListener,
-  getViewportSize,
 } from "@react-md/utils";
@@ -145,67 +145,70 @@
   const [style, setStyle] = useState<CSSProperties | undefined>();
+  const [element, setElement] = useState<HTMLElement | null>(null);
 
-  const element = useRef<HTMLElement | null>(null);
+  const updateStyle = useCallback(
+    (nextElement?: HTMLElement | null) => {
+      const node = nextElement ?? element;
+      if (typeof nextElement !== "undefined") {
+        setElement(nextElement);
+      }
 
-  const updateStyle = useCallback(() => {
-    const node = element.current;
-    if (!node) {
-      return;
-    }
+      if (!node) {
+        return;
+      }
 
-    const anchor = {
-      x: currentAnchor.x || "center",
-      y: currentAnchor.y || "below",
-    };
-    const overrides = typeof getOptions === "function" ? getOptions(node) : {};
-    const opts: FixedPositionOptions = {
+      const anchor = {
+        x: currentAnchor.x || "center",
+        y: currentAnchor.y || "below",
+      };
+      const overrides =
+        typeof getOptions === "function" ? getOptions(node) : {};
+      const opts: FixedPositionOptions = {
+        initialX,
+        initialY,
+        xMargin,
+        vwMargin,
+        yMargin,
+        vhMargin,
+        width,
+        transformOrigin,
+        preventOverlap,
+        disableSwapping,
+        disableVHBounds,
+        anchor,
+        container: getFixedTo(fixedTo),
+        element: node,
+        ...overrides,
+      };
+
+      const { style, actualX, actualY } = getFixedPosition(opts);
+
+      const actual = { x: actualX, y: actualY };
+      if (
+        onPositionChange &&
+        (anchor.x !== actual.x || anchor.y !== actual.y)
+      ) {
+        onPositionChange(anchor, actual);
+      }
+
+      setStyle(style);
+    },
+    [
+      currentAnchor.x,
+      currentAnchor.y,
+      disableSwapping,
+      disableVHBounds,
+      fixedTo,
+      getOptions,
       initialX,
       initialY,
+      onPositionChange,
+      preventOverlap,
+      transformOrigin,
+      vhMargin,
+      vwMargin,
+      width,
       xMargin,
-      vwMargin,
       yMargin,
-      vhMargin,
-      width,
-      transformOrigin,
-      preventOverlap,
-      disableSwapping,
-      disableVHBounds,
-      anchor,
-      container: getFixedTo(fixedTo),
-      element: node,
-      ...overrides,
-    };
-
-    const { style, actualX, actualY } = getFixedPosition(opts);
-
-    const actual = { x: actualX, y: actualY };
-    if (onPositionChange && (anchor.x !== actual.x || anchor.y !== actual.y)) {
-      onPositionChange(anchor, actual);
-    }
-
-    setStyle(style);
-  }, [
-    currentAnchor.x,
-    currentAnchor.y,
-    disableSwapping,
-    disableVHBounds,
-    fixedTo,
-    getOptions,
-    initialX,
-    initialY,
-    onPositionChange,
-    preventOverlap,
-    transformOrigin,
-    vhMargin,
-    vwMargin,
-    width,
-    xMargin,
-    yMargin,
-  ]);
-
-  const updateNodeAndStyle = useCallback(
-    (node: HTMLElement) => {
-      element.current = node;
-      updateStyle();
-    },
-    [updateStyle]
+      element,
+    ]
   );
@@ -219,5 +222,5 @@
 
-      updateNodeAndStyle(node);
+      updateStyle(node);
     },
-    [onEnter, updateNodeAndStyle]
+    [onEnter, updateStyle]
   );
@@ -231,5 +234,5 @@
 
-      updateNodeAndStyle(node);
+      updateStyle(node);
     },
-    [onEntering, updateNodeAndStyle]
+    [onEntering, updateStyle]
   );
@@ -243,5 +246,5 @@
 
-      updateNodeAndStyle(node);
+      updateStyle(node);
     },
-    [onEntered, updateNodeAndStyle]
+    [onEntered, updateStyle]
   );
@@ -255,3 +258,3 @@
 
-      element.current = null;
+      setElement(null);
     },
@@ -262,4 +265,4 @@ [onExited]
   useResizeListener({
-    enabled: !!element.current,
-    onResize: event => {
+    enabled: !!element,
+    onResize: (event) => {
       if (onResize) {
@@ -274,22 +277,22 @@ onResize(event);
   useScrollListener({
-    enabled: !!element.current,
-    onScroll: event => {
+    enabled: !!element,
+    onScroll: (event) => {
       if (onScroll) {
         const container = getFixedTo(fixedTo);
-        const rect = container && container.getBoundingClientRect();
+        const containerRect = container && container.getBoundingClientRect();
+        const elementRect = element && element.getBoundingClientRect();
         let visible = false;
-        if (rect) {
+        if (containerRect && elementRect) {
           const vh = getViewportSize("height");
           const vw = getViewportSize("width");
-          const { top, left } = rect;
+          const top = Math.min(elementRect.top, containerRect.top);
+          const right = Math.max(elementRect.right, containerRect.right);
+          const bottom = Math.max(elementRect.bottom, containerRect.bottom);
+          const left = Math.min(elementRect.left, containerRect.left);
 
-          visible =
-            top >= vhMargin &&
-            top <= vh - vhMargin &&
-            left >= vwMargin &&
-            left <= vw - vwMargin;
+          visible = bottom >= 0 && top <= vh && right >= 0 && left <= vw;
         }
 
         onScroll(event, {
-          element: element.current,
+          element,
           fixedTo: container,
@@ -296,0 +299,0 @@ visible,

types/Collapse.d.ts

@@ -1,28 +0,31 @@
-import { CSSProperties, ReactElement, RefObject } from "react";
-import { CollapseOptions } from "./useCollapseTransition";
-export interface CollapseChildrenProps {
+import { ReactElement } from "react";
+import { CollapseOptions } from "./types";
+export interface CollapseProps extends CollapseOptions<HTMLElement> {
     /**
-     * A conditional style that should be applied to the child element. This will
-     * be provided if one or more of the `minHeight`, `minPaddingBottom`, or
-     * `minPaddingTop` props are greater than 0 OR the `isEmptyCollapsed` prop is
-     * set to `false` OR there are prop styles defined.
+     * Boolean if the the child is currently collapsed.
      */
-    style?: CSSProperties;
+    collapsed: boolean;
     /**
-     * The class name to apply that will allow for the child element to transition
-     * between collapsed states.
+     * The child element to trigger an animation for. This child **must**
+     * either be an HTMLElement or a component that:
+     *
+     * - forwards the ref to a DOM element
+     * - applies the `style`, `className`, and `hidden` attributes correctly.
      */
-    className: string;
-    /**
-     * A ref that **must** be applied to the child element. The value provided to
-     * this has to be an html element so that the dynamic max-height style can be
-     * calculated.
-     */
-    ref: RefObject<HTMLElement>;
+    children: ReactElement;
 }
-export declare type CollapseChildrenRenderer = (props: CollapseChildrenProps) => ReactElement;
-export interface CollapseProps extends CollapseOptions {
-    children: ReactElement<HTMLElement> | CollapseChildrenRenderer;
-}
-declare function Collapse({ children, minHeight, minPaddingBottom, minPaddingTop, enterDuration, leaveDuration, disabled, ...props }: CollapseProps): ReactElement | null;
+/**
+ * The `Collapse` component is used to transition a child element in and
+ * out of view by animating it's `max-height`. This means that the child must
+ * either be an HTMLElement or a component that forwards the `ref` to an
+ * HTMLElement and applies the `style`, `className`, and `hidden` props to an
+ * HTMLElement.
+ *
+ * Note: This component **should not be used for `position: absolute` or
+ * `position: fixed` elements**. Instead, the `ScaleTransition` or just a simple
+ * `transform` transition should be used instead. Animating `max-height`,
+ * `padding-top`, and `padding-bottom` is much less performant than `transform`
+ * transition since it forces DOM repaints.
+ */
+declare function Collapse({ children, collapsed, className, appear, timeout, onEnter, onEntering, onEntered, onExit, onExiting, onExited, minHeight, minPaddingTop, minPaddingBottom, temporary, }: CollapseProps): ReactElement | null;
 declare namespace Collapse {
@@ -36,11 +39,13 @@ var propTypes: {
         minPaddingBottom: any;
-        enterDuration: any;
-        leaveDuration: any;
-        isEmptyCollapsed: any;
+        timeout: any;
+        temporary: any;
         children: any;
-        onExpanded: any;
-        onCollapsed: any;
-        disabled: any;
+        onEnter: any;
+        onEntering: any;
+        onEntered: any;
+        onExit: any;
+        onExiting: any;
+        onExited: any;
     };
 }
 export default Collapse;

types/CrossFade.d.ts

@@ -1,13 +0,32 @@
-import { ReactElement } from "react";
-import { CSSTransitionProps } from "react-transition-group/CSSTransition";
-export declare type CrossFadeProps = Partial<CSSTransitionProps>;
-/**
- * This is a very simpel wrapper for the CSSTransition component from
- * `react-transition-group` this is used to do a cross fade animation.
- *
- * By default, this animation will occur immediately when the component
- * mounts, but you can set the `in` prop manually to dynamically trigger
- * the animation instead.
- */
-declare function CrossFade({ in: propIn, appear, timeout, classNames, mountOnEnter, unmountOnExit, children, ...props }: CrossFadeProps): ReactElement;
-export default CrossFade;
+import React, { HTMLAttributes } from "react";
+import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { TransitionTimeout } from "./types";
+import { CrossFadeOptions } from "./useCrossFade";
+export interface CrossFadeProps extends CrossFadeOptions<HTMLDivElement>, HTMLAttributes<HTMLDivElement> {
+    /**
+     * The default behavior for the `CrossFade` is to clone a `ref` and
+     * `className` into the `children` if it is a single element to keep unneeded
+     * `<div>`s from being rendered in the DOM just for transition purposes.
+     * However, this means that the `children` must be a single element that
+     * forwards the `ref` correctly to a DOM node which might be a hassle.
+     *
+     * Enabling this prop will just update the `CrossFade` to wrap the `children`
+     * in a `<div>` and apply that transition to that instead.
+     *
+     * Note: The `HTMLAttributes` for the `HTMLDivElement` other than the
+     * `className` are only valid for this component when this prop is set to
+     * `true`.
+     */
+    wrap?: boolean;
+    /**
+     * The timeout to use for the cross fade animation. This should not be
+     * changed unless the `classNames` prop is also changed.
+     */
+    timeout?: TransitionTimeout;
+    /**
+     * The transition class names to use for the cross fade animation.
+     */
+    classNames?: CSSTransitionClassNames;
+}
+declare const ForwardedCrossFade: React.ForwardRefExoticComponent<CrossFadeProps & React.RefAttributes<HTMLDivElement>>;
+export default ForwardedCrossFade;

types/index.d.ts

@@ -7,5 +7,9 @@ export { default as Collapse } from "./Collapse";
 export * from "./ScaleTransition";
-export { useCollapseTransition, useCollapsibleElement, } from "./useCollapseTransition";
 export { default as useFixedPositioning } from "./useFixedPositioning";
 export * from "./useFixedPositioning";
+export * from "./constants";
 export * from "./types";
+export { default as useCollapse } from "./useCollapse";
+export { default as useCrossFade, CrossFadeOptions } from "./useCrossFade";
+export { default as useTransition, TransitionReturnValue, TransitionState, } from "./useTransition";
+export { default as useCSSTransition, CSSTransitionReturnValue, } from "./useCSSTransition";

types/ScaleTransition.d.ts

 import { ReactElement, ReactNode } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
 import { RenderConditionalPortalProps } from "@react-md/portal";
-import { OverridableCSSTransitionProps, TransitionTimeout } from "./types";
-export declare const SCALE_CLASSNAMES: CSSTransitionClassNames;
-export declare const SCALE_Y_CLASSNAMES: CSSTransitionClassNames;
-export declare const SCALE_TIMEOUT: TransitionTimeout;
+import { OverridableCSSTransitionProps } from "./types";
 export interface ScaleTransitionProps extends OverridableCSSTransitionProps, RenderConditionalPortalProps {
@@ -9,0 +5,0 @@ /**

types/types.d.ts

@@ -1,9 +0,275 @@
-import { TransitionProps } from "react-transition-group/Transition";
-import { CSSTransitionProps } from "react-transition-group/CSSTransition";
-export declare type TransitionTimeout = TransitionProps["timeout"];
-declare type TransitionKeys = "in" | "appear" | "enter" | "exit" | "mountOnEnter" | "unmountOnExit" | "onEnter" | "onEntering" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited";
-export interface OverridableTransitionProps extends Pick<TransitionProps, TransitionKeys> {
+import { CSSProperties, MutableRefObject } from "react";
+import { CSSTransitionClassNames, CSSTransitionProps } from "react-transition-group/CSSTransition";
+import { TransitionActions, TransitionProps } from "react-transition-group/Transition";
+export declare type TransitionTimeout = Required<TransitionProps>["timeout"];
+declare type TransitionKeys = "in" | "mountOnEnter" | "unmountOnExit" | "onEnter" | "onEntering" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited";
+export interface OverridableTransitionProps extends TransitionActions, Pick<TransitionProps, TransitionKeys> {
     timeout?: TransitionTimeout;
 }
 export declare type OverridableCSSTransitionProps = OverridableTransitionProps & Pick<CSSTransitionProps, "classNames">;
+/**
+ * This is basically the same as the `EnterHandler` from
+ * `react-transition-group` except that this allows for the element type to be
+ * provided.
+ */
+export declare type EnterHandler<E extends HTMLElement = HTMLDivElement> = (node: E, isAppearing: boolean) => void;
+/**
+ * This is basically the same as the `ExitHandler` from `react-transition-group`
+ * except that this allows for the element type to be provided.
+ */
+export declare type ExitHandler<E extends HTMLElement = HTMLDivElement> = (node: E) => void;
+export interface TransitionCallbacks<E extends HTMLElement = HTMLDivElement> {
+    /**
+     * An optional enter handler that can be used to determine additional
+     * transition styles if you need access to the DOM node to calculate those
+     * styles. This will also be fired for `appear` transitions.
+     *
+     * This will be fired right after the `transitionIn` is set to `true`.
+     */
+    onEnter?: EnterHandler<E>;
+    /**
+     * An optional entering handler that can be used to determine additional
+     * transition styles if you need access to the DOM node to calculate those
+     * styles. This will also be fired for `appear` transitions.
+     *
+     * This will be fired almost immediately after the `onEnter` callback.
+     * However, if the `repaint` option was enabled, it will ensure the DOM as
+     * been repainted before firing to help with CSS transitions.
+     */
+    onEntering?: EnterHandler<E>;
+    /**
+     * An optional entered handler that can be used to determine additional
+     * transition styles if you need access to the DOM node to calculate those
+     * styles. This will also be fired for `appear` transitions.
+     *
+     * This will be fired once the transition has finished.
+     */
+    onEntered?: EnterHandler<E>;
+    /**
+     * An optional exit handler that can be used to determine additional
+     * transition styles if you need access to the DOM node to calculate those
+     * styles.
+     *
+     * This will be fired right after the `transitionIn` is set to `false`.
+     */
+    onExit?: ExitHandler<E>;
+    /**
+     * An optional exit handler that can be used to determine additional
+     * transition styles if you need access to the DOM node to calculate those
+     * styles.
+     *
+     * This will be fired almost immdiately after the `onExit` callback. However,
+     * if the `repaint` option was enabled, it will ensure the DOM as been
+     * repainted before firing to help with CSS transitions.
+     */
+    onExiting?: ExitHandler<E>;
+    /**
+     * An optional entered handler that can be used to determine additional
+     * transition styles if you need access to the DOM node to calculate those
+     * styles. This will also be fired for `appear` transitions.
+     *
+     * This will be fired once the transition has finished.
+     *
+     * Note: If the `temporary` option was enabled, the `rendered` result will be
+     * `false` and the node actually won't exist in the DOM anymore.
+     */
+    onExited?: ExitHandler<E>;
+}
+/**
+ * The options availabe for the `useTransition` hook. This was once again
+ * heavily inspired by the `Transition` and `CSSTransition` components from
+ * `react-transition-group`.
+ */
+export interface TransitionOptions<E extends HTMLElement = HTMLDivElement> extends TransitionCallbacks<E> {
+    /**
+     * Changing this boolean will trigger a transition between the six stagees:
+     *
+     * - `ENTER`
+     * - `ENTERING`
+     * - `ENTERED`
+     * - `EXIT`
+     * - `EXITING`
+     * - `EXITED`
+     *
+     * Changing from `false` to `true`, the stagees will change in this order:
+     * `EXITED` -> `ENTER` -> `ENTERING` -> `ENTERED`
+     *
+     * Changing from `true` to `false`, the stagees will change in this order:
+     * `ENTERED` -> `EXIT` -> `EXITING` -> `EXITED`
+     */
+    transitionIn: boolean;
+    /**
+     * Boolean if the transition should also be triggered immediately once the
+     * component mounts. This is generally not recommended for server side
+     * rendering/initial page load so it is set to `false` by default.
+     */
+    appear?: boolean;
+    /**
+     * Boolean if the component should mount and unmount based on the current
+     * `transitionIn` stage with a default value of `false`. When this is
+     * `false`, the first result (`rendered`) in the return value array will
+     * always be `true`.
+     *
+     * When this is set to `true`, the first result (`rendered`) in the return
+     * value array will be `true` only while the `transitionIn` option is `true`
+     * or the transition is still happening.
+     *
+     * Note: **Changing this option while the hook/component is mounted will not
+     * do anything**. If you want to dynamically change the component's temporary
+     * state, you will need to also change the `key` to get the component to
+     * re-mount.
+     */
+    temporary?: boolean;
+    /**
+     * Boolean if the transition should force a DOM repaint before triggering the
+     * next stage. Defaults to `false` since it's only really recommended for DOM
+     * and CSS transitions.
+     */
+    repaint?: boolean;
+    /**
+     * The transition timeout to use for each stage. Just like in
+     * `react-transition-group`, this can either be a `number` which will a static
+     * duration to use for each stage. Otherwise, this can be an object of
+     * timeouts for the `appear`, `enter`, and `exit` stages which default to `0`
+     * if omitted.
+     *
+     * Note: If any of the timeout values are set to `0`, the transition will be
+     * considered disabled and skip the `ENTERING`/`EXITING` stages.
+     *
+     * Note: If the `appear` stage is omitted in the timeout object but the
+     * `appear` option was enabled for the transition, it will instead default to
+     * the `enter` duration.
+     */
+    timeout: TransitionTimeout;
+}
+export interface CSSTransitionOptions<E extends HTMLElement> extends Omit<TransitionOptions<E>, "repaint"> {
+    /**
+     * An optional className that should ge merged with the CSS transition class
+     * name based on the current transition stage.
+     */
+    className?: string;
+    /**
+     * The transition class names to apply. Unlike in `react-transition-group`, if
+     * this is a `string` instead of an object, the different states will be
+     * `--{state}` instead of `-{state}`.
+     *
+     * Example:
+     *
+     * ```ts
+     * const options = {
+     *   classNames: "scale"
+     * }
+     *
+     * // creates
+     * const classNames = {
+     *   enter: "scale--enter",
+     *   enterActive: "scale--enter-active",
+     *   exit: "scale--exit",
+     *   exitActive: "scale--exit-active",
+     * }
+     * ```
+     *
+     * ```ts
+     * const options = {
+     *   classNames: "scale"
+     *   appear: true,
+     * }
+     *
+     * // creates
+     * const classNames = {
+     *   appear: "scale--enter",
+     *   appearActive: "scale--enter-active",
+     *   enter: "scale--enter",
+     *   enterActive: "scale--enter-active",
+     *   exit: "scale--exit",
+     *   exitActive: "scale--exit-active",
+     * }
+     * ```
+     */
+    classNames: CSSTransitionClassNames | string;
+}
+export interface CSSTransitionProvidedProps<E extends HTMLElement> {
+    /**
+     * A ref that **must** be passed to the element that is triggering a CSS
+     * transition change. An error will be thrown if the transition starts, but
+     * the ref is still `null` or the `ref` was passed to a component instance
+     * instead of a DOM node.
+     */
+    ref: MutableRefObject<E | null>;
+    /**
+     * The current class name based on the provided `className` options and the
+     * state in the transition.
+     */
+    className: string | undefined;
+}
+export interface CollapseOptions<E extends HTMLElement> extends Omit<TransitionOptions<E>, "repaint" | "transitionIn" | "timeout"> {
+    /**
+     * An optional className to merge with the current collapse transition
+     * className.
+     */
+    className?: string;
+    /**
+     * The timeout for the collapse transition. This will default to 250ms enter
+     * and 200ms exit.
+     */
+    timeout?: TransitionTimeout;
+    /**
+     * The minimum height that the collapsed element can be which defaults to `0`.
+     * This can either be a number of pixels or a string CSS height value.
+     *
+     * Setting this value to any non-zero value will allow for the element to
+     * shrink to the defined min-height, and then expand to the full height once
+     * no longer collapsed.
+     *
+     * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options
+     * are all set to `0` (default), the child will be removed from the DOM while
+     * collapsed.
+     */
+    minHeight?: number | string;
+    /**
+     * The minimum padding-top that the collapsed element can be which defaults to
+     * `0`. This can either be a number of pixels or a string CSS `padding-top`
+     * value.
+     *
+     * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options
+     * are all set to `0` (default), the child will be removed from the DOM while
+     * collapsed.
+     */
+    minPaddingTop?: number | string;
+    /**
+     * The minimum padding-bottom that the collapsed element can be which defaults
+     * to `0`. This can either be a number of pixels or a string CSS
+     * `padding-bottom` value.
+     *
+     * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options
+     * are all set to `0` (default), the child will be removed from the DOM while
+     * collapsed.
+     */
+    minPaddingBottom?: number | string;
+}
+export interface CollapseTransitionProvidedProps<E extends HTMLElement = HTMLDivElement> {
+    /**
+     * A ref that **must** be passed to the element that is triggering a CSS
+     * transition change. An error will be thrown if the transition starts, but
+     * the ref is still `null` or the `ref` was passed to a component instance
+     * instead of a DOM node.
+     */
+    ref: MutableRefObject<E | null>;
+    /**
+     * The `hidden` DOM attribute that will be enabled if the component is fully
+     * collapsed with no height and padding but still rendered within the DOM.
+     */
+    hidden: boolean;
+    /**
+     * A conditional style that will provide the required `max-height`,
+     * `padding-top`, `padding-bottom`, and `transition-duration` styles required
+     * for the collapse transition.
+     */
+    style?: CSSProperties;
+    /**
+     * The class name to apply that will allow for the element to transition
+     * between collapsed states.
+     */
+    className: string;
+}
 export {};

New alerts

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

Improved metrics

Number of package files

150

increased by123.88%

Lines of code

7202

increased by128.13%

Number of lines in readme file

79

increased by338.89%

Worsened metrics

Total package byte prevSize

363207

decreased by-31.42%

Number of low supply chain risk alerts

6

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@react-md/portal@^2.0.0-alpha.15

• Updated@react-md/theme@^2.0.0-alpha.15

• Updated@react-md/utils@^2.0.0-alpha.15

• Updated@types/react-transition-group@^4.2.4