@renderlesskit/react/dist/cjs/dialog/helpers/useDisclosureRef.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useDisclosureRef = useDisclosureRef;

var React = _interopRequireWildcard(require("react"));

var _reakitUtils = require("reakit-utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function useDisclosureRef(dialogRef, options) {
  var ref = React.useRef(null);
  React.useEffect(function () {
    if (options.visible || options.animating) return undefined; // We get the last focused element before the dialog opens, so we can move
    // focus back to it when the dialog closes.

    var onFocus = function onFocus(event) {
      var target = event.target;

      if ("focus" in target) {
        ref.current = target;

        if (options.disclosureRef) {
          options.disclosureRef.current = target;
        }
      }
    };

    var document = (0, _reakitUtils.getDocument)(dialogRef.current);
    document.addEventListener("focusin", onFocus);
    return function () {
      return document.removeEventListener("focusin", onFocus);
    };
  }, [options.visible, options.animating, options.disclosureRef, dialogRef]);
  React.useEffect(function () {
    var _options$disclosureRe;

    if (!options.visible || options.animating) return undefined; // Safari and Firefox on MacOS don't focus on buttons on mouse down.
    // Instead, they focus on the closest focusable parent (ultimately, the
    // body element). This works around that by preventing that behavior and
    // forcing focus on the disclosure button. Otherwise, we wouldn't be able
    // to close the dialog by clicking again on the disclosure.

    var onMouseDown = function onMouseDown(event) {
      var element = event.currentTarget;
      if (!(0, _reakitUtils.isButton)(element)) return;
      event.preventDefault();
      element.focus();
    };

    var disclosure = ((_options$disclosureRe = options.disclosureRef) === null || _options$disclosureRe === void 0 ? void 0 : _options$disclosureRe.current) || ref.current;
    disclosure === null || disclosure === void 0 ? void 0 : disclosure.addEventListener("mousedown", onMouseDown);
    return function () {
      return disclosure === null || disclosure === void 0 ? void 0 : disclosure.removeEventListener("mousedown", onMouseDown);
    };
  }, [options.visible, options.animating, options.disclosureRef]);
  return options.disclosureRef || ref;
}
//# sourceMappingURL=useDisclosureRef.js.map