diff --git a/docs/data/material/components/hidden/hidden.md b/docs/data/material/components/hidden/hidden.md deleted file mode 100644 index d1e62eb96deac6..00000000000000 --- a/docs/data/material/components/hidden/hidden.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -productId: material-ui -title: React Hidden component -description: The Hidden component is deprecated, check out the migration guide for more details. -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden - -:::error -The Hidden component was deprecated in Material UI v5. -To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs. -::: - -

- -{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 9d3f176a50bacd..e231ff661deb96 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -110,7 +110,6 @@ const pages: MuiPage[] = [ { pathname: '/material-ui/react-grid2', title: 'Grid v2', newFeature: true }, { pathname: '/material-ui/react-stack' }, { pathname: '/material-ui/react-image-list', title: 'Image List' }, - { pathname: '/material-ui/react-hidden' }, ], }, { diff --git a/docs/data/material/pagesApi.js b/docs/data/material/pagesApi.js index 7bb6fe6df78aa8..0cf8e4e93d700b 100644 --- a/docs/data/material/pagesApi.js +++ b/docs/data/material/pagesApi.js @@ -48,7 +48,6 @@ module.exports = [ { pathname: '/material-ui/api/global-styles' }, { pathname: '/material-ui/api/grid' }, { pathname: '/material-ui/api/grow' }, - { pathname: '/material-ui/api/hidden' }, { pathname: '/material-ui/api/icon' }, { pathname: '/material-ui/api/icon-button' }, { pathname: '/material-ui/api/image-list' }, diff --git a/docs/pages/material-ui/api/hidden.js b/docs/pages/material-ui/api/hidden.js deleted file mode 100644 index d9d52da34aba5a..00000000000000 --- a/docs/pages/material-ui/api/hidden.js +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './hidden.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context('docs/translations/api-docs/hidden', false, /\.\/hidden.*.json$/); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/material-ui/api/hidden.json b/docs/pages/material-ui/api/hidden.json deleted file mode 100644 index 2e4e13ea697f0e..00000000000000 --- a/docs/pages/material-ui/api/hidden.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "props": { - "children": { "type": { "name": "node" } }, - "implementation": { - "type": { "name": "enum", "description": "'css'
| 'js'" }, - "default": "'js'" - }, - "initialWidth": { - "type": { - "name": "enum", - "description": "'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'" - } - }, - "lgDown": { "type": { "name": "bool" }, "default": "false" }, - "lgUp": { "type": { "name": "bool" }, "default": "false" }, - "mdDown": { "type": { "name": "bool" }, "default": "false" }, - "mdUp": { "type": { "name": "bool" }, "default": "false" }, - "only": { - "type": { - "name": "union", - "description": "'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'>" - } - }, - "smDown": { "type": { "name": "bool" }, "default": "false" }, - "smUp": { "type": { "name": "bool" }, "default": "false" }, - "xlDown": { "type": { "name": "bool" }, "default": "false" }, - "xlUp": { "type": { "name": "bool" }, "default": "false" }, - "xsDown": { "type": { "name": "bool" }, "default": "false" }, - "xsUp": { "type": { "name": "bool" }, "default": "false" } - }, - "name": "Hidden", - "imports": [ - "import Hidden from '@mui/material/Hidden';", - "import { Hidden } from '@mui/material';" - ], - "classes": [], - "spread": true, - "themeDefaultProps": null, - "muiName": "MuiHidden", - "filename": "/packages/mui-material/src/Hidden/Hidden.js", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/docs/pages/material-ui/react-hidden.js b/docs/pages/material-ui/react-hidden.js deleted file mode 100644 index 6f2d3fabf003e6..00000000000000 --- a/docs/pages/material-ui/react-hidden.js +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; -import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/material/components/hidden/hidden.md?muiMarkdown'; - -export default function Page() { - return ; -} - -Page.getLayout = (page) => { - return {page}; -}; diff --git a/docs/src/pagesApi.js b/docs/src/pagesApi.js index c9829209aec475..20e034807a4c5d 100644 --- a/docs/src/pagesApi.js +++ b/docs/src/pagesApi.js @@ -47,7 +47,6 @@ module.exports = [ { pathname: '/api-docs/global-styles' }, { pathname: '/api-docs/grid' }, { pathname: '/api-docs/grow' }, - { pathname: '/api-docs/hidden' }, { pathname: '/api-docs/icon' }, { pathname: '/api-docs/icon-button' }, { pathname: '/api-docs/image-list' }, diff --git a/docs/translations/api-docs/hidden/hidden.json b/docs/translations/api-docs/hidden/hidden.json deleted file mode 100644 index b4ac8adc37b812..00000000000000 --- a/docs/translations/api-docs/hidden/hidden.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "componentDescription": "Responsively hides children based on the selected implementation.", - "propDescriptions": { - "children": { "description": "The content of the component." }, - "implementation": { - "description": "Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering." - }, - "initialWidth": { - "description": "You can use this prop when choosing the js implementation with server-side rendering.
As window.innerWidth is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use a heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint" - }, - "lgDown": { - "description": "If true, component is hidden on screens below (but not including) this size." - }, - "lgUp": { - "description": "If true, component is hidden on screens this size and above." - }, - "mdDown": { - "description": "If true, component is hidden on screens below (but not including) this size." - }, - "mdUp": { - "description": "If true, component is hidden on screens this size and above." - }, - "only": { "description": "Hide the given breakpoint(s)." }, - "smDown": { - "description": "If true, component is hidden on screens below (but not including) this size." - }, - "smUp": { - "description": "If true, component is hidden on screens this size and above." - }, - "xlDown": { - "description": "If true, component is hidden on screens below (but not including) this size." - }, - "xlUp": { - "description": "If true, component is hidden on screens this size and above." - }, - "xsDown": { - "description": "If true, component is hidden on screens below (but not including) this size." - }, - "xsUp": { - "description": "If true, component is hidden on screens this size and above." - } - }, - "classDescriptions": {} -} diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 110ffd7366beeb..3e548b7be4bf8d 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -201,7 +201,6 @@ "/material-ui/react-grid2": "Grid v2", "/material-ui/react-stack": "Stack", "/material-ui/react-image-list": "Image List", - "/material-ui/react-hidden": "Hidden", "/material-ui/react-click-away-listener": "Click-Away Listener", "/material-ui/react-css-baseline": "CSS Baseline", "/material-ui/react-modal": "Modal", diff --git a/packages/mui-material/src/Hidden/Hidden.d.ts b/packages/mui-material/src/Hidden/Hidden.d.ts deleted file mode 100644 index f07cf95a14c119..00000000000000 --- a/packages/mui-material/src/Hidden/Hidden.d.ts +++ /dev/null @@ -1,98 +0,0 @@ -import * as React from 'react'; -import { Breakpoint } from '@mui/system'; - -export interface HiddenProps { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Specify which implementation to use. 'js' is the default, 'css' works better for - * server-side rendering. - * @default 'js' - */ - implementation?: 'js' | 'css'; - /** - * You can use this prop when choosing the `js` implementation with server-side rendering. - * - * As `window.innerWidth` is unavailable on the server, - * we default to rendering an empty component during the first mount. - * You might want to use a heuristic to approximate - * the screen width of the client browser screen width. - * - * For instance, you could be using the user-agent or the client-hints. - * https://caniuse.com/#search=client%20hint - */ - initialWidth?: Breakpoint; - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - lgDown?: boolean; - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - lgUp?: boolean; - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - mdDown?: boolean; - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - mdUp?: boolean; - /** - * Hide the given breakpoint(s). - */ - only?: Breakpoint | Breakpoint[]; - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - smDown?: boolean; - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - smUp?: boolean; - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - xlDown?: boolean; - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - xlUp?: boolean; - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - xsDown?: boolean; - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - xsUp?: boolean; -} - -/** - * Responsively hides children based on the selected implementation. - * - * Demos: - * - * - [Hidden](https://mui.com/material-ui/react-hidden/) - * - * API: - * - * - [Hidden API](https://mui.com/material-ui/api/hidden/) - * - * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs. - */ -declare const Hidden: React.JSXElementConstructor; - -export default Hidden; diff --git a/packages/mui-material/src/Hidden/Hidden.js b/packages/mui-material/src/Hidden/Hidden.js deleted file mode 100644 index 6796312c6bf9bc..00000000000000 --- a/packages/mui-material/src/Hidden/Hidden.js +++ /dev/null @@ -1,149 +0,0 @@ -'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import HiddenJs from './HiddenJs'; -import HiddenCss from './HiddenCss'; - -/** - * Responsively hides children based on the selected implementation. - * - * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs. - */ -function Hidden(props) { - const { - implementation = 'js', - lgDown = false, - lgUp = false, - mdDown = false, - mdUp = false, - smDown = false, - smUp = false, - xlDown = false, - xlUp = false, - xsDown = false, - xsUp = false, - ...other - } = props; - - if (implementation === 'js') { - return ( - - ); - } - - return ( - - ); -} - -Hidden.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * Specify which implementation to use. 'js' is the default, 'css' works better for - * server-side rendering. - * @default 'js' - */ - implementation: PropTypes.oneOf(['css', 'js']), - /** - * You can use this prop when choosing the `js` implementation with server-side rendering. - * - * As `window.innerWidth` is unavailable on the server, - * we default to rendering an empty component during the first mount. - * You might want to use a heuristic to approximate - * the screen width of the client browser screen width. - * - * For instance, you could be using the user-agent or the client-hints. - * https://caniuse.com/#search=client%20hint - */ - initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - lgDown: PropTypes.bool, - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - lgUp: PropTypes.bool, - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - mdDown: PropTypes.bool, - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - mdUp: PropTypes.bool, - /** - * Hide the given breakpoint(s). - */ - only: PropTypes.oneOfType([ - PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), - PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired), - ]), - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - smDown: PropTypes.bool, - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - smUp: PropTypes.bool, - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - xlDown: PropTypes.bool, - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - xlUp: PropTypes.bool, - /** - * If `true`, component is hidden on screens below (but not including) this size. - * @default false - */ - xsDown: PropTypes.bool, - /** - * If `true`, component is hidden on screens this size and above. - * @default false - */ - xsUp: PropTypes.bool, -}; - -export default Hidden; diff --git a/packages/mui-material/src/Hidden/Hidden.test.js b/packages/mui-material/src/Hidden/Hidden.test.js deleted file mode 100644 index f5024fe11fb8fa..00000000000000 --- a/packages/mui-material/src/Hidden/Hidden.test.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import { expect } from 'chai'; -import { createRenderer } from '@mui-internal/test-utils'; -import Hidden from '@mui/material/Hidden'; - -describe('', () => { - const { render } = createRenderer(); - const child = Hello; - - describe('prop: implementation', () => { - it('should use HiddenJs by default', () => { - const { container } = render({child}); - // JS implementation doesn't requires wrapping
- expect(container.firstChild).to.have.tagName('span'); - }); - - it('should change the implementation', () => { - const { container } = render({child}); - // CSS implementation requires wrapping
- expect(container.firstChild).to.have.tagName('div'); - }); - }); -}); diff --git a/packages/mui-material/src/Hidden/HiddenCss.d.ts b/packages/mui-material/src/Hidden/HiddenCss.d.ts deleted file mode 100644 index 6d72b4a6cf0876..00000000000000 --- a/packages/mui-material/src/Hidden/HiddenCss.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import { Breakpoint } from '@mui/system'; - -export interface HiddenCssProps { - lgDown?: boolean; - lgUp?: boolean; - mdDown?: boolean; - mdUp?: boolean; - only?: Breakpoint | Breakpoint[]; - smDown?: boolean; - smUp?: boolean; - xlDown?: boolean; - xlUp?: boolean; - xsDown?: boolean; - xsUp?: boolean; -} - -declare const HiddenCss: React.JSXElementConstructor; - -export default HiddenCss; diff --git a/packages/mui-material/src/Hidden/HiddenCss.js b/packages/mui-material/src/Hidden/HiddenCss.js deleted file mode 100644 index c88531677ce928..00000000000000 --- a/packages/mui-material/src/Hidden/HiddenCss.js +++ /dev/null @@ -1,184 +0,0 @@ -'use client'; -import * as React from 'react'; -import clsx from 'clsx'; -import PropTypes from 'prop-types'; -import composeClasses from '@mui/utils/composeClasses'; -import capitalize from '../utils/capitalize'; -import styled from '../styles/styled'; -import useTheme from '../styles/useTheme'; -import { getHiddenCssUtilityClass } from './hiddenCssClasses'; - -const useUtilityClasses = (ownerState) => { - const { classes, breakpoints } = ownerState; - - const slots = { - root: [ - 'root', - ...breakpoints.map(({ breakpoint, dir }) => { - return dir === 'only' - ? `${dir}${capitalize(breakpoint)}` - : `${breakpoint}${capitalize(dir)}`; - }), - ], - }; - - return composeClasses(slots, getHiddenCssUtilityClass, classes); -}; - -const HiddenCssRoot = styled('div', { - name: 'PrivateHiddenCss', - slot: 'Root', -})(({ theme, ownerState }) => { - const hidden = { - display: 'none', - }; - - return { - ...ownerState.breakpoints - .map(({ breakpoint, dir }) => { - if (dir === 'only') { - return { - [theme.breakpoints.only(breakpoint)]: hidden, - }; - } - return dir === 'up' - ? { - [theme.breakpoints.up(breakpoint)]: hidden, - } - : { - [theme.breakpoints.down(breakpoint)]: hidden, - }; - }) - .reduce((r, o) => { - Object.keys(o).forEach((k) => { - r[k] = o[k]; - }); - return r; - }, {}), - }; -}); - -/** - * @ignore - internal component. - */ -function HiddenCss(props) { - const { children, className, only, ...other } = props; - const theme = useTheme(); - - if (process.env.NODE_ENV !== 'production') { - const unknownProps = Object.keys(other).filter((propName) => { - const isUndeclaredBreakpoint = !theme.breakpoints.keys.some((breakpoint) => { - return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName; - }); - return !['classes', 'theme', 'isRtl', 'sx'].includes(propName) && isUndeclaredBreakpoint; - }); - - if (unknownProps.length > 0) { - console.error( - `MUI: Unsupported props received by \`\`: ${unknownProps.join( - ', ', - )}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`, - ); - } - } - - const breakpoints = []; - - for (let i = 0; i < theme.breakpoints.keys.length; i += 1) { - const breakpoint = theme.breakpoints.keys[i]; - const breakpointUp = other[`${breakpoint}Up`]; - const breakpointDown = other[`${breakpoint}Down`]; - - if (breakpointUp) { - breakpoints.push({ breakpoint, dir: 'up' }); - } - if (breakpointDown) { - breakpoints.push({ breakpoint, dir: 'down' }); - } - } - - if (only) { - const onlyBreakpoints = Array.isArray(only) ? only : [only]; - onlyBreakpoints.forEach((breakpoint) => { - breakpoints.push({ breakpoint, dir: 'only' }); - }); - } - - const ownerState = { - ...props, - breakpoints, - }; - - const classes = useUtilityClasses(ownerState); - - return ( - - {children} - - ); -} - -HiddenCss.propTypes = { - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * @ignore - */ - className: PropTypes.string, - /** - * Specify which implementation to use. 'js' is the default, 'css' works better for - * server-side rendering. - */ - implementation: PropTypes.oneOf(['js', 'css']), - /** - * If `true`, screens this size and down are hidden. - */ - lgDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - lgUp: PropTypes.bool, - /** - * If `true`, screens this size and down are hidden. - */ - mdDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - mdUp: PropTypes.bool, - /** - * Hide the given breakpoint(s). - */ - only: PropTypes.oneOfType([ - PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), - PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])), - ]), - /** - * If `true`, screens this size and down are hidden. - */ - smDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - smUp: PropTypes.bool, - /** - * If `true`, screens this size and down are hidden. - */ - xlDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - xlUp: PropTypes.bool, - /** - * If `true`, screens this size and down are hidden. - */ - xsDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - xsUp: PropTypes.bool, -}; - -export default HiddenCss; diff --git a/packages/mui-material/src/Hidden/HiddenCss.test.js b/packages/mui-material/src/Hidden/HiddenCss.test.js deleted file mode 100644 index b86a63c6889b8b..00000000000000 --- a/packages/mui-material/src/Hidden/HiddenCss.test.js +++ /dev/null @@ -1,153 +0,0 @@ -import * as React from 'react'; -import { expect } from 'chai'; -import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui-internal/test-utils'; -import HiddenCss from './HiddenCss'; -import { createTheme, ThemeProvider } from '../styles'; -import classes from './hiddenCssClasses'; - -function TestChild() { - return
bar
; -} - -describe('', () => { - const { render } = createRenderer(); - - describe('the generated class names', () => { - it('should be ok with only', () => { - const { container } = render( - -
- , - ); - const root = container.firstChild; - - expect(root).to.have.tagName('div'); - expect(root).to.have.class(classes.onlySm); - expect(root.firstChild).to.have.tagName('div'); - expect(root.firstChild).to.have.class('foo'); - }); - - it('should be ok with only as an array', () => { - const { container } = render( - -
- , - ); - const root = container.firstChild; - - expect(root).to.have.tagName('div'); - expect(root).to.have.class(classes.onlyXs); - expect(root).to.have.class(classes.onlySm); - }); - - it('should be ok with only as an empty array', () => { - const { container } = render( - -
- , - ); - const root = container.firstChild; - - expect(root).to.have.tagName('div'); - Object.keys(classes).forEach((className) => expect(root).not.to.have.class(className)); - }); - - it('should be ok with mdDown', () => { - const { container } = render( - -
- , - ); - - expect(container.firstChild).to.have.class(classes.mdDown); - }); - - it('should be ok with mdUp', () => { - const { container } = render( - -
- , - ); - - expect(container.firstChild).to.have.class(classes.mdUp); - }); - - it('should handle provided className prop', () => { - const { container } = render( - -
- , - ); - - expect(container.firstChild).to.have.class('custom'); - }); - - it('allows custom breakpoints', () => { - const theme = createTheme({ breakpoints: { keys: ['xxl'] } }); - const { container } = render( - - -
- - , - ); - - expect(container.querySelector('.testid')).to.have.class('xxlUp'); - }); - }); - - describe('prop: children', () => { - it('should work when text Node', () => { - const { container, queryByText } = render(foo); - const root = container.firstChild; - - expect(root).to.have.tagName('div'); - expect(root).to.have.class(classes.mdUp); - expect(queryByText('foo')).not.to.equal(null); - }); - - it('should work when Element', () => { - const { container, queryByTestId } = render( - - - , - ); - const root = container.firstChild; - - expect(root).to.have.tagName('div'); - expect(root).to.have.class(classes.mdUp); - expect(queryByTestId('test-child')).not.to.equal(null); - }); - - it('should work when mixed ChildrenArray', () => { - const { container, queryAllByTestId, queryByText } = render( - - - - foo - , - ); - const root = container.firstChild; - const children = queryAllByTestId('test-child'); - - expect(root).to.have.tagName('div'); - expect(root).to.have.class(classes.mdUp); - expect(children.length).to.equal(2); - expect(queryByText('foo')).not.to.equal(null); - }); - }); - - it('warns about excess props (potentially undeclared breakpoints)', () => { - expect(() => { - render( - -
- , - ); - }).toErrorDev([ - 'MUI: Unsupported props received by ``: xxlUp.', - !strictModeDoubleLoggingSuppressed && - 'MUI: Unsupported props received by ``: xxlUp.', - ]); - }); -}); diff --git a/packages/mui-material/src/Hidden/HiddenJs.d.ts b/packages/mui-material/src/Hidden/HiddenJs.d.ts deleted file mode 100644 index fa845496632f6e..00000000000000 --- a/packages/mui-material/src/Hidden/HiddenJs.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import { Breakpoint } from '@mui/system'; - -export interface HiddenJsProps { - width?: Breakpoint; - lgDown?: boolean; - lgUp?: boolean; - mdDown?: boolean; - mdUp?: boolean; - only?: Breakpoint | Breakpoint[]; - smDown?: boolean; - smUp?: boolean; - xlDown?: boolean; - xlUp?: boolean; - xsDown?: boolean; - xsUp?: boolean; -} - -declare const HiddenJs: React.JSXElementConstructor; - -export default HiddenJs; diff --git a/packages/mui-material/src/Hidden/HiddenJs.js b/packages/mui-material/src/Hidden/HiddenJs.js deleted file mode 100644 index b591452cef6299..00000000000000 --- a/packages/mui-material/src/Hidden/HiddenJs.js +++ /dev/null @@ -1,129 +0,0 @@ -'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import exactProp from '@mui/utils/exactProp'; -import withWidth, { isWidthDown, isWidthUp } from './withWidth'; -import useTheme from '../styles/useTheme'; - -/** - * @ignore - internal component. - */ -function HiddenJs(props) { - const { children, only, width } = props; - const theme = useTheme(); - - let visible = true; - - // `only` check is faster to get out sooner if used. - if (only) { - if (Array.isArray(only)) { - for (let i = 0; i < only.length; i += 1) { - const breakpoint = only[i]; - if (width === breakpoint) { - visible = false; - break; - } - } - } else if (only && width === only) { - visible = false; - } - } - - // Allow `only` to be combined with other props. If already hidden, no need to check others. - if (visible) { - // determine visibility based on the smallest size up - for (let i = 0; i < theme.breakpoints.keys.length; i += 1) { - const breakpoint = theme.breakpoints.keys[i]; - const breakpointUp = props[`${breakpoint}Up`]; - const breakpointDown = props[`${breakpoint}Down`]; - if ( - (breakpointUp && isWidthUp(breakpoint, width)) || - (breakpointDown && isWidthDown(breakpoint, width)) - ) { - visible = false; - break; - } - } - } - - if (!visible) { - return null; - } - - return {children}; -} - -HiddenJs.propTypes = { - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * If `true`, screens this size and down are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - lgDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - lgUp: PropTypes.bool, - /** - * If `true`, screens this size and down are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - mdDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - mdUp: PropTypes.bool, - /** - * Hide the given breakpoint(s). - */ - only: PropTypes.oneOfType([ - PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), - PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])), - ]), - /** - * If `true`, screens this size and down are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - smDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - smUp: PropTypes.bool, - /** - * @ignore - * width prop provided by withWidth decorator. - */ - width: PropTypes.string.isRequired, - /** - * If `true`, screens this size and down are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - xlDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - xlUp: PropTypes.bool, - /** - * If `true`, screens this size and down are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - xsDown: PropTypes.bool, - /** - * If `true`, screens this size and up are hidden. - */ - // eslint-disable-next-line react/no-unused-prop-types - xsUp: PropTypes.bool, -}; - -if (process.env.NODE_ENV !== 'production') { - HiddenJs.propTypes = exactProp(HiddenJs.propTypes); -} - -export default withWidth()(HiddenJs); diff --git a/packages/mui-material/src/Hidden/HiddenJs.test.js b/packages/mui-material/src/Hidden/HiddenJs.test.js deleted file mode 100644 index 43cc2320c25648..00000000000000 --- a/packages/mui-material/src/Hidden/HiddenJs.test.js +++ /dev/null @@ -1,144 +0,0 @@ -import * as React from 'react'; -import { expect } from 'chai'; -import { createRenderer } from '@mui-internal/test-utils'; -import HiddenJs from './HiddenJs'; - -describe('', () => { - const { render } = createRenderer(); - - function resolvePropName(upDownOnly, breakpoint) { - if (upDownOnly === 'only') { - return 'only'; - } - - return `${breakpoint}${upDownOnly}`; - } - - function isHidden(hiddenBreakpoints, upDownOnly, width) { - hiddenBreakpoints.forEach((breakpoint) => { - const prop = resolvePropName(upDownOnly, breakpoint); - const descriptions = { - Up: `${prop} is hidden for width: ${width} >= ${breakpoint}`, - Down: `${prop} is hidden for width: ${width} < ${breakpoint}`, - only: `${prop} is hidden for width: ${width} === ${breakpoint}`, - }; - const props = { [prop]: upDownOnly === 'only' ? breakpoint : true }; - - it(descriptions[upDownOnly], () => { - const { container } = render( - -
foo
- , - ); - - expect(container.firstChild).to.equal(null); - }); - }); - } - - function isVisible(visibleBreakpoints, upDownOnly, width) { - visibleBreakpoints.forEach((breakpoint) => { - const prop = resolvePropName(upDownOnly, breakpoint); - const descriptions = { - Up: `${prop} is visible for width: ${width} < ${breakpoint}`, - Down: `${prop} is visible for width: ${width} >= ${breakpoint}`, - only: `${prop} is visible for width: ${width} !== ${breakpoint}`, - }; - const props = { [prop]: upDownOnly === 'only' ? breakpoint : true }; - - it(descriptions[upDownOnly], () => { - const { container, queryByText } = render( - -
foo
- , - ); - - expect(container.firstChild).to.have.tagName('div'); - expect(queryByText('foo')).not.to.equal(null); - }); - }); - } - - describe('screen width: xs', () => { - describe('up', () => { - isHidden(['xs'], 'Up', 'xs'); - isVisible(['sm', 'md', 'lg', 'xl'], 'Up', 'xs'); - }); - - describe('down', () => { - isHidden(['sm', 'md', 'lg', 'xl'], 'Down', 'xs'); - isVisible(['xs'], 'Down', 'xs'); - }); - - describe('only', () => { - isHidden(['xs', ['xs', 'xl']], 'only', 'xs'); - isVisible(['sm', 'md', 'lg', 'xl', ['sm', 'md', 'lg', 'xl']], 'only', 'xs'); - }); - }); - - describe('screen width: sm', () => { - describe('up', () => { - isHidden(['xs', 'sm'], 'Up', 'sm'); - isVisible(['md', 'lg', 'xl'], 'Up', 'sm'); - }); - - describe('down', () => { - isHidden(['md', 'lg', 'xl'], 'Down', 'sm'); - isVisible(['xs', 'sm'], 'Down', 'sm'); - }); - - describe('only', () => { - isHidden(['sm', ['sm', 'md']], 'only', 'sm'); - isVisible(['xs', 'md', 'lg', 'xl', ['xs', 'md', 'lg', 'xl']], 'only', 'sm'); - }); - }); - - describe('screen width: md', () => { - describe('up', () => { - isHidden(['xs', 'sm', 'md'], 'Up', 'md'); - isVisible(['lg', 'xl'], 'Up', 'md'); - }); - - describe('down', () => { - isHidden(['lg', 'xl'], 'Down', 'md'); - isVisible(['xs', 'sm', 'md'], 'Down', 'md'); - }); - - describe('only', () => { - isHidden(['md', ['md', 'lg']], 'only', 'md'); - isVisible(['xs', 'sm', 'lg', 'xl', ['xs', 'sm', 'lg', 'xl']], 'only', 'md'); - }); - }); - - describe('screen width: lg', () => { - describe('up', () => { - isHidden(['xs', 'sm', 'md', 'lg'], 'Up', 'lg'); - isVisible(['xl'], 'Up', 'lg'); - }); - - describe('down', () => { - isHidden(['xl'], 'Down', 'lg'); - isVisible(['xs', 'sm', 'md', 'lg'], 'Down', 'lg'); - }); - - describe('only', () => { - isHidden(['lg', ['lg', 'xl']], 'only', 'lg'); - isVisible(['xs', 'sm', 'md', 'xl', ['xs', 'sm', 'md', 'xl']], 'only', 'lg'); - }); - }); - - describe('screen width: xl', () => { - describe('up', () => { - isHidden(['xs', 'sm', 'md', 'lg', 'xl'], 'Up', 'xl'); - }); - - describe('down', () => { - isVisible(['xs', 'sm', 'md', 'lg', 'xl'], 'Down', 'xl'); - }); - - describe('only', () => { - isHidden(['xl', ['xl', 'xs']], 'only', 'xl'); - isVisible(['xs', 'sm', 'md', 'lg', ['xs', 'sm', 'md', 'lg']], 'only', 'xl'); - }); - }); -}); diff --git a/packages/mui-material/src/Hidden/hiddenCssClasses.js b/packages/mui-material/src/Hidden/hiddenCssClasses.js deleted file mode 100644 index 123f9ba4b66230..00000000000000 --- a/packages/mui-material/src/Hidden/hiddenCssClasses.js +++ /dev/null @@ -1,27 +0,0 @@ -import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; -import generateUtilityClass from '@mui/utils/generateUtilityClass'; - -export function getHiddenCssUtilityClass(slot) { - return generateUtilityClass('PrivateHiddenCss', slot); -} - -const hiddenCssClasses = generateUtilityClasses('PrivateHiddenCss', [ - 'root', - 'xlDown', - 'xlUp', - 'onlyXl', - 'lgDown', - 'lgUp', - 'onlyLg', - 'mdDown', - 'mdUp', - 'onlyMd', - 'smDown', - 'smUp', - 'onlySm', - 'xsDown', - 'xsUp', - 'onlyXs', -]); - -export default hiddenCssClasses; diff --git a/packages/mui-material/src/Hidden/index.d.ts b/packages/mui-material/src/Hidden/index.d.ts deleted file mode 100644 index 3cb2966071530f..00000000000000 --- a/packages/mui-material/src/Hidden/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Hidden'; -export * from './Hidden'; diff --git a/packages/mui-material/src/Hidden/index.js b/packages/mui-material/src/Hidden/index.js deleted file mode 100644 index ec796de043e77f..00000000000000 --- a/packages/mui-material/src/Hidden/index.js +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { default } from './Hidden'; diff --git a/packages/mui-material/src/Hidden/withWidth.d.ts b/packages/mui-material/src/Hidden/withWidth.d.ts deleted file mode 100644 index f2d3d0140dc69a..00000000000000 --- a/packages/mui-material/src/Hidden/withWidth.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Breakpoint } from '@mui/system'; -import { PropInjector } from '@mui/types'; - -export interface WithWidthOptions { - withTheme?: boolean; - noSSR?: boolean; - initialWidth?: Breakpoint; - resizeInterval?: number; -} - -export interface WithWidth { - width: Breakpoint; -} - -export interface WithWidthProps extends Partial { - innerRef?: React.Ref; -} - -export function isWidthDown( - breakpoint: Breakpoint, - screenWidth: Breakpoint, - inclusive?: boolean, -): boolean; - -export function isWidthUp( - breakpoint: Breakpoint, - screenWidth: Breakpoint, - inclusive?: boolean, -): boolean; - -export default function withWidth( - options?: WithWidthOptions, -): PropInjector; diff --git a/packages/mui-material/src/Hidden/withWidth.js b/packages/mui-material/src/Hidden/withWidth.js deleted file mode 100644 index 986fa0a8fd8e30..00000000000000 --- a/packages/mui-material/src/Hidden/withWidth.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import getDisplayName from '@mui/utils/getDisplayName'; -import { getThemeProps } from '@mui/system/useThemeProps'; -import useTheme from '../styles/useTheme'; -import useEnhancedEffect from '../utils/useEnhancedEffect'; -import useMediaQuery from '../useMediaQuery'; - -const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; - -// By default, returns true if screen width is the same or greater than the given breakpoint. -export const isWidthUp = (breakpoint, width, inclusive = true) => { - if (inclusive) { - return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width); - } - return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width); -}; - -// By default, returns true if screen width is less than the given breakpoint. -export const isWidthDown = (breakpoint, width, inclusive = false) => { - if (inclusive) { - return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint); - } - return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint); -}; - -const withWidth = - (options = {}) => - (Component) => { - const { - withTheme: withThemeOption = false, - noSSR = false, - initialWidth: initialWidthOption, - } = options; - - function WithWidth(props) { - const contextTheme = useTheme(); - const theme = props.theme || contextTheme; - const { initialWidth, width, ...other } = getThemeProps({ - theme, - name: 'MuiWithWidth', - props, - }); - - const [mountedState, setMountedState] = React.useState(false); - useEnhancedEffect(() => { - setMountedState(true); - }, []); - - /** - * innerWidth |xs sm md lg xl - * |-------|-------|-------|-------|------> - * width | xs | sm | md | lg | xl - */ - const keys = theme.breakpoints.keys.slice().reverse(); - const widthComputed = keys.reduce((output, key) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const matches = useMediaQuery(theme.breakpoints.up(key)); - return !output && matches ? key : output; - }, null); - - const more = { - width: - width || - (mountedState || noSSR ? widthComputed : undefined) || - initialWidth || - initialWidthOption, - ...(withThemeOption ? { theme } : {}), - ...other, - }; - - // When rendering the component on the server, - // we have no idea about the client browser screen width. - // In order to prevent blinks and help the reconciliation of the React tree - // we are not rendering the child component. - // - // An alternative is to use the `initialWidth` property. - if (more.width === undefined) { - return null; - } - - return ; - } - - WithWidth.propTypes = { - /** - * As `window.innerWidth` is unavailable on the server, - * we default to rendering an empty component during the first mount. - * You might want to use a heuristic to approximate - * the screen width of the client browser screen width. - * - * For instance, you could be using the user-agent or the client-hints. - * https://caniuse.com/#search=client%20hint - */ - initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), - /** - * @ignore - */ - theme: PropTypes.object, - /** - * Bypass the width calculation logic. - */ - width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), - }; - - if (process.env.NODE_ENV !== 'production') { - WithWidth.displayName = `WithWidth(${getDisplayName(Component)})`; - } - - return WithWidth; - }; - -export default withWidth; diff --git a/packages/mui-material/src/index.d.ts b/packages/mui-material/src/index.d.ts index 5e389716c185bb..18b4b5f5d22691 100644 --- a/packages/mui-material/src/index.d.ts +++ b/packages/mui-material/src/index.d.ts @@ -230,9 +230,6 @@ export * from './Unstable_Grid2'; export { default as Grow } from './Grow'; export * from './Grow'; -export { default as Hidden } from './Hidden'; -export * from './Hidden'; - export { default as Icon } from './Icon'; export * from './Icon'; diff --git a/packages/mui-material/src/index.js b/packages/mui-material/src/index.js index 3a5370b4436098..2efdb228a320c5 100644 --- a/packages/mui-material/src/index.js +++ b/packages/mui-material/src/index.js @@ -160,9 +160,6 @@ export * from './Unstable_Grid2'; export { default as Grow } from './Grow'; export * from './Grow'; -export { default as Hidden } from './Hidden'; -export * from './Hidden'; - export { default as Icon } from './Icon'; export * from './Icon';