@atlaskit/motion - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

CHANGELOG.md

 # @atlaskit/motion
 
+## 0.1.0
+
+### Minor Changes
+
+- [minor][5c3fc52da7](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/5c3fc52da7):
+
+  The internal `Motion` component is now called `KeyframesMotion`.- [minor][1dd6a6d6ac](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1dd6a6d6ac):
+
+  `ExitingPersistence` now has an `appear` prop.
+  Previously entering motions would always appear when mounting - now you have to opt into the behaviour.
+
+  ```diff
+  -<ExitingPersistence>
+  +<ExitingPersistence appear>
+    ...
+  </ExitingPersistence>
+  ```
+
+### Patch Changes
+
+- [patch][f175c8088f](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f175c8088f):
+
+  Fixes non-exiting elements from re-rendering unnecessarily.
+
 ## 0.0.4
@@ -20,3 +44,3 @@
 
-  ## New `useResizingHeight()` hook
+  New `useResizingHeight()` hook
 
@@ -26,3 +50,3 @@ This is a small yet powerful hook which you can consume to enable an element to resize its `height` when it changes after a state transition.
 
-  ```js
+  ```
   import { useResizingHeight } from '@atlaskit/motion';
@@ -29,0 +53,0 @@

dist/cjs/entering/fade-in.d.ts

@@ -1,45 +0,7 @@
-import React, { Ref } from 'react';
-export declare const fadeInAnimation: () => {
-    from: {
-        opacity: number;
-        transform: string;
-    };
-    to: {
-        opacity: number;
-        transform: string;
-    };
-};
-interface FadeInProps {
-    /**
-     * Delay in ms.
-     * The animation will be delayed this long before running.
-     * Defaults to `0`.
-     */
-    delay?: number;
-    /**
-     * Duration in ms.
-     * How long the animation will take.
-     * Defaults to `largeDurationMs`.
-     */
-    duration?: number;
-    /**
-     * Use to pause the animation.
-     */
-    isPaused?: boolean;
-    /**
-     * Children as `function`.
-     * Will be passed `props` for you to hook up.
-     */
-    children: (props: {
-        className: string;
-        ref: Ref<any>;
-    }) => JSX.Element;
-}
-/**
- * For a single element that needs a fade in entering animation.
- * This does not need Javascript to execute so it will run immediately for any SSR rendered React apps before the JS has executed.
- *
- * Will add a `className` to the direct child.
- */
-declare const FadeIn: React.FC<FadeInProps>;
+import React from 'react';
+import { ObjectInterpolation } from '@emotion/core';
+import { KeyframesMotionProps } from './keyframes-motion';
+export declare const fadeInAnimation: () => ObjectInterpolation<undefined>;
+export declare const fadeOutAnimation: () => ObjectInterpolation<undefined>;
+declare const FadeIn: React.FC<KeyframesMotionProps>;
 export default FadeIn;

dist/cjs/entering/fade-in.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var core_1 = require("@emotion/core");
+var react_1 = tslib_1.__importDefault(require("react"));
 var curves_1 = require("../utils/curves");
 var durations_1 = require("../utils/durations");
-var accessibility_1 = require("../utils/accessibility");
+var keyframes_motion_1 = tslib_1.__importDefault(require("./keyframes-motion"));
 exports.fadeInAnimation = function () { return ({
@@ -14,24 +13,24 @@ from: {
     },
+    '50%': {
+        opacity: 1,
+    },
     to: {
-        opacity: 1,
         transform: 'none',
     },
 }); };
