@wordpress/compose
Version:
WordPress higher-order components (HOCs).
74 lines (70 loc) • 2.67 kB
JavaScript
;
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"));
/**
* External dependencies
*/
/**
* 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 options Dialog Options.
*/
function useDialog(options) {
const currentOptions = (0, _element.useRef)();
const {
constrainTabbing = options.focusOnMount !== false
} = options;
(0, _element.useEffect)(() => {
currentOptions.current = options;
}, Object.values(options));
const constrainedTabbingRef = (0, _useConstrainedTabbing.default)();
const focusOnMountRef = (0, _useFocusOnMount.default)(options.focusOnMount);
const focusReturnRef = (0, _useFocusReturn.default)();
const focusOutsideProps = (0, _useFocusOutside.default)(event => {
// This unstable prop is here only to manage backward compatibility
// for the Popover component otherwise, the onClose should be enough.
if (currentOptions.current?.__unstableOnClose) {
currentOptions.current.__unstableOnClose('focus-outside', event);
} else if (currentOptions.current?.onClose) {
currentOptions.current.onClose();
}
});
const closeOnEscapeRef = (0, _element.useCallback)(node => {
if (!node) {
return;
}
node.addEventListener('keydown', event => {
// Close on escape.
if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented && currentOptions.current?.onClose) {
event.preventDefault();
currentOptions.current.onClose();
}
});
}, []);
return [(0, _useMergeRefs.default)([constrainTabbing ? constrainedTabbingRef : null, options.focusOnMount !== false ? focusReturnRef : null, options.focusOnMount !== false ? focusOnMountRef : null, closeOnEscapeRef]), {
...focusOutsideProps,
tabIndex: -1
}];
}
var _default = exports.default = useDialog;
//# sourceMappingURL=index.js.map