@react-md/transition - npm Package Compare versions

Comparing version 2.0.0-beta.0 to 2.0.0-beta.1

es/CrossFade.js

@@ -25,3 +25,2 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
-import { applyRef } from "@react-md/utils";
 import useCrossFade from "./useCrossFade";
@@ -47,2 +46,3 @@ /**
     var _f = useCrossFade({
+        ref: forwardedRef,
         appear: appear,
@@ -69,6 +69,3 @@ className: propClassName,
     }
-    return (React.createElement("div", __assign({}, props, { className: className, ref: function (instance) {
-            applyRef(instance, forwardedRef);
-            ref.current = instance;
-        } }), children));
+    return (React.createElement("div", __assign({}, props, { className: className, ref: ref }), children));
 });
@@ -75,0 +72,0 @@ if (process.env.NODE_ENV !== "production") {

es/index.js

@@ -10,2 +10,3 @@ export { default as Collapse } from "./Collapse";
 export * from "./constants";
+export * from "./types";
 export { default as useCollapse } from "./useCollapse";
@@ -12,0 +13,0 @@ export { default as useCrossFade } from "./useCrossFade";

es/useTransition.js

@@ -12,3 +12,4 @@ var __assign = (this && this.__assign) || function () {
 };
-import { useEffect, useReducer, useRef, } from "react";
+import { useEffect, useReducer, useRef, useCallback, } from "react";
+import { applyRef } from "@react-md/utils";
 import { ENTER, ENTERING, ENTERED, EXIT, EXITING, EXITED, UNMOUNT, } from "./constants";
@@ -18,3 +19,2 @@ import getNextStage from "./getNextStage";
 import getTimeoutDuration from "./getTimeoutDuration";
-import getNode from "./getNode";
 /**
@@ -73,3 +73,3 @@ *
 export default function useTransition(_a) {
-    var _b = _a.appear, appear = _b === void 0 ? false : _b, _c = _a.repaint, repaint = _c === void 0 ? false : _c, _d = _a.temporary, temporary = _d === void 0 ? false : _d, transitionIn = _a.transitionIn, propTimeout = _a.timeout, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited;
+    var _b = _a.appear, appear = _b === void 0 ? false : _b, _c = _a.repaint, repaint = _c === void 0 ? false : _c, _d = _a.temporary, temporary = _d === void 0 ? false : _d, transitionIn = _a.transitionIn, propTimeout = _a.timeout, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, ref = _a.ref;
     var _e = useReducer(reducer, INITIAL_STATE, getInitialState(transitionIn, temporary, appear)), _f = _e[0], stage = _f.stage, rendered = _f.rendered, appearing = _f.appearing, dispatch = _e[1];
@@ -144,42 +144,44 @@ // need to store in mutable ref since these are mostly going to be arrow functions
         }
-        var node = getNode(nodeRef);
-        if (repaint && stage !== EXITED && stage !== ENTERED) {
-            // force repaint for CSS transitions
-            // eslint-disable-next-line no-unused-expressions
-            node.scrollTop;
+        var node = nodeRef.current;
+        if (node) {
+            if (repaint && stage !== EXITED && stage !== ENTERED) {
+                // force repaint for CSS transitions
+                // eslint-disable-next-line no-unused-expressions
+                node.scrollTop;
+            }
+            var _a = handlers.current, onEnter_1 = _a.onEnter, onEntering_1 = _a.onEntering, onEntered_1 = _a.onEntered, onExit_1 = _a.onExit, onExiting_1 = _a.onExiting, onExited_1 = _a.onExited;
+            switch (stage) {
+                case ENTER:
+                    if (onEnter_1) {
+                        onEnter_1(node, appearing);
+                    }
+                    break;
+                case ENTERING:
+                    if (onEntering_1) {
+                        onEntering_1(node, appearing);
+                    }
+                    break;
+                case ENTERED:
+                    if (onEntered_1) {
+                        onEntered_1(node, appearing);
+                    }
+                    break;
+                case EXIT:
+                    if (onExit_1) {
+                        onExit_1(node);
+                    }
+                    break;
+                case EXITING:
+                    if (onExiting_1) {
+                        onExiting_1(node);
+                    }
+                    break;
+                case EXITED:
+                    if (onExited_1) {
+                        onExited_1(node);
+                    }
+                    break;
+                // no default
+            }
         }
-        var _a = handlers.current, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited;
-        switch (stage) {
-            case ENTER:
-                if (onEnter) {
-                    onEnter(node, appearing);
-                }
-                break;
-            case ENTERING:
-                if (onEntering) {
-                    onEntering(node, appearing);
-                }
-                break;
-            case ENTERED:
-                if (onEntered) {
-                    onEntered(node, appearing);
-                }
-                break;
-            case EXIT:
-                if (onExit) {
-                    onExit(node);
-                }
-                break;
-            case EXITING:
-                if (onExiting) {
-                    onExiting(node);
-                }
-                break;
-            case EXITED:
-                if (onExited) {
-                    onExited(node);
-                }
-                break;
-            // no default
-        }
         var nextStage = getNextStage(stage);
@@ -212,4 +214,8 @@ if (stage === nextStage) {
     ]);
+    var refHandler = useCallback(function (instance) {
+        applyRef(instance, ref);
+        nodeRef.current = instance;
+    }, [ref]);
     return {
-        ref: nodeRef,
+        ref: refHandler,
         stage: stage,
@@ -216,0 +222,0 @@ rendered: rendered,

lib/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCALE_TIMEOUT = exports.SCALE_Y_CLASSNAMES = exports.SCALE_CLASSNAMES = exports.CROSS_FADE_CLASSNAMES = exports.CROSS_FADE_TIMEOUT = exports.DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = exports.DEFAULT_COLLAPSE_MIN_PADDING_TOP = exports.DEFAULT_COLLAPSE_MIN_HEIGHT = exports.COLLAPSE_TIMEOUT = exports.UNMOUNT = exports.EXITED = exports.EXITING = exports.EXIT = exports.ENTERED = exports.ENTERING = exports.ENTER = void 0;
 exports.ENTER = "enter";
@@ -4,0 +5,0 @@ exports.ENTERING = "entering";

lib/CrossFade.d.ts

@@ -47,3 +47,3 @@ import React, { HTMLAttributes } from "react";
  */
