@react-md/transition - npm Package Compare versions

Comparing version 2.0.0-alpha.12 to 2.0.0-alpha.13

es/Collapse.js

		@@ -0,1 +1,12 @@
		var __assign = (this && this.__assign) \|\| function () {
		__assign = Object.assign \|\| function(t) {
		for (var s, i = 1, n = arguments.length; i < n; i++) {
		s = arguments[i];
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
		t[p] = s[p];
		}
		return t;
		};
		return __assign.apply(this, arguments);
		};
		var __rest = (this && this.__rest) \|\| function (s, e) {
		@@ -12,6 +23,12 @@ var t = {};
		};
		import { isValidElement, } from "react";
		import { isValidElement } from "react";
		import { useCollapseTransition, useCollapsibleElement, } from "./useCollapseTransition";
		var Collapse = function (providedProps) {
		var _a = providedProps, children = _a.children, props = __rest(_a, ["children"]);
		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,
		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
		@@ -21,5 +38,5 @@ // dev is swapping between a clonable child and a children renderer function
		if (isValidElement(children)) {
		return useCollapsibleElement(children, props);
		return useCollapsibleElement(children, config);
		}
		var _b = useCollapseTransition(props), rendered = _b.rendered, transitionProps = _b.transitionProps;
		var _h = useCollapseTransition(config), rendered = _h.rendered, transitionProps = _h.transitionProps;
		if (!rendered) {
		@@ -29,20 +46,6 @@ return null;
		return children(transitionProps);
		};
		var defaultProps = {
		minHeight: 0,
		minPaddingBottom: 0,
		minPaddingTop: 0,
		enterDuration: 250,
		leaveDuration: 200,
		disabled: false,
		};
		Collapse.defaultProps = defaultProps;
		}
		if (process.env.NODE_ENV !== "production") {
		Collapse.displayName = "Collapse";
		var PropTypes = null;
		try {
		PropTypes = require("prop-types");
		}
		catch (e) { }
		if (PropTypes) {
		var PropTypes = require("prop-types");
		Collapse.propTypes = {
		@@ -68,4 +71,5 @@ style: PropTypes.object,
		}
		catch (e) { }
		}
		export default Collapse;
		//# sourceMappingURL=Collapse.js.map

es/CrossFade.js

		@@ -25,2 +25,12 @@ var __assign = (this && this.__assign) \|\| function () {
		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",
		};
		/**
		@@ -34,21 +44,7 @@ * This is a very simpel wrapper for the CSSTransition component from
		*/
		var CrossFade = function (providedProps) {
		var _a = providedProps, children = _a.children, props = __rest(_a, ["children"]);
		return React.createElement(CSSTransition, __assign({}, props), children);
		};
		var defaultProps = {
		in: true,
		appear: true,
		timeout: { enter: 300, exit: 0 },
		classNames: {
		appear: "rmd-cross-fade",
		appearActive: "rmd-cross-fade--active",
		enter: "rmd-cross-fade",
		enterActive: "rmd-cross-fade--active",
		},
		mountOnEnter: true,
		unmountOnExit: true,
		};
		CrossFade.defaultProps = defaultProps;
		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));
		}
		export default CrossFade;
		//# sourceMappingURL=CrossFade.js.map

