@material-ui/lab
Version:
Laboratory for new Material-UI modules.
233 lines (206 loc) • 8.13 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';
import { useForkRef, useEventCallback, ownerDocument } from '@material-ui/core/utils';
import { styled } from '@material-ui/core/styles';
import { jsx as _jsx } from "react/jsx-runtime";
var PickersPopperRoot = styled(Popper, {
skipSx: true
})(function (_ref) {
var theme = _ref.theme;
return {
zIndex: theme.zIndex.modal
};
});
var PickersPopperPaper = styled(Paper, {
skipSx: true
})(function (_ref2) {
var styleProps = _ref2.styleProps;
return _extends({
transformOrigin: 'top center',
outline: 0
}, styleProps.placement === 'top' && {
transformOrigin: 'bottom center'
});
});
function clickedRootScrollbar(event, doc) {
return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
}
/**
* Based on @material-ui/core/ClickAwayListener without the customization.
* We can probably strip away even more since children won't be portaled.
* @param onClickAway
* @param onClick
* @param onTouchStart
*/
function useClickAwayListener(active, onClickAway) {
var movedRef = React.useRef(false);
var syntheticEventRef = React.useRef(false);
var nodeRef = React.useRef(null);
var activatedRef = React.useRef(false);
React.useEffect(function () {
if (!active) {
return undefined;
} // Ensure that this hook is not "activated" synchronously.
// https://github.com/facebook/react/issues/20074
function armClickAwayListener() {
activatedRef.current = true;
}
document.addEventListener('mousedown', armClickAwayListener, true);
document.addEventListener('touchstart', armClickAwayListener, true);
return function () {
document.removeEventListener('mousedown', armClickAwayListener, true);
document.removeEventListener('touchstart', armClickAwayListener, true);
activatedRef.current = false;
};
}, [active]); // The handler doesn't take event.defaultPrevented into account:
//
// event.preventDefault() is meant to stop default behaviors like
// clicking a checkbox to check it, hitting a button to submit a form,
// and hitting left arrow to move the cursor in a text input etc.
// Only special HTML elements have these default behaviors.
var handleClickAway = useEventCallback(function (event) {
if (!activatedRef.current) {
return;
} // Given developers can stop the propagation of the synthetic event,
// we can only be confident with a positive value.
var insideReactTree = syntheticEventRef.current;
syntheticEventRef.current = false;
var doc = ownerDocument(nodeRef.current); // 1. IE11 support, which trigger the handleClickAway even after the unbind
// 2. The child might render null.
// 3. Behave like a blur listener.
if (!nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
return;
} // Do not act if user performed touchmove
if (movedRef.current) {
movedRef.current = false;
return;
}
var insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
if (event.composedPath) {
insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
} else {
insideDOM = !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
}
if (!insideDOM && !insideReactTree) {
onClickAway(event);
}
}); // Keep track of mouse/touch events that bubbled up through the portal.
var handleSynthetic = function handleSynthetic() {
syntheticEventRef.current = true;
};
React.useEffect(function () {
if (active) {
var doc = ownerDocument(nodeRef.current);
var handleTouchMove = function handleTouchMove() {
movedRef.current = true;
};
doc.addEventListener('touchstart', handleClickAway);
doc.addEventListener('touchmove', handleTouchMove);
return function () {
doc.removeEventListener('touchstart', handleClickAway);
doc.removeEventListener('touchmove', handleTouchMove);
};
}
return undefined;
}, [active, handleClickAway]);
React.useEffect(function () {
// TODO This behavior is not tested automatically
// It's unclear whether this is due to different update semantics in test (batched in act() vs discrete on click).
// Or if this is a timing related issues due to different Transition components
// Once we get rid of all the manual scheduling (e.g. setTimeout(update, 0)) we can revisit this code+test.
if (active) {
var doc = ownerDocument(nodeRef.current);
doc.addEventListener('click', handleClickAway);
return function () {
doc.removeEventListener('click', handleClickAway);
};
}
return undefined;
}, [active, handleClickAway]);
return [nodeRef, handleSynthetic, handleSynthetic];
}
var PickersPopper = function PickersPopper(props) {
var anchorEl = props.anchorEl,
_children = props.children,
_props$containerRef = props.containerRef,
containerRef = _props$containerRef === void 0 ? null : _props$containerRef,
onClose = props.onClose,
open = props.open,
PopperProps = props.PopperProps,
role = props.role,
_props$TransitionComp = props.TransitionComponent,
TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
TrapFocusProps = props.TrapFocusProps;
React.useEffect(function () {
function handleKeyDown(nativeEvent) {
// IE11, Edge (prior to using Bink?) use 'Esc'
if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
onClose();
}
}
document.addEventListener('keydown', handleKeyDown);
return function () {
document.removeEventListener('keydown', handleKeyDown);
};
}, [onClose]);
var lastFocusedElementRef = React.useRef(null);
React.useEffect(function () {
if (role === 'tooltip') {
return;
}
if (open) {
lastFocusedElementRef.current = document.activeElement;
} else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
lastFocusedElementRef.current.focus();
}
}, [open, role]);
var _useClickAwayListener = useClickAwayListener(open, onClose),
_useClickAwayListener2 = _slicedToArray(_useClickAwayListener, 3),
clickAwayRef = _useClickAwayListener2[0],
onPaperClick = _useClickAwayListener2[1],
onPaperTouchStart = _useClickAwayListener2[2];
var paperRef = React.useRef(null);
var handleRef = useForkRef(paperRef, containerRef);
var handlePaperRef = useForkRef(handleRef, clickAwayRef);
var styleProps = props;
return /*#__PURE__*/_jsx(PickersPopperRoot, _extends({
transition: true,
role: role,
open: open,
anchorEl: anchorEl,
styleProps: styleProps
}, PopperProps, {
children: function children(_ref3) {
var TransitionProps = _ref3.TransitionProps,
placement = _ref3.placement;
return /*#__PURE__*/_jsx(TrapFocus, _extends({
open: open,
disableAutoFocus: true,
disableEnforceFocus: role === 'tooltip',
isEnabled: function isEnabled() {
return true;
}
}, TrapFocusProps, {
children: /*#__PURE__*/_jsx(TransitionComponent, _extends({}, TransitionProps, {
children: /*#__PURE__*/_jsx(PickersPopperPaper, {
tabIndex: -1,
elevation: 8,
ref: handlePaperRef,
onClick: onPaperClick,
onTouchStart: onPaperTouchStart,
styleProps: _extends({}, styleProps, {
placement: placement
}),
children: _children
})
}))
}));
}
}));
};
export default PickersPopper;