-declare const CrossFade: React.ForwardRefExoticComponent<CrossFadeProps & React.RefAttributes<HTMLDivElement>>;
+declare const CrossFade: React.ForwardRefExoticComponent<Pick<CrossFadeProps, "timeout" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "children" | "classNames" | "transitionIn" | "appear" | "enter" | "exit" | "temporary" | "hidden" | "className" | "style" | "slot" | "title" | "color" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
 export default CrossFade;

lib/CrossFade.js

@@ -13,2 +13,21 @@ "use strict";
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -25,9 +44,2 @@ var t = {};
 };
-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) {
@@ -39,3 +51,2 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("@react-md/utils");
 var useCrossFade_1 = __importDefault(require("./useCrossFade"));
@@ -61,2 +72,3 @@ /**
     var _f = useCrossFade_1.default({
+        ref: forwardedRef,
         appear: appear,
@@ -83,6 +95,3 @@ className: propClassName,
     }
-    return (react_1.default.createElement("div", __assign({}, props, { className: className, ref: function (instance) {
-            utils_1.applyRef(instance, forwardedRef);
-            ref.current = instance;
-        } }), children));
+    return (react_1.default.createElement("div", __assign({}, props, { className: className, ref: ref }), children));
 });
@@ -89,0 +98,0 @@ if (process.env.NODE_ENV !== "production") {

lib/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 var Collapse_1 = require("./Collapse");
-exports.Collapse = Collapse_1.default;
-__export(require("./Collapse"));
+Object.defineProperty(exports, "Collapse", { enumerable: true, get: function () { return Collapse_1.default; } });
+__exportStar(require("./Collapse"), exports);
 var CrossFade_1 = require("./CrossFade");
-exports.CrossFade = CrossFade_1.default;
-__export(require("./CrossFade"));
+Object.defineProperty(exports, "CrossFade", { enumerable: true, get: function () { return CrossFade_1.default; } });
+__exportStar(require("./CrossFade"), exports);
 var ScaleTransition_1 = require("./ScaleTransition");
-exports.ScaleTransition = ScaleTransition_1.default;
-__export(require("./ScaleTransition"));
+Object.defineProperty(exports, "ScaleTransition", { enumerable: true, get: function () { return ScaleTransition_1.default; } });
+__exportStar(require("./ScaleTransition"), exports);
 var useFixedPositioning_1 = require("./useFixedPositioning");
-exports.useFixedPositioning = useFixedPositioning_1.default;
-__export(require("./useFixedPositioning"));
-__export(require("./constants"));
+Object.defineProperty(exports, "useFixedPositioning", { enumerable: true, get: function () { return useFixedPositioning_1.default; } });
+__exportStar(require("./useFixedPositioning"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);
 var useCollapse_1 = require("./useCollapse");
-exports.useCollapse = useCollapse_1.default;
+Object.defineProperty(exports, "useCollapse", { enumerable: true, get: function () { return useCollapse_1.default; } });
 var useCrossFade_1 = require("./useCrossFade");
-exports.useCrossFade = useCrossFade_1.default;
+Object.defineProperty(exports, "useCrossFade", { enumerable: true, get: function () { return useCrossFade_1.default; } });
 var useTransition_1 = require("./useTransition");
-exports.useTransition = useTransition_1.default;
+Object.defineProperty(exports, "useTransition", { enumerable: true, get: function () { return useTransition_1.default; } });
 var useCSSTransition_1 = require("./useCSSTransition");
-exports.useCSSTransition = useCSSTransition_1.default;
+Object.defineProperty(exports, "useCSSTransition", { enumerable: true, get: function () { return useCSSTransition_1.default; } });
 //# sourceMappingURL=index.js.map

lib/types.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, MutableRefObject } from "react";
+import { CSSProperties, Ref, RefCallback } from "react";
 import { CSSTransitionClassNames, CSSTransitionProps } from "react-transition-group/CSSTransition";
@@ -108,2 +108,12 @@ import { TransitionActions, TransitionProps } from "react-transition-group/Transition";
     /**
+     * Boolean if the transition should allow for an enter animation once the
+     * `transitionIn` booleanis set to `true`.
+     */
+    enter?: boolean;
+    /**
+     * Boolean if the transition should allow for an exit animation once the
+     * `transitionIn` booleanis set to `false`.
+     */
+    exit?: boolean;
+    /**
      * Boolean if the component should mount and unmount based on the current
@@ -145,2 +155,7 @@ * `transitionIn` stage with a default value of `false`. When this is
     timeout: TransitionTimeout;
+    /**
+     * An optional ref that will get merged with the required ref for the
+     * transition to work.
+     */
+    ref?: Ref<E>;
 }