-/**
- * For a single element that needs a fade in entering animation.
- * This does not need Javascript to execute so it will run immediately for any SSR rendered React apps before the JS has executed.
- *
- * Will add a `className` to the direct child.
- */
-var FadeIn = react_1.forwardRef(function (_a, ref) {
-    var children = _a.children, isPaused = _a.isPaused, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? durations_1.largeDurationMs : _c;
-    return (react_1.default.createElement(core_1.ClassNames, null, function (_a) {
-        var css = _a.css;
-        return children({
-            ref: ref,
-            className: css(tslib_1.__assign({ animationName: "" + core_1.keyframes(exports.fadeInAnimation()), animationTimingFunction: curves_1.easeInOut, animationDelay: delay + "ms", animationFillMode: 'backwards', animationDuration: duration + "ms", animationPlayState: isPaused ? 'paused' : 'running' }, accessibility_1.prefersReducedMotion())),
-        });
-    }));
-});
+exports.fadeOutAnimation = function () { return ({
+    from: {
+        opacity: 1,
+        transform: 'translate3d(0, 0, 0)',
+    },
+    to: {
+        opacity: 0,
+        transform: 'translate3d(0, -10%, 0)',
+    },
+}); };
+var FadeIn = function (_a) {
+    var children = _a.children, _b = _a.duration, duration = _b === void 0 ? durations_1.largeDurationMs : _b;
+    return (react_1.default.createElement(keyframes_motion_1.default, { duration: duration, enteringAnimation: exports.fadeInAnimation(), exitingAnimation: exports.fadeOutAnimation(), animationTimingFunction: function () { return curves_1.easeInOut; } }, children));
+};
 exports.default = FadeIn;
 //# sourceMappingURL=fade-in.js.map

dist/cjs/entering/staggered-entrance.d.ts

@@ -11,8 +11,8 @@ import React from 'react';
     /**
-     * Number of columns the children elements will be displayed over.
-     * Use `"responsive"` to have it calculate dynamically on the client side.
+     Number of columns the children elements will be displayed over.
+     Use `"responsive"` to have it calculate dynamically on the client side.
   
-     * **NOTE:** This has a big caveat that the elements will be invisible until the client side Javascript executes.
-     * If you have a fixed grid or list, set this to a specific number.
-     * Defaults to `"responsive"`.
+     **NOTE:** This has a big caveat that the elements will be invisible until the client side Javascript executes.
+     If you have a fixed grid or list, set this to a specific number.
+     Defaults to `"responsive"`.
      */
@@ -27,6 +27,11 @@ columns?: number | 'responsive';
     /**
-     * Child entering elements, for example the `FadeIn` component.
+     * Any valid react child with an entrance motion somewhere in the tree as a descendant.
      */
     children: JSX.Element | JSX.Element[];
 }
