@atlaskit/motion/dist/cjs/utils/accessibility.js

A set of utilities to apply motion in your application.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useIsReducedMotion = exports.reduceMotionAsPerUserPreference = exports.prefersReducedMotion = exports.isReducedMotion = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _bindEventListener = require("bind-event-listener");
var isMatchMediaAvailable = function isMatchMediaAvailable() {
  return typeof window !== 'undefined' && 'matchMedia' in window;
};

/**
 * 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.
 */
var isReducedMotion = exports.isReducedMotion = function isReducedMotion() {
  if (!isMatchMediaAvailable()) {
    return false;
  }
  var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)'),
    matches = _window$matchMedia.matches;
  return matches;
};

/**
 * 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.
 */
var useIsReducedMotion = exports.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);
    };
    return (0, _bindEventListener.bind)(mediaQueryList, {
      type: 'change',
      listener: onChange
    });
  }, []);
  return prefersReducedMotion;
};

/**
 * Use for any CSS based motion (animation or transition).
 * Always put at the end of your declaration for correct use of the cascade.
 * Reduced motion preference is generally set through OS preferences/settings.
 */
var reduceMotionAsPerUserPreference = exports.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.
 */
var prefersReducedMotion = exports.prefersReducedMotion = function prefersReducedMotion() {
  return reduceMotionAsPerUserPreference;
};