@@ -200,3 +215,3 @@ export interface CSSTransitionOptions<E extends HTMLElement> extends Omit<TransitionOptions<E>, "repaint"> {
      */
-    ref: MutableRefObject<E | null>;
+    ref: RefCallback<E>;
     /**
@@ -260,3 +275,3 @@ * The current class name based on the provided `className` options and the
      */
-    ref: MutableRefObject<E | null>;
+    ref: RefCallback<E>;
     /**
@@ -263,0 +278,0 @@ * The `hidden` DOM attribute that will be enabled if the component is fully

lib/useTransition.d.ts

@@ -1,2 +0,2 @@
-import { MutableRefObject, Dispatch } from "react";
+import { Dispatch, RefCallback } from "react";
 import { TransitionOptions } from "./types";
@@ -32,3 +32,3 @@ import { TransitionStage, TransitionAction } from "./constants";
      */
-    ref: MutableRefObject<E | null>;
+    ref: RefCallback<E>;
     /**
@@ -65,2 +65,2 @@ * A dispatch function that cna update the transition state manually. This
  */
-export default function useTransition<E extends HTMLElement = HTMLDivElement>({ appear, repaint, temporary, transitionIn, timeout: propTimeout, onEnter, onEntering, onEntered, onExit, onExiting, onExited, }: TransitionOptions<E>): TransitionReturnValue<E>;
+export default function useTransition<E extends HTMLElement = HTMLDivElement>({ appear, repaint, temporary, transitionIn, timeout: propTimeout, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ref, }: TransitionOptions<E>): TransitionReturnValue<E>;

lib/useTransition.js

@@ -18,2 +18,3 @@ "use strict";
 var react_1 = require("react");
+var utils_1 = require("@react-md/utils");
 var constants_1 = require("./constants");
@@ -23,3 +24,2 @@ var getNextStage_1 = __importDefault(require("./getNextStage"));
 var getTimeoutDuration_1 = __importDefault(require("./getTimeoutDuration"));
-var getNode_1 = __importDefault(require("./getNode"));
 /**
@@ -78,3 +78,3 @@ *
 function useTransition(_a) {
-    var _b = _a.appear, appear = _b === void 0 ? false : _b, _c = _a.repaint, repaint = _c === void 0 ? false : _c, _d = _a.temporary, temporary = _d === void 0 ? false : _d, transitionIn = _a.transitionIn, propTimeout = _a.timeout, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited;
+    var _b = _a.appear, appear = _b === void 0 ? false : _b, _c = _a.repaint, repaint = _c === void 0 ? false : _c, _d = _a.temporary, temporary = _d === void 0 ? false : _d, transitionIn = _a.transitionIn, propTimeout = _a.timeout, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, ref = _a.ref;
     var _e = react_1.useReducer(reducer, INITIAL_STATE, getInitialState(transitionIn, temporary, appear)), _f = _e[0], stage = _f.stage, rendered = _f.rendered, appearing = _f.appearing, dispatch = _e[1];
@@ -149,42 +149,44 @@ // need to store in mutable ref since these are mostly going to be arrow functions
         }
-        var node = getNode_1.default(nodeRef);
-        if (repaint && stage !== constants_1.EXITED && stage !== constants_1.ENTERED) {
-            // force repaint for CSS transitions
-            // eslint-disable-next-line no-unused-expressions
-            node.scrollTop;
+        var node = nodeRef.current;
+        if (node) {
+            if (repaint && stage !== constants_1.EXITED && stage !== constants_1.ENTERED) {
+                // force repaint for CSS transitions
+                // eslint-disable-next-line no-unused-expressions
+                node.scrollTop;
+            }
+            var _a = handlers.current, onEnter_1 = _a.onEnter, onEntering_1 = _a.onEntering, onEntered_1 = _a.onEntered, onExit_1 = _a.onExit, onExiting_1 = _a.onExiting, onExited_1 = _a.onExited;
+            switch (stage) {
+                case constants_1.ENTER:
+                    if (onEnter_1) {
+                        onEnter_1(node, appearing);
+                    }
+                    break;
+                case constants_1.ENTERING:
+                    if (onEntering_1) {
+                        onEntering_1(node, appearing);
+                    }
+                    break;
+                case constants_1.ENTERED:
+                    if (onEntered_1) {
+                        onEntered_1(node, appearing);
+                    }
+                    break;
+                case constants_1.EXIT:
+                    if (onExit_1) {
+                        onExit_1(node);
+                    }
+                    break;
+                case constants_1.EXITING:
+                    if (onExiting_1) {
+                        onExiting_1(node);
+                    }
+                    break;
+                case constants_1.EXITED:
+                    if (onExited_1) {
+                        onExited_1(node);
+                    }
+                    break;
+                // no default
+            }
         }
-        var _a = handlers.current, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited;
-        switch (stage) {
-            case constants_1.ENTER:
-                if (onEnter) {
-                    onEnter(node, appearing);
-                }
-                break;
-            case constants_1.ENTERING:
-                if (onEntering) {
-                    onEntering(node, appearing);
-                }
-                break;
-            case constants_1.ENTERED:
-                if (onEntered) {
-                    onEntered(node, appearing);
-                }
-                break;
-            case constants_1.EXIT:
-                if (onExit) {
-                    onExit(node);
-                }
-                break;
-            case constants_1.EXITING:
-                if (onExiting) {
-                    onExiting(node);
-                }
-                break;
-            case constants_1.EXITED:
-                if (onExited) {
-                    onExited(node);
-                }
-                break;
-            // no default
-        }
         var nextStage = getNextStage_1.default(stage);
@@ -217,4 +219,8 @@ if (stage === nextStage) {
     ]);
+    var refHandler = react_1.useCallback(function (instance) {
+        utils_1.applyRef(instance, ref);
+        nodeRef.current = instance;
+    }, [ref]);
     return {
-        ref: nodeRef,
+        ref: refHandler,
         stage: stage,
@@ -221,0 +227,0 @@ rendered: rendered,

package.json

 {
   "name": "@react-md/transition",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "A package for working with react-md to use some simple transitions.",
@@ -40,4 +40,4 @@ "scripts": {
     "@react-md/portal": "^2.0.0-beta.0",
-    "@react-md/theme": "^2.0.0-beta.0",
-    "@react-md/utils": "^2.0.0-beta.0",
+    "@react-md/theme": "^2.0.0-beta.1",
+    "@react-md/utils": "^2.0.0-beta.1",
     "@types/react-transition-group": "^4.2.4",
@@ -56,3 +56,3 @@ "classnames": "^2.2.6",
   },
-  "gitHead": "8d754a2c2734ee98eaf571e348a836cf12a9f104"
+  "gitHead": "76642fca0cf36307a5431d67a8eb4abe0a7b18a6"
 }

src/types.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, MutableRefObject } from "react";
+import { CSSProperties, Ref, RefCallback } from "react";
 import {
@@ -158,2 +158,14 @@ CSSTransitionClassNames,
   /**
+   * Boolean if the transition should allow for an enter animation once the
+   * `transitionIn` booleanis set to `true`.
+   */
+  enter?: boolean;
+
+  /**
+   * Boolean if the transition should allow for an exit animation once the
+   * `transitionIn` booleanis set to `false`.
+   */
+  exit?: boolean;
+
+  /**
    * Boolean if the component should mount and unmount based on the current
@@ -197,2 +209,8 @@ * `transitionIn` stage with a default value of `false`. When this is
   timeout: TransitionTimeout;
+
+  /**
+   * An optional ref that will get merged with the required ref for the
+   * transition to work.
+   */
+  ref?: Ref<E>;
 }