+export declare const useStaggeredEntrance: () => {
+    isReady: boolean;
+    delay: number;
+    ref: React.Ref<any>;
+};
 /**
@@ -33,0 +38,0 @@ * For a list of elements that need to animate in,

dist/cjs/entering/staggered-entrance.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var react_1 = require("react");
+var react_1 = tslib_1.__importStar(require("react"));
+var use_unique_id_1 = require("../utils/use-unique-id");
+var StaggeredEntranceContext = react_1.createContext(function () { return ({ isReady: true, delay: 0, ref: function () { } }); });
+exports.useStaggeredEntrance = function () {
+    var indentifier = use_unique_id_1.useUniqueId();
+    var context = react_1.useContext(StaggeredEntranceContext);
+    return context(indentifier);
+};
 /**
@@ -16,2 +23,3 @@ * For a list of elements that need to animate in,
     var elementRefs = react_1.useRef([]);
+    var indexes = [];
     var _d = tslib_1.__read(react_1.useState(function () {
@@ -70,22 +78,25 @@ if (typeof columns === 'number') {
     }, []);
-    return react_1.Children.toArray(children).map(function (child, index) {
-        var currentColumn = column || index % actualColumns;
-        var currentRow = Math.floor(index / actualColumns);
-        var distanceFromTopLeftElement = currentRow + currentColumn;
-        // We don't want loads of elements to have the same staggered delay as it ends up looking slow for users.
-        // To get around that we calculate the logarithm using `distanceFromTopLeftElement` which ends making
-        // elements appear faster the further away from the top left element.
-        var delay = Math.ceil(Math.log(distanceFromTopLeftElement + 1) * delayStep * 1.5);
-        return react_1.cloneElement(child, {
-            delay: delay,
-            isPaused: actualColumns === 0,
-            ref: function (element) {
-                return (elementRefs.current[index] = element);
-            },
-        });
-        // Types don't support returning an array unfortunately.
-        // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20356
-    });
+    return (react_1.default.createElement(StaggeredEntranceContext.Provider, { value: function (id) {
+            if (!indexes.includes(id)) {
+                indexes.push(id);
+            }
+            var isReady = actualColumns > 0;
+            var index = indexes.indexOf(id);
+            var currentColumn = column || index % actualColumns;
+            var currentRow = Math.floor(index / actualColumns);
+            var distanceFromTopLeftElement = currentRow + currentColumn;
+            // We don't want loads of elements to have the same staggered delay as it ends up looking slow for users.
+            // To get around that we calculate the logarithm using `distanceFromTopLeftElement` which ends making
+            // elements appear faster the further away from the top left element.
+            var delay = Math.ceil(Math.log(distanceFromTopLeftElement + 1) * delayStep * 1.5) || 0;
+            return {
+                delay: delay,
+                isReady: isReady,
+                ref: function (element) {
+                    return (elementRefs.current[index] = element);
+                },
+            };
+        } }, children));
 };
 exports.default = StaggeredEntrance;
 //# sourceMappingURL=staggered-entrance.js.map

dist/cjs/index.d.ts

@@ -7,1 +7,2 @@ export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs, } from './utils/durations';
 export { useResizingHeight } from './resizing/height';
+export { default as ExitingPersistence } from './entering/exiting-persistence';

dist/cjs/index.js

@@ -22,2 +22,4 @@ "use strict";
 exports.useResizingHeight = height_1.useResizingHeight;
+var exiting_persistence_1 = require("./entering/exiting-persistence");
+exports.ExitingPersistence = exiting_persistence_1.default;
 //# sourceMappingURL=index.js.map

dist/cjs/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.0.4",
+	"version": "0.1.0",
 	"sideEffects": false
 }

dist/esm/entering/fade-in.d.ts

@@ -1,45 +0,7 @@
-import React, { Ref } from 'react';
-export declare const fadeInAnimation: () => {
-    from: {
-        opacity: number;
-        transform: string;
-    };
-    to: {
-        opacity: number;
-        transform: string;
-    };
-};
-interface FadeInProps {
-    /**
-     * Delay in ms.
-     * The animation will be delayed this long before running.
-     * Defaults to `0`.
-     */
-    delay?: number;
-    /**
-     * Duration in ms.
-     * How long the animation will take.
-     * Defaults to `largeDurationMs`.
-     */
-    duration?: number;
-    /**
-     * Use to pause the animation.
-     */
-    isPaused?: boolean;
-    /**
-     * Children as `function`.
-     * Will be passed `props` for you to hook up.
-     */
-    children: (props: {
-        className: string;
-        ref: Ref<any>;
-    }) => JSX.Element;
-}
-/**
- * For a single element that needs a fade in entering animation.
- * This does not need Javascript to execute so it will run immediately for any SSR rendered React apps before the JS has executed.
- *
- * Will add a `className` to the direct child.
- */
-declare const FadeIn: React.FC<FadeInProps>;
+import React from 'react';
+import { ObjectInterpolation } from '@emotion/core';
+import { KeyframesMotionProps } from './keyframes-motion';
+export declare const fadeInAnimation: () => ObjectInterpolation<undefined>;
+export declare const fadeOutAnimation: () => ObjectInterpolation<undefined>;
+declare const FadeIn: React.FC<KeyframesMotionProps>;
 export default FadeIn;

dist/esm/entering/fade-in.js

