@atlaskit/motion - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

CHANGELOG.md

 # @atlaskit/motion
 
+## 0.0.3
+
+### Patch Changes
+
+- [patch][94abe7f41a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/94abe7f41a):
+
+  ## New `useResizingHeight()` hook
+
+  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.
+  It uses CSS under-the-hood to maximize performance.
+
+  ```js
+  import { useResizingHeight } from '@atlaskit/motion';
+
+  ({ text }) => <div {...useResizingHeight()}>{text}</div>;
+  ```
+
 ## 0.0.2
@@ -4,0 +21,0 @@

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

@@ -30,3 +30,3 @@ import React, { Ref } from 'react';
     /**
-     * Children as function.
+     * Children as `function`.
      * Will be passed `props` for you to hook up.
@@ -33,0 +33,0 @@ */

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

@@ -13,2 +13,3 @@ import React from 'react';
      * 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.
@@ -15,0 +16,0 @@ * If you have a fixed grid or list, set this to a specific number.

dist/cjs/index.d.ts

 export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs, } from './utils/durations';
 export { easeIn, easeInOut, easeOut } from './utils/curves';
+export { isReducedMotion, prefersReducedMotion } from './utils/accessibility';
 export { default as FadeIn, fadeInAnimation } from './entering/fade-in';
 export { default as StaggeredEntrance } from './entering/staggered-entrance';
-export { isReducedMotion, prefersReducedMotion } from './utils/accessibility';
+export { useResizingHeight } from './resizing/height';

dist/cjs/index.js

@@ -12,2 +12,5 @@ "use strict";
 exports.easeOut = curves_1.easeOut;
+var accessibility_1 = require("./utils/accessibility");
+exports.isReducedMotion = accessibility_1.isReducedMotion;
+exports.prefersReducedMotion = accessibility_1.prefersReducedMotion;
 var fade_in_1 = require("./entering/fade-in");
@@ -18,5 +21,4 @@ exports.FadeIn = fade_in_1.default;
 exports.StaggeredEntrance = staggered_entrance_1.default;
-var accessibility_1 = require("./utils/accessibility");
-exports.isReducedMotion = accessibility_1.isReducedMotion;
-exports.prefersReducedMotion = accessibility_1.prefersReducedMotion;
+var height_1 = require("./resizing/height");
+exports.useResizingHeight = height_1.useResizingHeight;
 //# sourceMappingURL=index.js.map

dist/cjs/utils/accessibility.d.ts

 /**
  * Use for any programatic motions needed at runtime.
+ * Will return `true` if the current user prefers reduced motion.
+ * This is generally set through OS preferences/settings.
  */
@@ -8,2 +10,3 @@ export declare const isReducedMotion: () => boolean;
  * Always put at the end of your declaration for correct use of the cascade.
+ * Reduced motion preference is generally set through OS preferences/settings.
  */
@@ -10,0 +13,0 @@ export declare const prefersReducedMotion: () => {

dist/cjs/utils/accessibility.js

@@ -5,2 +5,4 @@ "use strict";
  * Use for any programatic motions needed at runtime.
+ * Will return `true` if the current user prefers reduced motion.
+ * This is generally set through OS preferences/settings.
  */
@@ -14,2 +16,3 @@ exports.isReducedMotion = function () {
  * Always put at the end of your declaration for correct use of the cascade.
+ * Reduced motion preference is generally set through OS preferences/settings.
  */
@@ -16,0 +19,0 @@ exports.prefersReducedMotion = function () { return ({

dist/cjs/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"sideEffects": false
 }

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

@@ -30,3 +30,3 @@ import React, { Ref } from 'react';
     /**
-     * Children as function.
+     * Children as `function`.
      * Will be passed `props` for you to hook up.
@@ -33,0 +33,0 @@ */

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

@@ -13,2 +13,3 @@ import React from 'react';
      * 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.
@@ -15,0 +16,0 @@ * If you have a fixed grid or list, set this to a specific number.

dist/esm/index.d.ts

 export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs, } from './utils/durations';
 export { easeIn, easeInOut, easeOut } from './utils/curves';
+export { isReducedMotion, prefersReducedMotion } from './utils/accessibility';
 export { default as FadeIn, fadeInAnimation } from './entering/fade-in';
 export { default as StaggeredEntrance } from './entering/staggered-entrance';
-export { isReducedMotion, prefersReducedMotion } from './utils/accessibility';
+export { useResizingHeight } from './resizing/height';

dist/esm/index.js

 export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs, } from './utils/durations';
 export { easeIn, easeInOut, easeOut } from './utils/curves';
+export { isReducedMotion, prefersReducedMotion } from './utils/accessibility';
 export { default as FadeIn, fadeInAnimation } from './entering/fade-in';
 export { default as StaggeredEntrance } from './entering/staggered-entrance';
-export { isReducedMotion, prefersReducedMotion } from './utils/accessibility';
+export { useResizingHeight } from './resizing/height';
 //# sourceMappingURL=index.js.map

dist/esm/utils/accessibility.d.ts

 /**
  * Use for any programatic motions needed at runtime.
+ * Will return `true` if the current user prefers reduced motion.
+ * This is generally set through OS preferences/settings.
  */
@@ -8,2 +10,3 @@ export declare const isReducedMotion: () => boolean;
  * Always put at the end of your declaration for correct use of the cascade.
+ * Reduced motion preference is generally set through OS preferences/settings.
  */
@@ -10,0 +13,0 @@ export declare const prefersReducedMotion: () => {

dist/esm/utils/accessibility.js

 /**
  * Use for any programatic motions needed at runtime.
+ * Will return `true` if the current user prefers reduced motion.
+ * This is generally set through OS preferences/settings.
  */
@@ -11,2 +13,3 @@ export var isReducedMotion = function () {
  * Always put at the end of your declaration for correct use of the cascade.
+ * Reduced motion preference is generally set through OS preferences/settings.
  */
@@ -13,0 +16,0 @@ export var prefersReducedMotion = function () { return ({

dist/esm/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/motion",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Atlassian motion variables, components and more.",
@@ -31,4 +31,6 @@ "license": "Apache-2.0",
     "@atlaskit/logo": "^12.1.8",
+    "@atlaskit/section-message": "^4.0.12",
     "@atlaskit/theme": "^9.2.2",
     "@testing-library/react": "^8.0.1",
+    "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0"
@@ -35,0 +37,0 @@ },

Fixed alerts

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63912

increased by84.76%

Number of package files

66

increased by57.14%

Lines of code

1005

increased by78.83%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

8

increased by33.33%

No dependency changes