@@ -256,3 +274,3 @@
    */
-  ref: MutableRefObject<E | null>;
+  ref: RefCallback<E>;
 
@@ -326,3 +344,3 @@ /**
    */
-  ref: MutableRefObject<E | null>;
+  ref: RefCallback<E>;
 
@@ -329,0 +347,0 @@ /**

src/useTransition.ts

 import {
-  MutableRefObject,
   useEffect,
@@ -7,3 +6,7 @@ useReducer,
   Dispatch,
+  useCallback,
+  RefCallback,
 } from "react";
+import { applyRef } from "@react-md/utils";
+
 import { TransitionOptions } from "./types";
@@ -24,3 +27,2 @@ import {
 import getTimeoutDuration from "./getTimeoutDuration";
-import getNode from "./getNode";
 
@@ -59,3 +61,3 @@ export interface TransitionState {
    */
-  ref: MutableRefObject<E | null>;
+  ref: RefCallback<E>;
 
@@ -156,2 +158,3 @@ /**
   onExited,
+  ref,
 }: TransitionOptions<E>): TransitionReturnValue<E> {
@@ -239,49 +242,51 @@ const [{ stage, rendered, appearing }, dispatch] = useReducer(
 
-    const node = getNode(nodeRef);
-    if (repaint && stage !== EXITED && stage !== ENTERED) {
-      // force repaint for CSS transitions
-      // eslint-disable-next-line no-unused-expressions
-      node.scrollTop;
-    }
+    const node = nodeRef.current;
+    if (node) {
+      if (repaint && stage !== EXITED && stage !== ENTERED) {
+        // force repaint for CSS transitions
+        // eslint-disable-next-line no-unused-expressions
+        node.scrollTop;
+      }
 
-    const {
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-    } = handlers.current;
-    switch (stage) {
-      case ENTER:
-        if (onEnter) {
-          onEnter(node, appearing);
-        }
-        break;
-      case ENTERING:
-        if (onEntering) {
-          onEntering(node, appearing);
-        }
-        break;
-      case ENTERED:
-        if (onEntered) {
-          onEntered(node, appearing);
-        }
-        break;
-      case EXIT:
-        if (onExit) {
-          onExit(node);
-        }
-        break;
-      case EXITING:
-        if (onExiting) {
-          onExiting(node);
-        }
-        break;
-      case EXITED:
-        if (onExited) {
-          onExited(node);
-        }
-        break;
-      // no default
+      const {
+        onEnter,
+        onEntering,
+        onEntered,
+        onExit,
+        onExiting,
+        onExited,
+      } = handlers.current;
+      switch (stage) {
+        case ENTER:
+          if (onEnter) {
+            onEnter(node, appearing);
+          }
+          break;
+        case ENTERING:
+          if (onEntering) {
+            onEntering(node, appearing);
+          }
+          break;
+        case ENTERED:
+          if (onEntered) {
+            onEntered(node, appearing);
+          }
+          break;
+        case EXIT:
+          if (onExit) {
+            onExit(node);
+          }
+          break;
+        case EXITING:
+          if (onExiting) {
+            onExiting(node);
+          }
+          break;
+        case EXITED:
+          if (onExited) {
+            onExited(node);
+          }
+          break;
+        // no default
+      }
     }
@@ -328,4 +333,12 @@
 
+  const refHandler = useCallback(
+    (instance: E | null) => {
+      applyRef(instance, ref);
+      nodeRef.current = instance;
+    },
+    [ref]
+  );
+
   return {
-    ref: nodeRef,
+    ref: refHandler,
     stage,
@@ -332,0 +345,0 @@ rendered,

types/CrossFade.d.ts

@@ -47,3 +47,3 @@ import React, { HTMLAttributes } from "react";
  */
