From 4dd2684ea36629bb4c793550d08b01e817c1e115 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 20 Oct 2021 14:19:34 +0100 Subject: [PATCH 1/3] [ClickAwayListener] Move to the core package --- docs/pages/api-docs/click-away-listener.json | 2 +- docs/src/components/header/HeaderNavDropdown.tsx | 2 +- docs/src/modules/components/Notifications.js | 2 +- .../src/ClickAwayListener/ClickAwayListener.test.js | 4 ++-- .../src/ClickAwayListener/ClickAwayListener.tsx | 11 +++++++---- packages/mui-core/src/ClickAwayListener/index.ts | 2 ++ packages/mui-material/src/ClickAwayListener/index.ts | 4 ++-- packages/mui-material/src/Snackbar/Snackbar.d.ts | 2 +- packages/mui-material/src/Snackbar/Snackbar.js | 2 +- 9 files changed, 18 insertions(+), 13 deletions(-) rename packages/{mui-material => mui-core}/src/ClickAwayListener/ClickAwayListener.test.js (99%) rename packages/{mui-material => mui-core}/src/ClickAwayListener/ClickAwayListener.tsx (97%) create mode 100644 packages/mui-core/src/ClickAwayListener/index.ts diff --git a/docs/pages/api-docs/click-away-listener.json b/docs/pages/api-docs/click-away-listener.json index 14691600463800..797cbdf5d78773 100644 --- a/docs/pages/api-docs/click-away-listener.json +++ b/docs/pages/api-docs/click-away-listener.json @@ -21,7 +21,7 @@ "name": "ClickAwayListener", "styles": { "classes": [], "globalClasses": {}, "name": null }, "spread": false, - "filename": "/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx", + "filename": "/packages/mui-core/src/ClickAwayListener/ClickAwayListener.tsx", "inheritance": null, "demos": "", "cssComponent": false diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index 2d348490758dd6..41f0b1a36aed12 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Collapse from '@mui/material/Collapse'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; +import ClickAwayListener from '@mui/core/ClickAwayListener'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded'; diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js index 00af2d8c3488ba..2d8567574d61ea 100644 --- a/docs/src/modules/components/Notifications.js +++ b/docs/src/modules/components/Notifications.js @@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography'; import Popper from '@mui/material/Popper'; import Grow from '@mui/material/Grow'; import MuiPaper from '@mui/material/Paper'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; +import ClickAwayListener from '@mui/core/ClickAwayListener'; import MuiList from '@mui/material/List'; import MuiListItem from '@mui/material/ListItem'; import MuiDivider from '@mui/material/Divider'; diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js b/packages/mui-core/src/ClickAwayListener/ClickAwayListener.test.js similarity index 99% rename from packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js rename to packages/mui-core/src/ClickAwayListener/ClickAwayListener.test.js index e8ac750ec62232..ce45da4c57cba4 100644 --- a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js +++ b/packages/mui-core/src/ClickAwayListener/ClickAwayListener.test.js @@ -3,8 +3,8 @@ import * as ReactDOM from 'react-dom'; import { expect } from 'chai'; import { spy, useFakeTimers } from 'sinon'; import { act, createClientRender, fireEvent, fireDiscreteEvent, screen } from 'test/utils'; -import Portal from '../Portal'; -import ClickAwayListener from './ClickAwayListener'; +import Portal from '@mui/core/Portal'; +import ClickAwayListener from '@mui/core/ClickAwayListener'; describe('', () => { /** diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-core/src/ClickAwayListener/ClickAwayListener.tsx similarity index 97% rename from packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx rename to packages/mui-core/src/ClickAwayListener/ClickAwayListener.tsx index bfb1c8a76c2be8..aac7790483012c 100644 --- a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx +++ b/packages/mui-core/src/ClickAwayListener/ClickAwayListener.tsx @@ -1,9 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { elementAcceptingRef, exactProp } from '@mui/utils'; -import ownerDocument from '../utils/ownerDocument'; -import useForkRef from '../utils/useForkRef'; -import useEventCallback from '../utils/useEventCallback'; +import { + elementAcceptingRef, + exactProp, + unstable_ownerDocument as ownerDocument, + unstable_useForkRef as useForkRef, + unstable_useEventCallback as useEventCallback, +} from '@mui/utils'; // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase : never` once generatePropTypes runs with TS 4.1 function mapEventPropToEvent( diff --git a/packages/mui-core/src/ClickAwayListener/index.ts b/packages/mui-core/src/ClickAwayListener/index.ts new file mode 100644 index 00000000000000..b701cb14342b2e --- /dev/null +++ b/packages/mui-core/src/ClickAwayListener/index.ts @@ -0,0 +1,2 @@ +export { default } from './ClickAwayListener'; +export * from './ClickAwayListener'; diff --git a/packages/mui-material/src/ClickAwayListener/index.ts b/packages/mui-material/src/ClickAwayListener/index.ts index b701cb14342b2e..75f73905b8d667 100644 --- a/packages/mui-material/src/ClickAwayListener/index.ts +++ b/packages/mui-material/src/ClickAwayListener/index.ts @@ -1,2 +1,2 @@ -export { default } from './ClickAwayListener'; -export * from './ClickAwayListener'; +export { default } from '@mui/core/ClickAwayListener'; +export * from '@mui/core/ClickAwayListener'; diff --git a/packages/mui-material/src/Snackbar/Snackbar.d.ts b/packages/mui-material/src/Snackbar/Snackbar.d.ts index 38a40f7dcbdd25..eb5700f7044922 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.d.ts +++ b/packages/mui-material/src/Snackbar/Snackbar.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; +import { ClickAwayListenerProps } from '@mui/core/ClickAwayListener'; import { Theme } from '../styles'; import { InternalStandardProps as StandardProps } from '..'; import { SnackbarContentProps } from '../SnackbarContent'; import { TransitionProps } from '../transitions/transition'; -import { ClickAwayListenerProps } from '../ClickAwayListener'; import { SnackbarClasses } from './snackbarClasses'; export interface SnackbarOrigin { diff --git a/packages/mui-material/src/Snackbar/Snackbar.js b/packages/mui-material/src/Snackbar/Snackbar.js index bf6067c80fa5ae..969f09622a6b13 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.js +++ b/packages/mui-material/src/Snackbar/Snackbar.js @@ -2,11 +2,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@mui/core'; +import ClickAwayListener from '@mui/core/ClickAwayListener'; import styled from '../styles/styled'; import useTheme from '../styles/useTheme'; import useThemeProps from '../styles/useThemeProps'; import { duration } from '../styles/createTransitions'; -import ClickAwayListener from '../ClickAwayListener'; import useEventCallback from '../utils/useEventCallback'; import capitalize from '../utils/capitalize'; import Grow from '../Grow'; From c917203d1bacfefcedf413ef107110f5dd5d3a4e Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 20 Oct 2021 14:32:31 +0100 Subject: [PATCH 2/3] [ClickAwayListener] Add to docs --- .../click-away-listener/click-away-listener.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/src/pages/components/click-away-listener/click-away-listener.md b/docs/src/pages/components/click-away-listener/click-away-listener.md index 6bafae44d5cac6..1a9cda767eb202 100644 --- a/docs/src/pages/components/click-away-listener/click-away-listener.md +++ b/docs/src/pages/components/click-away-listener/click-away-listener.md @@ -36,3 +36,13 @@ However, you can configure it to respond to the leading events (mouse down + tou {{"demo": "pages/components/click-away-listener/LeadingClickAway.js"}} > ⚠️ In this mode, only interactions on the scrollbar of the document is ignored. + +## Unstyled + +- 📦 [784 B gzipped](https://bundlephobia.com/result?p=@mui/core@latest) + +As the component does not have any styles, it also comes with the unstyled package. + +```js +import ClickAwayListener from '@mui/core/ClickAwayListener'; +``` \ No newline at end of file From 4811c56ca2877fbd5e025f2086f5bb91d33fd7f9 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 20 Oct 2021 14:36:33 +0100 Subject: [PATCH 3/3] [ClickAwayListener] Run prettier --- .../pages/components/click-away-listener/click-away-listener.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/click-away-listener/click-away-listener.md b/docs/src/pages/components/click-away-listener/click-away-listener.md index 1a9cda767eb202..5c5ba4b5582415 100644 --- a/docs/src/pages/components/click-away-listener/click-away-listener.md +++ b/docs/src/pages/components/click-away-listener/click-away-listener.md @@ -45,4 +45,4 @@ As the component does not have any styles, it also comes with the unstyled packa ```js import ClickAwayListener from '@mui/core/ClickAwayListener'; -``` \ No newline at end of file +```