@atlaskit/motion - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

CHANGELOG.md

 # @atlaskit/motion
 
+## 1.0.4
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
 ## 1.0.3
@@ -4,0 +10,0 @@

dist/cjs/entering/exiting-persistence.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = exports.useExitingPersistence = void 0;
+exports.useExitingPersistence = exports.default = void 0;
 
@@ -11,0 +11,0 @@ var _react = _interopRequireWildcard(require("react"));

dist/cjs/entering/fade-in.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = exports.fadeOutAnimation = exports.fadeInAnimation = void 0;
+exports.fadeOutAnimation = exports.fadeInAnimation = exports.default = void 0;
 
@@ -25,6 +25,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["children", "duration", "entranceDirection"];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var entranceMotions = {
@@ -86,3 +88,3 @@ bottom: 'translate3d(0, calc(5% + 4px), 0)',
       entranceSlideDirection = _ref.entranceDirection,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "duration", "entranceDirection"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, (0, _extends2.default)({
@@ -89,0 +91,0 @@ duration: duration,

dist/cjs/entering/keyframes-motion.js

@@ -34,5 +34,5 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -39,0 +39,0 @@ /**

dist/cjs/entering/slide-in.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = exports.slideInAnimation = void 0;
+exports.slideInAnimation = exports.default = void 0;
 
@@ -25,2 +25,4 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _excluded = ["children", "enterFrom", "exitTo", "fade", "duration", "animationTimingFunction"];
+
 var slideInAnimation = function slideInAnimation(from, state, fade) {
@@ -61,3 +63,3 @@ var _ref;
   } : _ref2$animationTiming,
-      props = (0, _objectWithoutProperties2.default)(_ref2, ["children", "enterFrom", "exitTo", "fade", "duration", "animationTimingFunction"]);
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, (0, _extends2.default)({
@@ -64,0 +66,0 @@ duration: duration,

dist/cjs/entering/staggered-entrance.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.default = exports.useStaggeredEntrance = void 0;
+exports.useStaggeredEntrance = exports.default = void 0;
 
@@ -13,0 +13,0 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

dist/cjs/entering/zoom-in.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = exports.shrinkOutAnimation = exports.zoomInAnimation = void 0;
+exports.zoomInAnimation = exports.shrinkOutAnimation = exports.default = void 0;
 
@@ -19,2 +19,4 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _excluded = ["children", "duration"];
+
 var zoomInAnimation = function zoomInAnimation() {
@@ -55,3 +57,3 @@ return {
       duration = _ref$duration === void 0 ? 125 : _ref$duration,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "duration"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, (0, _extends2.default)({
@@ -58,0 +60,0 @@ duration: duration,

dist/cjs/entry-points/accessibility.js

@@ -18,3 +18,9 @@ "use strict";
 });
+Object.defineProperty(exports, "useIsReducedMotion", {
+  enumerable: true,
+  get: function get() {
+    return _accessibility.useIsReducedMotion;
+  }
+});
 
 var _accessibility = require("../utils/accessibility");

dist/cjs/entry-points/durations.js

@@ -12,6 +12,6 @@ "use strict";
 });
-Object.defineProperty(exports, "smallDurationMs", {
+Object.defineProperty(exports, "largeDurationMs", {
   enumerable: true,
   get: function get() {
-    return _durations.smallDurationMs;
+    return _durations.largeDurationMs;
   }
@@ -25,6 +25,6 @@ });
 });
-Object.defineProperty(exports, "largeDurationMs", {
+Object.defineProperty(exports, "smallDurationMs", {
   enumerable: true,
   get: function get() {
-    return _durations.largeDurationMs;
+    return _durations.smallDurationMs;
   }
@@ -31,0 +31,0 @@ });

dist/cjs/entry-points/zoom-in.js

@@ -14,12 +14,12 @@ "use strict";
 });
-Object.defineProperty(exports, "zoomInAnimation", {
+Object.defineProperty(exports, "shrinkOutAnimation", {
   enumerable: true,
   get: function get() {
-    return _zoomIn.zoomInAnimation;
+    return _zoomIn.shrinkOutAnimation;
   }
 });
-Object.defineProperty(exports, "shrinkOutAnimation", {
+Object.defineProperty(exports, "zoomInAnimation", {
   enumerable: true,
   get: function get() {
-    return _zoomIn.shrinkOutAnimation;
+    return _zoomIn.zoomInAnimation;
   }
@@ -26,0 +26,0 @@ });

dist/cjs/index.js

@@ -10,62 +10,68 @@ "use strict";
 });
-Object.defineProperty(exports, "durationStep", {
+Object.defineProperty(exports, "ExitingPersistence", {
   enumerable: true,
   get: function get() {
-    return _durations.durationStep;
+    return _exitingPersistence.default;
   }
 });
-Object.defineProperty(exports, "largeDurationMs", {
+Object.defineProperty(exports, "FadeIn", {
   enumerable: true,
   get: function get() {
-    return _durations.largeDurationMs;
+    return _fadeIn.default;
   }
 });
-Object.defineProperty(exports, "mediumDurationMs", {
+Object.defineProperty(exports, "ResizingHeight", {
   enumerable: true,
   get: function get() {
-    return _durations.mediumDurationMs;
+    return _height.ResizingHeight;
   }
 });
-Object.defineProperty(exports, "smallDurationMs", {
+Object.defineProperty(exports, "ShrinkOut", {
   enumerable: true,
   get: function get() {
-    return _durations.smallDurationMs;
+    return _shrinkOut.default;
   }
 });
-Object.defineProperty(exports, "easeIn", {
+Object.defineProperty(exports, "SlideIn", {
   enumerable: true,
   get: function get() {
-    return _curves.easeIn;
+    return _slideIn.default;
   }
 });
-Object.defineProperty(exports, "easeInOut", {
+Object.defineProperty(exports, "StaggeredEntrance", {
   enumerable: true,
   get: function get() {
-    return _curves.easeInOut;
+    return _staggeredEntrance.default;
   }
 });
-Object.defineProperty(exports, "easeOut", {
+Object.defineProperty(exports, "ZoomIn", {
   enumerable: true,
   get: function get() {
-    return _curves.easeOut;
+    return _zoomIn.default;
   }
 });
-Object.defineProperty(exports, "isReducedMotion", {
+Object.defineProperty(exports, "durationStep", {
   enumerable: true,
   get: function get() {
-    return _accessibility.isReducedMotion;
+    return _durations.durationStep;
   }
 });
-Object.defineProperty(exports, "prefersReducedMotion", {
+Object.defineProperty(exports, "easeIn", {
   enumerable: true,
   get: function get() {
-    return _accessibility.prefersReducedMotion;
+    return _curves.easeIn;
   }
 });
-Object.defineProperty(exports, "FadeIn", {
+Object.defineProperty(exports, "easeInOut", {
   enumerable: true,
   get: function get() {
-    return _fadeIn.default;
+    return _curves.easeInOut;
   }
 });
+Object.defineProperty(exports, "easeOut", {
+  enumerable: true,
+  get: function get() {
+    return _curves.easeOut;
+  }
+});
 Object.defineProperty(exports, "fadeInAnimation", {
@@ -77,66 +83,66 @@ enumerable: true,
 });
-Object.defineProperty(exports, "StaggeredEntrance", {
+Object.defineProperty(exports, "isReducedMotion", {
   enumerable: true,
   get: function get() {
-    return _staggeredEntrance.default;
+    return _accessibility.isReducedMotion;
   }
 });
-Object.defineProperty(exports, "useResizingHeight", {
+Object.defineProperty(exports, "largeDurationMs", {
   enumerable: true,
   get: function get() {
-    return _height.useResizingHeight;
+    return _durations.largeDurationMs;
   }
 });
-Object.defineProperty(exports, "ResizingHeight", {
+Object.defineProperty(exports, "mediumDurationMs", {
   enumerable: true,
   get: function get() {
-    return _height.ResizingHeight;
+    return _durations.mediumDurationMs;
   }
 });
-Object.defineProperty(exports, "ExitingPersistence", {
+Object.defineProperty(exports, "prefersReducedMotion", {
   enumerable: true,
   get: function get() {
-    return _exitingPersistence.default;
+    return _accessibility.prefersReducedMotion;
   }
 });
-Object.defineProperty(exports, "useExitingPersistence", {
+Object.defineProperty(exports, "shrinkOutAnimation", {
   enumerable: true,
   get: function get() {
-    return _exitingPersistence.useExitingPersistence;
+    return _zoomIn.shrinkOutAnimation;
   }
 });
-Object.defineProperty(exports, "ZoomIn", {
+Object.defineProperty(exports, "slideInAnimation", {
   enumerable: true,
   get: function get() {
-    return _zoomIn.default;
+    return _slideIn.slideInAnimation;
   }
 });
-Object.defineProperty(exports, "zoomInAnimation", {
+Object.defineProperty(exports, "smallDurationMs", {
   enumerable: true,
   get: function get() {
-    return _zoomIn.zoomInAnimation;
+    return _durations.smallDurationMs;
   }
 });
-Object.defineProperty(exports, "shrinkOutAnimation", {
+Object.defineProperty(exports, "useExitingPersistence", {
   enumerable: true,
   get: function get() {
-    return _zoomIn.shrinkOutAnimation;
+    return _exitingPersistence.useExitingPersistence;
   }
 });
-Object.defineProperty(exports, "SlideIn", {
+Object.defineProperty(exports, "useIsReducedMotion", {
   enumerable: true,
   get: function get() {
-    return _slideIn.default;
+    return _accessibility.useIsReducedMotion;
   }
 });
-Object.defineProperty(exports, "slideInAnimation", {
+Object.defineProperty(exports, "useResizingHeight", {
   enumerable: true,
   get: function get() {
-    return _slideIn.slideInAnimation;
+    return _height.useResizingHeight;
   }
 });
-Object.defineProperty(exports, "ShrinkOut", {
+Object.defineProperty(exports, "zoomInAnimation", {
   enumerable: true,
   get: function get() {
-    return _shrinkOut.default;
+    return _zoomIn.zoomInAnimation;
   }
@@ -143,0 +149,0 @@ });

dist/cjs/resizing/height.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = exports.ResizingHeight = exports.useResizingHeight = void 0;
+exports.useResizingHeight = exports.default = exports.ResizingHeight = void 0;
 
@@ -31,2 +31,4 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _excluded = ["children"];
+
 var useResizingHeight = function useResizingHeight() {
@@ -115,3 +117,3 @@ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
   var children = _ref2.children,
-      props = (0, _objectWithoutProperties2.default)(_ref2, ["children"]);
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var resizing = useResizingHeight(props);
@@ -118,0 +120,0 @@ return children(resizing);

dist/cjs/utils/accessibility.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prefersReducedMotion = exports.isReducedMotion = void 0;
+exports.useIsReducedMotion = exports.prefersReducedMotion = exports.isReducedMotion = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var isMatchMediaAvailable = function isMatchMediaAvailable() {
+  return typeof window !== 'undefined' && 'matchMedia' in window;
+};
 /**
@@ -13,4 +22,6 @@ * Use for any programatic motions needed at runtime.
  */
+
+
 var isReducedMotion = function isReducedMotion() {
-  if (typeof window === 'undefined' || !('matchMedia' in window)) {
+  if (!isMatchMediaAvailable()) {
     return false;
@@ -25,2 +36,35 @@ }
 /**
+ * A React hook version of {@link isReducedMotion}.
+ * Useful for React components that need to re-render if the user's motion
+ * preference changes at runtime.
+ */
+
+
+exports.isReducedMotion = isReducedMotion;
+
+var useIsReducedMotion = function useIsReducedMotion() {
+  var _useState = (0, _react.useState)(isReducedMotion),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      prefersReducedMotion = _useState2[0],
+      setPrefersReducedMotion = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!isMatchMediaAvailable()) {
+      return;
+    }
+
+    var mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    var onChange = function onChange(event) {
+      return setPrefersReducedMotion(event.matches);
+    };
+
+    mediaQueryList.addEventListener('change', onChange);
+    return function () {
+      mediaQueryList.removeEventListener('change', onChange);
+    };
+  }, []);
+  return prefersReducedMotion;
+};
+/**
  * Use for any CSS based motion (animation or transition).
@@ -32,3 +76,3 @@ * Always put at the end of your declaration for correct use of the cascade.
 
-exports.isReducedMotion = isReducedMotion;
+exports.useIsReducedMotion = useIsReducedMotion;
 
@@ -35,0 +79,0 @@ var prefersReducedMotion = function prefersReducedMotion() {

dist/cjs/utils/curves.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.easeIn = exports.easeOut = exports.easeInOut = void 0;
+exports.easeOut = exports.easeInOut = exports.easeIn = void 0;
 var easeInOut = 'cubic-bezier(0.15,1,0.3,1)';
@@ -9,0 +9,0 @@ exports.easeInOut = easeInOut;

dist/cjs/utils/durations.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.largeDurationMs = exports.mediumDurationMs = exports.smallDurationMs = exports.durationStep = void 0;
+exports.smallDurationMs = exports.mediumDurationMs = exports.largeDurationMs = exports.durationStep = void 0;
 
@@ -9,0 +9,0 @@ /**

dist/cjs/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"sideEffects": false
 }

dist/es2019/entry-points/accessibility.js

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

dist/es2019/index.js

 export { durationStep, largeDurationMs, mediumDurationMs, smallDurationMs } from './utils/durations';
 export { easeIn, easeInOut, easeOut } from './utils/curves';
-export { isReducedMotion, prefersReducedMotion } from './utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, 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

@@ -0,1 +1,4 @@
+import { useEffect, useState } from 'react';
+
+const isMatchMediaAvailable = () => typeof window !== 'undefined' && 'matchMedia' in window;
 /**
@@ -6,4 +9,6 @@ * Use for any programatic motions needed at runtime.
  */
+
+
 export const isReducedMotion = () => {
-  if (typeof window === 'undefined' || !('matchMedia' in window)) {
+  if (!isMatchMediaAvailable()) {
     return false;
@@ -18,2 +23,26 @@ }
 /**
+ * A React hook version of {@link isReducedMotion}.
+ * Useful for React components that need to re-render if the user's motion
+ * preference changes at runtime.
+ */
+
+export const useIsReducedMotion = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(isReducedMotion);
+  useEffect(() => {
+    if (!isMatchMediaAvailable()) {
+      return;
+    }
+
+    const mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    const onChange = event => setPrefersReducedMotion(event.matches);
+
+    mediaQueryList.addEventListener('change', onChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onChange);
+    };
+  }, []);
+  return prefersReducedMotion;
+};
+/**
  * Use for any CSS based motion (animation or transition).
@@ -20,0 +49,0 @@ * Always put at the end of your declaration for correct use of the cascade.

dist/es2019/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"sideEffects": false
 }

dist/esm/entering/fade-in.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "duration", "entranceDirection"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -62,3 +63,3 @@ import React from 'react';
       entranceSlideDirection = _ref.entranceDirection,
-      props = _objectWithoutProperties(_ref, ["children", "duration", "entranceDirection"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
@@ -65,0 +66,0 @@ return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({

dist/esm/entering/keyframes-motion.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -8,0 +8,0 @@ import React, { useEffect, useState } from 'react';

dist/esm/entering/slide-in.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "enterFrom", "exitTo", "fade", "duration", "animationTimingFunction"];
 import React from 'react';
@@ -41,3 +42,3 @@ import { easeIn, easeOut } from '../utils/curves';
   } : _ref2$animationTiming,
-      props = _objectWithoutProperties(_ref2, ["children", "enterFrom", "exitTo", "fade", "duration", "animationTimingFunction"]);
+      props = _objectWithoutProperties(_ref2, _excluded);
 
@@ -44,0 +45,0 @@ return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({

dist/esm/entering/zoom-in.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "duration"];
 import React from 'react';
@@ -35,3 +36,3 @@ import KeyframesMotion from './keyframes-motion';
       duration = _ref$duration === void 0 ? 125 : _ref$duration,
-      props = _objectWithoutProperties(_ref, ["children", "duration"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
@@ -38,0 +39,0 @@ return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({

dist/esm/entry-points/accessibility.js

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

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 { isReducedMotion, useIsReducedMotion, 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/resizing/height.js

 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["children"];
 import { useRef } from 'react';
@@ -91,3 +92,3 @@ import { isReducedMotion } from '../utils/accessibility';
   var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, ["children"]);
+      props = _objectWithoutProperties(_ref2, _excluded);
 
@@ -94,0 +95,0 @@ var resizing = useResizingHeight(props);

dist/esm/utils/accessibility.js

@@ -0,1 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+
+var isMatchMediaAvailable = function isMatchMediaAvailable() {
+  return typeof window !== 'undefined' && 'matchMedia' in window;
+};
 /**
@@ -6,4 +12,6 @@ * Use for any programatic motions needed at runtime.
  */
+
+
 export var isReducedMotion = function isReducedMotion() {
-  if (typeof window === 'undefined' || !('matchMedia' in window)) {
+  if (!isMatchMediaAvailable()) {
     return false;
@@ -18,2 +26,32 @@ }
 /**
+ * A React hook version of {@link isReducedMotion}.
+ * Useful for React components that need to re-render if the user's motion
+ * preference changes at runtime.
+ */
+
+export var useIsReducedMotion = function useIsReducedMotion() {
+  var _useState = useState(isReducedMotion),
+      _useState2 = _slicedToArray(_useState, 2),
+      prefersReducedMotion = _useState2[0],
+      setPrefersReducedMotion = _useState2[1];
+
+  useEffect(function () {
+    if (!isMatchMediaAvailable()) {
+      return;
+    }
+
+    var mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    var onChange = function onChange(event) {
+      return setPrefersReducedMotion(event.matches);
+    };
+
+    mediaQueryList.addEventListener('change', onChange);
+    return function () {
+      mediaQueryList.removeEventListener('change', onChange);
+    };
+  }, []);
+  return prefersReducedMotion;
+};
+/**
  * Use for any CSS based motion (animation or transition).
@@ -20,0 +58,0 @@ * Always put at the end of your declaration for correct use of the cascade.

dist/esm/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"sideEffects": false
 }

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

@@ -5,4 +5,4 @@ import React from 'react';
 import { Direction } from './types';
-export declare const fadeInAnimation: (movement?: "bottom" | "left" | "right" | "top" | undefined) => ObjectInterpolation<undefined>;
-export declare const fadeOutAnimation: (movement?: "bottom" | "left" | "right" | "top" | undefined) => ObjectInterpolation<undefined>;
+export declare const fadeInAnimation: (movement?: Direction | undefined) => ObjectInterpolation<undefined>;
+export declare const fadeOutAnimation: (movement?: Direction | undefined) => ObjectInterpolation<undefined>;
 /**
@@ -9,0 +9,0 @@ * Props for controlling the behaviour of the FadeIn animation

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

@@ -1,1 +0,1 @@
-export { isReducedMotion, prefersReducedMotion } from '../utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, prefersReducedMotion, } 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, prefersReducedMotion } from './utils/accessibility';
+export { isReducedMotion, useIsReducedMotion, 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

@@ -8,2 +8,8 @@ /**
 /**
+ * A React hook version of {@link isReducedMotion}.
+ * Useful for React components that need to re-render if the user's motion
+ * preference changes at runtime.
+ */
+export declare const useIsReducedMotion: () => boolean;
+/**
  * Use for any CSS based motion (animation or transition).
@@ -10,0 +16,0 @@ * Always put at the end of your declaration for correct use of the cascade.

package.json

 {
   "name": "@atlaskit/motion",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Atlassian motion variables, components and more.",
@@ -32,3 +32,2 @@ "publishConfig": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
@@ -47,5 +46,5 @@ "website": {
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/logo": "^13.0.0",
@@ -55,11 +54,12 @@ "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/theme": "^11.4.0",
-    "@atlaskit/tooltip": "^17.4.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
+    "@testing-library/react-hooks": "^1.0.4",
     "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0",
     "react-router-dom": "^4.2.2",
-    "typescript": "3.9.6"
+    "typescript": "4.2.4"
   },
@@ -79,3 +79,7 @@ "keywords": [
     "@repo/internal": {
-      "theming": "tokens"
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
@@ -82,0 +86,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

164735

increased by2.61%

Lines of code

3318

increased by3.43%

Worsened metrics

Dev dependency count

17

increased by6.25%

No dependency changes