diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js index e77f71abd9ac38..248392c52bd7a2 100644 --- a/docs/scripts/buildApi.js +++ b/docs/scripts/buildApi.js @@ -59,10 +59,6 @@ function getInheritance(src) { pathname = 'https://reactcommunity.org/react-transition-group/#Transition'; break; - case 'EventListener': - pathname = 'https://github.com/oliviertassinari/react-event-listener'; - break; - default: pathname = `/api/${kebabCase(component)}`; break; diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js index a610dd24a41cda..e25552a49555d2 100644 --- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js +++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js @@ -1,11 +1,10 @@ -// @inheritedComponent EventListener - import React from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import EventListener from 'react-event-listener'; import ownerDocument from '../utils/ownerDocument'; import { useForkRef } from '../utils/reactHelpers'; +import { exactProp } from '@material-ui/utils'; function useMountedRef() { const mountedRef = React.useRef(false); @@ -24,13 +23,14 @@ function useMountedRef() { * For instance, if you need to hide a menu when people click anywhere else on your page. */ function ClickAwayListener(props) { - const { children, mouseEvent, touchEvent, onClickAway, ...other } = props; + const { children, mouseEvent, touchEvent, onClickAway } = props; const mountedRef = useMountedRef(); const movedRef = React.useRef(false); const nodeRef = React.useRef(); // can be removed once we drop support for non ref forwarding class components const handleOwnRef = React.useCallback(ref => { + // #StrictMode ready nodeRef.current = ReactDOM.findDOMNode(ref); }, []); const handleRef = useForkRef(children.ref, handleOwnRef); @@ -88,7 +88,7 @@ function ClickAwayListener(props) { return ( {React.cloneElement(children, { ref: handleRef })} - + ); } @@ -114,6 +114,11 @@ ClickAwayListener.propTypes = { touchEvent: PropTypes.oneOf(['onTouchStart', 'onTouchEnd', false]), }; +if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line + ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes); +} + ClickAwayListener.defaultProps = { mouseEvent: 'onMouseUp', touchEvent: 'onTouchEnd', diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js index 75d96cdb4bace9..23fb8563f8f58c 100644 --- a/packages/material-ui/src/MenuList/MenuList.js +++ b/packages/material-ui/src/MenuList/MenuList.js @@ -150,7 +150,7 @@ const MenuList = React.forwardRef(function MenuList(props, ref) { }; const handleOwnRef = React.useCallback(refArg => { - // StrictMode ready + // #StrictMode ready listRef.current = ReactDOM.findDOMNode(refArg); }, []); const handleRef = useForkRef(handleOwnRef, ref); diff --git a/pages/api/click-away-listener.md b/pages/api/click-away-listener.md index 4cc1bfdf11d386..3cb375ca9803f2 100644 --- a/pages/api/click-away-listener.md +++ b/pages/api/click-away-listener.md @@ -26,12 +26,6 @@ For instance, if you need to hide a menu when people click anywhere else on your The component cannot hold a ref. -Any other properties supplied will be provided to the root element ([EventListener](https://github.com/oliviertassinari/react-event-listener/)). - -## Inheritance - -The properties of the [EventListener](https://github.com/oliviertassinari/react-event-listener/) component, from react-event-listener, are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). ## Demos