@wordpress/compose/build/hooks/use-dialog/index.js

WordPress higher-order components (HOCs).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _element = require("@wordpress/element");

var _keycodes = require("@wordpress/keycodes");

var _useConstrainedTabbing = _interopRequireDefault(require("../use-constrained-tabbing"));

var _useFocusOnMount = _interopRequireDefault(require("../use-focus-on-mount"));

var _useFocusReturn = _interopRequireDefault(require("../use-focus-return"));

var _useFocusOutside = _interopRequireDefault(require("../use-focus-outside"));

var _useMergeRefs = _interopRequireDefault(require("../use-merge-refs"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:
 *  - constrained tabbing.
 *  - focus on mount.
 *  - return focus on unmount.
 *  - focus outside.
 *
 * @param {Object} options Dialog Options.
 */
function useDialog(options) {
  const onClose = (0, _element.useRef)();
  (0, _element.useEffect)(() => {
    onClose.current = options.onClose;
  }, [options.onClose]);
  const constrainedTabbingRef = (0, _useConstrainedTabbing.default)();
  const focusOnMountRef = (0, _useFocusOnMount.default)();
  const focusReturnRef = (0, _useFocusReturn.default)();
  const focusOutsideProps = (0, _useFocusOutside.default)(options.onClose);
  const closeOnEscapeRef = (0, _element.useCallback)(node => {
    if (!node) {
      return;
    }

    node.addEventListener('keydown', event => {
      // Close on escape
      if (event.keyCode === _keycodes.ESCAPE && onClose.current) {
        event.stopPropagation();
        onClose.current();
      }
    });
  }, []);
  return [(0, _useMergeRefs.default)([constrainedTabbingRef, focusReturnRef, focusOnMountRef, closeOnEscapeRef]), { ...focusOutsideProps,
    tabIndex: '-1'
  }];
}

var _default = useDialog;
exports.default = _default;
//# sourceMappingURL=index.js.map