@atlaskit/motion - npm Package Compare versions

Comparing version 1.4.5 to 1.5.0

CHANGELOG.md

 # @atlaskit/motion
 
+## 1.5.0
+
+### Minor Changes
+
+- [`b3ba6514308`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3ba6514308) - Introduce `reduceMotionAsPerUserPreference` in favour of `prefersReducedMotion` as the latter does not work correctly with Compiled.
+
 ## 1.4.5
@@ -4,0 +10,0 @@

dist/cjs/entering/keyframes-motion.js

@@ -95,3 +95,3 @@ "use strict";
       ref: staggered.ref,
-      className: hasAnimationStyles ? css(_objectSpread(_objectSpread({}, (0, _accessibility.prefersReducedMotion)()), {}, {
+      className: hasAnimationStyles ? css(_objectSpread(_objectSpread({}, _accessibility.reduceMotionAsPerUserPreference), {}, {
         animationDelay: "".concat(delay, "ms"),
@@ -98,0 +98,0 @@ animationDuration: "".concat(isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration, "ms"),

dist/cjs/entry-points/accessibility.js

@@ -18,2 +18,8 @@ "use strict";
 });
+Object.defineProperty(exports, "reduceMotionAsPerUserPreference", {
+  enumerable: true,
+  get: function get() {
+    return _accessibility.reduceMotionAsPerUserPreference;
+  }
+});
 Object.defineProperty(exports, "useIsReducedMotion", {
@@ -20,0 +26,0 @@ enumerable: true,

dist/cjs/index.js

@@ -104,2 +104,8 @@ "use strict";
 });
+Object.defineProperty(exports, "reduceMotionAsPerUserPreference", {
+  enumerable: true,
+  get: function get() {
+    return _accessibility.reduceMotionAsPerUserPreference;
+  }
+});
 Object.defineProperty(exports, "shrinkOutAnimation", {
@@ -106,0 +112,0 @@ enumerable: true,

dist/cjs/utils/accessibility.js

@@ -7,3 +7,3 @@ "use strict";
 });
-exports.useIsReducedMotion = exports.prefersReducedMotion = exports.isReducedMotion = void 0;
+exports.useIsReducedMotion = exports.reduceMotionAsPerUserPreference = exports.prefersReducedMotion = exports.isReducedMotion = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -63,10 +63,17 @@ var _react = require("react");
 exports.useIsReducedMotion = useIsReducedMotion;
+var reduceMotionAsPerUserPreference = {
+  '@media (prefers-reduced-motion: reduce)': {
+    animation: 'none',
+    transition: 'none'
+  }
+};
+
+/**
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-4709 Internal documentation for deprecation (no external access)}
+ * Use the sibling export `reduceMotionAsPerUserPreference` instead.
+ */
+exports.reduceMotionAsPerUserPreference = reduceMotionAsPerUserPreference;
 var prefersReducedMotion = function prefersReducedMotion() {
-  return {
-    '@media (prefers-reduced-motion: reduce)': {
-      animation: 'none',
-      transition: 'none'
-    }
-  };
+  return reduceMotionAsPerUserPreference;
 };
 exports.prefersReducedMotion = prefersReducedMotion;

dist/es2019/entering/keyframes-motion.js

 import React, { useEffect, useState } from 'react';
 import { ClassNames, keyframes } from '@emotion/react';
-import { prefersReducedMotion } from '../utils/accessibility';
+import { reduceMotionAsPerUserPreference } from '../utils/accessibility';
 import { largeDurationMs } from '../utils/durations';
@@ -81,3 +81,3 @@ import { useSetTimeout } from '../utils/timer-hooks';
     className: hasAnimationStyles ? css({
-      ...prefersReducedMotion(),
+      ...reduceMotionAsPerUserPreference,
       animationDelay: `${delay}ms`,
@@ -84,0 +84,0 @@ animationDuration: `${isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration}ms`,

dist/es2019/entry-points/accessibility.js

@@ -1,1 +0,1 @@
-export { isReducedMotion, useIsReducedMotion, prefersReducedMotion } from '../utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, reduceMotionAsPerUserPreference } from '../utils/accessibility';

dist/es2019/index.js

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

dist/es2019/utils/accessibility.js

@@ -46,3 +46,3 @@ import { useEffect, useState } from 'react';
  */
-export const prefersReducedMotion = () => ({
+export const reduceMotionAsPerUserPreference = {
   '@media (prefers-reduced-motion: reduce)': {
@@ -52,2 +52,8 @@ animation: 'none',
   }
-});
+};
+
+/**
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-4709 Internal documentation for deprecation (no external access)}
+ * Use the sibling export `reduceMotionAsPerUserPreference` instead.
+ */
+export const prefersReducedMotion = () => reduceMotionAsPerUserPreference;

dist/esm/entering/keyframes-motion.js

@@ -7,3 +7,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ClassNames, keyframes } from '@emotion/react';
-import { prefersReducedMotion } from '../utils/accessibility';
+import { reduceMotionAsPerUserPreference } from '../utils/accessibility';
 import { largeDurationMs } from '../utils/durations';
@@ -87,3 +87,3 @@ import { useSetTimeout } from '../utils/timer-hooks';
       ref: staggered.ref,
-      className: hasAnimationStyles ? css(_objectSpread(_objectSpread({}, prefersReducedMotion()), {}, {
+      className: hasAnimationStyles ? css(_objectSpread(_objectSpread({}, reduceMotionAsPerUserPreference), {}, {
         animationDelay: "".concat(delay, "ms"),
@@ -90,0 +90,0 @@ animationDuration: "".concat(isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration, "ms"),

dist/esm/entry-points/accessibility.js

@@ -1,1 +0,1 @@
-export { isReducedMotion, useIsReducedMotion, prefersReducedMotion } from '../utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, reduceMotionAsPerUserPreference } from '../utils/accessibility';

dist/esm/index.js

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

dist/esm/utils/accessibility.js

@@ -53,9 +53,15 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
+export var reduceMotionAsPerUserPreference = {
+  '@media (prefers-reduced-motion: reduce)': {
+    animation: 'none',
+    transition: 'none'
+  }
+};
+
+/**
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-4709 Internal documentation for deprecation (no external access)}
+ * Use the sibling export `reduceMotionAsPerUserPreference` instead.
+ */
 export var prefersReducedMotion = function prefersReducedMotion() {
-  return {
-    '@media (prefers-reduced-motion: reduce)': {
-      animation: 'none',
-      transition: 'none'
-    }
-  };
+  return reduceMotionAsPerUserPreference;
 };

dist/types-ts4.5/entry-points/accessibility.d.ts

@@ -1,1 +0,1 @@
-export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, } from '../utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, reduceMotionAsPerUserPreference, } from '../utils/accessibility';

dist/types-ts4.5/index.d.ts

 export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs, } from './utils/durations';
 export { easeIn, easeInOut, easeOut } from './utils/curves';
-export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, } from './utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, reduceMotionAsPerUserPreference, prefersReducedMotion, } from './utils/accessibility';
 export { default as FadeIn, fadeInAnimation } from './entering/fade-in';
@@ -5,0 +5,0 @@ export type { FadeKeyframesMotionProps } from './entering/fade-in';

dist/types-ts4.5/utils/accessibility.d.ts

@@ -18,7 +18,17 @@ /**
  */
+export declare const reduceMotionAsPerUserPreference: {
+    readonly '@media (prefers-reduced-motion: reduce)': {
+        readonly animation: "none";
+        readonly transition: "none";
+    };
+};
+/**
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-4709 Internal documentation for deprecation (no external access)}
+ * Use the sibling export `reduceMotionAsPerUserPreference` instead.
+ */
 export declare const prefersReducedMotion: () => {
-    '@media (prefers-reduced-motion: reduce)': {
-        animation: string;
-        transition: string;
+    readonly '@media (prefers-reduced-motion: reduce)': {
+        readonly animation: "none";
+        readonly transition: "none";
     };
 };

dist/types/entry-points/accessibility.d.ts

@@ -1,1 +0,1 @@
-export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, } from '../utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, reduceMotionAsPerUserPreference, } from '../utils/accessibility';

dist/types/index.d.ts

 export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs, } from './utils/durations';
 export { easeIn, easeInOut, easeOut } from './utils/curves';
-export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, } from './utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, reduceMotionAsPerUserPreference, prefersReducedMotion, } from './utils/accessibility';
 export { default as FadeIn, fadeInAnimation } from './entering/fade-in';
@@ -5,0 +5,0 @@ export type { FadeKeyframesMotionProps } from './entering/fade-in';

dist/types/utils/accessibility.d.ts

@@ -18,7 +18,17 @@ /**
  */
+export declare const reduceMotionAsPerUserPreference: {
+    readonly '@media (prefers-reduced-motion: reduce)': {
+        readonly animation: "none";
+        readonly transition: "none";
+    };
+};
+/**
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-4709 Internal documentation for deprecation (no external access)}
+ * Use the sibling export `reduceMotionAsPerUserPreference` instead.
+ */
 export declare const prefersReducedMotion: () => {
-    '@media (prefers-reduced-motion: reduce)': {
-        animation: string;
-        transition: string;
+    readonly '@media (prefers-reduced-motion: reduce)': {
+        readonly animation: "none";
+        readonly transition: "none";
     };
 };

package.json

 {
   "name": "@atlaskit/motion",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "A set of utilities to apply motion in your application.",
@@ -5,0 +5,0 @@ "publishConfig": {

report.api.md

@@ -130,7 +130,7 @@ <!-- API Report Version: 2.3 -->
 
-// @public
+// @public @deprecated (undocumented)
 export const prefersReducedMotion: () => {
-  '@media (prefers-reduced-motion: reduce)': {
-    animation: string;
-    transition: string;
+  readonly '@media (prefers-reduced-motion: reduce)': {
+    readonly animation: 'none';
+    readonly transition: 'none';
   };
@@ -140,2 +140,10 @@ };
 // @public
+export const reduceMotionAsPerUserPreference: {
+  readonly '@media (prefers-reduced-motion: reduce)': {
+    readonly animation: 'none';
+    readonly transition: 'none';
+  };
+};
+
+// @public
 export const ResizingHeight: ({
@@ -142,0 +150,0 @@ children,

tmp/api-report-tmp.d.ts

@@ -98,7 +98,7 @@ ## API Report File for "@atlaskit/motion"
 
-// @public
+// @public @deprecated (undocumented)
 export const prefersReducedMotion: () => {
-    '@media (prefers-reduced-motion: reduce)': {
-        animation: string;
-        transition: string;
+    readonly '@media (prefers-reduced-motion: reduce)': {
+        readonly animation: "none";
+        readonly transition: "none";
     };
@@ -108,2 +108,10 @@ };
 // @public
+export const reduceMotionAsPerUserPreference: {
+    readonly '@media (prefers-reduced-motion: reduce)': {
+        readonly animation: "none";
+        readonly transition: "none";
+    };
+};
+
+// @public
 export const ResizingHeight: ({ children, ...props }: ResizingHeightOpts & {
@@ -110,0 +118,0 @@ children: (opts: {

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

213088

increased by1.55%

Lines of code

4311

increased by1.29%

No dependency changes