@@ -1,7 +0,5 @@
-import { __assign } from "tslib";
-import React, { forwardRef } from 'react';
-import { ClassNames, keyframes } from '@emotion/core';
+import React from 'react';
 import { easeInOut } from '../utils/curves';
 import { largeDurationMs } from '../utils/durations';
-import { prefersReducedMotion } from '../utils/accessibility';
+import EnteringMotion from './keyframes-motion';
 export var fadeInAnimation = function () { return ({
@@ -12,24 +10,24 @@ from: {
     },
+    '50%': {
+        opacity: 1,
+    },
     to: {
-        opacity: 1,
         transform: 'none',
     },
 }); };
-/**
- * For a single element that needs a fade in entering animation.
- * This does not need Javascript to execute so it will run immediately for any SSR rendered React apps before the JS has executed.
- *
- * Will add a `className` to the direct child.
- */
-var FadeIn = forwardRef(function (_a, ref) {
-    var children = _a.children, isPaused = _a.isPaused, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? largeDurationMs : _c;
-    return (React.createElement(ClassNames, null, function (_a) {
-        var css = _a.css;
-        return children({
-            ref: ref,
-            className: css(__assign({ animationName: "" + keyframes(fadeInAnimation()), animationTimingFunction: easeInOut, animationDelay: delay + "ms", animationFillMode: 'backwards', animationDuration: duration + "ms", animationPlayState: isPaused ? 'paused' : 'running' }, prefersReducedMotion())),
-        });
-    }));
-});
+export var fadeOutAnimation = function () { return ({
+    from: {
+        opacity: 1,
+        transform: 'translate3d(0, 0, 0)',
+    },
+    to: {
+        opacity: 0,
+        transform: 'translate3d(0, -10%, 0)',
+    },
+}); };
+var FadeIn = function (_a) {
+    var children = _a.children, _b = _a.duration, duration = _b === void 0 ? largeDurationMs : _b;
+    return (React.createElement(EnteringMotion, { duration: duration, enteringAnimation: fadeInAnimation(), exitingAnimation: fadeOutAnimation(), animationTimingFunction: function () { return easeInOut; } }, children));
+};
 export default FadeIn;
 //# sourceMappingURL=fade-in.js.map

dist/esm/entering/staggered-entrance.d.ts

@@ -11,8 +11,8 @@ import React from 'react';
     /**
-     * Number of columns the children elements will be displayed over.
-     * Use `"responsive"` to have it calculate dynamically on the client side.
+     Number of columns the children elements will be displayed over.
+     Use `"responsive"` to have it calculate dynamically on the client side.
   
-     * **NOTE:** This has a big caveat that the elements will be invisible until the client side Javascript executes.
-     * If you have a fixed grid or list, set this to a specific number.
-     * Defaults to `"responsive"`.
+     **NOTE:** This has a big caveat that the elements will be invisible until the client side Javascript executes.
+     If you have a fixed grid or list, set this to a specific number.
+     Defaults to `"responsive"`.
      */
@@ -27,6 +27,11 @@ columns?: number | 'responsive';
     /**
-     * Child entering elements, for example the `FadeIn` component.
+     * Any valid react child with an entrance motion somewhere in the tree as a descendant.
      */
     children: JSX.Element | JSX.Element[];
 }