-declare const CrossFade: React.ForwardRefExoticComponent<CrossFadeProps & React.RefAttributes<HTMLDivElement>>;
+declare const CrossFade: React.ForwardRefExoticComponent<Pick<CrossFadeProps, "hidden" | "color" | "style" | "wrap" | "slot" | "title" | "children" | "timeout" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "classNames" | "transitionIn" | "appear" | "enter" | "exit" | "temporary" | "onScroll" | "onChange" | "onKeyDown" | "className" | "aria-label" | "aria-labelledby" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
 export default CrossFade;

types/types.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, MutableRefObject } from "react";
+import { CSSProperties, Ref, RefCallback } from "react";
 import { CSSTransitionClassNames, CSSTransitionProps } from "react-transition-group/CSSTransition";
@@ -108,2 +108,12 @@ import { TransitionActions, TransitionProps } from "react-transition-group/Transition";
     /**
+     * Boolean if the transition should allow for an enter animation once the
+     * `transitionIn` booleanis set to `true`.
+     */
+    enter?: boolean;
+    /**
+     * Boolean if the transition should allow for an exit animation once the
+     * `transitionIn` booleanis set to `false`.
+     */
+    exit?: boolean;
+    /**
      * Boolean if the component should mount and unmount based on the current
@@ -145,2 +155,7 @@ * `transitionIn` stage with a default value of `false`. When this is
     timeout: TransitionTimeout;
+    /**
+     * An optional ref that will get merged with the required ref for the
+     * transition to work.
+     */
+    ref?: Ref<E>;
 }