es/ScaleTransition.js

		@@ -49,12 +49,14 @@ var __assign = (this && this.__assign) \|\| function () {
		/**
		* This `ScaleTransition` component is used to trigger an animation that switches between an
		* opacity of `0` and `1` and using a `transform: scale(0)` to `transform: scale(1)`. It is
		* recommended to also manually apply a `transform-origin` style or use the `useFixedPositioning`
		* hook to generate for you so that the animation starts from a specific point.
		* This `ScaleTransition` component is used to trigger an animation that
		* switches between an opacity of `0` and `1` and using a `transform: scale(0)`
		* to `transform: scale(1)`. It is recommended to also manually apply a
		* `transform-origin` style or use the `useFixedPositioning` hook to generate
		* for you so that the animation starts from a specific point.
		*
		* Since the default scale animation is X and Y, you can enable the `vertical` prop which will
		* update the transition to use `transform: scaleY(0)` to `transform: scaleY(1)` instead.
		* Since the default scale animation is X and Y, you can enable the `vertical`
		* prop which will update the transition to use `transform: scaleY(0)` to
		* `transform: scaleY(1)` instead.
		*/
		var ScaleTransition = function (providedProps) {
		var _a = providedProps, visible = _a.visible, children = _a.children, propClassNames = _a.classNames, vertical = _a.vertical, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, props = __rest(_a, ["visible", "children", "classNames", "vertical", "portal", "portalInto", "portalIntoId"]);
		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 classNames = propClassNames;
		@@ -65,18 +67,7 @@ if (!classNames) {
		return (React.createElement(ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
		React.createElement(CSSTransition, __assign({}, props, { in: visible, classNames: classNames }), children)));
		};
		var defaultProps = {
		portal: false,
		mountOnEnter: true,
		unmountOnExit: true,
		timeout: SCALE_TIMEOUT,
		};
		ScaleTransition.defaultProps = defaultProps;
		React.createElement(CSSTransition, __assign({}, props, { in: visible, timeout: timeout, classNames: classNames, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }), children)));
		}
		if (process.env.NODE_ENV !== "production") {
		var PropTypes = void 0;
		try {
		PropTypes = require("prop-types");
		}
		catch (e) { }
		if (PropTypes) {
		var PropTypes = require("prop-types");
		ScaleTransition.propTypes = {
		@@ -113,4 +104,5 @@ portal: PropTypes.bool,
		}
		catch (e) { }
		}
		export default ScaleTransition;
		//# sourceMappingURL=ScaleTransition.js.map

es/useCollapseTransition.js

		@@ -16,4 +16,4 @@ var __assign = (this && this.__assign) \|\| function () {
		/**
		* This is a small hook that should only be used internally for creating
		* the collapse state.
		* This is a small hook that should only be used internally for creating the
		* collapse state.
		*
		@@ -59,6 +59,6 @@ * @private
		/**
		* A small util that will find the max-height, padding-top, and padding-bottom for
		* the provided element. This is really used to be able to transition the max-height
		* value since `max-height: auto` does not transition. The only way to get transition
		* is to change max-height values manually.
		* A small util that will find the max-height, padding-top, and padding-bottom
		* for the provided element. This is really used to be able to transition the
		* max-height value since `max-height: auto` does not transition. The only way
		* to get transition is to change max-height values manually.
		*
		@@ -73,4 +73,4 @@ * @private
		maxHeight = element.scrollHeight;
		// clone the element (not deep) just to figure out it's padding without the inline
		// styles applied
		// clone the element (not deep) just to figure out it's padding without the
		// inline styles applied
		var cloned = element.cloneNode(false);
		@@ -95,4 +95,4 @@ cloned.style.padding = "";
		/**
		* A small util that will merge and create all the styles required for the current
		* transition.
		* A small util that will merge and create all the styles required for the
		* current transition.
		*
		@@ -114,10 +114,10 @@ * @private
		/**
		* Creates a collapse transition that will animate between expanded and collapsed
		* states.
		* Creates a collapse transition that will animate between expanded and
		* collapsed states.
		*
		* NOTE: The collapse transition will only work when the element's ref returns
		* a valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you must
		* use a `forwardRef` to pass the ref down to the DOM element used for sizing
		* for the correct transition styles.
		* NOTE: The collapse transition will only work when the element's ref returns a
		* valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you
		* must use a `forwardRef` to pass the ref down to the DOM element used for
		* sizing for the correct transition styles.
		*/
		@@ -214,2 +214,3 @@ export function useCollapseTransition(options) {
		ref: ref,
		hidden: collapsed && !entering && !leaving && rendered,
		},
		@@ -220,11 +221,10 @@ rendered: rendered,
		/**
		* This hook is used to inject the required collapse transition props into
		* a single HTMLElement.
		* This hook is used to inject the required collapse transition props into a
		* single HTMLElement.
		*
		* NOTE: The collapse transition will only work when the element's ref returns
		* a valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you must
		* use a `forwardRef` to pass the ref down to the DOM element used for sizing
		* for the correct transition styles.
		*
		* NOTE: The collapse transition will only work when the element's ref returns a
		* valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you
		* must use a `forwardRef` to pass the ref down to the DOM element used for
		* sizing for the correct transition styles.
		*/
		@@ -231,0 +231,0 @@ export function useCollapsibleElement(element, options) {

es/useFixedPositioning.js

		@@ -12,15 +12,4 @@ 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 { useCallback, useRef, useState } from "react";
		import { getFixedPosition, useRefCache, useResizeListener, useScrollListener, getViewportSize, } from "@react-md/utils";
		import { useCallback, useRef, useState, useEffect } from "react";
		import { getFixedPosition, useResizeListener, useScrollListener, getViewportSize, } from "@react-md/utils";
		function getFixedTo(fixedTo) {
		@@ -54,6 +43,4 @@ if (!fixedTo) {
		export default function useFixedPositioning(_a) {
		var onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onResize = _a.onResize, onScroll = _a.onScroll, remainingOptions = __rest(_a, ["onEnter", "onEntering", "onEntered", "onExited", "fixedTo", "getOptions", "onResize", "onScroll"]);
		var _b = useState(), style = _b[0], setStyle = _b[1];
		var handlers = useRefCache({ onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExited: onExited });
		var options = useRefCache(__assign({ fixedTo: fixedTo, getOptions: getOptions }, remainingOptions));
		var onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onResize = _a.onResize, onScroll = _a.onScroll, _b = _a.anchor, currentAnchor = _b === void 0 ? {} : _b, initialX = _a.initialX, initialY = _a.initialY, _c = _a.xMargin, xMargin = _c === void 0 ? 0 : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? 16 : _d, _e = _a.yMargin, yMargin = _e === void 0 ? 0 : _e, _f = _a.vhMargin, vhMargin = _f === void 0 ? 16 : _f, _g = _a.width, width = _g === void 0 ? "auto" : _g, onPositionChange = _a.onPositionChange, _h = _a.transformOrigin, transformOrigin = _h === void 0 ? false : _h, _j = _a.preventOverlap, preventOverlap = _j === void 0 ? false : _j, _k = _a.disableSwapping, disableSwapping = _k === void 0 ? false : _k, _l = _a.disableVHBounds, disableVHBounds = _l === void 0 ? false : _l;
		var _m = useState(), style = _m[0], setStyle = _m[1];
		var element = useRef(null);
		@@ -65,3 +52,2 @@ var updateStyle = useCallback(function () {
		}
		var _a = options.current, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onPositionChange = _a.onPositionChange, _b = _a.anchor, currentAnchor = _b === void 0 ? {} : _b, remaining = __rest(_a, ["fixedTo", "getOptions", "onPositionChange", "anchor"]);
		var anchor = {
		@@ -72,4 +58,15 @@ x: currentAnchor.x \|\| "center",
		var overrides = typeof getOptions === "function" ? getOptions(node) : {};
		var opts = __assign(__assign(__assign({}, remaining), overrides), { anchor: anchor });
		var _c = getFixedPosition(__assign({ container: getFixedTo(fixedTo), element: node }, opts)), style = _c.style, actualX = _c.actualX, actualY = _c.actualY;
		var opts = __assign({ initialX: initialX,
		initialY: initialY,
		xMargin: xMargin,
		vwMargin: vwMargin,
		yMargin: yMargin,
		vhMargin: vhMargin,
		width: width,
		transformOrigin: transformOrigin,
		preventOverlap: preventOverlap,
		disableSwapping: disableSwapping,
		disableVHBounds: disableVHBounds,
		anchor: anchor, container: getFixedTo(fixedTo), element: node }, overrides);
		var _a = getFixedPosition(opts), style = _a.style, actualX = _a.actualX, actualY = _a.actualY;
		var actual = { x: actualX, y: actualY };
		@@ -80,3 +77,20 @@ if (onPositionChange && (anchor.x !== actual.x \|\| anchor.y !== actual.y)) {
		setStyle(style);
		}, [options]);
		}, [
		currentAnchor.x,
		currentAnchor.y,
		disableSwapping,
		disableVHBounds,
		fixedTo,
		getOptions,
		initialX,
		initialY,
		onPositionChange,
		preventOverlap,
		transformOrigin,
		vhMargin,
		vwMargin,
		width,
		xMargin,
		yMargin,
		]);
		var updateNodeAndStyle = useCallback(function (node) {
		@@ -87,3 +101,2 @@ element.current = node;
		var handleEnter = useCallback(function (node, appear) {
		var onEnter = handlers.current.onEnter;
		if (onEnter) {
		@@ -93,5 +106,4 @@ onEnter(node, appear);
		updateNodeAndStyle(node);
		}, [handlers, updateNodeAndStyle]);
		}, [onEnter, updateNodeAndStyle]);
		var handleEntering = useCallback(function (node, appear) {
		var onEntering = handlers.current.onEntering;
		if (onEntering) {
		@@ -101,5 +113,4 @@ onEntering(node, appear);
		updateNodeAndStyle(node);
		}, [handlers, updateNodeAndStyle]);
		}, [onEntering, updateNodeAndStyle]);
		var handleEntered = useCallback(function (node, appear) {
		var onEntered = handlers.current.onEntered;
		if (onEntered) {
		@@ -109,5 +120,4 @@ onEntered(node, appear);
		updateNodeAndStyle(node);
		}, [handlers, updateNodeAndStyle]);
		}, [onEntered, updateNodeAndStyle]);
		var handleExited = useCallback(function (node) {
		var onExited = handlers.current.onExited;
		if (onExited) {
		@@ -117,3 +127,3 @@ onExited(node);
		element.current = null;
		}, [handlers]);
		}, [onExited]);
		useResizeListener({
		@@ -136,3 +146,2 @@ enabled: !!element.current,
		if (rect) {
		var _a = remainingOptions.vhMargin, vhMargin = _a === void 0 ? 16 : _a, _b = remainingOptions.vwMargin, vwMargin = _b === void 0 ? 16 : _b;
		var vh = getViewportSize("height");
		@@ -156,2 +165,9 @@ var vw = getViewportSize("width");
		});
		useEffect(function () {
		updateStyle();
		// Need to only update when the initialX and initialY values are changed.
		// If this is triggered each time the updateStyle is changed, it causes an
		// infinite loop.
		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, [initialX, initialY]);
		return {
		@@ -158,0 +174,0 @@ style: style,

lib/Collapse.js

		"use strict";
		var __assign = (this && this.__assign) \|\| function () {
		__assign = Object.assign \|\| function(t) {
		for (var s, i = 1, n = arguments.length; i < n; i++) {
		s = arguments[i];
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
		t[p] = s[p];
		}
		return t;
		};
		return __assign.apply(this, arguments);
		};
		var __rest = (this && this.__rest) \|\| function (s, e) {
		@@ -16,4 +27,10 @@ var t = {};
		var useCollapseTransition_1 = require("./useCollapseTransition");
		var Collapse = function (providedProps) {
		var _a = providedProps, children = _a.children, props = __rest(_a, ["children"]);
		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,
		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
		@@ -23,5 +40,5 @@ // dev is swapping between a clonable child and a children renderer function
		if (react_1.isValidElement(children)) {
		return useCollapseTransition_1.useCollapsibleElement(children, props);
		return useCollapseTransition_1.useCollapsibleElement(children, config);
		}
		var _b = useCollapseTransition_1.useCollapseTransition(props), rendered = _b.rendered, transitionProps = _b.transitionProps;
		var _h = useCollapseTransition_1.useCollapseTransition(config), rendered = _h.rendered, transitionProps = _h.transitionProps;
		if (!rendered) {
		@@ -31,20 +48,6 @@ return null;
		return children(transitionProps);
		};
		var defaultProps = {
		minHeight: 0,
		minPaddingBottom: 0,
		minPaddingTop: 0,
		enterDuration: 250,
		leaveDuration: 200,
		disabled: false,
		};
		Collapse.defaultProps = defaultProps;
		}
		if (process.env.NODE_ENV !== "production") {
		Collapse.displayName = "Collapse";
		var PropTypes = null;
		try {
		PropTypes = require("prop-types");
		}
		catch (e) { }
		if (PropTypes) {
		var PropTypes = require("prop-types");
		Collapse.propTypes = {
		@@ -70,4 +73,5 @@ style: PropTypes.object,
		}
		catch (e) { }
		}
		exports.default = Collapse;
		//# sourceMappingURL=Collapse.js.map

lib/CrossFade.js

		@@ -30,2 +30,12 @@ "use strict";
		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",
		};
		/**
		@@ -39,21 +49,7 @@ * This is a very simpel wrapper for the CSSTransition component from
		*/
		var CrossFade = function (providedProps) {
		var _a = providedProps, children = _a.children, props = __rest(_a, ["children"]);
		return react_1.default.createElement(CSSTransition_1.default, __assign({}, props), children);
		};
		var defaultProps = {
		in: true,
		appear: true,
		timeout: { enter: 300, exit: 0 },
		classNames: {
		appear: "rmd-cross-fade",
		appearActive: "rmd-cross-fade--active",
		enter: "rmd-cross-fade",
		enterActive: "rmd-cross-fade--active",
		},
		mountOnEnter: true,
		unmountOnExit: true,
		};
		CrossFade.defaultProps = defaultProps;
		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));
		}
		exports.default = CrossFade;
		//# sourceMappingURL=CrossFade.js.map

lib/ScaleTransition.js

		@@ -54,12 +54,14 @@ "use strict";
		/**
		* This `ScaleTransition` component is used to trigger an animation that switches between an
		* opacity of `0` and `1` and using a `transform: scale(0)` to `transform: scale(1)`. It is
		* recommended to also manually apply a `transform-origin` style or use the `useFixedPositioning`
		* hook to generate for you so that the animation starts from a specific point.
		* This `ScaleTransition` component is used to trigger an animation that
		* switches between an opacity of `0` and `1` and using a `transform: scale(0)`
		* to `transform: scale(1)`. It is recommended to also manually apply a
		* `transform-origin` style or use the `useFixedPositioning` hook to generate
		* for you so that the animation starts from a specific point.
		*
		* Since the default scale animation is X and Y, you can enable the `vertical` prop which will
		* update the transition to use `transform: scaleY(0)` to `transform: scaleY(1)` instead.
		* Since the default scale animation is X and Y, you can enable the `vertical`
		* prop which will update the transition to use `transform: scaleY(0)` to
		* `transform: scaleY(1)` instead.
		*/
		var ScaleTransition = function (providedProps) {
		var _a = providedProps, visible = _a.visible, children = _a.children, propClassNames = _a.classNames, vertical = _a.vertical, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, props = __rest(_a, ["visible", "children", "classNames", "vertical", "portal", "portalInto", "portalIntoId"]);
		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 classNames = propClassNames;
		@@ -70,18 +72,7 @@ if (!classNames) {
		return (react_1.default.createElement(portal_1.ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
		react_1.default.createElement(CSSTransition_1.default, __assign({}, props, { in: visible, classNames: classNames }), children)));
		};
		var defaultProps = {
		portal: false,
		mountOnEnter: true,
		unmountOnExit: true,
		timeout: exports.SCALE_TIMEOUT,
		};
		ScaleTransition.defaultProps = defaultProps;
		react_1.default.createElement(CSSTransition_1.default, __assign({}, props, { in: visible, timeout: timeout, classNames: classNames, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }), children)));
		}
		if (process.env.NODE_ENV !== "production") {
		var PropTypes = void 0;
		try {
		PropTypes = require("prop-types");
		}
		catch (e) { }
		if (PropTypes) {
		var PropTypes = require("prop-types");
		ScaleTransition.propTypes = {
		@@ -118,4 +109,5 @@ portal: PropTypes.bool,
		}
		catch (e) { }
		}
		exports.default = ScaleTransition;
		//# sourceMappingURL=ScaleTransition.js.map

lib/useCollapseTransition.js

		@@ -21,4 +21,4 @@ "use strict";
		/**
		* This is a small hook that should only be used internally for creating
		* the collapse state.
		* This is a small hook that should only be used internally for creating the
		* collapse state.
		*
		@@ -67,6 +67,6 @@ * @private
		/**
		* A small util that will find the max-height, padding-top, and padding-bottom for
		* the provided element. This is really used to be able to transition the max-height
		* value since `max-height: auto` does not transition. The only way to get transition
		* is to change max-height values manually.
		* A small util that will find the max-height, padding-top, and padding-bottom
		* for the provided element. This is really used to be able to transition the
		* max-height value since `max-height: auto` does not transition. The only way
		* to get transition is to change max-height values manually.
		*
		@@ -81,4 +81,4 @@ * @private
		maxHeight = element.scrollHeight;
		// clone the element (not deep) just to figure out it's padding without the inline
		// styles applied
		// clone the element (not deep) just to figure out it's padding without the
		// inline styles applied
		var cloned = element.cloneNode(false);
		@@ -104,4 +104,4 @@ cloned.style.padding = "";
		/**
		* A small util that will merge and create all the styles required for the current
		* transition.
		* A small util that will merge and create all the styles required for the
		* current transition.
		*
		@@ -124,10 +124,10 @@ * @private
		/**
		* Creates a collapse transition that will animate between expanded and collapsed
		* states.
		* Creates a collapse transition that will animate between expanded and
		* collapsed states.
		*
		* NOTE: The collapse transition will only work when the element's ref returns
		* a valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you must
		* use a `forwardRef` to pass the ref down to the DOM element used for sizing
		* for the correct transition styles.
		* NOTE: The collapse transition will only work when the element's ref returns a
		* valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you
		* must use a `forwardRef` to pass the ref down to the DOM element used for
		* sizing for the correct transition styles.
		*/
		@@ -224,2 +224,3 @@ function useCollapseTransition(options) {
		ref: ref,
		hidden: collapsed && !entering && !leaving && rendered,
		},
		@@ -231,11 +232,10 @@ rendered: rendered,
		/**
		* This hook is used to inject the required collapse transition props into
		* a single HTMLElement.
		* This hook is used to inject the required collapse transition props into a
		* single HTMLElement.
		*
		* NOTE: The collapse transition will only work when the element's ref returns
		* a valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you must
		* use a `forwardRef` to pass the ref down to the DOM element used for sizing
		* for the correct transition styles.
		*
		* NOTE: The collapse transition will only work when the element's ref returns a
		* valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you
		* must use a `forwardRef` to pass the ref down to the DOM element used for
		* sizing for the correct transition styles.
		*/
		@@ -242,0 +242,0 @@ function useCollapsibleElement(element, options) {

lib/useFixedPositioning.js

		@@ -13,13 +13,2 @@ "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;
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		@@ -56,6 +45,4 @@ var react_1 = require("react");
		function useFixedPositioning(_a) {
		var onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onResize = _a.onResize, onScroll = _a.onScroll, remainingOptions = __rest(_a, ["onEnter", "onEntering", "onEntered", "onExited", "fixedTo", "getOptions", "onResize", "onScroll"]);
		var _b = react_1.useState(), style = _b[0], setStyle = _b[1];
		var handlers = utils_1.useRefCache({ onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExited: onExited });
		var options = utils_1.useRefCache(__assign({ fixedTo: fixedTo, getOptions: getOptions }, remainingOptions));
		var onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onResize = _a.onResize, onScroll = _a.onScroll, _b = _a.anchor, currentAnchor = _b === void 0 ? {} : _b, initialX = _a.initialX, initialY = _a.initialY, _c = _a.xMargin, xMargin = _c === void 0 ? 0 : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? 16 : _d, _e = _a.yMargin, yMargin = _e === void 0 ? 0 : _e, _f = _a.vhMargin, vhMargin = _f === void 0 ? 16 : _f, _g = _a.width, width = _g === void 0 ? "auto" : _g, onPositionChange = _a.onPositionChange, _h = _a.transformOrigin, transformOrigin = _h === void 0 ? false : _h, _j = _a.preventOverlap, preventOverlap = _j === void 0 ? false : _j, _k = _a.disableSwapping, disableSwapping = _k === void 0 ? false : _k, _l = _a.disableVHBounds, disableVHBounds = _l === void 0 ? false : _l;
		var _m = react_1.useState(), style = _m[0], setStyle = _m[1];
		var element = react_1.useRef(null);
		@@ -67,3 +54,2 @@ var updateStyle = react_1.useCallback(function () {
		}
		var _a = options.current, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onPositionChange = _a.onPositionChange, _b = _a.anchor, currentAnchor = _b === void 0 ? {} : _b, remaining = __rest(_a, ["fixedTo", "getOptions", "onPositionChange", "anchor"]);
		var anchor = {
		@@ -74,4 +60,15 @@ x: currentAnchor.x \|\| "center",
		var overrides = typeof getOptions === "function" ? getOptions(node) : {};
		var opts = __assign(__assign(__assign({}, remaining), overrides), { anchor: anchor });
		var _c = utils_1.getFixedPosition(__assign({ container: getFixedTo(fixedTo), element: node }, opts)), style = _c.style, actualX = _c.actualX, actualY = _c.actualY;
		var opts = __assign({ initialX: initialX,
		initialY: initialY,
		xMargin: xMargin,
		vwMargin: vwMargin,
		yMargin: yMargin,
		vhMargin: vhMargin,
		width: width,
		transformOrigin: transformOrigin,
		preventOverlap: preventOverlap,
		disableSwapping: disableSwapping,
		disableVHBounds: disableVHBounds,
		anchor: anchor, container: getFixedTo(fixedTo), element: node }, overrides);
		var _a = utils_1.getFixedPosition(opts), style = _a.style, actualX = _a.actualX, actualY = _a.actualY;
		var actual = { x: actualX, y: actualY };
		@@ -82,3 +79,20 @@ if (onPositionChange && (anchor.x !== actual.x \|\| anchor.y !== actual.y)) {
		setStyle(style);
		}, [options]);
		}, [
		currentAnchor.x,
		currentAnchor.y,
		disableSwapping,
		disableVHBounds,
		fixedTo,
		getOptions,
		initialX,
		initialY,
		onPositionChange,
		preventOverlap,
		transformOrigin,
		vhMargin,
		vwMargin,
		width,
		xMargin,
		yMargin,
		]);
		var updateNodeAndStyle = react_1.useCallback(function (node) {
		@@ -89,3 +103,2 @@ element.current = node;
		var handleEnter = react_1.useCallback(function (node, appear) {
		var onEnter = handlers.current.onEnter;
		if (onEnter) {
		@@ -95,5 +108,4 @@ onEnter(node, appear);
		updateNodeAndStyle(node);
		}, [handlers, updateNodeAndStyle]);
		}, [onEnter, updateNodeAndStyle]);
		var handleEntering = react_1.useCallback(function (node, appear) {
		var onEntering = handlers.current.onEntering;
		if (onEntering) {
		@@ -103,5 +115,4 @@ onEntering(node, appear);
		updateNodeAndStyle(node);
		}, [handlers, updateNodeAndStyle]);
		}, [onEntering, updateNodeAndStyle]);
		var handleEntered = react_1.useCallback(function (node, appear) {
		var onEntered = handlers.current.onEntered;
		if (onEntered) {
		@@ -111,5 +122,4 @@ onEntered(node, appear);
		updateNodeAndStyle(node);
		}, [handlers, updateNodeAndStyle]);
		}, [onEntered, updateNodeAndStyle]);
		var handleExited = react_1.useCallback(function (node) {
		var onExited = handlers.current.onExited;
		if (onExited) {
		@@ -119,3 +129,3 @@ onExited(node);
		element.current = null;
		}, [handlers]);
		}, [onExited]);
		utils_1.useResizeListener({
		@@ -138,3 +148,2 @@ enabled: !!element.current,
		if (rect) {
		var _a = remainingOptions.vhMargin, vhMargin = _a === void 0 ? 16 : _a, _b = remainingOptions.vwMargin, vwMargin = _b === void 0 ? 16 : _b;
		var vh = utils_1.getViewportSize("height");
		@@ -158,2 +167,9 @@ var vw = utils_1.getViewportSize("width");
		});
		react_1.useEffect(function () {
		updateStyle();
		// Need to only update when the initialX and initialY values are changed.
		// If this is triggered each time the updateStyle is changed, it causes an
		// infinite loop.
		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, [initialX, initialY]);
		return {
		@@ -160,0 +176,0 @@ style: style,

package.json

		{
		"name": "@react-md/transition",
		"version": "2.0.0-alpha.12",
		"version": "2.0.0-alpha.13",
		"description": "A package for working with react-md to use some simple transitions.",
		@@ -39,5 +39,5 @@ "scripts": {
		"dependencies": {
		"@react-md/portal": "^2.0.0-alpha.12",
		"@react-md/theme": "^2.0.0-alpha.12",
		"@react-md/utils": "^2.0.0-alpha.12",
		"@react-md/portal": "^2.0.0-alpha.13",
		"@react-md/theme": "^2.0.0-alpha.13",
		"@react-md/utils": "^2.0.0-alpha.13",
		"@types/react-transition-group": "^4.2.3",
		@@ -56,3 +56,3 @@ "classnames": "^2.2.6",
		},
		"gitHead": "b31afe8dc076cf0647ac3e99dc0b61f8f4b7b0e2"
		"gitHead": "47959dd8c691deae0310c7cd01b3c275699e6f8c"
		}

src/types.ts

		@@ -23,4 +23,4 @@ import { TransitionProps } from "react-transition-group/Transition";

		// timeout is required in the Transition props, but 99% of the time it'll be added
		// with defaultProps in overrides
		// timeout is required in the Transition props, but 99% of the time it'll be
		// added with defaultProps in overrides
		export interface OverridableTransitionProps
		@@ -27,0 +27,0 @@ extends Pick<TransitionProps, TransitionKeys> {

113

src/useCollapseTransition.ts

		@@ -18,3 +18,4 @@ import {
		/**
		* Boolean if currently collapsed. When this prop changes, the collapse transition will begin.
		* Boolean if currently collapsed. When this prop changes, the collapse
		* transition will begin.
		*/
		@@ -24,5 +25,6 @@ collapsed: boolean;
		/**
		* An optional style to apply. This will be merged with the required animation styles of
		* `min-height`, `padding-top`, and `padding-bottom`. If the `style` prop defines any of these
		* values, they will be used instead of this component's computed values.
		* An optional style to apply. This will be merged with the required animation
		* styles of `min-height`, `padding-top`, and `padding-bottom`. If the `style`
		* prop defines any of these values, they will be used instead of this
		* component's computed values.
		*/
		@@ -37,8 +39,9 @@ style?: CSSProperties;
		/**
		* An optional min height to set for the collapsing element. If this is set to `0`,
		* the `children` will be removed from the DOM once the collapsing animation has finished.
		* An optional min height to set for the collapsing element. If this is set to
		* `0`, the `children` will be removed from the DOM once the collapsing
		* animation has finished.
		*
		* Note: the height will include the padding props. So if you want the collapse to be
		* `50px` by default and 20px padding, you would want to set the `minHeight` to `90px`.
		* So you want to use this formula:
		* Note: the height will include the padding props. So if you want the
		* collapse to be `50px` by default and 20px padding, you would want to set
		* the `minHeight` to `90px`. So you want to use this formula:
		*
		@@ -52,4 +55,4 @@ * ```ts
		/**
		* The min padding bottom to apply to the collapse. This will be used with the `minHeight`
		* and `minPaddingTop` props to set the collapsed size.
		* The min padding bottom to apply to the collapse. This will be used with the
		* `minHeight` and `minPaddingTop` props to set the collapsed size.
		*/
		@@ -59,4 +62,4 @@ minPaddingBottom?: number \| string;
		/**
		* The min padding top to apply to the collapse. This will be used with the `minHeight`
		* and `minPaddingBottom` props to set the collapsed size.
		* The min padding top to apply to the collapse. This will be used with the
		* `minHeight` and `minPaddingBottom` props to set the collapsed size.
		*/
		@@ -66,5 +69,6 @@ minPaddingTop?: number \| string;
		/**
		* The duration for the entire enter animation in milliseconds. This should normally stay as
		* the default value of `250ms`, but can be updated to be any value if you feel there should
		* be a longer animation time based on content size.
		* The duration for the entire enter animation in milliseconds. This should
		* normally stay as the default value of `250ms`, but can be updated to be any
		* value if you feel there should be a longer animation time based on content
		* size.
		*/
		@@ -74,5 +78,6 @@ enterDuration?: number;
		/**
		* The duration for the entire leave animation in milliseconds. This should normally stay at
		* the default value of `200ms`, but can be updated to be any value if you feel there should be
		* a longer animation time based on content size.
		* The duration for the entire leave animation in milliseconds. This should
		* normally stay at the default value of `200ms`, but can be updated to be any
		* value if you feel there should be a longer animation time based on content
		* size.
		*/
		@@ -82,5 +87,6 @@ leaveDuration?: number;
		/**
		* Boolean if the children should be removed from the DOM when collapsed. When this prop is
		* `undefined`, it will remove the collapsed children only when the `minHeight`,
		* `minPaddingBottom`, and `minPaddingTop` values are set to `0`.
		* Boolean if the children should be removed from the DOM when collapsed. When
		* this prop is `undefined`, it will remove the collapsed children only when
		* the `minHeight`, `minPaddingBottom`, and `minPaddingTop` values are set to
		* `0`.
		*/
		@@ -90,4 +96,4 @@ isEmptyCollapsed?: boolean;
		/**
		* An optional function to call when the "expanding" animation has finished when the `collapsed`
		* prop is changed from `true` to `false`.
		* An optional function to call when the "expanding" animation has finished
		* when the `collapsed` prop is changed from `true` to `false`.
		*/
		@@ -97,4 +103,4 @@ onExpanded?: () => void;
		/**
		* An optional function to call when the "collapsing" animation has finished when the `collapsed`
		* prop is changed from `false` to `true`.
		* An optional function to call when the "collapsing" animation has finished
		* when the `collapsed` prop is changed from `false` to `true`.
		*/
		@@ -104,4 +110,4 @@ onCollapsed?: () => void;
		/**
		* Boolean if the transition should be disabled and just immediately switch to the collapsed
		* or full size.
		* Boolean if the transition should be disabled and just immediately switch to
		* the collapsed or full size.
		*/
		@@ -148,4 +154,4 @@ disabled?: boolean;
		/**
		* This is a small hook that should only be used internally for creating
		* the collapse state.
		* This is a small hook that should only be used internally for creating the
		* collapse state.
		*
		@@ -225,6 +231,6 @@ * @private
		/**
		* A small util that will find the max-height, padding-top, and padding-bottom for
		* the provided element. This is really used to be able to transition the max-height
		* value since `max-height: auto` does not transition. The only way to get transition
		* is to change max-height values manually.
		* A small util that will find the max-height, padding-top, and padding-bottom
		* for the provided element. This is really used to be able to transition the
		* max-height value since `max-height: auto` does not transition. The only way
		* to get transition is to change max-height values manually.
		*
		@@ -240,4 +246,4 @@ * @private

		// clone the element (not deep) just to figure out it's padding without the inline
		// styles applied
		// clone the element (not deep) just to figure out it's padding without the
		// inline styles applied
		const cloned = element.cloneNode(false) as HTMLElement;
		@@ -274,4 +280,4 @@ cloned.style.padding = "";
		/**
		* A small util that will merge and create all the styles required for the current
		* transition.
		* A small util that will merge and create all the styles required for the
		* current transition.
		*
		@@ -309,2 +315,3 @@ * @private
		ref: MutableRefObject<E \| null>;
		hidden?: boolean;
		};
		@@ -315,10 +322,10 @@ rendered: boolean;
		/**
		* Creates a collapse transition that will animate between expanded and collapsed
		* states.
		* Creates a collapse transition that will animate between expanded and
		* collapsed states.
		*
		* NOTE: The collapse transition will only work when the element's ref returns
		* a valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you must
		* use a `forwardRef` to pass the ref down to the DOM element used for sizing
		* for the correct transition styles.
		* NOTE: The collapse transition will only work when the element's ref returns a
		* valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you
		* must use a `forwardRef` to pass the ref down to the DOM element used for
		* sizing for the correct transition styles.
		*/
		@@ -461,2 +468,3 @@ export function useCollapseTransition<E extends HTMLElement>(
		ref,
		hidden: collapsed && !entering && !leaving && rendered,
		},
		@@ -468,11 +476,10 @@ rendered,
		/**
		* This hook is used to inject the required collapse transition props into
		* a single HTMLElement.
		* This hook is used to inject the required collapse transition props into a
		* single HTMLElement.
		*
		* NOTE: The collapse transition will only work when the element's ref returns
		* a valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you must
		* use a `forwardRef` to pass the ref down to the DOM element used for sizing
		* for the correct transition styles.
		*
		* NOTE: The collapse transition will only work when the element's ref returns a
		* valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you
		* must use a `forwardRef` to pass the ref down to the DOM element used for
		* sizing for the correct transition styles.
		*/
		@@ -479,0 +486,0 @@ export function useCollapsibleElement(

src/useFixedPositioning.ts

		@@ -1,2 +0,2 @@
		import { CSSProperties, useCallback, useRef, useState } from "react";
		import { CSSProperties, useCallback, useRef, useState, useEffect } from "react";
		import { TransitionProps } from "react-transition-group/Transition";
		@@ -7,3 +7,2 @@ import {
		PositionAnchor,
		useRefCache,
		useResizeListener,
		@@ -131,7 +130,17 @@ useScrollListener,
		onScroll,
		...remainingOptions
		anchor: currentAnchor = {},
		initialX,
		initialY,
		xMargin = 0,
		vwMargin = 16,
		yMargin = 0,
		vhMargin = 16,
		width = "auto",
		onPositionChange,
		transformOrigin = false,
		preventOverlap = false,
		disableSwapping = false,
		disableVHBounds = false,
		}: FixedPositioningOptions): ReturnValue {
		const [style, setStyle] = useState<CSSProperties \| undefined>();
		const handlers = useRefCache({ onEnter, onEntering, onEntered, onExited });
		const options = useRefCache({ fixedTo, getOptions, ...remainingOptions });

		@@ -146,9 +155,2 @@ const element = useRef<HTMLElement \| null>(null);

		const {
		fixedTo,
		getOptions,
		onPositionChange,
		anchor: currentAnchor = {},
		...remaining
		} = options.current;
		const anchor = {
		@@ -159,14 +161,22 @@ x: currentAnchor.x \|\| "center",
		const overrides = typeof getOptions === "function" ? getOptions(node) : {};
		const opts = {
		...remaining,
		...overrides,
		const opts: FixedPositionOptions = {
		initialX,
		initialY,
		xMargin,
		vwMargin,
		yMargin,
		vhMargin,
		width,
		transformOrigin,
		preventOverlap,
		disableSwapping,
		disableVHBounds,
		anchor,
		};

		const { style, actualX, actualY } = getFixedPosition({
		container: getFixedTo(fixedTo),
		element: node,
		...opts,
		});
		...overrides,
		};

		const { style, actualX, actualY } = getFixedPosition(opts);

		const actual = { x: actualX, y: actualY };
		@@ -178,3 +188,20 @@ if (onPositionChange && (anchor.x !== actual.x \|\| anchor.y !== actual.y)) {
		setStyle(style);
		}, [options]);
		}, [
		currentAnchor.x,
		currentAnchor.y,
		disableSwapping,
		disableVHBounds,
		fixedTo,
		getOptions,
		initialX,
		initialY,
		onPositionChange,
		preventOverlap,
		transformOrigin,
		vhMargin,
		vwMargin,
		width,
		xMargin,
		yMargin,
		]);

		@@ -191,3 +218,2 @@ const updateNodeAndStyle = useCallback(
		(node: HTMLElement, appear: boolean) => {
		const { onEnter } = handlers.current;
		if (onEnter) {
		@@ -199,3 +225,3 @@ onEnter(node, appear);
		},
		[handlers, updateNodeAndStyle]
		[onEnter, updateNodeAndStyle]
		);
		@@ -205,3 +231,2 @@
		(node: HTMLElement, appear: boolean) => {
		const { onEntering } = handlers.current;
		if (onEntering) {
		@@ -213,3 +238,3 @@ onEntering(node, appear);
		},
		[handlers, updateNodeAndStyle]
		[onEntering, updateNodeAndStyle]
		);
		@@ -219,3 +244,2 @@
		(node: HTMLElement, appear: boolean) => {
		const { onEntered } = handlers.current;
		if (onEntered) {
		@@ -227,3 +251,3 @@ onEntered(node, appear);
		},
		[handlers, updateNodeAndStyle]
		[onEntered, updateNodeAndStyle]
		);
		@@ -233,3 +257,2 @@
		(node: HTMLElement) => {
		const { onExited } = handlers.current;
		if (onExited) {
		@@ -241,3 +264,3 @@ onExited(node);
		},
		[handlers]
		[onExited]
		);
		@@ -264,3 +287,2 @@
		if (rect) {
		const { vhMargin = 16, vwMargin = 16 } = remainingOptions;
		const vh = getViewportSize("height");
		@@ -288,2 +310,11 @@ const vw = getViewportSize("width");

		useEffect(() => {
		updateStyle();

		// Need to only update when the initialX and initialY values are changed.
		// If this is triggered each time the updateStyle is changed, it causes an
		// infinite loop.
		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, [initialX, initialY]);

		return {
		@@ -290,0 +321,0 @@ style,

types/Collapse.d.ts

		@@ -1,18 +0,20 @@
		import { CSSProperties, FC, ReactElement, RefObject } from "react";
		import { CSSProperties, ReactElement, RefObject } from "react";
		import { CollapseOptions } from "./useCollapseTransition";
		export interface CollapseChildrenProps {
		/**
		* 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.
		* 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.
		*/
		style?: CSSProperties;
		/**
		* The class name to apply that will allow for the child element to transition between collapsed
		* states.
		* The class name to apply that will allow for the child element to transition
		* between collapsed states.
		*/
		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.
		* 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.
		*/
		@@ -25,3 +27,20 @@ ref: RefObject<HTMLElement>;
		}
		declare const Collapse: FC<CollapseProps>;
		declare function Collapse({ children, minHeight, minPaddingBottom, minPaddingTop, enterDuration, leaveDuration, disabled, ...props }: CollapseProps): ReactElement \| null;
		declare namespace Collapse {
		var propTypes: {
		style: any;
		className: any;
		collapsed: any;
		minHeight: any;
		minPaddingTop: any;
		minPaddingBottom: any;
		enterDuration: any;
		leaveDuration: any;
		isEmptyCollapsed: any;
		children: any;
		onExpanded: any;
		onCollapsed: any;
		disabled: any;
		};
		}
		export default Collapse;

types/CrossFade.d.ts

		@@ -1,2 +0,2 @@
		import { FC } from "react";
		import { ReactElement } from "react";
		import { CSSTransitionProps } from "react-transition-group/CSSTransition";
		@@ -12,3 +12,3 @@ export declare type CrossFadeProps = Partial<CSSTransitionProps>;
		*/
		declare const CrossFade: FC<CrossFadeProps>;
		declare function CrossFade({ in: propIn, appear, timeout, classNames, mountOnEnter, unmountOnExit, children, ...props }: CrossFadeProps): ReactElement;
		export default CrossFade;

types/ScaleTransition.d.ts

		@@ -1,2 +0,2 @@
		import { FC, ReactNode } from "react";
		import { ReactElement, ReactNode } from "react";
		import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
		@@ -10,9 +10,10 @@ import { RenderConditionalPortalProps } from "@react-md/portal";
		/**
		* Boolean if the vertical scale animation should be used instead of the normal
		* scale animation.
		* Boolean if the vertical scale animation should be used instead of the
		* normal scale animation.
		*/
		vertical?: boolean;
		/**
		* Boolean if the animation should be triggered. Enabling this will trigger the appear/enter
		* animations while disabling it will trigger the exit animation.
		* Boolean if the animation should be triggered. Enabling this will trigger
		* the appear/enter animations while disabling it will trigger the exit
		* animation.
		*/
		@@ -26,11 +27,27 @@ visible: boolean;
		/**
		* This `ScaleTransition` component is used to trigger an animation that switches between an
		* opacity of `0` and `1` and using a `transform: scale(0)` to `transform: scale(1)`. It is
		* recommended to also manually apply a `transform-origin` style or use the `useFixedPositioning`
		* hook to generate for you so that the animation starts from a specific point.
		* This `ScaleTransition` component is used to trigger an animation that
		* switches between an opacity of `0` and `1` and using a `transform: scale(0)`
		* to `transform: scale(1)`. It is recommended to also manually apply a
		* `transform-origin` style or use the `useFixedPositioning` hook to generate
		* for you so that the animation starts from a specific point.
		*
		* Since the default scale animation is X and Y, you can enable the `vertical` prop which will
		* update the transition to use `transform: scaleY(0)` to `transform: scaleY(1)` instead.
		* Since the default scale animation is X and Y, you can enable the `vertical`
		* prop which will update the transition to use `transform: scaleY(0)` to
		* `transform: scaleY(1)` instead.
		*/
		declare const ScaleTransition: FC<ScaleTransitionProps>;
		declare function ScaleTransition({ visible, children, classNames: propClassNames, vertical, timeout, portal, portalInto, portalIntoId, mountOnEnter, unmountOnExit, ...props }: ScaleTransitionProps): ReactElement;
		declare namespace ScaleTransition {
		var propTypes: {
		portal: any;
		portalInto: any;
		portalIntoId: any;
		mountOnEnter: any;
		unmountOnExit: any;
		visible: any;
		vertical: any;
		timeout: any;
		classNames: any;
		children: any;
		};
		}
		export default ScaleTransition;

108

types/useCollapseTransition.d.ts

		import { CSSProperties, Dispatch, ReactElement, SetStateAction, MutableRefObject } from "react";
		export interface CollapseOptions {
		/**
		* Boolean if currently collapsed. When this prop changes, the collapse transition will begin.
		* Boolean if currently collapsed. When this prop changes, the collapse
		* transition will begin.
		*/
		collapsed: boolean;
		/**
		* An optional style to apply. This will be merged with the required animation styles of
		* `min-height`, `padding-top`, and `padding-bottom`. If the `style` prop defines any of these
		* values, they will be used instead of this component's computed values.
		* An optional style to apply. This will be merged with the required animation
		* styles of `min-height`, `padding-top`, and `padding-bottom`. If the `style`
		* prop defines any of these values, they will be used instead of this
		* component's computed values.
		*/
		@@ -18,8 +20,9 @@ style?: CSSProperties;
		/**
		* An optional min height to set for the collapsing element. If this is set to `0`,
		* the `children` will be removed from the DOM once the collapsing animation has finished.
		* An optional min height to set for the collapsing element. If this is set to
		* `0`, the `children` will be removed from the DOM once the collapsing
		* animation has finished.
		*
		* Note: the height will include the padding props. So if you want the collapse to be
		* `50px` by default and 20px padding, you would want to set the `minHeight` to `90px`.
		* So you want to use this formula:
		* Note: the height will include the padding props. So if you want the
		* collapse to be `50px` by default and 20px padding, you would want to set
		* the `minHeight` to `90px`. So you want to use this formula:
		*
		@@ -32,42 +35,45 @@ * ```ts
		/**
		* The min padding bottom to apply to the collapse. This will be used with the `minHeight`
		* and `minPaddingTop` props to set the collapsed size.
		* The min padding bottom to apply to the collapse. This will be used with the
		* `minHeight` and `minPaddingTop` props to set the collapsed size.
		*/
		minPaddingBottom?: number \| string;
		/**
		* The min padding top to apply to the collapse. This will be used with the `minHeight`
		* and `minPaddingBottom` props to set the collapsed size.
		* The min padding top to apply to the collapse. This will be used with the
		* `minHeight` and `minPaddingBottom` props to set the collapsed size.
		*/
		minPaddingTop?: number \| string;
		/**
		* The duration for the entire enter animation in milliseconds. This should normally stay as
		* the default value of `250ms`, but can be updated to be any value if you feel there should
		* be a longer animation time based on content size.
		* The duration for the entire enter animation in milliseconds. This should
		* normally stay as the default value of `250ms`, but can be updated to be any
		* value if you feel there should be a longer animation time based on content
		* size.
		*/
		enterDuration?: number;
		/**
		* The duration for the entire leave animation in milliseconds. This should normally stay at
		* the default value of `200ms`, but can be updated to be any value if you feel there should be
		* a longer animation time based on content size.
		* The duration for the entire leave animation in milliseconds. This should
		* normally stay at the default value of `200ms`, but can be updated to be any
		* value if you feel there should be a longer animation time based on content
		* size.
		*/
		leaveDuration?: number;
		/**
		* Boolean if the children should be removed from the DOM when collapsed. When this prop is
		* `undefined`, it will remove the collapsed children only when the `minHeight`,
		* `minPaddingBottom`, and `minPaddingTop` values are set to `0`.
		* Boolean if the children should be removed from the DOM when collapsed. When
		* this prop is `undefined`, it will remove the collapsed children only when
		* the `minHeight`, `minPaddingBottom`, and `minPaddingTop` values are set to
		* `0`.
		*/
		isEmptyCollapsed?: boolean;
		/**
		* An optional function to call when the "expanding" animation has finished when the `collapsed`
		* prop is changed from `true` to `false`.
		* An optional function to call when the "expanding" animation has finished
		* when the `collapsed` prop is changed from `true` to `false`.
		*/
		onExpanded?: () => void;
		/**
		* An optional function to call when the "collapsing" animation has finished when the `collapsed`
		* prop is changed from `false` to `true`.
		* An optional function to call when the "collapsing" animation has finished
		* when the `collapsed` prop is changed from `false` to `true`.
		*/
		onCollapsed?: () => void;
		/**
		* Boolean if the transition should be disabled and just immediately switch to the collapsed
		* or full size.
		* Boolean if the transition should be disabled and just immediately switch to
		* the collapsed or full size.
		*/
		@@ -89,4 +95,4 @@ disabled?: boolean;
		/**
		* This is a small hook that should only be used internally for creating
		* the collapse state.
		* This is a small hook that should only be used internally for creating the
		* collapse state.
		*
		@@ -124,6 +130,6 @@ * @private
		/**
		* A small util that will find the max-height, padding-top, and padding-bottom for
		* the provided element. This is really used to be able to transition the max-height
		* value since `max-height: auto` does not transition. The only way to get transition
		* is to change max-height values manually.
		* A small util that will find the max-height, padding-top, and padding-bottom
		* for the provided element. This is really used to be able to transition the
		* max-height value since `max-height: auto` does not transition. The only way
		* to get transition is to change max-height values manually.
		*
		@@ -141,4 +147,4 @@ * @private
		/**
		* A small util that will merge and create all the styles required for the current
		* transition.
		* A small util that will merge and create all the styles required for the
		* current transition.
		*
		@@ -153,2 +159,3 @@ * @private
		ref: MutableRefObject<E \| null>;
		hidden?: boolean;
		};
		@@ -158,24 +165,23 @@ rendered: boolean;
		/**
		* Creates a collapse transition that will animate between expanded and collapsed
		* states.
		* Creates a collapse transition that will animate between expanded and
		* collapsed states.
		*
		* NOTE: The collapse transition will only work when the element's ref returns
		* a valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you must
		* use a `forwardRef` to pass the ref down to the DOM element used for sizing
		* for the correct transition styles.
		* NOTE: The collapse transition will only work when the element's ref returns a
		* valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you
		* must use a `forwardRef` to pass the ref down to the DOM element used for
		* sizing for the correct transition styles.
		*/
		export declare function useCollapseTransition<E extends HTMLElement>(options: CollapseOptions): CollapseTransitionResult<E>;
		/**
		* This hook is used to inject the required collapse transition props into
		* a single HTMLElement.
		* This hook is used to inject the required collapse transition props into a
		* single HTMLElement.
		*
		* NOTE: The collapse transition will only work when the element's ref returns
		* a valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you must
		* use a `forwardRef` to pass the ref down to the DOM element used for sizing
		* for the correct transition styles.
		*
		* NOTE: The collapse transition will only work when the element's ref returns a
		* valid HTMLElemement/DOM Node since the transition requires checking the
		* sizing and styles of an element. If you created a custom component, you
		* must use a `forwardRef` to pass the ref down to the DOM element used for
		* sizing for the correct transition styles.
		*/
		export declare function useCollapsibleElement(element: ReactElement, options: CollapseOptions): ReactElement \| null;
		export {};

types/useFixedPositioning.d.ts

		@@ -67,3 +67,3 @@ import { CSSProperties } from "react";
		*/
		export default function useFixedPositioning({ onEnter, onEntering, onEntered, onExited, fixedTo, getOptions, onResize, onScroll, ...remainingOptions }: FixedPositioningOptions): ReturnValue;
		export default function useFixedPositioning({ onEnter, onEntering, onEntered, onExited, fixedTo, getOptions, onResize, onScroll, anchor: currentAnchor, initialX, initialY, xMargin, vwMargin, yMargin, vhMargin, width, onPositionChange, transformOrigin, preventOverlap, disableSwapping, disableVHBounds, }: FixedPositioningOptions): ReturnValue;
		export {};

es/.tsbuildinfo