+export declare const useStaggeredEntrance: () => {
+    isReady: boolean;
+    delay: number;
+    ref: React.Ref<any>;
+};
 /**
@@ -33,0 +38,0 @@ * For a list of elements that need to animate in,

dist/esm/entering/staggered-entrance.js

 import { __read } from "tslib";
-import { cloneElement, useState, useRef, useLayoutEffect, Children, } from 'react';
+import React, { useState, useRef, useLayoutEffect, createContext, useContext, } from 'react';
+import { useUniqueId } from '../utils/use-unique-id';
+var StaggeredEntranceContext = createContext(function () { return ({ isReady: true, delay: 0, ref: function () { } }); });
+export var useStaggeredEntrance = function () {
+    var indentifier = useUniqueId();
+    var context = useContext(StaggeredEntranceContext);
+    return context(indentifier);
+};
 /**
@@ -14,2 +21,3 @@ * For a list of elements that need to animate in,
     var elementRefs = useRef([]);
+    var indexes = [];
     var _d = __read(useState(function () {
@@ -68,22 +76,25 @@ if (typeof columns === 'number') {
     }, []);
-    return Children.toArray(children).map(function (child, index) {
-        var currentColumn = column || index % actualColumns;
-        var currentRow = Math.floor(index / actualColumns);
-        var distanceFromTopLeftElement = currentRow + currentColumn;
-        // We don't want loads of elements to have the same staggered delay as it ends up looking slow for users.
-        // To get around that we calculate the logarithm using `distanceFromTopLeftElement` which ends making
-        // elements appear faster the further away from the top left element.
-        var delay = Math.ceil(Math.log(distanceFromTopLeftElement + 1) * delayStep * 1.5);
-        return cloneElement(child, {
-            delay: delay,
-            isPaused: actualColumns === 0,
-            ref: function (element) {
-                return (elementRefs.current[index] = element);
-            },
-        });
-        // Types don't support returning an array unfortunately.
-        // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20356
-    });
+    return (React.createElement(StaggeredEntranceContext.Provider, { value: function (id) {
+            if (!indexes.includes(id)) {
+                indexes.push(id);
+            }
+            var isReady = actualColumns > 0;
+            var index = indexes.indexOf(id);
+            var currentColumn = column || index % actualColumns;
+            var currentRow = Math.floor(index / actualColumns);
+            var distanceFromTopLeftElement = currentRow + currentColumn;
+            // We don't want loads of elements to have the same staggered delay as it ends up looking slow for users.
+            // To get around that we calculate the logarithm using `distanceFromTopLeftElement` which ends making
+            // elements appear faster the further away from the top left element.
+            var delay = Math.ceil(Math.log(distanceFromTopLeftElement + 1) * delayStep * 1.5) || 0;
+            return {
+                delay: delay,
+                isReady: isReady,
+                ref: function (element) {
+                    return (elementRefs.current[index] = element);
+                },
+            };
+        } }, children));
 };
 export default StaggeredEntrance;
 //# sourceMappingURL=staggered-entrance.js.map

dist/esm/index.d.ts

@@ -7,1 +7,2 @@ export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs, } from './utils/durations';
 export { useResizingHeight } from './resizing/height';
+export { default as ExitingPersistence } from './entering/exiting-persistence';

dist/esm/index.js

@@ -7,2 +7,3 @@ export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs, } from './utils/durations';
 export { useResizingHeight } from './resizing/height';
+export { default as ExitingPersistence } from './entering/exiting-persistence';
 //# sourceMappingURL=index.js.map

dist/esm/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.0.4",
+	"version": "0.1.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/motion",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Atlassian motion variables, components and more.",
@@ -29,9 +29,11 @@ "license": "Apache-2.0",
     "@atlaskit/button": "^13.1.6",
-    "@atlaskit/docs": "^8.1.5",
+    "@atlaskit/docs": "^8.2.0",
     "@atlaskit/logo": "^12.1.8",
     "@atlaskit/section-message": "^4.0.12",
     "@atlaskit/theme": "^9.3.0",
+    "@atlaskit/visual-regression": "^0.1.3",
     "@testing-library/react": "^8.0.1",
     "raf-stub": "^2.0.1",
-    "react-dom": "^16.8.0"
+    "react-dom": "^16.8.0",
+    "react-router-dom": "^4.2.2"
   },
@@ -38,0 +40,0 @@ "keywords": [

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111793

increased by73.37%

Number of package files

90

increased by36.36%

Lines of code

1708

increased by69.95%

Worsened metrics

Dev dependency count

10

increased by25%

No dependency changes