@@ -200,3 +215,3 @@ export interface CSSTransitionOptions<E extends HTMLElement> extends Omit<TransitionOptions<E>, "repaint"> {
      */
-    ref: MutableRefObject<E | null>;
+    ref: RefCallback<E>;
     /**
@@ -260,3 +275,3 @@ * The current class name based on the provided `className` options and the
      */
-    ref: MutableRefObject<E | null>;
+    ref: RefCallback<E>;
     /**
@@ -263,0 +278,0 @@ * The `hidden` DOM attribute that will be enabled if the component is fully

types/useTransition.d.ts

@@ -1,2 +0,2 @@
-import { MutableRefObject, Dispatch } from "react";
+import { Dispatch, RefCallback } from "react";
 import { TransitionOptions } from "./types";
@@ -32,3 +32,3 @@ import { TransitionStage, TransitionAction } from "./constants";
      */
-    ref: MutableRefObject<E | null>;
+    ref: RefCallback<E>;
     /**
@@ -65,2 +65,2 @@ * A dispatch function that cna update the transition state manually. This
  */
-export default function useTransition<E extends HTMLElement = HTMLDivElement>({ appear, repaint, temporary, transitionIn, timeout: propTimeout, onEnter, onEntering, onEntered, onExit, onExiting, onExited, }: TransitionOptions<E>): TransitionReturnValue<E>;
+export default function useTransition<E extends HTMLElement = HTMLDivElement>({ appear, repaint, temporary, transitionIn, timeout: propTimeout, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ref, }: TransitionOptions<E>): TransitionReturnValue<E>;

No alert changes

Improved metrics

Total package byte prevSize

378374

increased by3.96%

Worsened metrics

Number of package files

142

decreased by-5.33%

Lines of code

7187

decreased by-0.53%

Dependency changes

• Updated@react-md/theme@^2.0.0-beta.1

• Updated@react-md/utils@^2.0.0-beta.1